@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ouw50eeq2n.bundle.scp.css';

/* /Components/Approvals/ApprovalChain.razor.rz.scp.css */
/* ── Approval chain (vertical stepper) ───────────────────────────────────── */
.approval-chain[b-anog7thzbo] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
}

.approval-level[b-anog7thzbo] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
    transition: background 150ms ease;
}

.approval-level:last-child[b-anog7thzbo] { border-bottom: none; }

.level-dot[b-anog7thzbo] {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--neutral-stroke-rest);
    border: 2px solid var(--neutral-stroke-rest);
}

.approval-level--approved  .level-dot[b-anog7thzbo] { background: #10B981; border-color: #10B981; }
.approval-level--active    .level-dot[b-anog7thzbo] { background: #4F46E5; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.2); }
.approval-level--rejected  .level-dot[b-anog7thzbo] { background: #EF4444; border-color: #EF4444; }
.approval-level--waiting   .level-dot[b-anog7thzbo] { background: var(--neutral-layer-2); border-color: var(--neutral-stroke-rest); }

.approval-level--approved[b-anog7thzbo]  { background: rgba(16,185,129,0.03); }
.approval-level--active[b-anog7thzbo]    { background: rgba(79,70,229,0.04); }
.approval-level--rejected[b-anog7thzbo]  { background: rgba(239,68,68,0.04); }
.approval-level--waiting[b-anog7thzbo]   { background: var(--neutral-layer-1); opacity: 0.65; }

.level-body[b-anog7thzbo] { flex: 1; min-width: 0; }

.level-title[b-anog7thzbo] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.level-detail[b-anog7thzbo] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}
/* /Components/Approvals/PenaltyWaiverQueueBase.razor.rz.scp.css */
/* Detail dialog — mirrors the dialog-info-grid/dialog-form pattern used across the other
   detail dialogs (e.g. Deposits/Accounts/Detail.razor.css). PenaltyWaiverQueueBase.razor had no
   scoped stylesheet of its own, so these classes were rendering unstyled: the label/value spans
   collapsed onto one line with no row spacing, and the dialog's sections (info grid, approval
   chain, remarks field) had no vertical gap between them. */

/* The shared .metrics-row convention (global-styles.css) is hardcoded to a 3-column grid — this
   page renders 4 KPI cards, so the 4th wraps onto its own row instead of sitting alongside the
   other three. Overridden here (not in global-styles.css) so pages that genuinely have 3 cards
   keep their 3-column layout. */
.metrics-row[b-0wt7b6dk6w] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .metrics-row[b-0wt7b6dk6w] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .metrics-row[b-0wt7b6dk6w] {
        grid-template-columns: 1fr;
    }
}

.error-bar[b-0wt7b6dk6w] {
    margin: 0;
}

.dialog-form[b-0wt7b6dk6w] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialog-info-grid[b-0wt7b6dk6w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
}

.dialog-info-row[b-0wt7b6dk6w] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.dialog-info-label[b-0wt7b6dk6w] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    min-width: 160px;
    flex-shrink: 0;
}

.dialog-info-value[b-0wt7b6dk6w] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.field-label-stacked[b-0wt7b6dk6w] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    display: block;
}
/* /Components/CimsVerificationNotice.razor.rz.scp.css */
.cims-verification-notice[b-vro6dpu2vr] {
    margin-bottom: 1rem;
}

.cims-verification-notice.compact[b-vro6dpu2vr] {
    margin-bottom: 0.5rem;
}

.cims-verification-notice-lead[b-vro6dpu2vr] {
    font-weight: 600;
    margin-right: 0.35rem;
}
/* /Components/DismissibleRiskHint.razor.rz.scp.css */
.dismissible-risk-hint-body[b-pe5m6h8bf6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}
/* /Components/DocumentViewerDialog.razor.rz.scp.css */
/* ── Header controls ────────────────────────────────────────────────────── */
.doc-viewer-nav-btn[b-0j5sk1so05] { margin-left: 8px; }
.doc-viewer-fullscreen-toggle[b-0j5sk1so05] { margin-left: auto; }

/* ── Loading / error states ─────────────────────────────────────────────── */
.doc-viewer-state[b-0j5sk1so05] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--neutral-foreground-hint);
    font-size: 14px;
}

/* ── Meta row ────────────────────────────────────────────────────────────── */
.doc-viewer-meta[b-0j5sk1so05] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.doc-viewer-zoom-controls[b-0j5sk1so05] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.doc-viewer-zoom-btn[b-0j5sk1so05] {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-rest);
}

.doc-viewer-zoom-btn:hover[b-0j5sk1so05] { background: var(--neutral-fill-stealth-hover); }

.doc-viewer-zoom-level[b-0j5sk1so05] {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
    min-width: 38px;
    text-align: center;
}

/* ── OCR block ───────────────────────────────────────────────────────────── */
.doc-viewer-ocr[b-0j5sk1so05] {
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.doc-viewer-ocr p[b-0j5sk1so05] { margin: 8px 0 0; }

/* ── PDF / other iframe preview ─────────────────────────────────────────── */
.doc-viewer-frame[b-0j5sk1so05] {
    width: 100%;
    height: 480px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

/* ── Image preview + zoom/pan ───────────────────────────────────────────── */
.doc-viewer-image-frame[b-0j5sk1so05] {
    width: 100%;
    height: 480px;
    overflow: hidden;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-layer-2);
}

.doc-viewer-image[b-0j5sk1so05] {
    max-width: 100%;
    max-height: 100%;
    transition: transform 80ms linear;
    user-select: none;
    -webkit-user-drag: none;
}

/* FluentDialogBody's rendered root element is not written in this .razor file's
   markup at the FluentDialogBody level itself, but the native .doc-viewer-body-inner
   div wrapping the content IS written directly here, so it receives the scope
   attribute and can be targeted for the fullscreen flex layout. */
.doc-viewer-body-inner-fullscreen[b-0j5sk1so05] {
    display: flex;
    flex-direction: column;
    height: 100%;
    outline: none;
}

.doc-viewer-body-inner-fullscreen .doc-viewer-frame-fullscreen[b-0j5sk1so05],
.doc-viewer-body-inner-fullscreen .doc-viewer-image-frame-fullscreen[b-0j5sk1so05] {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.doc-viewer-body-inner[b-0j5sk1so05] { outline: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .doc-viewer-frame[b-0j5sk1so05],
    .doc-viewer-image-frame[b-0j5sk1so05] { height: 320px; }
}
/* /Components/ForeignCurrencyAmountEditor.razor.rz.scp.css */
.fx-amount-editor[b-lj1k17zead] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.fx-amount-editor-label[b-lj1k17zead] {
    font-weight: 600;
    margin-bottom: 8px;
}

.fx-amount-editor-fields[b-lj1k17zead] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.fx-amount-editor-ccy .form-input[b-lj1k17zead] {
    text-transform: uppercase;
}

.fx-amount-editor-hint[b-lj1k17zead] {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint, #616161);
}

.fx-amount-editor-hint-warn[b-lj1k17zead] {
    color: var(--warning, #b26a00);
    font-weight: 600;
}
/* /Components/KycDocUploadWidget.razor.rz.scp.css */
/* ── KYC Document Upload Widget ──────────────────────────────────────────── */

.kyc-upload-widget[b-gjrcbmxyam] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Label */
.kyc-label[b-gjrcbmxyam] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 2px;
}

.kyc-required[b-gjrcbmxyam] {
    color: var(--error);
    margin-left: 3px;
}

/* ── States ── */
.kyc-state[b-gjrcbmxyam] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.kyc-state--loading[b-gjrcbmxyam] {
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
}

.kyc-state--done[b-gjrcbmxyam] {
    background: var(--neutral-fill-secondary-rest);
    border: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.kyc-filename[b-gjrcbmxyam] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Badges */
.kyc-badge[b-gjrcbmxyam] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.kyc-badge--verified[b-gjrcbmxyam] {
    background: #d1f4e0;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.kyc-badge--pending[b-gjrcbmxyam] {
    background: #fef9c3;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ── Uploaded state ── */
.kyc-done-container[b-gjrcbmxyam] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kyc-done-footer[b-gjrcbmxyam] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Image thumbnail ── */
.kyc-thumb-wrap[b-gjrcbmxyam] {
    position: relative;
    width: 100%;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--neutral-fill-secondary-rest);
    border: 1px solid var(--neutral-stroke-rest);
}

.kyc-thumb-img[b-gjrcbmxyam] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}

.kyc-thumb-wrap:hover .kyc-thumb-img[b-gjrcbmxyam] {
    transform: scale(1.04);
}

.kyc-thumb-overlay[b-gjrcbmxyam] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    padding: 8px 10px;
    gap: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 200ms;
}

.kyc-thumb-wrap:hover .kyc-thumb-overlay[b-gjrcbmxyam],
.kyc-thumb-wrap:focus-visible .kyc-thumb-overlay[b-gjrcbmxyam] {
    opacity: 1;
}

.kyc-thumb-wrap:focus-visible[b-gjrcbmxyam] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* ── Dropzone ── */
.kyc-dropzone[b-gjrcbmxyam] {
    border: 1.5px dashed var(--accent-fill-rest);
    border-radius: 8px;
    padding: 20px 12px;
    transition: border-color 200ms, background 200ms, box-shadow 200ms;
    cursor: pointer;
}

.kyc-dz-inner[b-gjrcbmxyam] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-align: center;
    position: relative;
    /* stretch to fill the parent dropzone */
    width: 100%;
    min-height: 70px;
}

.kyc-dropzone:hover[b-gjrcbmxyam],
.kyc-dropzone:focus-within[b-gjrcbmxyam] {
    border-style: solid;
    background: color-mix(in srgb, var(--accent-fill-rest) 5%, transparent);
}

.kyc-dropzone--active[b-gjrcbmxyam] {
    border-color: var(--accent-fill-rest);
    border-style: solid;
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill-rest) 25%, transparent);
}

.kyc-dz-text[b-gjrcbmxyam] {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-foreground-rest);
}

.kyc-dz-text--drop[b-gjrcbmxyam] {
    color: var(--accent-fill-rest);
    font-size: 14px;
}

.kyc-dz-hint[b-gjrcbmxyam] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Change button ── */
.kyc-btn[b-gjrcbmxyam] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    position: relative;
    user-select: none;
}

.kyc-btn--change[b-gjrcbmxyam] {
    padding: 4px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-rest);
    align-self: flex-start;
}

    .kyc-btn--change:hover[b-gjrcbmxyam] {
        background: var(--neutral-fill-hover);
    }

/* Hide the native file input while preserving accessibility */
.kyc-file-input[b-gjrcbmxyam] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* Hint text (legacy — kept for compatibility) */
.kyc-hint[b-gjrcbmxyam] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* Error */
.kyc-error[b-gjrcbmxyam] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--error);
}


/* /Components/Layouts/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MainLayout — scoped styles
   Token-first: FluentDesignSystemProvider drives all colour tokens.
   Explicit hex only where surfaces need pixel-perfect Stitch-grade tuning.
   ========================================================================== */

/* SHELL */
.app-shell[b-y90qjvrrj6] {
    min-height: 100vh;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    position: relative;
    transition: background-color 200ms ease, color 200ms ease;
}
.app-shell.theme-light[b-y90qjvrrj6] { color-scheme: light; }
.app-shell.theme-dark[b-y90qjvrrj6]  { color-scheme: dark;  }

/* HEADER */
.app-header[b-y90qjvrrj6] {
    height: 72px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.app-shell.theme-light .app-header[b-y90qjvrrj6] {
    background: #ffffff;
    border-bottom-color: #d9dee9;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.07);
}

.app-shell.theme-dark .app-header[b-y90qjvrrj6] {
    background: #131720;
    border-bottom-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.36);
}

/* HEADER REGIONS */
.header-left[b-y90qjvrrj6],
.header-right[b-y90qjvrrj6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-center[b-y90qjvrrj6] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* PAGE HEADING */
.page-heading[b-y90qjvrrj6] {
    min-width: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-section[b-y90qjvrrj6] {
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-shell.theme-dark .page-section[b-y90qjvrrj6] { color: #8a96ad; }

.page-title[b-y90qjvrrj6] {
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--neutral-foreground-rest);
}
.app-shell.theme-light .page-title[b-y90qjvrrj6] { color: #0f1729; }
.app-shell.theme-dark  .page-title[b-y90qjvrrj6] { color: #e8edf7; }

/* SEARCH */
.global-search-wrap[b-y90qjvrrj6] { width: min(460px, 42vw); }
.global-search[b-y90qjvrrj6] { width: 100%; }

/* ICON BUTTONS */
.menu-button[b-y90qjvrrj6],
.header-icon-btn[b-y90qjvrrj6],
.theme-toggle-btn[b-y90qjvrrj6] {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
}

/* BRAND */
.app-brand[b-y90qjvrrj6] {
    border: 1px solid transparent;
    background: transparent;
    padding: 8px 12px;
    margin: 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    transition: all 180ms ease;
    color: inherit;
}

.brand-logo[b-y90qjvrrj6] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
}

.brand-text[b-y90qjvrrj6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.app-brand:hover[b-y90qjvrrj6] {
    background: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-rest);
    box-shadow: 0 2px 8px rgba(8, 15, 40, 0.08);
}

.app-brand:focus-visible[b-y90qjvrrj6] {
    outline: 2px solid var(--accent-stroke-control-rest);
    outline-offset: 2px;
}

.brand-name[b-y90qjvrrj6] {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: var(--neutral-foreground-rest);
}

.brand-subtitle[b-y90qjvrrj6] {
    font-size: 11px;
    line-height: 15px;
    color: var(--neutral-foreground-hint);
}

/* VERSION BADGE */
.app-version-badge[b-y90qjvrrj6] {
    align-self: center;
    margin-left: 2px;
    padding: 2px 8px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    white-space: nowrap;
    transition: all 180ms ease;
}

.app-version-badge:hover[b-y90qjvrrj6] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    border-color: var(--neutral-stroke-rest);
}

/* USER MENU */
.user-menu-button[b-y90qjvrrj6] { border-radius: 8px; }

/* BODY LAYOUT */
.app-body[b-y90qjvrrj6] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    height: calc(100vh - 72px);  /* fixed height so children scroll independently */
    overflow: hidden;            /* prevent grid from expanding beyond viewport */
}

/* SIDEBAR — independent scroll container */
.app-sidebar[b-y90qjvrrj6] {
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    height: 100%;           /* fill grid row */
    overflow-y: auto;       /* sidebar scrolls independently */
    overflow-x: hidden;
    transition: width 200ms ease, transform 200ms ease;
    width: 280px;
    box-sizing: border-box;
}

.app-shell.theme-light .app-sidebar[b-y90qjvrrj6] {
    background: #f4f6fb;
    border-right-color: #d4d9e6;
}

.app-shell.theme-dark .app-sidebar[b-y90qjvrrj6] {
    background: #141820;
    border-right-color: #272e3b;
}

/* NAV SEARCH TOOLBAR */
.nav-search-toolbar[b-y90qjvrrj6] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px 6px 12px;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.nav-search-input[b-y90qjvrrj6] {
    flex: 1;
    min-width: 0;
}

.nav-toggle-btn[b-y90qjvrrj6] {
    width: 32px;
    min-width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 6px;
}

/* FluentNavMenu fills sidebar — natural height, sidebar handles scroll */
.side-nav[b-y90qjvrrj6] {
    height: auto;
    display: block;
    box-sizing: border-box;
    padding: 8px 0;
}

/* MAIN CONTENT */
.app-main[b-y90qjvrrj6] {
    min-width: 0;
    height: 100%;        /* fill grid row for scroll to work */
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--neutral-layer-1);
}

.app-shell.theme-light .app-main[b-y90qjvrrj6] { background: #f0f2f8; }
.app-shell.theme-dark  .app-main[b-y90qjvrrj6] { background: #181d28; }

.content-host[b-y90qjvrrj6] {
    padding: 28px;
    min-height: 100%;
    box-sizing: border-box;
}

/* DARK-MODE CONTENT CONTRAST */
.app-shell.theme-dark[b-y90qjvrrj6]  .dashboard-page-title,
.app-shell.theme-dark[b-y90qjvrrj6]  .section-title,
.app-shell.theme-dark[b-y90qjvrrj6]  .kpi-value,
.app-shell.theme-dark[b-y90qjvrrj6]  .table-card th,
.app-shell.theme-dark[b-y90qjvrrj6]  .table-card td,
.app-shell.theme-dark[b-y90qjvrrj6]  .legend-label {
    color: #e4ebf7;
}

.app-shell.theme-dark[b-y90qjvrrj6]  .dashboard-page-subtitle,
.app-shell.theme-dark[b-y90qjvrrj6]  .kpi-label,
.app-shell.theme-dark[b-y90qjvrrj6]  .bar-label,
.app-shell.theme-dark[b-y90qjvrrj6]  .legend-value {
    color: #99a6bc;
}

.app-shell.theme-dark[b-y90qjvrrj6]  .kpi-card,
.app-shell.theme-dark[b-y90qjvrrj6]  .chart-card,
.app-shell.theme-dark[b-y90qjvrrj6]  .table-card {
    background: #1e2535;
    border-color: #353f52;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

/* MOBILE OVERLAY */
.sidebar-overlay[b-y90qjvrrj6] { display: none; }

/* SIDEBAR COLLAPSED (icon-only mode) */
.app-shell.sidebar-collapsed .app-body[b-y90qjvrrj6] {
    grid-template-columns: 68px minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .app-sidebar[b-y90qjvrrj6] { width: 68px; overflow-x: hidden; overflow-y: hidden; }
.app-shell.sidebar-collapsed .brand-subtitle[b-y90qjvrrj6] { display: none; }

/* RESPONSIVE — Tablet & Mobile (≤1024px) */
@media (max-width: 1024px) {
    /* Hide elements marked desktop-only */
    .desktop-only[b-y90qjvrrj6] { display: none !important; }

    .app-header[b-y90qjvrrj6] {
        grid-template-columns: 1fr auto;
        height: 60px;
        padding: 0 14px;
        gap: 12px;
    }

    .header-center[b-y90qjvrrj6] { display: none; }

    /* Reset sidebar-collapsed grid override — mobile is always 1-col */
    .app-body[b-y90qjvrrj6],
    .app-shell.sidebar-collapsed .app-body[b-y90qjvrrj6] {
        grid-template-columns: 1fr;
        height: calc(100vh - 60px);
        overflow: hidden;
    }

    /* Reset sidebar width when collapsed on mobile — must not be 68px rail */
    .app-shell.sidebar-collapsed .app-sidebar[b-y90qjvrrj6] {
        width: min(88vw, 320px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .app-sidebar[b-y90qjvrrj6] {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        width: min(88vw, 320px);
        z-index: 80;
    }

    .app-shell.sidebar-mobile-open .app-sidebar[b-y90qjvrrj6] {
        transform: translateX(0);
    }

    .sidebar-overlay[b-y90qjvrrj6] {
        display: block;
        position: fixed;
        inset: 60px 0 0 0;
        border: none;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 70;
        cursor: pointer;
    }

    .content-host[b-y90qjvrrj6] {
        padding: 16px;
        min-height: 100%;
    }
}

/* Small mobile (≤600px) — hide lower-priority header items to prevent overflow.
   Note: branch-switcher-wrapper is hidden via global-styles.css (avoids Blazor scope attribute issue). */
@media (max-width: 600px) {

    /* Hide brand subtitle line — keep header to 60px single-text row */
    .brand-subtitle[b-y90qjvrrj6] { display: none; }

    /* Prevent horizontal scroll from any slightly-overflowing header item */
    .app-header[b-y90qjvrrj6] { overflow: hidden; }
}
/* /Components/Layouts/PlainLayout.razor.rz.scp.css */
.plain-shell[b-sfmxbz1abj] {
    min-height: 100vh;
    background: var(--neutral-layer-1);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard-page-container[b-sny7sqqzts] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px;
}

.dashboard-page-header[b-sny7sqqzts] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.page-actions[b-sny7sqqzts] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-page-title[b-sny7sqqzts] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.dashboard-page-subtitle[b-sny7sqqzts] {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.kpi-grid[b-sny7sqqzts] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

@keyframes card-enter-b-sny7sqqzts {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpi-card[b-sny7sqqzts], .chart-card[b-sny7sqqzts], .table-card[b-sny7sqqzts] {
    animation: card-enter-b-sny7sqqzts 300ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.kpi-card:nth-child(1)[b-sny7sqqzts] { animation-delay: 0ms; }
.kpi-card:nth-child(2)[b-sny7sqqzts] { animation-delay: 50ms; }
.kpi-card:nth-child(3)[b-sny7sqqzts] { animation-delay: 100ms; }
.kpi-card:nth-child(4)[b-sny7sqqzts] { animation-delay: 150ms; }

.kpi-card[b-sny7sqqzts] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kpi-card:hover[b-sny7sqqzts] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.kpi-card-skeleton[b-sny7sqqzts] {
    gap: 10px;
}

.kpi-header[b-sny7sqqzts] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.kpi-label[b-sny7sqqzts] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-value[b-sny7sqqzts] {
    font-size: 32px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
    margin-bottom: 8px;
}

.kpi-footer[b-sny7sqqzts] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kpi-change[b-sny7sqqzts] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.kpi-change.positive[b-sny7sqqzts] { color: #10B981; }
.kpi-change.negative[b-sny7sqqzts] { color: #EF4444; }

.kpi-period[b-sny7sqqzts] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.chart-grid[b-sny7sqqzts] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.chart-card[b-sny7sqqzts] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 24px;
}

.section-title[b-sny7sqqzts] {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.bar-chart[b-sny7sqqzts] {
    height: 220px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.bar-item[b-sny7sqqzts] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bar[b-sny7sqqzts] {
    width: 100%;
    max-width: 42px;
    background: var(--accent-fill-rest);
    border-radius: 6px 6px 0 0;
    opacity: 0.9;
}

.bar-label[b-sny7sqqzts] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.donut-wrapper[b-sny7sqqzts] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.donut-chart[b-sny7sqqzts] {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(#6366F1 0 34%, #10B981 34% 60%, #F59E0B 60% 82%, #EF4444 82% 100%);
    position: relative;
}

.donut-chart[b-sny7sqqzts]::after {
    content: "";
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    background: var(--neutral-layer-2);
}

.donut-legend[b-sny7sqqzts] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item[b-sny7sqqzts] {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}

.legend-color[b-sny7sqqzts] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-label[b-sny7sqqzts] {
    color: var(--neutral-foreground-rest);
}

.legend-value[b-sny7sqqzts] {
    color: var(--neutral-foreground-hint);
    font-weight: 600;
}

.table-grid[b-sny7sqqzts] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.table-card[b-sny7sqqzts] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 24px;
}

.table-header[b-sny7sqqzts] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.table-link[b-sny7sqqzts] {
    font-size: 13px;
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

.table-link:hover[b-sny7sqqzts] {
    text-decoration: underline;
}

.status-badge[b-sny7sqqzts] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: #6366F1;
}

.error-card[b-sny7sqqzts] {
    padding: 24px;
}

.retry-row[b-sny7sqqzts] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.empty-state[b-sny7sqqzts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    font-size: 14px;
    gap: 8px;
}

@keyframes skeleton-pulse-b-sny7sqqzts {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

fluent-skeleton[b-sny7sqqzts] {
    animation: skeleton-pulse-b-sny7sqqzts 1.5s ease-in-out infinite;
}

@media (max-width: 1280px) {
    .kpi-grid[b-sny7sqqzts] {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-grid[b-sny7sqqzts],
    .table-grid[b-sny7sqqzts] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-page-container[b-sny7sqqzts] {
        padding: 16px;
    }

    .dashboard-page-title[b-sny7sqqzts] {
        font-size: 22px;
    }

    .kpi-grid[b-sny7sqqzts] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kpi-value[b-sny7sqqzts] {
        font-size: 24px;
    }

    .page-actions[b-sny7sqqzts] {
        width: 100%;
    }
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Home / Landing Page Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared layout ───────────────────────────────────────────────────────── */
.landing-container[b-auukapslbt] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.action-anchor[b-auukapslbt] {
    text-decoration: none;
}

/* Section headings */
.section-title[b-auukapslbt] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.section-subtitle[b-auukapslbt] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}

.section-header[b-auukapslbt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

.section-header-row[b-auukapslbt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* ── Hero Section ────────────────────────────────────────────────────────── */
.hero-section[b-auukapslbt] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 36px 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Badge */
.hero-badge[b-auukapslbt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(79, 70, 229, 0.10);
    border: 1px solid rgba(79, 70, 229, 0.25);
    width: fit-content;
    margin-bottom: 20px;
}

.status-text[b-auukapslbt] {
    font-size: 12px;
    font-weight: 500;
    color: #4F46E5;
    letter-spacing: 0.01em;
}

.hero-title-row[b-auukapslbt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-logo[b-auukapslbt] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.hero-title[b-auukapslbt] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
}

.hero-subtitle[b-auukapslbt] {
    margin: 8px 0 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.hero-description[b-auukapslbt] {
    margin: 10px 0 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
}

/* Hero statistics row */
.hero-stats[b-auukapslbt] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 28px;
    padding: 20px 24px;
    background: var(--neutral-layer-3);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    flex-wrap: wrap;
    width: fit-content;
}

.hero-stat[b-auukapslbt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 28px;
    gap: 2px;
}

.hero-stat:first-child[b-auukapslbt] {
    padding-left: 0;
}

.hero-stat-value[b-auukapslbt] {
    font-size: 26px;
    font-weight: 700;
    color: var(--accent-fill-rest);
    line-height: 1;
}

.hero-stat-label[b-auukapslbt] {
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.hero-stat-sep[b-auukapslbt] {
    width: 1px;
    height: 36px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.hero-actions[b-auukapslbt] {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Feature / Capabilities Section ─────────────────────────────────────── */
.feature-section[b-auukapslbt] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-grid[b-auukapslbt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.feature-card[b-auukapslbt] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.feature-card:hover[b-auukapslbt] {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    transform: translateY(-3px);
}

.feature-icon-wrap[b-auukapslbt] {
    display: flex;
    align-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.feature-body[b-auukapslbt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feature-card-title[b-auukapslbt] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.feature-card-text[b-auukapslbt] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--neutral-foreground-hint);
}

.feature-link[b-auukapslbt] {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-fill-rest);
    text-decoration: none;
    letter-spacing: 0.01em;
    margin-top: auto;
    padding-top: 4px;
}

.feature-link:hover[b-auukapslbt] {
    text-decoration: underline;
}

/* ── Integration Hub Section ─────────────────────────────────────────────── */
.integration-section[b-auukapslbt] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.integration-grid[b-auukapslbt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.integration-card[b-auukapslbt] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.integration-card:hover[b-auukapslbt] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

.integration-card-header[b-auukapslbt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.integration-icon-badge[b-auukapslbt] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.integration-name[b-auukapslbt] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.integration-pcount[b-auukapslbt] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

/* Provider chips */
.provider-chips[b-auukapslbt] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.provider-chip[b-auukapslbt] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
    cursor: default;
    line-height: 1.6;
    transition: opacity 120ms;
}

.provider-chip:hover[b-auukapslbt] {
    opacity: 1;
}

/* ── Quick Access Section ─────────────────────────────────────────────────── */
.quickaccess-section[b-auukapslbt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 8px;
}

.quickaccess-grid[b-auukapslbt] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.qa-card[b-auukapslbt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.qa-card:hover[b-auukapslbt] {
    background: var(--neutral-layer-3);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.qa-icon[b-auukapslbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-fill-rest);
}

.qa-label[b-auukapslbt] {
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    text-align: center;
    line-height: 1.3;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .feature-grid[b-auukapslbt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .integration-grid[b-auukapslbt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quickaccess-grid[b-auukapslbt] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .landing-container[b-auukapslbt] {
        padding: 16px;
        gap: 24px;
    }

    .hero-section[b-auukapslbt] {
        padding: 24px 20px;
    }

    .hero-title[b-auukapslbt] {
        font-size: 24px;
    }

    .hero-logo[b-auukapslbt] {
        width: 32px;
        height: 32px;
    }

    .hero-subtitle[b-auukapslbt] {
        font-size: 15px;
    }

    .hero-stats[b-auukapslbt] {
        padding: 16px;
        gap: 0;
    }

    .hero-stat[b-auukapslbt] {
        padding: 0 16px;
    }

    .feature-grid[b-auukapslbt] {
        grid-template-columns: 1fr;
    }

    .integration-grid[b-auukapslbt] {
        grid-template-columns: 1fr;
    }

    .quickaccess-grid[b-auukapslbt] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .section-header-row[b-auukapslbt] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pdc/PdcLegalNoticeStepper.razor.rz.scp.css */
/* ── Legal notice stepper (vertical, non-branching) — mirrors the ApprovalChain
   visual language (Components/Approvals/ApprovalChain.razor.css) so both statutory-process
   trackers in the app read consistently, restyled with pdc-* class names since this chain has
   six steps instead of two and its own terminal-banner concept. */
.pdc-legal-stepper[b-b54to6gr1v] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
}

.pdc-step[b-b54to6gr1v] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
    transition: background 150ms ease;
}

.pdc-step:last-child[b-b54to6gr1v] { border-bottom: none; }

.pdc-step-dot[b-b54to6gr1v] {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--neutral-stroke-rest);
    border: 2px solid var(--neutral-stroke-rest);
}

.pdc-step--completed .pdc-step-dot[b-b54to6gr1v] { background: #10B981; border-color: #10B981; }
.pdc-step--active    .pdc-step-dot[b-b54to6gr1v] { background: #4F46E5; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.2); }
.pdc-step--waiting   .pdc-step-dot[b-b54to6gr1v] { background: var(--neutral-layer-2); border-color: var(--neutral-stroke-rest); }

.pdc-step--completed[b-b54to6gr1v] { background: rgba(16,185,129,0.03); }
.pdc-step--active[b-b54to6gr1v]    { background: rgba(79,70,229,0.04); }
.pdc-step--waiting[b-b54to6gr1v]    { background: var(--neutral-layer-1); opacity: 0.65; }

.pdc-step-body[b-b54to6gr1v] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.pdc-step-title[b-b54to6gr1v] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.pdc-step-detail[b-b54to6gr1v] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── "Not applicable" note (no Section 138 chain) ────────────────────────── */
.pdc-stepper-note[b-b54to6gr1v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Terminal banner (SettledOrCompounded / Lapsed) — rendered below the chain, not as a
   7th step, since it is an outcome of the chain rather than a position within it. */
.pdc-stepper-banner[b-b54to6gr1v] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 10px;
    border-radius: 8px;
}

.pdc-stepper-banner--settled[b-b54to6gr1v] {
    background: rgba(16,185,129,0.08);
    color: #059669;
}

.pdc-stepper-banner--lapsed[b-b54to6gr1v] {
    background: rgba(239,68,68,0.08);
    color: #DC2626;
}

.pdc-stepper-banner-title[b-b54to6gr1v] {
    font-size: 13px;
    font-weight: 700;
}

.pdc-stepper-banner-hint[b-b54to6gr1v] {
    font-size: 12px;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}
/* /Pages/About/Index.razor.rz.scp.css */
.detail-table[b-5lv0425g4v] { display: flex; flex-direction: column; gap: 8px; }
.detail-row[b-5lv0425g4v] { display: flex; gap: 16px; }
.detail-label[b-5lv0425g4v] { width: 140px; flex-shrink: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.detail-value[b-5lv0425g4v] { font-size: 14px; color: var(--neutral-foreground-rest); }
.detail-value--bold[b-5lv0425g4v] { font-weight: 600; }
/* /Pages/Accounting/AccountLedger.razor.rz.scp.css */
/* ── Filter toolbar (account/date filters + generate/export actions) ─── */
.toolbar[b-qu6a4q80z1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
}

.toolbar-filters[b-qu6a4q80z1] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar-actions[b-qu6a4q80z1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-title[b-qu6a4q80z1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

@media (max-width: 768px) {
    .toolbar[b-qu6a4q80z1] { flex-direction: column; align-items: stretch; }
    .toolbar-filters[b-qu6a4q80z1] { flex-direction: column; align-items: stretch; width: 100%; }
    .toolbar-actions[b-qu6a4q80z1] { width: 100%; }
    .toolbar-actions fluent-button[b-qu6a4q80z1],
    .toolbar-actions .split-btn-group[b-qu6a4q80z1] { flex: 1; }
}

/* ── KPI cards — 4 across on this page instead of the default 3 ──────── */
/* minmax(0, 1fr) (not plain 1fr) so the 4 tracks compress to fit the page
   width instead of overflowing past it based on each card's content size. */
.metrics-row[b-qu6a4q80z1] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) { .metrics-row[b-qu6a4q80z1] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .metrics-row[b-qu6a4q80z1] { grid-template-columns: minmax(0, 1fr); } }

.metric-card[b-qu6a4q80z1] { min-width: 0; }

/* Reclaim horizontal room for .metric-value on this page: 4 equal columns
   leave only ~133px for the value text, which wraps even 5-digit rupee
   amounts. Trim icon/gap/padding here (not globally) to push the wrap
   threshold past everyday values; <wbr> in FormatMetric() still catches
   lakh/crore-scale values that don't fit even with the extra room. */
.metrics-row .metric-card[b-qu6a4q80z1] { padding: 16px 14px; gap: 10px; }
.metrics-row .metric-icon-wrap[b-qu6a4q80z1] { width: 44px; height: 44px; }
.metrics-row .metric-icon-wrap svg[b-qu6a4q80z1] { width: 20px; height: 20px; }

/* ── Split-button export group ───────────────────────────── */
.split-btn-group[b-qu6a4q80z1] {
    position: relative;
    display: inline-flex;
}

.split-btn-group fluent-button:first-child[b-qu6a4q80z1]::part(control) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.split-caret[b-qu6a4q80z1]::part(control) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 8px;
    min-width: unset;
}

.split-menu[b-qu6a4q80z1] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 140px;
    padding: 4px 0;
    margin-top: 2px;
}

.split-menu button[b-qu6a4q80z1] {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    background: none;
    border: none;
    cursor: pointer;
}

.split-menu button:hover[b-qu6a4q80z1] {
    background: var(--neutral-layer-3);
}

/* ── Balance drift hint (account's GL balance vs. this posted-only ledger) ── */
.ledger-balance-hint[b-qu6a4q80z1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 13px;
    color: #D97706;
    margin-top: 12px;
}

.ledger-balance-hint-icon[b-qu6a4q80z1] { flex-shrink: 0; color: #D97706; }

/* ── Ledger grid ───────────────────────────────────────────────────── */
/* Safety net: fixed-px columns + 1fr Description mixed with no min-width
   would otherwise squish proportionally on narrow viewports instead of
   triggering .grid-scroll-wrapper's horizontal scroll. */
[b-qu6a4q80z1] table.account-ledger-grid {
    min-width: 1000px;
}

/* ── Pagination bar ─────────────────────────────────────────────────── */
.pagination-bar[b-qu6a4q80z1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    gap: 12px;
}

.pagination-info[b-qu6a4q80z1] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

@media (max-width: 767px) {
    .pagination-bar[b-qu6a4q80z1] { flex-direction: column; gap: 8px; align-items: center; }
}
/* /Pages/Accounting/Accounts.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Accounting › Accounts — List Archetype
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────── */
.page-container[b-xloimiwdpj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.page-header[b-xloimiwdpj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0; /* gap on page-container handles rhythm */
}

.page-header-text[b-xloimiwdpj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-xloimiwdpj] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle[b-xloimiwdpj] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-xloimiwdpj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI summary row ─────────────────────────────────────── */
/* ── Metrics row ─────────────────────────────────────────── */
.metrics-row[b-xloimiwdpj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-xloimiwdpj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.metric-icon-wrap[b-xloimiwdpj] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon-blue[b-xloimiwdpj]   { background: rgba(79, 70, 229, 0.12); color: #4F46E5; }
.metric-icon-green[b-xloimiwdpj]  { background: rgba(16, 185, 129, 0.12); color: #059669; }
.metric-icon-red[b-xloimiwdpj]    { background: rgba(239, 68, 68, 0.12);  color: #DC2626; }

.metric-body[b-xloimiwdpj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-xloimiwdpj] {
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.metric-title[b-xloimiwdpj] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-xloimiwdpj] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── List container (FluentCard) ─────────────────────────── */
.list-container[b-xloimiwdpj] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 8px !important;
    overflow: hidden;
    padding: 0 !important; /* override FluentCard default padding */
}

/* overflow:hidden above (needed to clip the table's square corners to the
   rounded card) also clips the toolbar's FluentSelect listbox, since this
   scoped rule outranks global-styles.css's generic ".list-container { overflow:
   visible }" (scope attribute adds specificity). Release clipping only while
   a select is actually open — mirrors the .form-card:has(fluent-select[open])
   pattern already used for wizard pages. */
.list-container:has(fluent-select[open])[b-xloimiwdpj] {
    overflow: visible;
}

/* ── Toolbar ─────────────────────────────────────────────── */
/*
  ⚠️ CRITICAL: Blazor scoped CSS scope attributes (b-xxxx) do NOT land on
  web-component host elements (<fluent-search>, <fluent-select>).
  Pattern:
  1. Wrap FluentSearch in native <div class="list-search"> — gets scope attr.
  2. Use inline Style= for FluentSelect widths — bypasses specificity issues.
*/
.list-toolbar[b-xloimiwdpj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;               /* wrap filters to a second row on narrow viewports */
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 10;                   /* ensure dropdowns layer above grid rows */
}

.list-search[b-xloimiwdpj] {
    flex: 1 1 200px;
    max-width: 300px;
}

.list-search fluent-search[b-xloimiwdpj] {
    width: 100%;
}

.toolbar-divider[b-xloimiwdpj] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-xloimiwdpj] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton ────────────────────────────────────────────── */
.skeleton-list[b-xloimiwdpj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.skeleton-row[b-xloimiwdpj] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-xloimiwdpj] {
    border-bottom: none;
}

/* ── Empty / error state ─────────────────────────────────── */
.state-box[b-xloimiwdpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-xloimiwdpj] {
    color: var(--neutral-foreground-hint);
    opacity: 0.45;
    margin-bottom: 4px;
}

.state-title[b-xloimiwdpj] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.state-message[b-xloimiwdpj] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Grid ────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-xloimiwdpj] {
    overflow-x: auto;
}

/* ── Row actions — hover-reveal (desktop) ────────────────── */
/*
  ⚠️ CRITICAL: The hover-reveal rule AND .row-action-btn styles MUST NOT be
  duplicated here in this scoped file. Reason: Blazor CSS isolation appends
  [b-xxxx] to all selectors; hover ancestor rules on non-scoped elements are
  silently dropped by the scoping transform.
  All row-action rules live in wwwroot/global-styles.css.

  ⚠️ CRITICAL: FluentDataGrid sets height:32px inline on every <td> AND its
  built-in scoped CSS (FluentDataGridCell.razor.rz.scp.css) sets overflow:hidden
  on all <td> cells (for text truncation). These are overridden globally in
  global-styles.css with:
    table.fluent-data-grid td { height: auto !important; min-height: 48px; }
    table.fluent-data-grid td:has(.row-actions) { overflow: visible; }
  Do NOT re-add row-height or overflow rules in per-page scoped CSS — the global
  rules cover all pages uniformly.
*/
.row-actions[b-xloimiwdpj] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-xloimiwdpj] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border and color/hover styles are in global-styles.css */
}

/* ── Footer (paginator) ──────────────────────────────────── */
.list-footer[b-xloimiwdpj] {
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.results-count[b-xloimiwdpj] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── Amount cell ─────────────────────────────────────────── */
.amount-cell[b-xloimiwdpj] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Status badges ───────────────────────────────────────── */
.status-badge[b-xloimiwdpj] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.status-badge--active[b-xloimiwdpj] {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.status-badge--inactive[b-xloimiwdpj] {
    background: var(--neutral-fill-rest);
    color: var(--neutral-foreground-hint);
}

/* ── Account type badges ─────────────────────────────────── */
.type-badge[b-xloimiwdpj] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.type-badge--asset[b-xloimiwdpj]     { background: rgba(16, 185, 129, 0.10); color: #059669; }
.type-badge--liability[b-xloimiwdpj] { background: rgba(239, 68, 68, 0.10);  color: #DC2626; }
.type-badge--equity[b-xloimiwdpj]    { background: rgba(99, 102, 241, 0.10);  color: #4F46E5; }
.type-badge--revenue[b-xloimiwdpj]   { background: rgba(16, 185, 129, 0.10); color: #059669; }
.type-badge--expense[b-xloimiwdpj]   { background: rgba(245, 158, 11, 0.10); color: #D97706; }

/* ── Danger delete button in dialog ─────────────────────── */
/*
  ⚠️ Do NOT use CSS var() or var(token, fallback) for FluentUI design token
  overrides on component-level classes. The FluentUI FAST design system JS
  watches custom property mutations; a var() reference causes the reactive
  evaluator to recurse infinitely — RangeError: Maximum call stack size exceeded.
  Use plain hex values only when overriding --accent-fill-* tokens.
*/
.btn-danger[b-xloimiwdpj] {
    --accent-fill-rest:    #d13438;
    --accent-fill-hover:   #b91c1c;
    --accent-fill-active:  #991b1b;
    color: white !important;
}

/* ── Dialog form ─────────────────────────────────────────── */
.dialog-form[b-xloimiwdpj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

/* ── Grouped accounts table ───────────────────────────────── */
.accounts-grouped-table[b-xloimiwdpj] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.accounts-grid-head th[b-xloimiwdpj] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-align: left;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.account-group-header-row td[b-xloimiwdpj] {
    padding: 6px 12px;
    background: var(--neutral-fill-secondary-rest, rgba(0,0,0,0.03));
    border-top: 2px solid var(--neutral-stroke-divider-rest);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.account-group-header-row--toggle[b-xloimiwdpj] {
    cursor: pointer;
}

.account-group-header-row--toggle:hover td[b-xloimiwdpj] {
    background: var(--neutral-fill-secondary-hover, rgba(0,0,0,0.06));
}

.account-group-header-inner[b-xloimiwdpj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.group-collapse-btn[b-xloimiwdpj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    flex-shrink: 0;
}

.group-collapse-btn:hover[b-xloimiwdpj] {
    background: var(--neutral-fill-secondary-hover, rgba(0,0,0,0.08));
    color: var(--neutral-foreground-rest);
}

.group-header-count[b-xloimiwdpj] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.group-header-balance[b-xloimiwdpj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.group-header-balance-label[b-xloimiwdpj] {
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    margin-right: 4px;
}

.account-data-row td[b-xloimiwdpj] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font-size: 14px;
    vertical-align: middle;
}

.account-data-row:last-child td[b-xloimiwdpj] {
    border-bottom: none;
}

.account-data-row:hover td[b-xloimiwdpj] {
    background: var(--neutral-fill-stealth-hover, rgba(0,0,0,0.03));
}

.account-data-row:hover .row-actions[b-xloimiwdpj] {
    opacity: 1;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .metrics-row[b-xloimiwdpj] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-xloimiwdpj] {
        padding: 20px 16px;
    }

    .page-header[b-xloimiwdpj] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions[b-xloimiwdpj] {
        justify-content: flex-end;
    }

    .metrics-row[b-xloimiwdpj] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .list-search[b-xloimiwdpj] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .toolbar-divider[b-xloimiwdpj] {
        display: none;
    }

    .toolbar-filters[b-xloimiwdpj] {
        width: 100%;
    }

    /* Row actions always visible on touch devices */
    .row-actions[b-xloimiwdpj] {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .metrics-row[b-xloimiwdpj] { grid-template-columns: 1fr; }
}
/* /Pages/Accounting/BankReconciliation.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Accounting › Bank Reconciliation — List Archetype
   Re-uses shared page-container / metrics-row / list-container
   styles from JournalEntries.razor.css
   ═══════════════════════════════════════════════════════════ */

.page-container[b-4apd5ahz63] { display: flex; flex-direction: column; gap: 24px; padding: 32px; max-width: 1440px; margin: 0 auto; }
.page-header[b-4apd5ahz63] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-header-text[b-4apd5ahz63] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-4apd5ahz63] { font-size: 28px; font-weight: 700; color: var(--neutral-foreground-rest); margin: 0; line-height: 1.2; }
.page-subtitle[b-4apd5ahz63] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }
.page-actions[b-4apd5ahz63] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.list-container[b-4apd5ahz63] { background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-rest); border-radius: 10px; overflow: hidden; }
.list-toolbar[b-4apd5ahz63] { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--neutral-stroke-rest); }
.list-search[b-4apd5ahz63] { flex: 1; min-width: 160px; max-width: 360px; }
.list-footer[b-4apd5ahz63] { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--neutral-stroke-rest); font-size: 13px; color: var(--neutral-foreground-hint); }
.results-count[b-4apd5ahz63] { white-space: nowrap; }

.metrics-row[b-4apd5ahz63] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.metric-card[b-4apd5ahz63] { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-rest); border-radius: 10px; }
.metric-icon-wrap[b-4apd5ahz63] { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.metric-icon-blue[b-4apd5ahz63] { background: rgba(56, 128, 255, .12); color: #3880ff; }
.metric-icon-green[b-4apd5ahz63] { background: rgba(45, 194, 107, .12); color: #2dc26b; }
.metric-icon-amber[b-4apd5ahz63] { background: rgba(217, 119, 6, .12); color: #d97706; }
.metric-body[b-4apd5ahz63] { display: flex; flex-direction: column; }
.metric-value[b-4apd5ahz63] { font-size: 11px; font-weight: 700; color: var(--neutral-foreground-rest); }
.metric-title[b-4apd5ahz63] { font-size: 13px; color: var(--neutral-foreground-hint); margin-top: 2px; }

.skeleton-list[b-4apd5ahz63] { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.skeleton-row[b-4apd5ahz63] { display: flex; gap: 16px; align-items: center; padding: 8px 0; }

.state-box[b-4apd5ahz63] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; text-align: center; }
.state-icon[b-4apd5ahz63] { color: var(--neutral-foreground-hint); }
.state-icon-error[b-4apd5ahz63] { color: var(--error); }
.state-title[b-4apd5ahz63] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-message[b-4apd5ahz63] { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; max-width: 360px; }

.grid-scroll-wrapper[b-4apd5ahz63] { overflow-x: auto; }

.row-actions[b-4apd5ahz63] { display: flex; gap: 4px; align-items: center; }
.row-action-btn[b-4apd5ahz63] { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--neutral-foreground-rest); display: inline-flex; align-items: center; justify-content: center; }
.row-action-btn:hover[b-4apd5ahz63] { background: var(--neutral-fill-stealth-hover); }
.row-action-danger:hover[b-4apd5ahz63] { color: var(--error); }

.status-badge[b-4apd5ahz63] { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.status-badge--completed[b-4apd5ahz63] { background: rgba(45,194,107,.12); color: #2dc26b; }
.status-badge--pending[b-4apd5ahz63] { background: rgba(217,119,6,.12); color: #d97706; }
.status-badge--inprogress[b-4apd5ahz63] { background: rgba(56,128,255,.12); color: #3880ff; }

/* Dialog forms */
.dialog-form[b-4apd5ahz63] { display: flex; flex-direction: column; gap: 16px; }
.dialog-error-bar[b-4apd5ahz63] { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.25); border-radius: 8px; font-size: 13px; color: var(--error); }

.lines-section[b-4apd5ahz63] { display: flex; flex-direction: column; gap: 8px; }
.lines-label[b-4apd5ahz63] { font-size: 14px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.line-header-row[b-4apd5ahz63] { display: grid; grid-template-columns: 120px 1fr 120px 100px 100px 40px; gap: 8px; padding: 6px 0; font-size: 12px; font-weight: 600; color: var(--neutral-foreground-hint); }
.line-card[b-4apd5ahz63] { background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 8px; padding: 8px 12px; }
.line-row-top[b-4apd5ahz63] { display: grid; gap: 8px; align-items: center; }
.date-filter-label[b-4apd5ahz63] { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; }
.date-filter-input[b-4apd5ahz63] { padding: 6px 10px; border: 1px solid var(--neutral-stroke-rest); border-radius: 4px; font-size: 14px; background: var(--neutral-layer-1); color: var(--neutral-foreground-rest); }

/* Detail dialog */
.je-view-header[b-4apd5ahz63] { display: flex; align-items: center; gap: 12px; }
.je-view-ref[b-4apd5ahz63] { font-size: 16px; font-weight: 700; }
.je-view-meta[b-4apd5ahz63] { display: flex; flex-wrap: wrap; gap: 20px; padding: 12px 0; }
.je-view-meta-item[b-4apd5ahz63] { display: flex; flex-direction: column; gap: 2px; }
.je-view-meta-label[b-4apd5ahz63] { font-size: 12px; color: var(--neutral-foreground-hint); }
.je-view-meta-value[b-4apd5ahz63] { font-size: 14px; font-weight: 600; }
.je-view-lines-section[b-4apd5ahz63] { display: flex; flex-direction: column; gap: 4px; }
.je-view-col-header[b-4apd5ahz63] { display: grid; gap: 8px; padding: 8px 0; font-size: 12px; font-weight: 600; color: var(--neutral-foreground-hint); border-bottom: 1px solid var(--neutral-stroke-rest); }
.je-view-line-row[b-4apd5ahz63] { display: grid; gap: 8px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); align-items: center; }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID MIN-WIDTH (horizontal overflow safety net; scroll wrapper is global)
══════════════════════════════════════════════════════════════════════════════ */
[b-4apd5ahz63] table.reconciliation-grid {
    min-width: 1056px;
}
/* /Pages/Accounting/Budget.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Accounting › Budget — Entry Matrix + Variance Report
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────── */
.budget-container[b-81hdjb7dbd] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    max-width: 1600px;
    margin: 0 auto;
}

/* ── Fiscal Year bar ─────────────────────────────────────── */
.budget-fy-bar[b-81hdjb7dbd] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.budget-fy-label[b-81hdjb7dbd] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.budget-fy-buttons[b-81hdjb7dbd] {
    display: flex;
    gap: 6px;
}

/* ── Status badge ────────────────────────────────────────── */
.budget-status-badge[b-81hdjb7dbd] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.budget-status-draft[b-81hdjb7dbd]    { background: rgba(var(--warning-rgb, 245,158,11), 0.12); color: #B45309; }
.budget-status-approved[b-81hdjb7dbd] { background: rgba(var(--success-rgb,  34,197,94), 0.12); color: #15803D; }
.budget-status-locked[b-81hdjb7dbd]   { background: rgba(var(--neutral-rgb, 100,116,139), 0.12); color: var(--neutral-foreground-rest); }

/* ── Tabs container (reuse Reports pattern) ──────────────── */
.rpt-tabs-wrap[b-81hdjb7dbd] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

.rpt-tabs[b-81hdjb7dbd] { width: 100%; }

/* ── Toolbar ─────────────────────────────────────────────── */
.rpt-toolbar[b-81hdjb7dbd] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    flex-wrap: wrap;
}

.rpt-report-title[b-81hdjb7dbd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.rpt-toolbar-actions[b-81hdjb7dbd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rpt-filter-group[b-81hdjb7dbd] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Mobile guard ────────────────────────────────────────── */
.budget-mobile-msg[b-81hdjb7dbd] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

@media (max-width: 900px) {
    .budget-mobile-msg[b-81hdjb7dbd]     { display: flex; }
    .budget-matrix-wrap[b-81hdjb7dbd]    { display: none; }
}

/* ── Matrix wrapper ──────────────────────────────────────── */
.budget-matrix-wrap[b-81hdjb7dbd] {
    overflow-x: auto;
    padding: 0 20px 20px;
}

/* ── Matrix table ────────────────────────────────────────── */
.budget-matrix[b-81hdjb7dbd] {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 12px;
}

.budget-matrix th[b-81hdjb7dbd],
.budget-matrix td[b-81hdjb7dbd] {
    border: 1px solid var(--neutral-stroke-rest);
    padding: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.budget-matrix thead th[b-81hdjb7dbd] {
    background: var(--neutral-layer-3);
    padding: 8px 10px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.budget-matrix tfoot th[b-81hdjb7dbd],
.budget-matrix tfoot td[b-81hdjb7dbd] {
    background: var(--neutral-layer-3);
    font-weight: 700;
    text-align: center;
    padding: 8px 10px;
}

/* Account column — sticky left ─────────────────────────── */
.bm-col-account[b-81hdjb7dbd] {
    min-width: 220px;
    max-width: 260px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--neutral-layer-2);
    padding: 6px 10px !important;
    text-align: left !important;
}

.budget-matrix thead .bm-col-account[b-81hdjb7dbd] { z-index: 3; }
.budget-matrix tfoot .bm-col-account[b-81hdjb7dbd] { z-index: 3; }

.bm-account-cell[b-81hdjb7dbd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bm-account-code[b-81hdjb7dbd] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    font-family: monospace;
}

.bm-account-name[b-81hdjb7dbd] {
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Month columns ──────────────────────────────────────────── */
.bm-col-month[b-81hdjb7dbd] {
    width: 80px;
    text-align: right;
}

/* Total column ───────────────────────────────────────────── */
.bm-col-total[b-81hdjb7dbd] {
    width: 90px;
    text-align: right;
    font-weight: 600;
    background: var(--neutral-layer-1);
    padding: 6px 10px !important;
}

/* Action column (fill-right) ─────────────────────────────── */
.bm-col-action[b-81hdjb7dbd] {
    width: 36px;
    text-align: center;
    padding: 2px !important;
}

/* Cell input ─────────────────────────────────────────────── */
.bm-cell-input[b-81hdjb7dbd] {
    width: 76px;
    height: 32px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font-size: 12px;
    text-align: right;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    -moz-appearance: textfield;
}

.bm-cell-input[b-81hdjb7dbd]::-webkit-outer-spin-button,
.bm-cell-input[b-81hdjb7dbd]::-webkit-inner-spin-button { -webkit-appearance: none; }

.bm-cell-input:hover[b-81hdjb7dbd] {
    border-color: var(--neutral-stroke-hover);
    background: var(--neutral-layer-1);
}

.bm-cell-input:focus[b-81hdjb7dbd] {
    border-color: var(--accent-stroke-control-rest);
    background: var(--neutral-layer-1);
    box-shadow: 0 0 0 1px var(--accent-stroke-control-rest);
}

/* Read-only cell ─────────────────────────────────────────── */
.bm-cell-readonly[b-81hdjb7dbd] {
    display: block;
    padding: 6px 10px;
    text-align: right;
    color: var(--neutral-foreground-rest);
}

.bm-cell-total[b-81hdjb7dbd] {
    padding: 6px 10px !important;
}

/* Totals row ─────────────────────────────────────────────── */
.bm-totals-row td[b-81hdjb7dbd],
.bm-totals-row th[b-81hdjb7dbd] {
    background: var(--neutral-layer-3);
    font-weight: 700;
}

.bm-total-cell[b-81hdjb7dbd] {
    text-align: right;
    padding: 6px 10px !important;
}

/* ── Save indicator ──────────────────────────────────────── */
.budget-save-indicator[b-81hdjb7dbd] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── KPI row (reuse Reports archetype) ───────────────────── */
.rpt-kpi-row[b-81hdjb7dbd] {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    flex-wrap: wrap;
}

.rpt-kpi-card[b-81hdjb7dbd] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 180px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 14px 16px;
}

.rpt-kpi-icon[b-81hdjb7dbd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

.rpt-kpi-icon--blue[b-81hdjb7dbd]  { background: rgba(59,130,246,0.12); color: #3B82F6; }
.rpt-kpi-icon--green[b-81hdjb7dbd] { background: rgba(34,197,94,0.12);  color: #22C55E; }
.rpt-kpi-icon--amber[b-81hdjb7dbd] { background: rgba(245,158,11,0.12); color: #F59E0B; }
.rpt-kpi-icon--red[b-81hdjb7dbd]   { background: rgba(239,68,68,0.12);  color: #EF4444; }

.rpt-kpi-body[b-81hdjb7dbd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rpt-kpi-label[b-81hdjb7dbd] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rpt-kpi-value[b-81hdjb7dbd] {
    font-size: 18px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.rpt-kpi-value--positive[b-81hdjb7dbd] { color: #22C55E; }
.rpt-kpi-value--negative[b-81hdjb7dbd] { color: #EF4444; }

/* ── Variance grid ───────────────────────────────────────── */
.budget-variance-grid[b-81hdjb7dbd] {
    margin: 0 20px 20px;
    min-width: 820px;
}

.grid-scroll-wrapper[b-81hdjb7dbd] {
    overflow-x: auto;
}

/* ── RAG badges ──────────────────────────────────────────── */
.rag-badge[b-81hdjb7dbd] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: default;
}

.rag-badge--green[b-81hdjb7dbd] { background: rgba(34,197,94,0.15); color: #15803D; }
.rag-badge--amber[b-81hdjb7dbd] { background: rgba(245,158,11,0.15); color: #B45309; }
.rag-badge--red[b-81hdjb7dbd]   { background: rgba(239,68,68,0.15); color: #B91C1C; }

/* ── Shared placeholders / states ────────────────────────── */
.tab-placeholder[b-81hdjb7dbd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    text-align: center;
}

.placeholder-icon[b-81hdjb7dbd] { color: var(--neutral-foreground-hint); }
.placeholder-title[b-81hdjb7dbd] { font-size: 16px; font-weight: 600; margin: 0; color: var(--neutral-foreground-rest); }
.placeholder-text[b-81hdjb7dbd]  { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; max-width: 420px; }

.state-box[b-81hdjb7dbd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 8px;
    text-align: center;
}

.state-icon[b-81hdjb7dbd]  { color: var(--neutral-foreground-hint); }
.state-title[b-81hdjb7dbd] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Loading ─────────────────────────────────────────────── */
.rpt-loading[b-81hdjb7dbd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

.rpt-error-bar[b-81hdjb7dbd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 8px;
    color: #EF4444;
    font-size: 13px;
}

/* ── Fluent-input styled select (reuse CaseDetail pattern) ── */
.fluent-input[b-81hdjb7dbd] {
    appearance: none;
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-input-rest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5 7l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 12px;
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    min-width: 120px;
}

.fluent-input:focus[b-81hdjb7dbd] {
    outline: none;
    border-color: var(--accent-stroke-control-rest);
    box-shadow: 0 0 0 1px var(--accent-stroke-control-rest);
}
/* /Pages/Accounting/CostCenters.razor.rz.scp.css */
/* COST CENTERS — List archetype contract */

.error-bar[b-453n5vqnyu] { margin: 0 0 4px 0; }

/* ── Loading skeleton ─────────────────────────────────────── */
.skeleton-loader[b-453n5vqnyu] {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

/* ── Empty state ──────────────────────────────────────────── */
.empty-state[b-453n5vqnyu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 64px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state svg[b-453n5vqnyu] { opacity: 0.5; }

.empty-state p[b-453n5vqnyu] {
    margin: 0;
    font-size: 14px;
}

.empty-state-hint[b-453n5vqnyu] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    max-width: 360px;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-453n5vqnyu] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-453n5vqnyu] table.cost-centers-grid { min-width: 1050px; }

/* ── Native <select> styled to match FluentSearch height ─────
   (FluentSelect traps DOM events inside FluentDialog — see CLAUDE.md gotcha #8) */
.fluent-input[b-453n5vqnyu] {
    appearance: none;
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-input-rest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5 7l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 12px;
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.fluent-input:focus[b-453n5vqnyu] {
    outline: none;
    border-color: var(--accent-stroke-control-rest);
    box-shadow: 0 0 0 1px var(--accent-stroke-control-rest);
}

.fluent-label[b-453n5vqnyu] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
    margin-bottom: 5px;
}

/* ── Dialog styles (FluentDialogBody / FluentDialogFooter) ───
   FluentDialogBody/Footer render as classed divs — use ::deep with
   CLASS selectors, not element selectors, per Blazor CSS isolation rules. */
[b-453n5vqnyu] .fluent-dialog-body {
    padding: 4px 24px 12px;
    overflow-y: auto;
}

[b-453n5vqnyu] .fluent-dialog-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
/* /Pages/Accounting/Index.razor.rz.scp.css */
/* ==========================================================================
   Accounting Dashboard — Dashboard Archetype
   ========================================================================== */

@keyframes card-enter-b-nya20swauy {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PAGE SHELL ─────────────────────────────────────────────────────────── */
.page-container[b-nya20swauy] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-nya20swauy 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── PAGE HEADER ────────────────────────────────────────────────────────── */
.page-header[b-nya20swauy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-nya20swauy] { display: flex; flex-direction: column; gap: 4px; }

.page-title[b-nya20swauy] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.02em;
}

.page-subtitle[b-nya20swauy] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-nya20swauy] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── KPI GRID ───────────────────────────────────────────────────────────── */
/* ── METRICS ROW ────────────────────────────────────────────────────────── */
.metrics-row[b-nya20swauy]  { display: grid; gap: 16px; }
.metrics-row--4[b-nya20swauy] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metrics-row--3[b-nya20swauy] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.metric-card[b-nya20swauy] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.metric-card:hover[b-nya20swauy] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.metric-icon-wrap[b-nya20swauy] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon-blue[b-nya20swauy]   { background: rgba(79, 70, 229, 0.12); color: #4F46E5; }
.metric-icon-green[b-nya20swauy]  { background: rgba(16, 185, 129, 0.12); color: #059669; }
.metric-icon-red[b-nya20swauy]    { background: rgba(239, 68, 68, 0.12);  color: #DC2626; }
.metric-icon-purple[b-nya20swauy] { background: rgba(139, 92, 246, 0.12); color: #7C3AED; }
.metric-icon-amber[b-nya20swauy]  { background: rgba(245, 158, 11, 0.12); color: #D97706; }

.metric-body[b-nya20swauy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-nya20swauy] {
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.metric-value--accent[b-nya20swauy] { color: var(--accent-foreground-rest); }

.metric-title[b-nya20swauy] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-nya20swauy] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}


.status-badge[b-nya20swauy] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge--active[b-nya20swauy] {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.status-badge--warning[b-nya20swauy] {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
}

/* ── NAV SECTION ────────────────────────────────────────────────────────── */
.nav-section[b-nya20swauy] { display: flex; flex-direction: column; gap: 16px; }

.section-title[b-nya20swauy] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.nav-cards[b-nya20swauy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.nav-card[b-nya20swauy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 24px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
    text-align: left;
}

.nav-card:hover[b-nya20swauy] {
    border-color: var(--accent-stroke-control-rest);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
    transform: translateY(-2px);
}

.nav-card-label[b-nya20swauy] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.nav-card-sublabel[b-nya20swauy] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── STATE BOX ──────────────────────────────────────────────────────────── */
.state-box[b-nya20swauy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}

.state-message[b-nya20swauy] { margin: 0; font-size: 14px; color: var(--neutral-foreground-hint); }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-nya20swauy] { padding: 24px 20px; }
    .metrics-row--4[b-nya20swauy] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metrics-row--3[b-nya20swauy] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav-cards[b-nya20swauy] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .page-container[b-nya20swauy] { padding: 16px 12px; }
    .metrics-row--4[b-nya20swauy] { grid-template-columns: 1fr 1fr; }
    .metrics-row--3[b-nya20swauy] { grid-template-columns: 1fr 1fr; }
    .nav-cards[b-nya20swauy] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .metrics-row--4[b-nya20swauy] { grid-template-columns: 1fr; }
    .metrics-row--3[b-nya20swauy] { grid-template-columns: 1fr; }
}
/* /Pages/Accounting/JournalEntries.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Accounting › Journal Entries — List Archetype
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────── */
.page-container[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.page-header[b-imjob2kkxe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-header-text[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-imjob2kkxe] {
    font-size: 28px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle[b-imjob2kkxe] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── List container ──────────────────────────────────────── */
.list-container[b-imjob2kkxe] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

/* ── KPI Metric Cards ────────────────────────────────────── */
.metrics-row[b-imjob2kkxe] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    transition: box-shadow 0.15s;
}

.metric-card:hover[b-imjob2kkxe] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.metric-icon-wrap[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
}

.metric-icon-blue[b-imjob2kkxe]   { background: rgba(59,130,246,0.12); color: #3B82F6; }
.metric-icon-green[b-imjob2kkxe]  { background: rgba(16,185,129,0.12); color: #10B981; }
.metric-icon-amber[b-imjob2kkxe]  { background: rgba(245,158,11,0.12); color: #D97706; }

.metric-body[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-imjob2kkxe] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-title[b-imjob2kkxe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-imjob2kkxe] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── Toolbar ─────────────────────────────────────────────── */
.list-toolbar[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    z-index: 10;
}

.list-search[b-imjob2kkxe] {
    flex: 1 1 200px;
    max-width: 300px;
}

.toolbar-divider[b-imjob2kkxe] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-imjob2kkxe] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-range-label[b-imjob2kkxe] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Always reveal row-actions (View is primary, no hover-only required) */
[b-imjob2kkxe] .journal-entries-grid .row-actions {
    opacity: 1;
}

/* Safety net: fixed-px columns + 1fr Description mixed with no min-width
   would otherwise squish proportionally on narrow viewports instead of
   triggering .grid-scroll-wrapper's horizontal scroll. */
[b-imjob2kkxe] table.journal-entries-grid {
    min-width: 1100px;
}

/* ── Skeleton ────────────────────────────────────────────── */
.skeleton-list[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
}

.skeleton-row[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-imjob2kkxe] {
    border-bottom: none;
}

/* ── Empty / error state ─────────────────────────────────── */
.state-box[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-imjob2kkxe] {
    color: var(--neutral-foreground-hint);
    opacity: 0.45;
    margin-bottom: 4px;
}

.state-icon-error[b-imjob2kkxe] {
    color: #EF4444;
    opacity: 1;
}

.state-title[b-imjob2kkxe] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.state-message[b-imjob2kkxe] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Grid ────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-imjob2kkxe] {
    overflow-x: auto;
}

/* ── Row actions hover-reveal ────────────────────────────── */
.row-actions[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* ── Status badges ───────────────────────────────────────── */
.status-badge[b-imjob2kkxe] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.status-badge--posted[b-imjob2kkxe] {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.status-badge--draft[b-imjob2kkxe] {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
}

.status-badge--voided[b-imjob2kkxe], .status-badge--inactive[b-imjob2kkxe] {
    background: var(--neutral-fill-rest);
    color: var(--neutral-foreground-hint);
}

.status-badge--pendingapproval[b-imjob2kkxe] {
    background: #FFF3CD;
    color: #856404;
}

.status-badge--rejected[b-imjob2kkxe] {
    background: #F8D7DA;
    color: #842029;
}

/* ── Entry Type badge ────────────────────────────────────── */
.entry-type-badge[b-imjob2kkxe] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.entry-type-badge--system[b-imjob2kkxe]     { background: var(--accent-fill-rest); color: var(--foreground-on-accent-rest); }
.entry-type-badge--manual[b-imjob2kkxe]     { background: var(--neutral-fill-rest); color: var(--neutral-foreground-rest); }
.entry-type-badge--reversal[b-imjob2kkxe]   { background: #fef3c7; color: #92400e; }
.entry-type-badge--adjustment[b-imjob2kkxe] { background: #ede9fe; color: #5b21b6; }
.entry-type-badge--closing[b-imjob2kkxe]    { background: #fee2e2; color: #991b1b; }
.entry-type-badge--opening[b-imjob2kkxe]    { background: #d1fae5; color: #065f46; }

/* ── Rejection reason banner ─────────────────────────────── */
.rejection-banner[b-imjob2kkxe] {
    background: #F8D7DA;
    color: #842029;
    border: 1px solid #F5C2C7;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Reject reason textarea ──────────────────────────────── */
.reject-reason-textarea[b-imjob2kkxe] {
    width: 100%;
    min-height: 96px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
}

/* ── Row action primary (submit) ─────────────────────────── */
.row-action-primary[b-imjob2kkxe] {
    color: #2563eb;
}

/* ── Row action success (approve) ────────────────────────── */
.row-action-success[b-imjob2kkxe] {
    color: #16a34a;
}

/* ── List Footer ─────────────────────────────────────────── */
.list-footer[b-imjob2kkxe] {
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-imjob2kkxe] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Dialog ──────────────────────────────────────────────── */
.dialog-form[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

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

.lines-label[b-imjob2kkxe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* ── Date filter ─────────────────────────────────────────── */
.date-filter-label[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

.date-filter-input[b-imjob2kkxe] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    width: 140px;
}

.date-filter-input:focus[b-imjob2kkxe] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
    border-color: var(--accent-stroke-control-rest);
}

/* ── Account select (native — avoids FAST event trapping in FluentDialog) ── */
.je-account-select[b-imjob2kkxe] {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
}

.je-account-select:focus[b-imjob2kkxe] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
    border-color: var(--accent-stroke-control-rest);
}

/* ── View Entry Dialog ───────────────────────────────────── */
.je-view-header[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.je-view-ref[b-imjob2kkxe] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.je-view-meta[b-imjob2kkxe] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--neutral-fill-rest);
    border-radius: 6px;
}

.je-view-meta-item[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 120px;
}

.je-view-meta-desc[b-imjob2kkxe] {
    flex: 1;
}

.je-view-meta-label[b-imjob2kkxe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.je-view-meta-value[b-imjob2kkxe] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.je-view-lines-section[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    overflow: hidden;
}

.je-view-col-header[b-imjob2kkxe],
.je-view-line-row[b-imjob2kkxe],
.je-view-totals-row[b-imjob2kkxe] {
    display: grid;
    grid-template-columns: 1fr 1fr 110px 110px;
    gap: 8px;
    padding: 8px 12px;
    align-items: center;
}

.je-view-col-header[b-imjob2kkxe] {
    background: var(--neutral-fill-rest);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.je-view-amount-col[b-imjob2kkxe] {
    text-align: right;
}

.je-view-line-row[b-imjob2kkxe] {
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.je-view-line-row:last-of-type[b-imjob2kkxe] {
    border-bottom: none;
}

.je-view-note[b-imjob2kkxe] {
    color: var(--neutral-foreground-hint);
    font-size: 12px;
}

.je-view-amount[b-imjob2kkxe] {
    text-align: right;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.je-view-totals-row[b-imjob2kkxe] {
    border-top: 2px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-fill-rest);
}

.je-view-totals-label[b-imjob2kkxe] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-align: right;
}

.je-view-total[b-imjob2kkxe] {
    text-align: right;
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* ── Journal Entry Dialog (wide layout) ──────────────────── */
.je-dialog-form[b-imjob2kkxe] {
    gap: 20px;
}

/* Header row: date picker + description (2-col) */
.je-header-row[b-imjob2kkxe] {
    display: grid;
    grid-template-columns: 192px 1fr;
    gap: 16px;
    align-items: end;
}

.je-header-date[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
}

.je-header-desc[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
}

/* Line column headers (desktop only) */
.line-header-row[b-imjob2kkxe] {
    display: grid;
    grid-template-columns: 1fr 1fr 110px 110px 36px;
    gap: 8px;
    padding: 0 4px 6px 4px;
    border-bottom: 2px solid var(--neutral-stroke-divider-rest);
}

.lh-account[b-imjob2kkxe],
.lh-amount[b-imjob2kkxe],
.lh-del[b-imjob2kkxe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lh-amount[b-imjob2kkxe] {
    text-align: right;
}

/* Line card — wraps 2 rows (account+amounts | note) */
.line-card[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    padding: 6px 4px;
    gap: 6px;
}

.line-card:last-of-type[b-imjob2kkxe] {
    border-bottom: none;
}

/* Row 1: Account | Cost Centre | Debit | Credit | Delete */
.line-row-top[b-imjob2kkxe] {
    display: grid;
    grid-template-columns: 1fr 1fr 110px 110px 36px;
    gap: 8px;
    align-items: center;
}

/* Row 2: Note — full width */
.line-row-note[b-imjob2kkxe] {
    padding-left: 2px;
    padding-right: 2px;
}

.lr-account[b-imjob2kkxe],
.lr-costcenter[b-imjob2kkxe],
.lr-amount[b-imjob2kkxe],
.lr-del[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lr-del[b-imjob2kkxe] {
    align-items: center;
    justify-content: center;
    padding-top: 18px; /* align with fields that have desktop column headers above */
}

/* Mobile-only field labels (hidden on desktop) */
.lr-label-mobile[b-imjob2kkxe] {
    display: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* ── Totals summary bar ──────────────────────────────────── */
.je-totals-bar[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 8px;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.je-totals-balanced[b-imjob2kkxe] {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.30);
}

.je-totals-unbalanced[b-imjob2kkxe] {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.30);
}

.je-totals-empty[b-imjob2kkxe] {
    background: var(--neutral-fill-rest);
    border: 1px solid var(--neutral-stroke-rest);
}

.je-totals-amounts[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.je-total-item[b-imjob2kkxe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.je-total-diff[b-imjob2kkxe] {
    opacity: 0.85;
}

.je-total-label[b-imjob2kkxe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.je-total-value[b-imjob2kkxe] {
    font-size: 20px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.je-diff-value[b-imjob2kkxe] {
    color: #D97706;
    font-size: 17px;
}

.je-total-sep[b-imjob2kkxe] {
    width: 1px;
    height: 40px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.je-balance-status[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.je-totals-balanced .je-balance-status[b-imjob2kkxe] {
    color: #10B981;
}

.je-totals-unbalanced .je-balance-status[b-imjob2kkxe] {
    color: #D97706;
}

.je-balance-hint[b-imjob2kkxe] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    font-weight: 400;
}

/* ── Split-button voucher-type menu ──────────────────────── */
.split-btn-group[b-imjob2kkxe] {
    position: relative;
    display: inline-flex;
}

.split-btn-group fluent-button:first-child[b-imjob2kkxe]::part(control) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.split-caret[b-imjob2kkxe]::part(control) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 8px;
    min-width: unset;
}

.split-menu[b-imjob2kkxe] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 180px;
    padding: 4px 0;
    margin-top: 2px;
}

.split-menu button[b-imjob2kkxe] {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.split-menu button:hover[b-imjob2kkxe] {
    background: var(--neutral-layer-3);
}

/* ── Cost centre select (native — matches je-account-select pattern) ── */
.je-costcenter-select[b-imjob2kkxe] {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
}

.je-costcenter-select:focus[b-imjob2kkxe] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
    border-color: var(--accent-stroke-control-rest);
}

/* ── Save-blocked hint (why Save is disabled) ────────────── */
.je-save-hint[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: #D97706;
    font-size: 13px;
}

/* ── Dialog inline error bar ─────────────────────────────── */
.dialog-error-bar[b-imjob2kkxe] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.30);
    color: #EF4444;
    font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-imjob2kkxe] {
        padding: 20px 16px;
    }

    .page-header[b-imjob2kkxe] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions[b-imjob2kkxe] {
        justify-content: flex-end;
    }

    .list-search[b-imjob2kkxe] {
        max-width: 100%;
    }

    .metrics-row[b-imjob2kkxe] {
        grid-template-columns: 1fr 1fr;
    }

    :deep(.row-actions)[b-imjob2kkxe] {
        opacity: 1 !important;
    }

    /* On small screens collapse the header row to single column */
    .je-header-row[b-imjob2kkxe] {
        grid-template-columns: 1fr;
    }

    /* Hide desktop column headers — mobile labels inside each cell replace them */
    .line-header-row[b-imjob2kkxe] {
        display: none;
    }

    /* Show inline mobile labels */
    .lr-label-mobile[b-imjob2kkxe] {
        display: block;
    }

    /* Stacked layout: account full-width, cost centre full-width, debit+credit side by side, delete top-right */
    .line-row-top[b-imjob2kkxe] {
        grid-template-columns: 1fr 1fr 36px;
    }

    .lr-account[b-imjob2kkxe],
    .lr-costcenter[b-imjob2kkxe] {
        grid-column: 1 / 3; /* full width */
    }

    .lr-del[b-imjob2kkxe] {
        padding-top: 0;
        align-self: start;
        margin-top: 4px;
    }

    /* Note label is always shown via FluentTextField Label prop */

    .je-totals-bar[b-imjob2kkxe] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .metrics-row[b-imjob2kkxe] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Accounting/OpeningBalance.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Accounting › Opening Balances — List Archetype
   Style contracts from AI-Agent-UI-Generation-Guide §7.3
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────── */
.page-container[b-1efyucmsqe] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.page-header[b-1efyucmsqe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-header-text[b-1efyucmsqe] { display: flex; flex-direction: column; gap: 4px; }

.page-title[b-1efyucmsqe] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle[b-1efyucmsqe] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-1efyucmsqe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Warning banner ──────────────────────────────────────── */
.ob-warning-banner[b-1efyucmsqe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 13px;
    color: #D97706;
}

.ob-warning-icon[b-1efyucmsqe] { flex-shrink: 0; color: #D97706; }

/* ── Metric cards ────────────────────────────────────────── */
.metrics-row[b-1efyucmsqe] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-1efyucmsqe] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.metric-icon-wrap[b-1efyucmsqe] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon-blue[b-1efyucmsqe]  { background: rgba(79, 70, 229, 0.12); color: #4F46E5; }
.metric-icon-green[b-1efyucmsqe] { background: rgba(16, 185, 129, 0.12); color: #059669; }
.metric-icon-red[b-1efyucmsqe]   { background: rgba(239, 68, 68, 0.12);  color: #DC2626; }
.metric-icon-amber[b-1efyucmsqe] { background: rgba(245, 158, 11, 0.12); color: #D97706; }

.metric-body[b-1efyucmsqe] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.metric-value[b-1efyucmsqe] {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.metric-title[b-1efyucmsqe]  { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); }
.metric-desc[b-1efyucmsqe]   { font-size: 11px; color: var(--neutral-foreground-hint); }

/* Balanced / unbalanced value tints */
.balance-ok[b-1efyucmsqe]   { color: #10B981; }
.balance-warn[b-1efyucmsqe] { color: #D97706; }
.text-ok[b-1efyucmsqe]      { color: #10B981; }
.text-warn[b-1efyucmsqe]    { color: #D97706; }

/* ── List container ──────────────────────────────────────── */
.list-container[b-1efyucmsqe] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 8px !important;
    overflow: hidden;
    padding: 0 !important;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.list-toolbar[b-1efyucmsqe] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-1efyucmsqe]      { flex: 1 1 200px; max-width: 300px; }
.toolbar-divider[b-1efyucmsqe]  { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }
.toolbar-filters[b-1efyucmsqe]  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Skeleton ────────────────────────────────────────────── */
.skeleton-list[b-1efyucmsqe] { display: flex; flex-direction: column; gap: 0; }
.skeleton-row[b-1efyucmsqe] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.skeleton-row:last-child[b-1efyucmsqe] { border-bottom: none; }

/* ── State boxes ─────────────────────────────────────────── */
.state-box[b-1efyucmsqe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}
.state-icon[b-1efyucmsqe]       { color: var(--neutral-foreground-hint); opacity: 0.45; margin-bottom: 4px; }
.state-icon-error[b-1efyucmsqe] { color: var(--error-foreground-rest);  opacity: 1; }
.state-title[b-1efyucmsqe]      { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-message[b-1efyucmsqe]    { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Data table ──────────────────────────────────────────── */
.grid-scroll-wrapper[b-1efyucmsqe] { overflow-x: auto; }

.ob-table[b-1efyucmsqe] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.ob-table-head th[b-1efyucmsqe] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-align: left;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ── Group header rows ───────────────────────────────────── */
.ob-group-header-row td[b-1efyucmsqe] {
    padding: 6px 12px;
    background: var(--neutral-fill-secondary-rest, rgba(0,0,0,0.03));
    border-top: 2px solid var(--neutral-stroke-divider-rest);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ob-group-header-inner[b-1efyucmsqe] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ob-group-count[b-1efyucmsqe] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.ob-group-total[b-1efyucmsqe] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.ob-group-total-label[b-1efyucmsqe] {
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    margin-right: 4px;
}

/* ── Data rows ───────────────────────────────────────────── */
.ob-data-row td[b-1efyucmsqe] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font-size: 14px;
    vertical-align: middle;
}

.ob-data-row:last-child td[b-1efyucmsqe] { border-bottom: none; }

.ob-data-row:hover td[b-1efyucmsqe] {
    background: var(--neutral-fill-stealth-hover, rgba(0,0,0,0.03));
}

.ob-account-name[b-1efyucmsqe] { font-weight: 500; }

/* Amount cell — read-only view */
.ob-amount-cell[b-1efyucmsqe] {
    text-align: right;
}

.amount-cell[b-1efyucmsqe] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Account type badges ─────────────────────────────────── */
.type-badge[b-1efyucmsqe] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.type-badge--asset[b-1efyucmsqe]     { background: rgba(16, 185, 129, 0.10); color: #059669; }
.type-badge--liability[b-1efyucmsqe] { background: rgba(239, 68, 68, 0.10);  color: #DC2626; }
.type-badge--equity[b-1efyucmsqe]    { background: rgba(99, 102, 241, 0.10);  color: #4F46E5; }
.type-badge--revenue[b-1efyucmsqe]   { background: rgba(16, 185, 129, 0.10); color: #059669; }
.type-badge--expense[b-1efyucmsqe]   { background: rgba(245, 158, 11, 0.10); color: #D97706; }

/* ── Footer ──────────────────────────────────────────────── */
.list-footer[b-1efyucmsqe] {
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-1efyucmsqe] { font-size: 12px; color: var(--neutral-foreground-hint); }

.ob-footer-unbalanced[b-1efyucmsqe] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #D97706;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .metrics-row[b-1efyucmsqe] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-1efyucmsqe] { padding: 20px 16px; }

    .page-header[b-1efyucmsqe] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions[b-1efyucmsqe] { justify-content: flex-end; }

    .metrics-row[b-1efyucmsqe] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .list-search[b-1efyucmsqe] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .toolbar-divider[b-1efyucmsqe] { display: none; }
    .toolbar-filters[b-1efyucmsqe] { width: 100%; }
}

@media (max-width: 480px) {
    .metrics-row[b-1efyucmsqe] { grid-template-columns: 1fr; }
}
/* /Pages/Accounting/Periods.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Accounting › Periods — List Archetype
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────── */
.page-container[b-887sn8trsf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.page-header[b-887sn8trsf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-header-text[b-887sn8trsf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-887sn8trsf] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle[b-887sn8trsf] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-887sn8trsf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI metric cards ────────────────────────────────────── */
.metrics-row[b-887sn8trsf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-887sn8trsf] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.metric-icon-wrap[b-887sn8trsf] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon-green[b-887sn8trsf] { background: rgba(16, 185, 129, 0.12); color: #059669; }
.metric-icon-amber[b-887sn8trsf] { background: rgba(245, 158, 11, 0.12);  color: #D97706; }
.metric-icon-red[b-887sn8trsf]   { background: rgba(239, 68, 68, 0.12);   color: #DC2626; }

.metric-body[b-887sn8trsf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-887sn8trsf] {
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.metric-title[b-887sn8trsf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-887sn8trsf] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── List container ──────────────────────────────────────── */
.list-container[b-887sn8trsf] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* ── Toolbar ─────────────────────────────────────────────── */
/*
  ⚠️ CRITICAL: Blazor scoped CSS (b-xxxx) does NOT land on web-component host
  elements (<fluent-search>, <fluent-select>). Correct patterns:
  1. Wrap FluentSearch in native <div class="list-search"> — gets scope attr.
  2. Use inline Style= on FluentSelect — bypasses all scope/specificity issues.
*/
.list-toolbar[b-887sn8trsf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-887sn8trsf] {
    flex: 1 1 200px;
    max-width: 300px;
}

.list-search fluent-search[b-887sn8trsf] {
    width: 100%;
}

.toolbar-divider[b-887sn8trsf] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-887sn8trsf] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton loader ─────────────────────────────────────── */
.skeleton-list[b-887sn8trsf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.skeleton-row[b-887sn8trsf] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-887sn8trsf] {
    border-bottom: none;
}

/* ── Empty / error state ─────────────────────────────────── */
.state-box[b-887sn8trsf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-887sn8trsf] {
    color: var(--neutral-foreground-hint);
    opacity: 0.45;
    margin-bottom: 4px;
}

.state-title[b-887sn8trsf] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.state-message[b-887sn8trsf] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Grid scroll wrapper ─────────────────────────────────── */
.grid-scroll-wrapper[b-887sn8trsf] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Safety net: fixed-px columns + fr columns (Period, Remarks) mixed with no
   min-width would otherwise squish proportionally on narrow viewports
   instead of triggering the scroll wrapper above. */
[b-887sn8trsf] table.periods-grid {
    min-width: 850px;
}

/* ── Row actions — hover-reveal (initial state only here)
   ⚠️ hover REVEAL rule lives in global-styles.css (tr.hover .row-actions)
   ⚠️ .row-action-btn border/hover/color styles also in global-styles.css ── */
.row-actions[b-887sn8trsf] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-887sn8trsf] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Period name ─────────────────────────────────────────── */
.period-name[b-887sn8trsf] {
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

/* ── Date cells ──────────────────────────────────────────── */
.date-cell[b-887sn8trsf] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

.date-cell--empty[b-887sn8trsf] {
    color: var(--neutral-foreground-hint);
}

/* ── Remarks cell ────────────────────────────────────────── */
.remarks-cell[b-887sn8trsf] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

/* ── Status badges ───────────────────────────────────────── */
.status-badge[b-887sn8trsf] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.status-badge--open[b-887sn8trsf] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.status-badge--softclosed[b-887sn8trsf] {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
}

.status-badge--hardclosed[b-887sn8trsf] {
    background: rgba(107, 114, 128, 0.12);
    color: var(--neutral-foreground-hint);
}

/* ── List footer ─────────────────────────────────────────── */
.list-footer[b-887sn8trsf] {
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-887sn8trsf] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Dialog form ─────────────────────────────────────────── */
.dialog-form[b-887sn8trsf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

/* Vertical form layout — label on top, input below */
.form-field[b-887sn8trsf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-887sn8trsf] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.required-marker[b-887sn8trsf] {
    color: var(--error-foreground-rest);
    margin-left: 2px;
}

/* Native select styled to match FluentUI inputs */
.native-select[b-887sn8trsf] {
    width: 100%;
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    appearance: auto;
    cursor: pointer;
    transition: border-color 150ms ease;
    outline: none;
}

.native-select:focus[b-887sn8trsf] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

/* Native textarea */
.native-textarea[b-887sn8trsf] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
    transition: border-color 150ms ease;
    outline: none;
}

.native-textarea:focus[b-887sn8trsf] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

/* Action hint text in dialog */
.action-hint[b-887sn8trsf] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-2);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0;
    border-left: 3px solid var(--accent-fill-rest);
}

/* Field validation error */
.field-error[b-887sn8trsf] {
    font-size: 12px;
    color: var(--error-foreground-rest);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .metrics-row[b-887sn8trsf] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-887sn8trsf] { padding: 20px 16px; }

    .page-header[b-887sn8trsf] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions[b-887sn8trsf] { justify-content: flex-end; }

    .metrics-row[b-887sn8trsf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .list-search[b-887sn8trsf] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .toolbar-divider[b-887sn8trsf] { display: none; }
    .toolbar-filters[b-887sn8trsf] { width: 100%; }

    /* Row actions always visible on touch */
    .row-actions[b-887sn8trsf] { opacity: 1; }

    .remarks-cell[b-887sn8trsf] { max-width: 120px; }
}

@media (max-width: 480px) {
    .metrics-row[b-887sn8trsf] { grid-template-columns: 1fr; }
    .metric-value[b-887sn8trsf] { font-size: 11px; }
}
/* /Pages/Accounting/Reports.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Accounting › Reports — Dashboard + Tabbed Reports Archetype
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────── */
.rpt-container[b-zj6ljktsw8] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.page-header[b-zj6ljktsw8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-header-text[b-zj6ljktsw8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-zj6ljktsw8] {
    font-size: 28px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle[b-zj6ljktsw8] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Error bar ───────────────────────────────────────────── */
.rpt-error-bar[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #EF4444;
    font-size: 13px;
}

/* ── Tabs wrap ───────────────────────────────────────────── */
.rpt-tabs-wrap[b-zj6ljktsw8] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

.rpt-tabs[b-zj6ljktsw8] {
    width: 100%;
}

/* ── Report toolbar (per-tab action bar) ─────────────────── */
.rpt-toolbar[b-zj6ljktsw8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    flex-wrap: wrap;
}

.rpt-report-title[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.rpt-toolbar-actions[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Filter group (date pickers + generate btn) ───────────── */
.rpt-filter-group[b-zj6ljktsw8] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Loading state ───────────────────────────────────────── */
.rpt-loading[b-zj6ljktsw8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 32px;
    color: var(--neutral-foreground-hint);
    font-size: 14px;
}

/* ── Tab placeholder (unloaded state) ────────────────────── */
.tab-placeholder[b-zj6ljktsw8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.placeholder-icon[b-zj6ljktsw8] {
    color: var(--neutral-foreground-hint);
    opacity: 0.4;
    margin-bottom: 4px;
}

.placeholder-title[b-zj6ljktsw8] {
    font-size: 17px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.placeholder-text[b-zj6ljktsw8] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 380px;
}

/* ── KPI metric cards row ────────────────────────────────── */
.rpt-kpi-row[b-zj6ljktsw8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.rpt-kpi-card[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 16px;
    transition: box-shadow 0.15s ease;
}

.rpt-kpi-card:hover[b-zj6ljktsw8] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.rpt-kpi-icon[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.rpt-kpi-icon--blue[b-zj6ljktsw8]  { background: rgba(59,130,246,0.12); color: #3B82F6; }
.rpt-kpi-icon--green[b-zj6ljktsw8] { background: rgba(16,185,129,0.12); color: #10B981; }
.rpt-kpi-icon--amber[b-zj6ljktsw8] { background: rgba(245,158,11,0.12);  color: #F59E0B; }
.rpt-kpi-icon--red[b-zj6ljktsw8]   { background: rgba(239,68,68,0.12);   color: #EF4444; }

.rpt-kpi-body[b-zj6ljktsw8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rpt-kpi-label[b-zj6ljktsw8] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.rpt-kpi-value[b-zj6ljktsw8] {
    font-size: 18px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rpt-kpi-value--sm[b-zj6ljktsw8]       { font-size: 14px; font-weight: 600; }
.rpt-kpi-value--positive[b-zj6ljktsw8] { color: #10B981; }
.rpt-kpi-value--negative[b-zj6ljktsw8] { color: #EF4444; }

/* ── Sub-sections ────────────────────────────────────────── */
.report-sub-section[b-zj6ljktsw8] {
    border-top: 1px solid var(--neutral-stroke-rest);
}

.report-sub-section:first-of-type[b-zj6ljktsw8] {
    border-top: none;
}

.rpt-sub-header[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.sub-section-title[b-zj6ljktsw8] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.rpt-sub-total[b-zj6ljktsw8] {
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.rpt-sub-total--positive[b-zj6ljktsw8] { color: #10B981; }

/* ── Report grid ─────────────────────────────────────────── */
.grid-scroll-wrapper[b-zj6ljktsw8] {
    overflow-x: auto;
}

[b-zj6ljktsw8] table.rpt-grid {
    width: 100%;
}

/* The NPA drill-down grid carries 700px of fixed-width columns (it was 540px before the
   Security Valuation Status column was added) plus a 1fr column. Without a min-width the
   1fr column collapses on narrower viewports and the fixed columns squash their headers
   instead of letting .grid-scroll-wrapper scroll — see [[feedback_fluentdatagrid_fixed_px_header_truncation]].
   700px fixed + 180px breathing room for the 1fr Category column. */
[b-zj6ljktsw8] table.rpt-grid-npa {
    min-width: 880px;
}

/* ── Status badges ───────────────────────────────────────── */
.status-badge[b-zj6ljktsw8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.status-badge--balanced[b-zj6ljktsw8] {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.status-badge--unbalanced[b-zj6ljktsw8] {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

/* ══════════════════════════════════════════════════════════
   Responsive overrides
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .rpt-kpi-row[b-zj6ljktsw8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Trial Balance "Why unbalanced?" diagnostics panel ───── */
.tb-diagnostics-panel[b-zj6ljktsw8] {
    padding: 12px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}

.tb-diagnostics-body[b-zj6ljktsw8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-diagnostics-header[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tb-diagnostics-summary[b-zj6ljktsw8] {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.tb-diagnostics-section-title[b-zj6ljktsw8] {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tb-diagnostics-list[b-zj6ljktsw8] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.tb-diagnostics-list li[b-zj6ljktsw8] {
    margin-bottom: 4px;
}

.tb-diagnostics-truncated[b-zj6ljktsw8] {
    margin: 0;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

/* ── Trial Balance filter bar ────────────────────────────── */
.tb-filter-bar[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}

.tb-filter-count[b-zj6ljktsw8] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-left: auto;
    white-space: nowrap;
}

.tb-grid-footer[b-zj6ljktsw8] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}

@media (max-width: 768px) {
    .rpt-container[b-zj6ljktsw8] {
        padding: 16px;
        gap: 16px;
    }

    .rpt-toolbar[b-zj6ljktsw8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .rpt-filter-group[b-zj6ljktsw8] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .rpt-filter-group fluent-date-picker[b-zj6ljktsw8],
    .rpt-filter-group > *[b-zj6ljktsw8] {
        width: 100% !important;
    }

    .rpt-kpi-row[b-zj6ljktsw8] {
        grid-template-columns: 1fr 1fr;
        padding: 12px;
        gap: 10px;
    }

    .rpt-kpi-card[b-zj6ljktsw8] {
        padding: 12px;
    }

    .rpt-kpi-value[b-zj6ljktsw8] {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .rpt-kpi-row[b-zj6ljktsw8] {
        grid-template-columns: 1fr;
    }

    .rpt-toolbar-actions[b-zj6ljktsw8] {
        width: 100%;
    }

    .rpt-toolbar-actions fluent-button[b-zj6ljktsw8] {
        flex: 1;
    }
}

/* ── CRAR compliance banner ──────────────────────────────── */
.crar-compliance-banner[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font-size: 14px;
    font-weight: 600;
}

.crar-banner--green[b-zj6ljktsw8] {
    background: rgba(16, 185, 129, 0.10);
    border-left: 4px solid #10B981;
    color: #059669;
}

.crar-banner--amber[b-zj6ljktsw8] {
    background: rgba(245, 158, 11, 0.10);
    border-left: 4px solid #F59E0B;
    color: #B45309;
}

.crar-banner--red[b-zj6ljktsw8] {
    background: rgba(239, 68, 68, 0.10);
    border-left: 4px solid #EF4444;
    color: #DC2626;
}

.crar-banner-label[b-zj6ljktsw8] {
    flex: 1;
}

.crar-banner-value[b-zj6ljktsw8] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.crar-banner-min[b-zj6ljktsw8] {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.75;
}

/* ── Info note ───────────────────────────────────────────── */
.rpt-info-note[b-zj6ljktsw8] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 20px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── Schedule III toggle (Balance Sheet / P&L toolbars) ──── */
.schedule-iii-toggle[b-zj6ljktsw8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.schedule-iii-toggle-label[b-zj6ljktsw8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.schedule-iii-section-header[b-zj6ljktsw8] {
    gap: 8px;
}

.schedule-iii-ref[b-zj6ljktsw8] {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    text-transform: none;
    letter-spacing: normal;
}

@media (max-width: 768px) {
    .schedule-iii-toggle[b-zj6ljktsw8] {
        width: 100%;
        justify-content: space-between;
        margin-left: 0 !important;
    }
}

/* ── Split-button export group ───────────────────────────── */
.split-btn-group[b-zj6ljktsw8] {
    position: relative;
    display: inline-flex;
}

.split-btn-group fluent-button:first-child[b-zj6ljktsw8]::part(control) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.split-caret[b-zj6ljktsw8]::part(control) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 8px;
    min-width: unset;
}

.split-menu[b-zj6ljktsw8] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 140px;
    padding: 4px 0;
    margin-top: 2px;
}

.split-menu button[b-zj6ljktsw8] {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    background: none;
    border: none;
    cursor: pointer;
}

.split-menu button:hover[b-zj6ljktsw8] {
    background: var(--neutral-layer-3);
}
/* /Pages/AuditLog/AuditLogDetailModal.razor.rz.scp.css */
/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.detail-skeleton[b-e8l3xfgbu1] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sk-section[b-e8l3xfgbu1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.sk-section:last-child[b-e8l3xfgbu1] { border-bottom: none; }

.sk-heading[b-e8l3xfgbu1] { height: 14px; width: 28%; border-radius: 4px; }

.sk-meta-row[b-e8l3xfgbu1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sk-pill[b-e8l3xfgbu1]     { height: 22px; width: 48px; border-radius: 12px; }
.sk-line[b-e8l3xfgbu1]     { height: 14px; border-radius: 4px; }
.sk-line-lg[b-e8l3xfgbu1]  { width: 260px; }
.sk-line-md[b-e8l3xfgbu1]  { width: 140px; }
.sk-line-sm[b-e8l3xfgbu1]  { width: 90px; }

.sk-heading[b-e8l3xfgbu1],
.sk-pill[b-e8l3xfgbu1],
.sk-line[b-e8l3xfgbu1] {
    background: linear-gradient(
        90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-e8l3xfgbu1 1.5s ease-in-out infinite;
}

@keyframes shimmer-b-e8l3xfgbu1 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Detail sections ─────────────────────────────────────────────────────── */
.detail-section[b-e8l3xfgbu1] {
    padding: 16px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.detail-section:last-child[b-e8l3xfgbu1] {
    border-bottom: none;
    padding-bottom: 4px;
}

.detail-section-title[b-e8l3xfgbu1] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
    margin: 0 0 10px 0;
}

/* ── Request meta lines ──────────────────────────────────────────────────── */
.detail-meta[b-e8l3xfgbu1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

.detail-meta:last-child[b-e8l3xfgbu1] { margin-bottom: 0; }

.detail-meta-spaced[b-e8l3xfgbu1] { gap: 4px 20px; }

.browser-info[b-e8l3xfgbu1] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.meta-item[b-e8l3xfgbu1] { white-space: nowrap; font-size: 13px; }
.meta-label[b-e8l3xfgbu1] { font-size: 13px; color: var(--neutral-foreground-hint); }

.badge-method[b-e8l3xfgbu1] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent-fill-rest);
    color: white;
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
    flex-shrink: 0;
}

.url-code[b-e8l3xfgbu1] {
    font-family: monospace;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    word-break: break-all;
}

.code-inline[b-e8l3xfgbu1] {
    font-family: monospace;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.code-muted[b-e8l3xfgbu1] { color: var(--neutral-foreground-hint); }

/* ── Code/pre blocks ─────────────────────────────────────────────────────── */
.code-block[b-e8l3xfgbu1] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 11px;
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
    margin: 8px 0 0;
    color: var(--neutral-foreground-rest);
    line-height: 1.6;
}

/* ── Collapsible details/summary ─────────────────────────────────────────── */
.collapsible[b-e8l3xfgbu1] { margin-top: 8px; }

.summary-danger[b-e8l3xfgbu1] {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--error-foreground-rest, #c62828);
    user-select: none;
    list-style: none;
}

.summary-neutral[b-e8l3xfgbu1] {
    cursor: pointer;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    user-select: none;
    list-style: none;
}

/* ── Action entries ──────────────────────────────────────────────────────── */
.action-entry[b-e8l3xfgbu1] {
    padding: 10px 0;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.action-entry:last-child[b-e8l3xfgbu1] { border-bottom: none; }

.action-name[b-e8l3xfgbu1] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    font-size: 13px;
}

.dur-badge[b-e8l3xfgbu1] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-hint);
    margin-left: 6px;
}

.hint-text[b-e8l3xfgbu1] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Entity change blocks ────────────────────────────────────────────────── */
.entity-block[b-e8l3xfgbu1] { margin-bottom: 16px; }
.entity-block:last-child[b-e8l3xfgbu1] { margin-bottom: 0; }

.entity-header[b-e8l3xfgbu1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    margin-bottom: 8px;
}

.change-badge[b-e8l3xfgbu1] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.ct-create[b-e8l3xfgbu1] { background: rgba(16, 185, 129, 0.12); color: #059669; }
.ct-update[b-e8l3xfgbu1] { background: rgba(245, 158, 11, 0.12);  color: #d97706; }
.ct-delete[b-e8l3xfgbu1] { background: rgba(239, 68, 68, 0.12);   color: #dc2626; }

/* ── Property change table ───────────────────────────────────────────────── */
.prop-table-wrap[b-e8l3xfgbu1] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest);
}

.prop-table[b-e8l3xfgbu1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.prop-table th[b-e8l3xfgbu1],
.prop-table td[b-e8l3xfgbu1] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    text-align: left;
}

.prop-table tr:last-child td[b-e8l3xfgbu1] { border-bottom: none; }

.prop-table th[b-e8l3xfgbu1] {
    background: var(--neutral-layer-2);
    font-weight: 700;
    color: var(--neutral-foreground-hint);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.val-before[b-e8l3xfgbu1] { color: var(--neutral-foreground-hint); }
.val-after[b-e8l3xfgbu1]  { color: #059669; font-weight: 500; }

/* ── Empty / error state ─────────────────────────────────────────────────── */
.detail-empty-state[b-e8l3xfgbu1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    gap: 12px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    font-size: 14px;
    opacity: 0.6;
}
/* /Pages/AuditLog/FieldChanges.razor.rz.scp.css */
/* ── User avatar cell ─────────────────────────────────────────────────────── */
.user-cell[b-32cuyv58z2] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.user-avatar[b-32cuyv58z2] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.12);
    color: #4F46E5;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-name[b-32cuyv58z2] {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Entity type badge ────────────────────────────────────────────────────── */
.entity-badge[b-32cuyv58z2] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.10);
    color: #4F46E5;
    white-space: nowrap;
}

/* ── Action type badges ───────────────────────────────────────────────────── */
.action-badge[b-32cuyv58z2] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.action-create[b-32cuyv58z2] { background: rgba(16, 185, 129, 0.12); color: #059669; }
.action-update[b-32cuyv58z2] { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.action-delete[b-32cuyv58z2] { background: rgba(239, 68, 68, 0.12);  color: #dc2626; }
.action-view[b-32cuyv58z2]   { background: rgba(107, 114, 128, 0.10); color: var(--neutral-foreground-hint); }

/* ── Old / New value display ─────────────────────────────────────────────── */
.audit-value[b-32cuyv58z2] {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    display: inline-block;
}

.val-before[b-32cuyv58z2] { color: #dc2626; }
.val-after[b-32cuyv58z2]  { color: #059669; }

/* ── Row actions (initial hidden — reveal in global-styles.css) ───────────── */
.row-actions[b-32cuyv58z2] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 150ms ease;
}

.row-action-btn[b-32cuyv58z2] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Detail dialog grid ───────────────────────────────────────────────────── */
.detail-grid[b-32cuyv58z2] {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px 16px;
    padding: 8px 4px;
    align-items: baseline;
}

.detail-label[b-32cuyv58z2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 2px;
}

.detail-value[b-32cuyv58z2] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
}

.detail-code[b-32cuyv58z2] {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: var(--neutral-layer-2);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--neutral-foreground-rest);
    word-break: break-all;
}

.detail-mono[b-32cuyv58z2] {
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .row-actions[b-32cuyv58z2] { opacity: 1; }

    .detail-grid[b-32cuyv58z2] {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }

    .detail-label[b-32cuyv58z2] {
        margin-top: 8px;
    }

    .audit-value[b-32cuyv58z2] { max-width: 80px; }
}
/* /Pages/AuditLog/Index.razor.rz.scp.css */
/* ── 4-column KPI override ────────────────────────────────────────────────── */
.kpi-4col[b-qgoe823y59] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) { .kpi-4col[b-qgoe823y59] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .kpi-4col[b-qgoe823y59] { grid-template-columns: minmax(0, 1fr); } }

/* ── Danger state for the errors metric card ─────────────────────────────── */
.metric-danger[b-qgoe823y59] {
    border-color: rgba(239, 68, 68, 0.30);
    background: rgba(239, 68, 68, 0.04);
}

.val-danger[b-qgoe823y59] {
    color: var(--error-foreground-rest, #c62828);
}

/* ── Small unit suffix (ms) ──────────────────────────────────────────────── */
.metric-unit[b-qgoe823y59] {
    font-size: 14px;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    letter-spacing: 0;
}

/* ── Metric card skeleton ────────────────────────────────────────────────── */
.metric-skeleton[b-qgoe823y59] {
    pointer-events: none;
}

.sk-icon-block[b-qgoe823y59] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
}

.sk-bar[b-qgoe823y59] {
    border-radius: 4px;
    margin-bottom: 6px;
}

.sk-value-bar[b-qgoe823y59] { height: 30px; width: 70%; }
.sk-title-bar[b-qgoe823y59] { height: 13px; width: 90%; }
.sk-desc-bar[b-qgoe823y59]  { height: 11px; width: 55%; margin-bottom: 0; }

.sk-icon-block[b-qgoe823y59],
.sk-bar[b-qgoe823y59] {
    background: linear-gradient(
        90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-qgoe823y59 1.5s ease-in-out infinite;
}

@keyframes shimmer-b-qgoe823y59 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Advanced filters panel ──────────────────────────────────────────────── */
.advanced-filters[b-qgoe823y59] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
}

/* ── User cell (avatar + name in grid row) ───────────────────────────────── */
.user-cell[b-qgoe823y59] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.user-avatar[b-qgoe823y59] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.12);
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    user-select: none;
}

.user-name[b-qgoe823y59] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.badge-cell[b-qgoe823y59] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.status-badge[b-qgoe823y59] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-success[b-qgoe823y59] { background: rgba(16, 185, 129, 0.12); color: #059669; }
.badge-warning[b-qgoe823y59] { background: rgba(245, 158, 11, 0.12);  color: #d97706; }
.badge-danger[b-qgoe823y59]  { background: rgba(239, 68, 68, 0.12);   color: #dc2626; }

.exc-tag[b-qgoe823y59] {
    font-family: monospace;
    font-size: 10px;
    letter-spacing: 0.03em;
}

/* ── Duration cell ───────────────────────────────────────────────────────── */
.dur-cell[b-qgoe823y59] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.dur-fast[b-qgoe823y59]   { color: var(--neutral-foreground-hint); }
.dur-medium[b-qgoe823y59] { color: #d97706; font-weight: 600; }
.dur-slow[b-qgoe823y59]   { color: #dc2626; font-weight: 600; }

/* ── Row actions (opacity:0 initial — hover reveal is in global-styles.css) ─ */
.row-actions[b-qgoe823y59] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 150ms ease;
}

.row-action-btn[b-qgoe823y59] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .advanced-filters[b-qgoe823y59] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .advanced-filters fluent-select[b-qgoe823y59] { width: 100% !important; }
    .advanced-filters fluent-button[b-qgoe823y59] { width: 100% !important; }

    .row-actions[b-qgoe823y59] { opacity: 1; }
}
/* /Pages/Collections/AgentCompliance.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Agent Compliance Registry — B-4 · NEW-11
   Archetype: CRUD list with filter bar, KPI row, and dialogs
   ═══════════════════════════════════════════════════════════ */

/* ── Page container ──────────────────────────────────────── */
.page-container[b-wdvxjew01d] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────── */
.page-header[b-wdvxjew01d] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-wdvxjew01d] { flex: 1; min-width: 0; }

.page-title[b-wdvxjew01d] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-subtitle[b-wdvxjew01d] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    line-height: 1.5;
}

.header-actions[b-wdvxjew01d] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Metrics row ─────────────────────────────────────────── */
.metrics-row[b-wdvxjew01d] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-wdvxjew01d] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
}

.metric-icon-wrap[b-wdvxjew01d] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon-blue[b-wdvxjew01d]   { background: #e8f0fe; }
.metric-icon-green[b-wdvxjew01d]  { background: #e6f4ea; }
.metric-icon-orange[b-wdvxjew01d] { background: #fff3e0; }
.metric-icon-red[b-wdvxjew01d]    { background: #fce8e6; }

.metric-body[b-wdvxjew01d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-wdvxjew01d] {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.metric-label[b-wdvxjew01d] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.metric-desc[b-wdvxjew01d] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── Filter bar ──────────────────────────────────────────── */
.filter-bar[b-wdvxjew01d] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.fluent-select[b-wdvxjew01d] {
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    height: 32px;
    cursor: pointer;
}

.overdue-toggle[b-wdvxjew01d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    white-space: nowrap;
}

/* ── Grid ────────────────────────────────────────────────── */
.grid-wrap[b-wdvxjew01d] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    overflow: hidden;
}

[b-wdvxjew01d] table.compliance-grid {
    width: 100%;
    min-width: 1320px;
}

.grid-scroll-wrapper[b-wdvxjew01d] {
    overflow-x: auto;
}

.grid-footer[b-wdvxjew01d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-2);
}

.results-count[b-wdvxjew01d] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge[b-wdvxjew01d] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-green[b-wdvxjew01d]  { background: #e6f4ea; color: #1e8e3e; }
.badge-orange[b-wdvxjew01d] { background: #fff3e0; color: #e65100; }
.badge-red[b-wdvxjew01d]    { background: #fce8e6; color: #c5221f; }
.badge-blue[b-wdvxjew01d]   { background: #e8f0fe; color: #1967d2; }
.badge-purple[b-wdvxjew01d] { background: #f3e8fd; color: #8430ce; }

/* ── Text helpers ────────────────────────────────────────── */
.text-success[b-wdvxjew01d] { color: #1e8e3e; font-size: 13px; }
.text-warning[b-wdvxjew01d] { color: #e65100; font-size: 13px; }
.text-danger[b-wdvxjew01d]  { color: #c5221f; font-size: 13px; }
.text-muted[b-wdvxjew01d]   { color: var(--neutral-foreground-hint); font-size: 13px; }

/* ── Action row ──────────────────────────────────────────── */
.action-row[b-wdvxjew01d] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ── Empty state ─────────────────────────────────────────── */
.state-box[b-wdvxjew01d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 8px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
}

.state-icon[b-wdvxjew01d] { margin-bottom: 8px; opacity: 0.5; }
.state-title[b-wdvxjew01d] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-wdvxjew01d] { font-size: 13px; color: var(--neutral-foreground-hint); max-width: 400px; }

/* ── Loading ─────────────────────────────────────────────── */
.loading-wrap[b-wdvxjew01d] {
    display: flex;
    justify-content: center;
    padding: 48px;
}

/* ── Dialog form ─────────────────────────────────────────── */
.dialog-form[b-wdvxjew01d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
    min-width: 360px;
}

.form-field[b-wdvxjew01d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-wdvxjew01d] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fluent-input[b-wdvxjew01d] {
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.fluent-input:focus[b-wdvxjew01d] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.field-error[b-wdvxjew01d] {
    font-size: 11px;
    color: #c5221f;
    margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-wdvxjew01d] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .page-container[b-wdvxjew01d] { padding: 16px; }
    .metrics-row[b-wdvxjew01d] { grid-template-columns: 1fr; }
}
/* /Pages/Collections/CaseDetail.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Collection Case Detail — activity history with action bar
   ═══════════════════════════════════════════════════════════ */

/* ── Page container ───────────────────────────────────────── */
.page-container[b-f6difhxjgx] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────── */
.page-header[b-f6difhxjgx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.header-left[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.case-title-block[b-f6difhxjgx] { min-width: 0; }

.page-title[b-f6difhxjgx] {
    font-size: 24px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-subtitle[b-f6difhxjgx] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Header action buttons ────────────────────────────────── */
.header-actions[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.hdr-btn[b-f6difhxjgx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
    white-space: nowrap;
}

.hdr-btn:hover[b-f6difhxjgx] {
    background: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-hover);
}

.hdr-btn--danger[b-f6difhxjgx] { color: #DC2626; border-color: rgba(220,38,38,0.3); }
.hdr-btn--danger:hover[b-f6difhxjgx] { background: rgba(220,38,38,0.06); border-color: #DC2626; }

.hdr-btn:disabled[b-f6difhxjgx] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Case status badge (subtitle line) ───────────────────────── */
.status-badge[b-f6difhxjgx] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}

.status-badge--open[b-f6difhxjgx]         { background: rgba(79,70,229,0.12);   color: #4F46E5; }
.status-badge--contacted[b-f6difhxjgx]    { background: rgba(245,158,11,0.12);  color: #D97706; }
.status-badge--promisetopay[b-f6difhxjgx] { background: rgba(59,130,246,0.12);  color: #2563EB; }
.status-badge--legal[b-f6difhxjgx]        { background: rgba(239,68,68,0.14);   color: #DC2626; }
.status-badge--closed[b-f6difhxjgx]       { background: rgba(16,185,129,0.12);  color: #059669; }
.status-badge--writtenoff[b-f6difhxjgx]   { background: rgba(239,68,68,0.12);   color: #EF4444; }
.status-badge--repossessed[b-f6difhxjgx]  { background: rgba(139,92,246,0.12);  color: #7C3AED; }
.status-badge--otssettled[b-f6difhxjgx]   { background: rgba(20,184,166,0.12);  color: #0D9488; font-weight: 600; }

.hdr-divider[b-f6difhxjgx] {
    width: 1px;
    height: 28px;
    background: var(--neutral-stroke-divider-rest);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Case action toolbar (above KPI cards) ────────────────── */
.case-action-bar[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Loading state ────────────────────────────────────────── */
.loading-state[b-f6difhxjgx] {
    display: flex;
    justify-content: center;
    padding: 60px;
}

/* ── KPI bar (5-col) ──────────────────────────────────────── */
.metrics-row[b-f6difhxjgx] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.metric-card[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    min-width: 0;
    overflow: hidden;
}

.metric-icon-wrap[b-f6difhxjgx] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap[b-f6difhxjgx]  svg { fill: currentColor !important; }

.metric-icon-blue[b-f6difhxjgx]   { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-f6difhxjgx]  { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-amber[b-f6difhxjgx]  { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-icon-red[b-f6difhxjgx]    { background: rgba(239,68,68,0.12);  color: #DC2626; }

.metric-body[b-f6difhxjgx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.metric-value[b-f6difhxjgx] {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.metric-value--sm[b-f6difhxjgx]      { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-value--warning[b-f6difhxjgx] { color: #D97706; }
.metric-value--danger[b-f6difhxjgx]  { color: #DC2626; }

.metric-title[b-f6difhxjgx] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
}

/* ── Empty states ─────────────────────────────────────────── */
.state-box[b-f6difhxjgx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-box-sm[b-f6difhxjgx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 32px;
    text-align: center;
}

.state-icon[b-f6difhxjgx]  { color: var(--neutral-foreground-hint); opacity: 0.35; }
.state-title[b-f6difhxjgx] { font-size: 15px; font-weight: 500; color: var(--neutral-foreground-hint); margin: 0; }

/* ── List container (wraps each tab's grid) ───────────────── */
.list-container[b-f6difhxjgx] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-top: 16px;
}

/* ── Grid scroll wrapper ──────────────────────────────────── */
.grid-scroll-wrapper[b-f6difhxjgx] { overflow-x: auto; }

[b-f6difhxjgx] table.field-visit-grid      { min-width: 780px; }
[b-f6difhxjgx] table.payment-promise-grid  { min-width: 600px; }
[b-f6difhxjgx] table.legal-case-grid       { min-width: 780px; }
[b-f6difhxjgx] table.contact-history-grid  { min-width: 520px; }

/* ── Bucket badges ────────────────────────────────────────── */
.bucket-badge[b-f6difhxjgx] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 2px;
}

.bucket-badge--bucket1[b-f6difhxjgx] { background: rgba(16,185,129,0.12); color: #10B981; }
.bucket-badge--bucket2[b-f6difhxjgx] { background: rgba(245,158,11,0.12); color: #D97706; }
.bucket-badge--bucket3[b-f6difhxjgx] { background: rgba(239,68,68,0.12);  color: #EF4444; }
.bucket-badge--npa[b-f6difhxjgx]     { background: rgba(139,0,0,0.12);    color: #8B0000; }

/* ── Status badges ────────────────────────────────────────── */
.status-badge[b-f6difhxjgx] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge--open[b-f6difhxjgx]       { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.status-badge--contacted[b-f6difhxjgx]  { background: rgba(16,185,129,0.12); color: #10B981; }
.status-badge--resolved[b-f6difhxjgx]   { background: var(--neutral-fill-rest); color: var(--neutral-foreground-hint); }
.status-badge--writtenoff[b-f6difhxjgx] { background: rgba(239,68,68,0.12);  color: #EF4444; }
.status-badge--repossessed[b-f6difhxjgx] { background: rgba(139,0,0,0.12);   color: #8B0000; }

/* ── PTP fulfilled / pending badges ──────────────────────── */
.ptp-badge[b-f6difhxjgx] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.ptp-badge--fulfilled[b-f6difhxjgx] { background: rgba(16,185,129,0.12); color: #059669; }
.ptp-badge--pending[b-f6difhxjgx]   { background: rgba(245,158,11,0.12); color: #D97706; }

/* ── Amount cell ──────────────────────────────────────────── */
.amount-cell[b-f6difhxjgx] { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Dialog form ──────────────────────────────────────────── */
.dialog-form[b-f6difhxjgx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.form-field[b-f6difhxjgx] { display: flex; flex-direction: column; width: 100%; }

.form-row[b-f6difhxjgx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label[b-f6difhxjgx] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

.dialog-warning[b-f6difhxjgx] {
    font-size: 13px;
    color: #D97706;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0;
}

/* ── List toolbar (used in write-off approvals tab) ──────── */
.list-toolbar[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
}

/* ── btn-danger-outline (reject button variant) ───────────── */
.btn-danger-outline[b-f6difhxjgx] {
    border-color: rgba(220,38,38,0.3) !important;
    color: #DC2626 !important;
}
.btn-danger-outline:hover[b-f6difhxjgx] { background: rgba(220,38,38,0.06) !important; border-color: #DC2626 !important; }

/* ── Write-Off Approval card ──────────────────────────────── */
.approval-card[b-f6difhxjgx] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.approval-card-header[b-f6difhxjgx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.approval-summary[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.approval-amount[b-f6difhxjgx] {
    font-size: 22px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.approval-status-badge[b-f6difhxjgx] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.approval-status-badge--pendinglevel1[b-f6difhxjgx],
.approval-status-badge--pendinglevel2[b-f6difhxjgx],
.approval-status-badge--pendinglevel3[b-f6difhxjgx] { background: rgba(245,158,11,0.12); color: #D97706; }
.approval-status-badge--completed[b-f6difhxjgx]     { background: rgba(16,185,129,0.12);  color: #059669; }
.approval-status-badge--rejected[b-f6difhxjgx]      { background: rgba(239,68,68,0.12);   color: #EF4444; }

.approval-meta-row[b-f6difhxjgx] {
    display: flex;
    gap: 6px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.approval-label[b-f6difhxjgx] {
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Approval chain (vertical stepper) ───────────────────── */
.approval-chain[b-f6difhxjgx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
}

.approval-level[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
    transition: background 150ms ease;
}

.approval-level:last-child[b-f6difhxjgx] { border-bottom: none; }

.level-dot[b-f6difhxjgx] {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--neutral-stroke-rest);
    border: 2px solid var(--neutral-stroke-rest);
}

.approval-level--approved  .level-dot[b-f6difhxjgx] { background: #10B981; border-color: #10B981; }
.approval-level--active    .level-dot[b-f6difhxjgx] { background: #4F46E5; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.2); }
.approval-level--rejected  .level-dot[b-f6difhxjgx] { background: #EF4444; border-color: #EF4444; }
.approval-level--waiting   .level-dot[b-f6difhxjgx] { background: var(--neutral-layer-2); border-color: var(--neutral-stroke-rest); }

.approval-level--approved[b-f6difhxjgx]  { background: rgba(16,185,129,0.03); }
.approval-level--active[b-f6difhxjgx]    { background: rgba(79,70,229,0.04); }
.approval-level--rejected[b-f6difhxjgx]  { background: rgba(239,68,68,0.04); }
.approval-level--waiting[b-f6difhxjgx]   { background: var(--neutral-layer-1); opacity: 0.65; }

.level-body[b-f6difhxjgx] { flex: 1; min-width: 0; }

.level-title[b-f6difhxjgx] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.level-detail[b-f6difhxjgx] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

.level-actions[b-f6difhxjgx] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Approval result banners ──────────────────────────────── */
.approval-complete-banner[b-f6difhxjgx],
.approval-rejected-banner[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
}

.approval-complete-banner[b-f6difhxjgx] {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    color: #059669;
}

.approval-complete-banner[b-f6difhxjgx]  svg { fill: #10B981 !important; }

.approval-rejected-banner[b-f6difhxjgx] {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.2);
    color: #DC2626;
}

.approval-rejected-banner[b-f6difhxjgx]  svg { fill: #EF4444 !important; }

/* ── Write-off summary row (total written off / remaining) ── */
.writeoff-summary-row[b-f6difhxjgx] {
    display: flex;
    gap: 12px;
    margin: 16px 16px 16px;
}

.writeoff-summary-item[b-f6difhxjgx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest);
}

.writeoff-summary-item--written[b-f6difhxjgx] {
    background: rgba(239,68,68,0.05);
    border-color: rgba(239,68,68,0.2);
}

.writeoff-summary-item--remaining[b-f6difhxjgx] {
    background: rgba(16,185,129,0.05);
    border-color: rgba(16,185,129,0.2);
}

.wos-label[b-f6difhxjgx] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wos-amount[b-f6difhxjgx] {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.writeoff-summary-item--written .wos-amount[b-f6difhxjgx] { color: #EF4444; }
.writeoff-summary-item--remaining .wos-amount[b-f6difhxjgx] { color: #10B981; }

/* ── Write-off history list ───────────────────────────────── */
.writeoff-history[b-f6difhxjgx] {
    margin: 20px 16px 0;
    border-top: 1px solid var(--neutral-stroke-rest);
    padding-top: 14px;
}

.writeoff-history-title[b-f6difhxjgx] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.writeoff-history-row[b-f6difhxjgx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    gap: 12px;
}

.writeoff-history-row:last-child[b-f6difhxjgx] { border-bottom: none; }

.wh-left[b-f6difhxjgx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wh-amount[b-f6difhxjgx] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.wh-reason[b-f6difhxjgx] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.wh-right[b-f6difhxjgx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.wh-date[b-f6difhxjgx] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Dialog field hint ─────────────────────────────────────── */
.field-hint[b-f6difhxjgx] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 3px;
    display: block;
}

/* ── SARFAESI: expiry badge (3-tier) ─────────────────────────── */
.expiry-badge[b-f6difhxjgx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.expiry-badge--neutral[b-f6difhxjgx] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
}

.expiry-badge--warning[b-f6difhxjgx] {
    background: rgba(245,158,11,0.1);
    color: #B45309;
}

.expiry-badge--error[b-f6difhxjgx] {
    background: rgba(239,68,68,0.1);
    color: #DC2626;
}

.expiry-badge[b-f6difhxjgx]  svg { fill: currentColor !important; }

/* ── SARFAESI: danger zone (FluentCard Class= needs ::deep — see AGENTS.md) ── */
.list-container[b-f6difhxjgx]  .danger-zone {
    background: rgba(239,68,68,0.04);
    border: 1px solid rgba(239,68,68,0.25);
}

.danger-heading[b-f6difhxjgx] {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #DC2626;
}

.danger-description[b-f6difhxjgx] {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
    .metrics-row[b-f6difhxjgx] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-f6difhxjgx] { padding: 16px; }
    .page-header[b-f6difhxjgx]    { flex-direction: column; align-items: stretch; }
    .header-actions[b-f6difhxjgx] { flex-wrap: wrap; }
    .metrics-row[b-f6difhxjgx]    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .form-row[b-f6difhxjgx]       { grid-template-columns: 1fr; }
    .hdr-btn span[b-f6difhxjgx]   { display: none; }
}

@media (max-width: 480px) {
    .metrics-row[b-f6difhxjgx] { grid-template-columns: 1fr; }
}
/* /Pages/Collections/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Collections — List View Archetype (AI-Agent-UI-Generation-Guide §7.3)
   ═══════════════════════════════════════════════════════════ */

/* ── Page container ───────────────────────────────────────── */
.page-container[b-3jvwe5ql0a] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────── */
.page-header[b-3jvwe5ql0a] { margin-bottom: 0; }

.header-content[b-3jvwe5ql0a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-3jvwe5ql0a] { flex: 1; }

.page-title[b-3jvwe5ql0a] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-3jvwe5ql0a] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-3jvwe5ql0a] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Error bar ────────────────────────────────────────────── */
.error-bar[b-3jvwe5ql0a] { margin-bottom: 0; }

/* ── Metric cards (4-col KPI row) ────────────────────────── */
.metrics-row[b-3jvwe5ql0a] {
    display: grid;
    /* minmax(0, 1fr) prevents tracks from expanding beyond their share */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    /* Guarantee the row never pushes past the container */
    width: 100%;
    box-sizing: border-box;
}

.metric-card[b-3jvwe5ql0a] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    /* Allow card to shrink below its natural content width */
    min-width: 0;
    overflow: hidden;
}

.metric-card:hover[b-3jvwe5ql0a] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-3jvwe5ql0a] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Makes SVG icons inside the icon wrap fill with currentColor */
.metric-icon-wrap[b-3jvwe5ql0a]  svg { fill: currentColor !important; }

.metric-icon-blue[b-3jvwe5ql0a]   { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-3jvwe5ql0a]  { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-amber[b-3jvwe5ql0a]  { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-icon-red[b-3jvwe5ql0a]    { background: rgba(239,68,68,0.12);  color: #DC2626; }

.metric-body[b-3jvwe5ql0a] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Allow text content to shrink and clip rather than overflow the card */
    min-width: 0;
    overflow: hidden;
}

.metric-value[b-3jvwe5ql0a] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.metric-value--sm[b-3jvwe5ql0a]      { font-size: 10px; }
.metric-value--warning[b-3jvwe5ql0a] { color: #D97706; }
.metric-value--danger[b-3jvwe5ql0a]  { color: #DC2626; }

.metric-title[b-3jvwe5ql0a] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    /* Allow wrapping so long labels don't force column expansion */
    white-space: normal;
    line-height: 1.3;
}

.metric-desc[b-3jvwe5ql0a] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── List container ───────────────────────────────────────── */
.list-container[b-3jvwe5ql0a] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Toolbar ──────────────────────────────────────────────── */
.list-toolbar[b-3jvwe5ql0a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    position: relative;
    z-index: 10;
}

/*
 * ⚠️ NBFC-CRITICAL: Wrap FluentSearch in <div class="list-search"> so that the
 * Blazor scope attribute [b-xxxx] lands on this native element, enabling flex
 * sizing. FluentSearch is a web component — Class= is silently ignored on the
 * host element and scope attributes are NOT injected into shadow DOM.
 */
.list-search[b-3jvwe5ql0a] { flex: 1 1 200px; max-width: 300px; }

.toolbar-divider[b-3jvwe5ql0a] { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }

.toolbar-filters[b-3jvwe5ql0a] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Skeleton loader ──────────────────────────────────────── */
.skeleton-list[b-3jvwe5ql0a] { display: flex; flex-direction: column; }

.skeleton-row[b-3jvwe5ql0a] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-3jvwe5ql0a] { border-bottom: none; }

.skeleton-persona[b-3jvwe5ql0a] { display: flex; align-items: center; gap: 8px; }

/* ── Empty state ──────────────────────────────────────────── */
.state-box[b-3jvwe5ql0a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-3jvwe5ql0a]  { color: var(--neutral-foreground-hint); opacity: 0.4; margin-bottom: 4px; }
.state-title[b-3jvwe5ql0a] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-hint[b-3jvwe5ql0a]  { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Grid scroll wrapper ──────────────────────────────────── */
.grid-scroll-wrapper[b-3jvwe5ql0a] { overflow-x: auto; }

[b-3jvwe5ql0a] table.cases-grid { min-width: 1240px; }

/* ── Row actions — INITIAL STATE (opacity hidden in scoped CSS)
     ⚠️ The *reveal* rule (tr.hover) MUST live in wwwroot/global-styles.css ONLY.
     FluentDataGrid v4.11+ sets display:contents on <tr>, so tr:hover pseudo
     never fires. Only the JS-injected ".hover" class works — and because it is
     injected via JS at runtime (not Blazor scoped), it has no [b-xxxx] attribute
     and therefore cannot be targeted from this scoped stylesheet.               */
.row-actions[b-3jvwe5ql0a] {
    opacity: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

/* ── Row action buttons (native <button>, NOT FluentButton) ── */
.row-action-btn[b-3jvwe5ql0a] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-rest);
    transition: background 150ms ease, color 150ms ease;
}

.row-action-btn:hover[b-3jvwe5ql0a] { background: var(--neutral-fill-hover); }

.row-action-danger[b-3jvwe5ql0a]       { color: #DC2626; }
.row-action-danger:hover[b-3jvwe5ql0a] { background: rgba(220,38,38,0.08); color: #DC2626; }

.row-action-btn:disabled[b-3jvwe5ql0a] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Bucket badges ────────────────────────────────────────── */
.bucket-badge[b-3jvwe5ql0a] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.bucket-badge--bucket1[b-3jvwe5ql0a] { background: rgba(16,185,129,0.12); color: #10B981; }
.bucket-badge--bucket2[b-3jvwe5ql0a] { background: rgba(245,158,11,0.12); color: #D97706; }
.bucket-badge--bucket3[b-3jvwe5ql0a] { background: rgba(239,68,68,0.12);  color: #EF4444; }
.bucket-badge--npa[b-3jvwe5ql0a]     { background: rgba(139,0,0,0.12);    color: #8B0000; }

/* ── Status badges ────────────────────────────────────────── */
.status-badge[b-3jvwe5ql0a] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge--open[b-3jvwe5ql0a]         { background: rgba(79,70,229,0.12);   color: #4F46E5; }
.status-badge--contacted[b-3jvwe5ql0a]    { background: rgba(245,158,11,0.12);  color: #D97706; }
.status-badge--promisetopay[b-3jvwe5ql0a] { background: rgba(59,130,246,0.12);  color: #2563EB; }
.status-badge--legal[b-3jvwe5ql0a]        { background: rgba(239,68,68,0.14);   color: #DC2626; }
.status-badge--closed[b-3jvwe5ql0a]       { background: rgba(16,185,129,0.12);  color: #059669; }
.status-badge--writtenoff[b-3jvwe5ql0a]   { background: rgba(239,68,68,0.12);   color: #EF4444; }
.status-badge--repossessed[b-3jvwe5ql0a]  { background: rgba(139,92,246,0.12);  color: #7C3AED; }
.status-badge--otssettled[b-3jvwe5ql0a]   { background: rgba(20,184,166,0.12);  color: #0D9488; }
/* legacy aliases kept for non-collection usage */
.status-badge--active[b-3jvwe5ql0a]       { background: rgba(16,185,129,0.12);  color: #10B981; }
.status-badge--resolved[b-3jvwe5ql0a]     { background: var(--neutral-fill-rest); color: var(--neutral-foreground-hint); }

/* ── Two-line stacked cell ────────────────────────────────── */
.cell-stack[b-3jvwe5ql0a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-secondary[b-3jvwe5ql0a] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    line-height: 1.3;
}

.dpd-primary[b-3jvwe5ql0a] {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

/* ── Clickable customer name ──────────────────────────────── */
.case-link-btn[b-3jvwe5ql0a] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.case-link-btn:hover[b-3jvwe5ql0a] { text-decoration: underline; color: var(--accent-foreground-rest); }

/* ── Amount cell ──────────────────────────────────────────── */
.amount-cell[b-3jvwe5ql0a] { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Pagination footer ────────────────────────────────────── */
.list-footer[b-3jvwe5ql0a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.pager-count[b-3jvwe5ql0a] { font-size: 13px; color: var(--neutral-foreground-hint); }

.pager-controls[b-3jvwe5ql0a] { display: flex; align-items: center; gap: 4px; }

.pager-pages[b-3jvwe5ql0a] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    padding: 0 8px;
    min-width: 60px;
    text-align: center;
}

.pager-btn[b-3jvwe5ql0a] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
    transition: background 150ms ease;
}

.pager-btn:hover:not([disabled])[b-3jvwe5ql0a] { background: var(--neutral-layer-2); }
.pager-btn[disabled][b-3jvwe5ql0a]             { opacity: 0.4; cursor: not-allowed; }

/* ── Dialog form — vertical stacked layout ────────────────── */
.dialog-form[b-3jvwe5ql0a] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.form-field[b-3jvwe5ql0a] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-row[b-3jvwe5ql0a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dialog-warning[b-3jvwe5ql0a] {
    font-size: 13px;
    color: #D97706;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .metrics-row[b-3jvwe5ql0a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-3jvwe5ql0a]    { padding: 16px; }
    .header-content[b-3jvwe5ql0a]    { flex-direction: column; align-items: stretch; }
    .header-actions[b-3jvwe5ql0a]    { justify-content: flex-end; flex-wrap: wrap; width: 100%; }
    .page-actions[b-3jvwe5ql0a]      { justify-content: flex-end; flex-wrap: wrap; width: 100%; }
    .metrics-row[b-3jvwe5ql0a]       { grid-template-columns: 1fr 1fr; gap: 12px; }
    .metric-value[b-3jvwe5ql0a]      { font-size: 11px; }
    .list-search[b-3jvwe5ql0a]       { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-3jvwe5ql0a]   { display: none; }
    .toolbar-filters[b-3jvwe5ql0a]   { width: 100%; }
    .form-row[b-3jvwe5ql0a]          { grid-template-columns: 1fr; }
    /* ⚠️ MOBILE: always show actions — no hover on touch screens */
    .row-actions[b-3jvwe5ql0a]       { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-3jvwe5ql0a] { grid-template-columns: 1fr; }
    .page-title[b-3jvwe5ql0a]  { font-size: 22px; }
}

/* ── Create Case dialog: loan account search ──────────────── */
.dialog-form-body[b-3jvwe5ql0a] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialog-footer[b-3jvwe5ql0a] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
    position: sticky;
    bottom: 0;
}

.form-label[b-3jvwe5ql0a] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

.form-hint[b-3jvwe5ql0a] {
    display: block;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
}

.account-search-row[b-3jvwe5ql0a] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.account-search-input-wrap[b-3jvwe5ql0a] {
    flex: 1;
}

/* Search result dropdown */
.account-results[b-3jvwe5ql0a] {
    margin-top: 6px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    overflow: hidden;
    background: var(--neutral-layer-1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-height: 240px;
    overflow-y: auto;
}

.account-result-item[b-3jvwe5ql0a] {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background 0.12s;
}

.account-result-item:last-child[b-3jvwe5ql0a] {
    border-bottom: none;
}

.account-result-item:hover[b-3jvwe5ql0a],
.account-result-item:focus[b-3jvwe5ql0a] {
    background: var(--neutral-layer-2);
    outline: none;
}

.account-result-name[b-3jvwe5ql0a] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    margin-bottom: 2px;
}

.account-result-meta[b-3jvwe5ql0a] {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.account-result-branch[b-3jvwe5ql0a] {
    background: var(--neutral-layer-3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.account-no-results[b-3jvwe5ql0a] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 8px 0 0;
    font-style: italic;
}

/* Account status badge (inside search results and confirm card) */
.account-status-badge[b-3jvwe5ql0a] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.account-status-badge--active[b-3jvwe5ql0a]     { background: rgba(16,185,129,0.12); color: #059669; }
.account-status-badge--closed[b-3jvwe5ql0a]     { background: rgba(107,114,128,0.12); color: #6b7280; }
.account-status-badge--defaulted[b-3jvwe5ql0a]  { background: rgba(239,68,68,0.12);  color: #dc2626; }
.account-status-badge--foreclosed[b-3jvwe5ql0a] { background: rgba(239,68,68,0.12);  color: #dc2626; }
.account-status-badge--npa[b-3jvwe5ql0a]        { background: rgba(239,68,68,0.12);  color: #dc2626; }

/* Confirmation card */
.account-confirm-card[b-3jvwe5ql0a] {
    margin-top: 10px;
    border: 1px solid rgba(16,185,129,0.4);
    border-radius: 8px;
    background: rgba(16,185,129,0.06);
    overflow: hidden;
}

.account-confirm-header[b-3jvwe5ql0a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(16,185,129,0.1);
    border-bottom: 1px solid rgba(16,185,129,0.3);
}

.account-confirm-name[b-3jvwe5ql0a] {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.account-confirm-clear[b-3jvwe5ql0a] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.12s, background 0.12s;
}

.account-confirm-clear:hover[b-3jvwe5ql0a] {
    color: #dc2626;
    background: rgba(239,68,68,0.1);
}

.account-confirm-details[b-3jvwe5ql0a] {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-confirm-row[b-3jvwe5ql0a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-confirm-key[b-3jvwe5ql0a] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    min-width: 96px;
}

.account-confirm-val[b-3jvwe5ql0a] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    font-weight: 500;
}
/* /Pages/Collections/RecoveryTracker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Recovery Tracker — Drill-down breakdown
   Archetype: Dashboard + embedded List Views (read-only)
   ═══════════════════════════════════════════════════════════ */

/* ── Page container ──────────────────────────────────────── */
.page-container[b-0s605p2h2e] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────── */
.page-header[b-0s605p2h2e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-0s605p2h2e] {
    flex: 1;
    min-width: 0;
}

.page-title[b-0s605p2h2e] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-subtitle[b-0s605p2h2e] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    line-height: 1.5;
}

.header-actions[b-0s605p2h2e] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Metric cards ─────────────────────────────────────────── */
/* minmax(0,1fr) forces truly equal columns — plain 1fr respects min-content */
.metrics-row[b-0s605p2h2e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-0s605p2h2e] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.metric-card:hover[b-0s605p2h2e] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-0s605p2h2e] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-0s605p2h2e]  { background: rgba(26,115,232,0.10); }
.metric-icon-red[b-0s605p2h2e]   { background: rgba(217,48,37,0.10); }
.metric-icon-amber[b-0s605p2h2e] { background: rgba(232,166,0,0.10); }
.metric-icon-green[b-0s605p2h2e] { background: rgba(30,142,62,0.10); }

.metric-body[b-0s605p2h2e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.metric-value[b-0s605p2h2e] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-title[b-0s605p2h2e] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-0s605p2h2e] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Tabs container ───────────────────────────────────────── */
.tabs-container[b-0s605p2h2e] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Tab body ─────────────────────────────────────────────── */
.tab-body[b-0s605p2h2e] {
    display: flex;
    flex-direction: column;
}

.tab-search[b-0s605p2h2e] {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Tab footer ───────────────────────────────────────────── */
.tab-footer[b-0s605p2h2e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
    gap: 8px;
}

.results-count[b-0s605p2h2e] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Amount column ────────────────────────────────────────── */
.amount[b-0s605p2h2e] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

/* ── Agent avatar ─────────────────────────────────────────── */
.agent-avatar[b-0s605p2h2e] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(79,70,229,0.12);
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
    user-select: none;
}

/* ── Status badges ────────────────────────────────────────── */
.status-badge[b-0s605p2h2e] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-open[b-0s605p2h2e]          { background: rgba(26,115,232,0.12);  color: #1565c0; }
.status-contacted[b-0s605p2h2e]     { background: rgba(232,166,0,0.12);   color: #9a6700; }
.status-promisetopay[b-0s605p2h2e]  { background: rgba(30,142,62,0.12);   color: #1b5e20; }
.status-legal[b-0s605p2h2e]         { background: rgba(217,48,37,0.12);   color: #c62828; }
.status-closed[b-0s605p2h2e]        { background: rgba(100,100,100,0.12); color: var(--neutral-foreground-hint); }
.status-writtenoff[b-0s605p2h2e]    { background: rgba(100,50,50,0.12);   color: #7c2d2d; }
.status-repossessed[b-0s605p2h2e]   { background: rgba(120,50,120,0.12);  color: #7c2d7c; }

/* ── Skeleton loading state ───────────────────────────────── */
.skeleton-list[b-0s605p2h2e] {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-row[b-0s605p2h2e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.skeleton-circle[b-0s605p2h2e] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

/* ── Empty state ──────────────────────────────────────────── */
.state-box[b-0s605p2h2e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    text-align: center;
}

.state-box-card[b-0s605p2h2e] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
}

.state-icon[b-0s605p2h2e] {
    opacity: 0.35;
    margin-bottom: 4px;
}

.state-title[b-0s605p2h2e] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-message[b-0s605p2h2e] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    max-width: 420px;
    line-height: 1.6;
}

/* ── Grid scroll wrapper ──────────────────────────────────── */
.grid-scroll-wrapper[b-0s605p2h2e] { overflow-x: auto; }

[b-0s605p2h2e] table.bucket-grid { min-width: 560px; }
[b-0s605p2h2e] table.agent-grid  { min-width: 680px; }
[b-0s605p2h2e] table.status-grid { min-width: 480px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .metrics-row[b-0s605p2h2e] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-0s605p2h2e] { padding: 20px 16px; gap: 16px; }
    .page-header[b-0s605p2h2e] { flex-direction: column; }
    .header-actions[b-0s605p2h2e] { width: 100%; justify-content: flex-end; }
    .tab-footer[b-0s605p2h2e] { flex-direction: column; gap: 8px; align-items: flex-start; }
}

@media (max-width: 480px) {
    .metrics-row[b-0s605p2h2e] { grid-template-columns: minmax(0, 1fr); }
    .metric-card[b-0s605p2h2e] { padding: 16px; gap: 12px; }
    .metric-value[b-0s605p2h2e] { font-size: 11px; }
    .metric-icon-wrap[b-0s605p2h2e] { width: 44px; height: 44px; }
    .page-container[b-0s605p2h2e] { padding: 16px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .metric-card[b-0s605p2h2e] { transition: none; }
}
/* /Pages/Communication/Index.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-tljlgf5f9q] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-tljlgf5f9q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-tljlgf5f9q] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-tljlgf5f9q] {
    font-size: 28px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}
.page-subtitle[b-tljlgf5f9q] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}
.page-actions[b-tljlgf5f9q] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Send panel ─────────────────────────────────────────────────────────── */
.send-panel[b-tljlgf5f9q] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.send-panel-header[b-tljlgf5f9q] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neutral-foreground-rest);
}
.send-title[b-tljlgf5f9q] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* ── Form fields (2-col vertical stacked grid) ─────────────────────────── */
.send-fields[b-tljlgf5f9q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    align-items: start;
}
.form-field[b-tljlgf5f9q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-field--full[b-tljlgf5f9q] { grid-column: 1 / -1; }

.send-action[b-tljlgf5f9q] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── Metric cards (4-col KPI row) ────────────────────────────────────── */
.metrics-row[b-tljlgf5f9q] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.metric-card[b-tljlgf5f9q] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}
.metric-card:hover[b-tljlgf5f9q] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}
.metric-icon-wrap[b-tljlgf5f9q] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metric-icon-wrap[b-tljlgf5f9q]  svg { fill: currentColor !important; }
.metric-icon-blue[b-tljlgf5f9q]   { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-purple[b-tljlgf5f9q] { background: rgba(139,92,246,0.12); color: #7C3AED; }
.metric-icon-red[b-tljlgf5f9q]    { background: rgba(239,68,68,0.12);  color: #DC2626; }
.metric-body[b-tljlgf5f9q] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.metric-value[b-tljlgf5f9q] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.metric-value--danger[b-tljlgf5f9q] { color: #DC2626; }
.metric-title[b-tljlgf5f9q] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}
.metric-desc[b-tljlgf5f9q] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container ─────────────────────────────────────────────────────── */
.list-container[b-tljlgf5f9q] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.list-toolbar[b-tljlgf5f9q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}
.list-search[b-tljlgf5f9q] { flex: 1 1 200px; max-width: 300px; }
.toolbar-divider[b-tljlgf5f9q] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}
.toolbar-filters[b-tljlgf5f9q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.toolbar-btn[b-tljlgf5f9q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}
.toolbar-btn:hover[b-tljlgf5f9q] { background: var(--neutral-layer-2); border-color: var(--neutral-stroke-hover); }
.toolbar-btn--accent[b-tljlgf5f9q] {
    background: var(--accent-fill-rest);
    color: #fff;
    border-color: var(--accent-fill-rest);
}
.toolbar-btn--accent:hover[b-tljlgf5f9q] { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.toolbar-btn svg[b-tljlgf5f9q] { fill: currentColor !important; }

/* ── Skeleton loader ────────────────────────────────────────────────────── */
.skeleton-list[b-tljlgf5f9q] { display: flex; flex-direction: column; }
.skeleton-row[b-tljlgf5f9q] {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.skeleton-row:last-child[b-tljlgf5f9q] { border-bottom: none; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.state-box[b-tljlgf5f9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 32px;
    color: var(--neutral-foreground-hint);
}
.state-icon[b-tljlgf5f9q] { opacity: 0.35; }
.state-title[b-tljlgf5f9q] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}
.state-message[b-tljlgf5f9q] { font-size: 14px; margin: 0; text-align: center; }

/* ── Grid scroll wrapper ────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-tljlgf5f9q] { overflow-x: auto; }
[b-tljlgf5f9q] table.communication-grid { min-width: 900px; }

/* ── List footer ────────────────────────────────────────────────────────── */
.list-footer[b-tljlgf5f9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.results-count[b-tljlgf5f9q] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Status badges ──────────────────────────────────────────────────────── */
.status-badge[b-tljlgf5f9q] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge--sent[b-tljlgf5f9q]    { background: rgba(16,185,129,0.12); color: #059669; }
.status-badge--failed[b-tljlgf5f9q]  { background: rgba(239,68,68,0.12);  color: #dc2626; }
.status-badge--pending[b-tljlgf5f9q] { background: rgba(245,158,11,0.12); color: #d97706; }
.status-badge--queued[b-tljlgf5f9q]  { background: rgba(99,102,241,0.12); color: #4f46e5; }
/* Standard pattern: status-{state} (used by FluentDataGrid grid rows) */
.status-sent[b-tljlgf5f9q]    { background: rgba(16,185,129,0.12); color: #059669; }
.status-failed[b-tljlgf5f9q]  { background: rgba(239,68,68,0.12);  color: #dc2626; }
.status-pending[b-tljlgf5f9q] { background: rgba(245,158,11,0.12); color: #d97706; }
.status-queued[b-tljlgf5f9q]  { background: rgba(99,102,241,0.12); color: #4f46e5; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .send-fields[b-tljlgf5f9q] { grid-template-columns: 1fr 1fr; }
    .metrics-row[b-tljlgf5f9q] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .page-container[b-tljlgf5f9q] { padding: 16px; gap: 16px; }
    .send-fields[b-tljlgf5f9q] { grid-template-columns: 1fr; }
    .metrics-row[b-tljlgf5f9q] { grid-template-columns: 1fr 1fr; gap: 12px; }
    .list-search[b-tljlgf5f9q] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-tljlgf5f9q] { display: none; }
    .toolbar-filters[b-tljlgf5f9q] { width: 100%; }
}
@media (max-width: 480px) {
    .metrics-row[b-tljlgf5f9q] { grid-template-columns: 1fr; }
}

/* ── Communication detail dialog ────────────────────────────────────────── */
.comm-detail[b-tljlgf5f9q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}
.comm-detail-row[b-tljlgf5f9q] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    align-items: baseline;
    font-size: 14px;
}
.comm-detail-label[b-tljlgf5f9q] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 2px;
}
.comm-detail-error span:last-child[b-tljlgf5f9q] {
    color: #DC2626;
}
.comm-detail-code[b-tljlgf5f9q] {
    font-family: monospace;
    font-size: 12px;
    background: var(--neutral-layer-4);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}
.comm-detail-body-label[b-tljlgf5f9q] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
    border-top: 1px solid var(--neutral-stroke-rest);
    padding-top: 12px;
}
.comm-detail-body[b-tljlgf5f9q] {
    font-family: monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--neutral-layer-4);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0;
    color: var(--neutral-foreground-rest);
    max-height: 300px;
    overflow-y: auto;
}
/* /Pages/Communication/Logs.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-zmfvg36q8r] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-zmfvg36q8r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.title-section[b-zmfvg36q8r]  { display: flex; flex-direction: column; gap: 4px; }
.header-actions[b-zmfvg36q8r] { display: flex; gap: 8px; align-items: center; }
.page-title[b-zmfvg36q8r] {
    font-size: 28px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}
.page-subtitle[b-zmfvg36q8r] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Metric cards (4-col KPI row) ────────────────────────────────────────── */
.metrics-row[b-zmfvg36q8r] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.metric-card[b-zmfvg36q8r] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}
.metric-card:hover[b-zmfvg36q8r] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}
.metric-icon-wrap[b-zmfvg36q8r] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metric-icon-wrap[b-zmfvg36q8r]  svg { fill: currentColor !important; }
.metric-icon-blue[b-zmfvg36q8r]  { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-zmfvg36q8r] { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-red[b-zmfvg36q8r]   { background: rgba(239,68,68,0.12);  color: #dc2626; }
.metric-icon-amber[b-zmfvg36q8r] { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-body[b-zmfvg36q8r] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.metric-value[b-zmfvg36q8r] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.metric-title[b-zmfvg36q8r] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}
.metric-desc[b-zmfvg36q8r] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container ──────────────────────────────────────────────────────── */
.list-container[b-zmfvg36q8r] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

/* ── List toolbar ────────────────────────────────────────────────────────── */
.list-toolbar[b-zmfvg36q8r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.list-toolbar-row[b-zmfvg36q8r] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.list-search[b-zmfvg36q8r] { width: 100%; }
.toolbar-divider[b-zmfvg36q8r] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}
.toolbar-filters[b-zmfvg36q8r] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.toolbar-filters > *[b-zmfvg36q8r] { flex-shrink: 0; }
.toolbar-actions[b-zmfvg36q8r] { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* ── Channel avatar (first grid col) ─────────────────────────────────────── */
.channel-avatar[b-zmfvg36q8r] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin: 0 auto;
}
.channel-avatar-sms[b-zmfvg36q8r]       { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.channel-avatar-email[b-zmfvg36q8r]     { background: rgba(16,185,129,0.12); color: #059669; }
.channel-avatar-whatsapp[b-zmfvg36q8r]  { background: rgba(5,150,105,0.12);  color: #047857; }

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-badge[b-zmfvg36q8r] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge.status-sent[b-zmfvg36q8r]    { background: rgba(16,185,129,0.12); color: #059669; }
.status-badge.status-failed[b-zmfvg36q8r]  { background: rgba(239,68,68,0.12);  color: #dc2626; }
.status-badge.status-pending[b-zmfvg36q8r] { background: rgba(217,119,6,0.12);  color: #D97706; }
.status-badge.status-queued[b-zmfvg36q8r]  { background: rgba(107,114,128,0.12); color: var(--neutral-foreground-hint); }

/* ── Channel badges ──────────────────────────────────────────────────────── */
.channel-badge[b-zmfvg36q8r] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.channel-badge.channel-sms[b-zmfvg36q8r]       { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.channel-badge.channel-email[b-zmfvg36q8r]     { background: rgba(16,185,129,0.12); color: #059669; }
.channel-badge.channel-whatsapp[b-zmfvg36q8r]  { background: rgba(5,150,105,0.12);  color: #047857; }

/* ── Inline error / template text ───────────────────────────────────────── */
.error-text[b-zmfvg36q8r] {
    color: #dc2626;
    font-size: 12px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.template-name[b-zmfvg36q8r] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-zmfvg36q8r] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-zmfvg36q8r] table.logs-grid { min-width: 1000px; }

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton-list[b-zmfvg36q8r] { display: flex; flex-direction: column; }
.skeleton-row[b-zmfvg36q8r] {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.skeleton-row:last-child[b-zmfvg36q8r] { border-bottom: none; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.state-box[b-zmfvg36q8r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 32px;
    color: var(--neutral-foreground-hint);
}
.state-icon[b-zmfvg36q8r] { opacity: 0.35; }
.state-title[b-zmfvg36q8r] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}
.state-message[b-zmfvg36q8r] { font-size: 14px; margin: 0; text-align: center; }

/* ── List footer ─────────────────────────────────────────────────────────── */
.list-footer[b-zmfvg36q8r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.results-count[b-zmfvg36q8r] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .metrics-row[b-zmfvg36q8r] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-zmfvg36q8r] { padding: 16px; gap: 16px; }
    .page-header[b-zmfvg36q8r] { flex-direction: column; align-items: flex-start; }
    .metrics-row[b-zmfvg36q8r] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .list-toolbar[b-zmfvg36q8r] { gap: 8px; padding: 10px 12px; }
    .list-search[b-zmfvg36q8r] { max-width: 100%; }
    .list-footer[b-zmfvg36q8r] { flex-direction: column; gap: 8px; padding: 12px; }
}

@media (max-width: 480px) {
    .metrics-row[b-zmfvg36q8r] { grid-template-columns: 1fr; }
    .toolbar-filters[b-zmfvg36q8r] { width: 100%; }
}

/* ── Communication detail dialog ────────────────────────────────────────── */
.comm-detail[b-zmfvg36q8r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}
.comm-detail-row[b-zmfvg36q8r] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    align-items: baseline;
    font-size: 14px;
}
.comm-detail-label[b-zmfvg36q8r] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 2px;
}
.comm-detail-error span:last-child[b-zmfvg36q8r] {
    color: #DC2626;
}
.comm-detail-code[b-zmfvg36q8r] {
    font-family: monospace;
    font-size: 12px;
    background: var(--neutral-layer-4);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}
.comm-detail-body-label[b-zmfvg36q8r] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
    border-top: 1px solid var(--neutral-stroke-rest);
    padding-top: 12px;
}
.comm-detail-body[b-zmfvg36q8r] {
    font-family: monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--neutral-layer-4);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0;
    color: var(--neutral-foreground-rest);
    max-height: 300px;
    overflow-y: auto;
}
/* /Pages/Communication/ReminderQueue.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-jlk52yzbdf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-jlk52yzbdf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.title-section[b-jlk52yzbdf]  { display: flex; flex-direction: column; gap: 4px; }
.header-actions[b-jlk52yzbdf] { display: flex; gap: 8px; align-items: center; }
.page-title[b-jlk52yzbdf] {
    font-size: 28px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}
.page-subtitle[b-jlk52yzbdf] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Metric cards (4-col KPI row) ────────────────────────────────────────── */
.metrics-row[b-jlk52yzbdf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.metric-card[b-jlk52yzbdf] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}
.metric-card:hover[b-jlk52yzbdf] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}
.metric-icon-wrap[b-jlk52yzbdf] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metric-icon-wrap[b-jlk52yzbdf]  svg { fill: currentColor !important; }
.metric-icon-blue[b-jlk52yzbdf]  { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-jlk52yzbdf] { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-red[b-jlk52yzbdf]   { background: rgba(239,68,68,0.12);  color: #dc2626; }
.metric-icon-amber[b-jlk52yzbdf] { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-body[b-jlk52yzbdf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.metric-value[b-jlk52yzbdf] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.metric-title[b-jlk52yzbdf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}
.metric-desc[b-jlk52yzbdf] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container ──────────────────────────────────────────────────────── */
.list-container[b-jlk52yzbdf] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

/* ── List toolbar ────────────────────────────────────────────────────────── */
.list-toolbar[b-jlk52yzbdf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.list-toolbar-row[b-jlk52yzbdf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.list-search[b-jlk52yzbdf] { width: 100%; }
.toolbar-filters[b-jlk52yzbdf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.toolbar-filters > *[b-jlk52yzbdf] { flex-shrink: 0; }
.toolbar-actions[b-jlk52yzbdf] { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* ── Channel avatar (first grid col) ─────────────────────────────────────── */
.channel-avatar[b-jlk52yzbdf] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin: 0 auto;
}
.channel-avatar-sms[b-jlk52yzbdf]       { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.channel-avatar-email[b-jlk52yzbdf]     { background: rgba(16,185,129,0.12); color: #059669; }
.channel-avatar-whatsapp[b-jlk52yzbdf]  { background: rgba(5,150,105,0.12);  color: #047857; }

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-badge[b-jlk52yzbdf] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge.status-sent[b-jlk52yzbdf]       { background: rgba(16,185,129,0.12); color: #059669; }
.status-badge.status-failed[b-jlk52yzbdf]     { background: rgba(239,68,68,0.12);  color: #dc2626; }
.status-badge.status-pending[b-jlk52yzbdf]    { background: rgba(217,119,6,0.12);  color: #D97706; }
.status-badge.status-cancelled[b-jlk52yzbdf]  { background: rgba(107,114,128,0.12); color: var(--neutral-foreground-hint); }
.status-badge.status-suppressed[b-jlk52yzbdf] { background: rgba(107,114,128,0.12); color: var(--neutral-foreground-hint); }

/* ── Channel badges ──────────────────────────────────────────────────────── */
.channel-badge[b-jlk52yzbdf] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.channel-badge.channel-sms[b-jlk52yzbdf]       { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.channel-badge.channel-email[b-jlk52yzbdf]     { background: rgba(16,185,129,0.12); color: #059669; }
.channel-badge.channel-whatsapp[b-jlk52yzbdf]  { background: rgba(5,150,105,0.12);  color: #047857; }

/* ── Inline error / template text ───────────────────────────────────────── */
.error-text[b-jlk52yzbdf] {
    color: #dc2626;
    font-size: 12px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.template-name[b-jlk52yzbdf] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-jlk52yzbdf] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-jlk52yzbdf] table.reminders-grid { min-width: 1150px; }

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton-list[b-jlk52yzbdf] { display: flex; flex-direction: column; }
.skeleton-row[b-jlk52yzbdf] {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.skeleton-row:last-child[b-jlk52yzbdf] { border-bottom: none; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.state-box[b-jlk52yzbdf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 32px;
    color: var(--neutral-foreground-hint);
}
.state-icon[b-jlk52yzbdf] { opacity: 0.35; }
.state-title[b-jlk52yzbdf] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}
.state-message[b-jlk52yzbdf] { font-size: 14px; margin: 0; text-align: center; }

/* ── List footer ─────────────────────────────────────────────────────────── */
.list-footer[b-jlk52yzbdf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.results-count[b-jlk52yzbdf] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .metrics-row[b-jlk52yzbdf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-jlk52yzbdf] { padding: 16px; gap: 16px; }
    .page-header[b-jlk52yzbdf] { flex-direction: column; align-items: flex-start; }
    .metrics-row[b-jlk52yzbdf] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .list-toolbar[b-jlk52yzbdf] { gap: 8px; padding: 10px 12px; }
    .list-search[b-jlk52yzbdf] { max-width: 100%; }
    .list-footer[b-jlk52yzbdf] { flex-direction: column; gap: 8px; padding: 12px; }
}

@media (max-width: 480px) {
    .metrics-row[b-jlk52yzbdf] { grid-template-columns: 1fr; }
    .toolbar-filters[b-jlk52yzbdf] { width: 100%; }
}

/* ── Detail dialog ───────────────────────────────────────────────────────── */
.comm-detail[b-jlk52yzbdf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}
.comm-detail-row[b-jlk52yzbdf] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    align-items: baseline;
    font-size: 14px;
}
.comm-detail-label[b-jlk52yzbdf] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 2px;
}
.comm-detail-error span:last-child[b-jlk52yzbdf] {
    color: #DC2626;
}
/* /Pages/Communication/Scheduled.razor.rz.scp.css */
/* ── KPI METRICS ROW ──────────────────────────────────────────────────────── */
.metrics-row[b-7i7jgggjcx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-7i7jgggjcx] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.metric-icon-wrap[b-7i7jgggjcx] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-7i7jgggjcx]   { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.metric-icon-amber[b-7i7jgggjcx]  { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.metric-icon-red[b-7i7jgggjcx]    { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.metric-icon-green[b-7i7jgggjcx]  { background: color-mix(in srgb, #059669 15%, transparent); color: #059669; }
.metric-icon-gray[b-7i7jgggjcx]   { background: color-mix(in srgb, #6b7280 15%, transparent); color: #6b7280; }

.metric-body[b-7i7jgggjcx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-7i7jgggjcx] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.metric-title[b-7i7jgggjcx] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-7i7jgggjcx] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-7i7jgggjcx] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-7i7jgggjcx] table.scheduled-grid { min-width: 1100px; }

/* ── STATUS BADGES ────────────────────────────────────────────────────────── */
.status-badge.status-active[b-7i7jgggjcx] { background: var(--colorStatusSuccessBackground1); color: var(--colorStatusSuccessForeground1); }
.status-badge.status-paused[b-7i7jgggjcx] { background: var(--colorStatusWarningBackground1); color: var(--colorStatusWarningForeground1); }
.status-badge.status-completed[b-7i7jgggjcx] { background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2); }
.status-badge.status-cancelled[b-7i7jgggjcx] { background: var(--colorStatusDangerBackground1); color: var(--colorStatusDangerForeground1); }
/* /Pages/Communication/Templates.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-wft1mlp298] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-wft1mlp298] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-wft1mlp298] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-wft1mlp298] {
    font-size: 28px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}
.page-subtitle[b-wft1mlp298] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}
.page-actions[b-wft1mlp298] { display: flex; gap: 8px; align-items: center; }

/* ── Page header layout ────────────────────────────────────────────────── */
.title-section[b-wft1mlp298] { display: flex; flex-direction: column; gap: 4px; }
.header-actions[b-wft1mlp298] { display: flex; gap: 8px; align-items: center; }

/* ── Toolbar extras ─────────────────────────────────────────────────────── */
.toolbar-divider[b-wft1mlp298] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}
.toolbar-filters[b-wft1mlp298] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Dialog form ────────────────────────────────────────────────────────── */
.dialog-form[b-wft1mlp298] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-grid[b-wft1mlp298] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
}
.form-field[b-wft1mlp298] { display: flex; flex-direction: column; gap: 4px; }
.form-field--full[b-wft1mlp298] { grid-column: 1 / -1; }
.form-hint[b-wft1mlp298] { font-size: 12px; color: var(--neutral-foreground-hint); margin: 0; }
.form-hint code[b-wft1mlp298] { font-size: 11px; font-family: 'Cascadia Code', Consolas, monospace; }
.form-active-row[b-wft1mlp298] { padding-top: 8px; }
.delete-warning[b-wft1mlp298] { font-size: 13px; color: var(--error-foreground-rest); margin-top: 8px; }

/* ── Variables panel ─────────────────────────────────────────────────────── */
.vars-footer[b-wft1mlp298] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.vars-panel[b-wft1mlp298] {
    background: var(--neutral-fill-secondary-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vars-group[b-wft1mlp298] { display: flex; flex-direction: column; gap: 6px; }
.vars-group-label[b-wft1mlp298] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color: var(--neutral-foreground-hint);
}
.vars-chips[b-wft1mlp298] { display: flex; flex-wrap: wrap; gap: 6px; }
.var-chip[b-wft1mlp298] {
    display: inline-flex;
    align-items: center;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1;
}
.var-chip:hover[b-wft1mlp298] { background: var(--accent-fill-rest); border-color: var(--accent-fill-rest); }
.var-chip:hover code[b-wft1mlp298] { color: white; }
.var-chip code[b-wft1mlp298] {
    font-size: 12px;
    font-family: 'Cascadia Code', Consolas, monospace;
    color: var(--accent-fill-rest);
}

/* ── Metric cards (3-col KPI row) ────────────────────────────────────── */
.metrics-row[b-wft1mlp298] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.metric-card[b-wft1mlp298] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}
.metric-card:hover[b-wft1mlp298] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}
.metric-icon-wrap[b-wft1mlp298] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metric-icon-wrap[b-wft1mlp298]  svg { fill: currentColor !important; }
.metric-icon-blue[b-wft1mlp298]  { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-wft1mlp298] { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-amber[b-wft1mlp298] { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-body[b-wft1mlp298] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.metric-value[b-wft1mlp298] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.metric-title[b-wft1mlp298] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}
.metric-desc[b-wft1mlp298] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container ─────────────────────────────────────────────────────── */
.list-container[b-wft1mlp298] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

/* ── List toolbar ───────────────────────────────────────────────────────── */
.list-toolbar[b-wft1mlp298] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.list-search[b-wft1mlp298] { flex: 1; max-width: 320px; }
.results-count[b-wft1mlp298] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin-left: auto;
}

/* ── Skeleton loader ────────────────────────────────────────────────────── */
.skeleton-list[b-wft1mlp298] { display: flex; flex-direction: column; }
.skeleton-row[b-wft1mlp298] {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.skeleton-row:last-child[b-wft1mlp298] { border-bottom: none; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.state-box[b-wft1mlp298] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 32px;
    color: var(--neutral-foreground-hint);
}
.state-icon[b-wft1mlp298] { opacity: 0.35; }
.state-icon-error[b-wft1mlp298] { opacity: 0.6; }
.state-title[b-wft1mlp298] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}
.state-message[b-wft1mlp298] { font-size: 14px; margin: 0; text-align: center; }

/* ── Row actions (hover reveal) ─────────────────────────────────────────── */
.row-actions[b-wft1mlp298] {
    display: flex;
    gap: 2px;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.row-action-btn[b-wft1mlp298] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    transition: background 0.12s, color 0.12s;
}
.row-action-btn:hover[b-wft1mlp298] { background: var(--neutral-fill-hover); color: var(--accent-fill-rest); }
.row-action-btn svg[b-wft1mlp298] { fill: currentColor !important; }

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-wft1mlp298] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-wft1mlp298] table.templates-grid { min-width: 1100px; }

/* ── List footer ────────────────────────────────────────────────────────── */
.list-footer[b-wft1mlp298] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-wft1mlp298] { padding: 16px; gap: 16px; }
    .form-grid[b-wft1mlp298] { grid-template-columns: 1fr; }
    .toolbar-filters[b-wft1mlp298] { width: 100%; }
    .metrics-row[b-wft1mlp298] { grid-template-columns: 1fr 1fr; gap: 12px; }
    .list-search[b-wft1mlp298] { max-width: 100%; }
}
@media (max-width: 480px) {
    .metrics-row[b-wft1mlp298] { grid-template-columns: 1fr; }
}
/* /Pages/Compliance/CbwtrBatches.razor.rz.scp.css */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  CBWTR Batches  –  scoped component styles                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Page shell ─────────────────────────────────────────────────── */
.page-container[b-pgsdq48skx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────────────── */
.page-header[b-pgsdq48skx] { display: flex; flex-direction: column; gap: 8px; }

.header-content[b-pgsdq48skx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-pgsdq48skx] { display: flex; flex-direction: column; gap: 4px; }

.page-title[b-pgsdq48skx] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
}

.page-description[b-pgsdq48skx] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-pgsdq48skx] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Info / Error bars ───────────────────────────────────────────── */
.info-bar[b-pgsdq48skx], .error-bar[b-pgsdq48skx] { border-radius: 6px; }

/* ── Metrics row ─────────────────────────────────────────────────── */
.metrics-row[b-pgsdq48skx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-pgsdq48skx] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    transition: box-shadow 0.15s ease;
}

.metric-card:hover[b-pgsdq48skx] { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.icon-wrap[b-pgsdq48skx] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-blue[b-pgsdq48skx]   { background: rgba(0,120,212,.12); color: #0078d4; }
.icon-amber[b-pgsdq48skx]  { background: rgba(200,110,0,.12);  color: #c86e00; }
.icon-purple[b-pgsdq48skx] { background: rgba(100,0,200,.12);  color: #6400c8; }
.icon-green[b-pgsdq48skx]  { background: rgba(0,128,0,.12);    color: #007a00; }

.metric-body[b-pgsdq48skx] { display: flex; flex-direction: column; gap: 2px; }

.metric-value[b-pgsdq48skx] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

.metric-label[b-pgsdq48skx] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Generate panel ──────────────────────────────────────────────── */
.generate-panel[b-pgsdq48skx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
}

.generate-panel-header[b-pgsdq48skx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    width: 100%;
}

.generate-fields[b-pgsdq48skx] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1;
}

.generate-action[b-pgsdq48skx] { display: flex; align-items: flex-end; }

/* ── Form helpers ────────────────────────────────────────────────── */
.form-field[b-pgsdq48skx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.form-label[b-pgsdq48skx] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.form-input[b-pgsdq48skx],
.form-select[b-pgsdq48skx] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-layer-floating);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.1s;
}

.form-input:focus[b-pgsdq48skx],
.form-select:focus[b-pgsdq48skx] { border-color: var(--accent-fill-rest); }

/* ── List container ──────────────────────────────────────────────── */
.list-container[b-pgsdq48skx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    overflow: hidden;
}

/* ── List toolbar ────────────────────────────────────────────────── */
.list-toolbar[b-pgsdq48skx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-wrap: wrap;
}

.toolbar-filters[b-pgsdq48skx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-spacer[b-pgsdq48skx] { flex: 1; }

.record-count[b-pgsdq48skx] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Skeleton loading ────────────────────────────────────────────── */
.skeleton-list[b-pgsdq48skx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 0;
}

.skeleton-row[b-pgsdq48skx] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
}

/* ── Empty / error state box ─────────────────────────────────────── */
.state-box[b-pgsdq48skx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 32px;
    text-align: center;
}

.state-icon[b-pgsdq48skx] { color: var(--neutral-foreground-hint); opacity: .6; }

.state-title[b-pgsdq48skx] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-hint[b-pgsdq48skx] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

/* ── Data grid ───────────────────────────────────────────────────── */
[b-pgsdq48skx] table.cbwtr-grid { width: 100%; min-width: 900px; }

/* avatar pill */
.grid-avatar[b-pgsdq48skx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.grid-avatar-blue[b-pgsdq48skx] { background: rgba(0,120,212,.15); color: #0078d4; }

/* record cell */
.record-main-cell[b-pgsdq48skx] { display: flex; flex-direction: column; gap: 2px; }
.record-title[b-pgsdq48skx] { font-size: 14px; font-weight: 500; }
.record-subtitle[b-pgsdq48skx] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* record count */
.record-count-value[b-pgsdq48skx] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* code value */
.code-value[b-pgsdq48skx] {
    font-family: var(--font-family-monospace, Consolas, monospace);
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Status badges ───────────────────────────────────────────────── */
.status-badge[b-pgsdq48skx] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-draft[b-pgsdq48skx]        { background: rgba(150,150,150,.15); color: #555; }
.status-generated[b-pgsdq48skx]    { background: rgba(0,120,212,.12);   color: #0063b1; }
.status-submitted[b-pgsdq48skx]    { background: rgba(100,0,200,.12);   color: #6400c8; }
.status-acknowledged[b-pgsdq48skx] { background: rgba(0,128,0,.12);     color: #007a00; }
.status-default[b-pgsdq48skx]      { background: rgba(150,150,150,.12); color: #666; }

/* ── Row actions ─────────────────────────────────────────────────── */
.row-actions-col[b-pgsdq48skx] { overflow: visible !important; }

.row-actions[b-pgsdq48skx] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.row-action-btn[b-pgsdq48skx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.row-action-btn:hover[b-pgsdq48skx] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

/* ── Mobile cards ────────────────────────────────────────────────── */
.entity-list-mobile[b-pgsdq48skx] { display: none; }

.entity-card[b-pgsdq48skx] {
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding: 14px 16px;
}

.entity-card:last-child[b-pgsdq48skx] { border-bottom: none; }

.entity-card-header[b-pgsdq48skx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-pgsdq48skx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.entity-card-name[b-pgsdq48skx] { font-size: 14px; font-weight: 600; }

.entity-card-actions[b-pgsdq48skx] { display: flex; gap: 4px; }

.card-action-btn[b-pgsdq48skx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: var(--neutral-fill-stealth-rest);
    color: var(--neutral-foreground-hint);
    cursor: pointer;
}

.card-action-btn:hover[b-pgsdq48skx] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.entity-card-fields[b-pgsdq48skx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-pgsdq48skx] { display: flex; flex-direction: column; gap: 2px; }
.field-label[b-pgsdq48skx] { font-size: 11px; color: var(--neutral-foreground-hint); text-transform: uppercase; letter-spacing: .3px; }
.field-value[b-pgsdq48skx] { font-size: 13px; color: var(--neutral-foreground-rest); }

/* ── List footer ─────────────────────────────────────────────────── */
.list-footer[b-pgsdq48skx] {
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    display: flex;
    justify-content: flex-end;
}

/* ── Dialog styles ───────────────────────────────────────────────── */
.dialog-subtitle[b-pgsdq48skx] {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.dialog-text[b-pgsdq48skx] {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.dialog-batch-ref[b-pgsdq48skx] {
    margin: 0;
    font-size: 15px;
    color: var(--neutral-foreground-rest);
}

.dialog-form[b-pgsdq48skx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 2-column form grid for Add Record dialog */
.dialog-form-2col[b-pgsdq48skx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.form-field-full[b-pgsdq48skx] { grid-column: 1 / -1; }

.form-section-header[b-pgsdq48skx] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--neutral-foreground-hint);
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding-bottom: 6px;
    margin-top: 4px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .metrics-row[b-pgsdq48skx] { grid-template-columns: 1fr 1fr; }

    [b-pgsdq48skx] .cbwtr-grid { display: none; }
    .entity-list-mobile[b-pgsdq48skx] { display: block; }

    .dialog-form-2col[b-pgsdq48skx] { grid-template-columns: 1fr; }
    .form-field-full[b-pgsdq48skx] { grid-column: 1; }
}

@media (max-width: 480px) {
    .page-container[b-pgsdq48skx] { padding: 16px; gap: 16px; }
    .metrics-row[b-pgsdq48skx] { grid-template-columns: 1fr; }
    .entity-card-fields[b-pgsdq48skx] { grid-template-columns: 1fr; }
}
/* /Pages/Compliance/CkycStatus.razor.rz.scp.css */
/* ============================================================
   CkycStatus — Scoped Component Styles
   Archetype: List View with embedded Search/Upload action panel
   ============================================================ */

/* ── Page layout ─────────────────────────────────────────────────────────── */
.page-container[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 4px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header[b-jpb7lx2b56] {
    margin-bottom: 12px;
}

.header-content[b-jpb7lx2b56] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-jpb7lx2b56] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-jpb7lx2b56] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI metrics row ─────────────────────────────────────────────────────── */
.metrics-row[b-jpb7lx2b56] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-jpb7lx2b56] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
}

.metric-icon-wrap svg[b-jpb7lx2b56] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-jpb7lx2b56]   { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);   color: var(--accent-foreground-rest); }
.metric-icon-green[b-jpb7lx2b56]  { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
.metric-icon-amber[b-jpb7lx2b56]  { background: color-mix(in srgb, #d97706 14%, transparent);                    color: #d97706; }
.metric-icon-red[b-jpb7lx2b56]    { background: color-mix(in srgb, var(--error-foreground-rest, #c62828) 12%, transparent);  color: var(--error-foreground-rest, #c62828); }

.metric-body[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-jpb7lx2b56] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-jpb7lx2b56] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-desc[b-jpb7lx2b56] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Generate / Search panel ─────────────────────────────────────────────── */
.generate-panel[b-jpb7lx2b56] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid #4f46e5;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}

.generate-panel-header[b-jpb7lx2b56] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.generate-icon-wrap[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
    border-radius: 10px;
    color: var(--accent-foreground-rest);
    flex-shrink: 0;
}

.generate-title[b-jpb7lx2b56] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.generate-subtitle[b-jpb7lx2b56] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    line-height: 1.4;
}

/* ── Form fields (vertical/stacked layout) ───────────────────────────────── */
.generate-fields[b-jpb7lx2b56] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

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

.form-label[b-jpb7lx2b56] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

/* ── Generate action bar ─────────────────────────────────────────────────── */
.generate-action[b-jpb7lx2b56] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Customer confirmation card ───────────────────────────────────────────── */
.customer-card[b-jpb7lx2b56] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.customer-card-header[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-avatar[b-jpb7lx2b56] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent);
    color: var(--accent-foreground-rest);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    text-transform: uppercase;
}

.customer-card-info[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.customer-name[b-jpb7lx2b56] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-code[b-jpb7lx2b56] {
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--neutral-foreground-hint);
}

.customer-card-details[b-jpb7lx2b56] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px 20px;
    padding: 12px 0;
    border-top: 1px solid var(--neutral-stroke-rest);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.customer-detail-item[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.customer-detail-label[b-jpb7lx2b56] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.customer-detail-value[b-jpb7lx2b56] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.customer-card-actions[b-jpb7lx2b56] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Lookup result ───────────────────────────────────────────────────────── */
.lookup-result-bar[b-jpb7lx2b56] {
    margin-top: 0;
}

.lookup-msg[b-jpb7lx2b56] {
    border-radius: 6px;
}

/* ── List container ──────────────────────────────────────────────────────── */
.list-container[b-jpb7lx2b56] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}

/* ── List toolbar ────────────────────────────────────────────────────────── */
.list-toolbar[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--neutral-layer-1);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}

.list-search[b-jpb7lx2b56] {
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}

.toolbar-divider[b-jpb7lx2b56] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-spacer[b-jpb7lx2b56] { flex: 1; }

.record-count[b-jpb7lx2b56] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
}

/* ── Skeleton rows ───────────────────────────────────────────────────────── */
.skeleton-list[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.skeleton-row[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-jpb7lx2b56] { border-bottom: none; }

/* ── Empty / Error state ─────────────────────────────────────────────────── */
.state-box[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
}

.state-icon[b-jpb7lx2b56] { color: var(--neutral-foreground-hint); opacity: 0.5; }

.state-title[b-jpb7lx2b56] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.state-hint[b-jpb7lx2b56] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 360px;
}

/* ── Data grid customisation ─────────────────────────────────────────────── */
[b-jpb7lx2b56] table.ckyc-grid {
    border: none;
    border-radius: 0;
    min-width: 960px;
}

/* ── Pagination footer ───────────────────────────────────────────────────── */
.list-footer[b-jpb7lx2b56] {
    padding: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-jpb7lx2b56] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Grid avatar ─────────────────────────────────────────────────────────── */
.grid-avatar[b-jpb7lx2b56] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    user-select: none;
    text-transform: uppercase;
}

.avatar-blue[b-jpb7lx2b56]    { background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent); color: var(--accent-foreground-rest); }
.avatar-green[b-jpb7lx2b56]   { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 15%, transparent); color: var(--success-foreground-rest, #059669); }
.avatar-amber[b-jpb7lx2b56]   { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.avatar-neutral[b-jpb7lx2b56] { background: var(--neutral-layer-2); color: var(--neutral-foreground-hint); }

/* ── Record cells ────────────────────────────────────────────────────────── */
.record-main-cell[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.record-title[b-jpb7lx2b56] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.record-subtitle[b-jpb7lx2b56] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.code-value[b-jpb7lx2b56] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-badge[b-jpb7lx2b56] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge-warning[b-jpb7lx2b56] { background: rgba(245,158,11,0.12); color: #92400e; }
.status-badge-info[b-jpb7lx2b56]    { background: rgba(99,102,241,0.12);  color: #4338ca; }
.status-badge-success[b-jpb7lx2b56] { background: rgba(16,185,129,0.12);  color: #065f46; }
.status-badge-danger[b-jpb7lx2b56]  { background: rgba(239,68,68,0.12);   color: #991b1b; }
.status-badge-neutral[b-jpb7lx2b56] { background: var(--neutral-layer-2); color: var(--neutral-foreground-hint); }

/* ── Operation badges ────────────────────────────────────────────────────── */
.op-badge[b-jpb7lx2b56] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.op-badge-blue[b-jpb7lx2b56]    { background: rgba(79,70,229,0.10); color: #4f46e5; }
.op-badge-green[b-jpb7lx2b56]   { background: rgba(16,185,129,0.10); color: #059669; }
.op-badge-amber[b-jpb7lx2b56]   { background: rgba(245,158,11,0.10); color: #d97706; }
.op-badge-neutral[b-jpb7lx2b56] { background: var(--neutral-layer-2); color: var(--neutral-foreground-hint); }

/* ── Form 60 badge ───────────────────────────────────────────────────────── */
.form60-badge[b-jpb7lx2b56] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(245,158,11,0.10);
    color: #d97706;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Row actions ─────────────────────────────────────────────────────────── */
.row-actions-col[b-jpb7lx2b56] { text-align: right; }

.row-actions[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity 200ms ease;
}

.row-action-btn[b-jpb7lx2b56] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.row-action-btn:hover[b-jpb7lx2b56] {
    background: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
}

.row-action-btn:focus-visible[b-jpb7lx2b56] {
    outline: 2px solid #4f46e5;
    outline-offset: 1px;
}

/* ── Mobile entity list (hidden on desktop) ──────────────────────────────── */
.entity-list-mobile[b-jpb7lx2b56] { display: none; }

.entity-card[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.entity-card:last-child[b-jpb7lx2b56] { border-bottom: none; }

.entity-card-avatar[b-jpb7lx2b56] { flex-shrink: 0; }

.entity-card-body[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.entity-card-title[b-jpb7lx2b56] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-card-sub[b-jpb7lx2b56] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.entity-card-meta[b-jpb7lx2b56] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.entity-card-actions[b-jpb7lx2b56] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.card-action-btn[b-jpb7lx2b56] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.card-action-btn:hover[b-jpb7lx2b56] {
    background: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-hover);
    color: var(--neutral-foreground-rest);
}

.card-action-btn:focus-visible[b-jpb7lx2b56] {
    outline: 2px solid #4f46e5;
    outline-offset: 1px;
}

/* ── Details dialog ──────────────────────────────────────────────────────── */
.detail-grid[b-jpb7lx2b56] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-row[b-jpb7lx2b56] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    align-items: start;
}

.detail-row:last-child[b-jpb7lx2b56] { border-bottom: none; }

.detail-row-error[b-jpb7lx2b56] {
    background: rgba(239, 68, 68, 0.04);
    padding: 12px 8px;
    margin: 0 -8px;
    border-radius: 4px;
}

.detail-label[b-jpb7lx2b56] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 2px;
}

.detail-value[b-jpb7lx2b56] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    word-break: break-all;
}

.error-text[b-jpb7lx2b56] {
    color: #ef4444;
    font-size: 13px;
}

/* ── Error message bar ───────────────────────────────────────────────────── */
.error-bar[b-jpb7lx2b56] {
    border-radius: 8px;
}

/* ============================================================
   Responsive — Tablet (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
    .metrics-row[b-jpb7lx2b56] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .generate-fields[b-jpb7lx2b56] {
        grid-template-columns: 1fr;
    }

    .list-search[b-jpb7lx2b56] { max-width: 220px; }
}

/* ============================================================
   Responsive — Mobile (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .page-container[b-jpb7lx2b56] {
        padding: 0;
        gap: 16px;
    }

    .page-title[b-jpb7lx2b56]  { font-size: 20px; }

    /* Single column — each KPI card on its own row */
    .metrics-row[b-jpb7lx2b56] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .metric-card[b-jpb7lx2b56]     { padding: 14px 12px; gap: 12px; }
    .metric-value[b-jpb7lx2b56]    { font-size: 12px; }
    .metric-icon-wrap[b-jpb7lx2b56]{ width: 40px; height: 40px; border-radius: 10px; }
    .metric-title[b-jpb7lx2b56], .metric-desc[b-jpb7lx2b56] { white-space: normal; }

    .generate-panel[b-jpb7lx2b56]  { padding: 14px 12px; gap: 12px; }
    .generate-fields[b-jpb7lx2b56] { grid-template-columns: 1fr; gap: 12px; }
    .generate-action[b-jpb7lx2b56] { flex-direction: column; gap: 8px; }
    .generate-action fluent-button[b-jpb7lx2b56] { width: 100%; }

    /* Hide desktop grid, show mobile entity cards */
    [b-jpb7lx2b56] .ckyc-grid  { display: none !important; }
    [b-jpb7lx2b56] fluent-data-grid.ckyc-grid { display: none !important; }
    .entity-list-mobile[b-jpb7lx2b56] { display: block; }

    .list-footer[b-jpb7lx2b56] { padding: 12px; }
    .list-toolbar[b-jpb7lx2b56]    { gap: 8px; padding: 10px 12px; border-radius: 12px 12px 0 0; }
    .list-search[b-jpb7lx2b56]     { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-jpb7lx2b56] { display: none; }
    .toolbar-filters[b-jpb7lx2b56] { width: 100%; flex-wrap: wrap; gap: 6px; }
    .toolbar-filters > *[b-jpb7lx2b56] { flex: 1 1 calc(50% - 4px); }

    .detail-row[b-jpb7lx2b56] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .card-action-btn[b-jpb7lx2b56] { width: 38px; height: 38px; }

    .customer-card-details[b-jpb7lx2b56] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Compliance/ClimateRisk.razor.rz.scp.css */
/* ==========================================================================
   ClimateRisk.razor.css — Scoped styles for /compliance/climate-risk
   Detail/Form archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ──────────────────────────────────────────────────────────── */
.cr-page[b-19wr3l6306] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    max-width: 1100px;
}

.cr-header[b-19wr3l6306] {
    margin-bottom: 24px;
}

.cr-header h2[b-19wr3l6306] {
    font-size: 24px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px;
}

.cr-subtitle[b-19wr3l6306] {
    color: var(--neutral-foreground-hint);
    font-size: 14px;
    margin: 0;
}

/* ── SECTION + CARD ──────────────────────────────────────────────────────── */
.cr-section[b-19wr3l6306] {
    /* spacing between sections comes from .cr-page's flex gap */
}

.cr-section h3[b-19wr3l6306] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 12px;
}

.cr-card[b-19wr3l6306] {
    padding: 20px 24px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cr-card-header[b-19wr3l6306] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cr-card-header h3[b-19wr3l6306] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── POLICY DETAILS GRID ─────────────────────────────────────────────────── */
.cr-policy-details[b-19wr3l6306] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.cr-field[b-19wr3l6306] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cr-field--full[b-19wr3l6306] {
    grid-column: span 2;
}

.cr-label[b-19wr3l6306] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cr-value[b-19wr3l6306] {
    font-size: 15px;
    color: var(--neutral-foreground-rest);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cr-overdue[b-19wr3l6306] {
    color: #dc2626;
}

.cr-actions[b-19wr3l6306] {
    grid-column: span 2;
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── EMPTY / ERROR STATES ────────────────────────────────────────────────── */
.cr-empty[b-19wr3l6306] {
    color: var(--neutral-foreground-hint);
    padding: 16px 0;
}

.cr-empty-hint[b-19wr3l6306] {
    color: var(--neutral-foreground-hint);
    font-size: 14px;
}

.cr-error[b-19wr3l6306] {
    margin-bottom: 16px;
}

/* ── DATA GRID ───────────────────────────────────────────────────────────── */
.cr-grid[b-19wr3l6306] {
    width: 100%;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-19wr3l6306] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-19wr3l6306] table.climate-risk-grid { min-width: 700px; }

/* ── DIALOG FORM ─────────────────────────────────────────────────────────── */
.cr-form[b-19wr3l6306] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.cr-field-input[b-19wr3l6306] {
    width: 100%;
}

.cr-field-group[b-19wr3l6306] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cr-field-group label[b-19wr3l6306] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.fluent-input[b-19wr3l6306] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    font-size: 14px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.fluent-input:focus[b-19wr3l6306] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    outline: none;
}

/* ── FILE UPLOAD ─────────────────────────────────────────────────────────── */
.cr-file-input[b-19wr3l6306] {
    width: 100%;
    font-size: 14px;
    cursor: pointer;
}

.cr-upload-hint[b-19wr3l6306] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
}

.cr-upload-preview[b-19wr3l6306] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest);
    font-size: 14px;
}

.cr-upload-filename[b-19wr3l6306] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--neutral-foreground-rest);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cr-policy-details[b-19wr3l6306] {
        grid-template-columns: 1fr;
    }

    .cr-field--full[b-19wr3l6306] {
        grid-column: span 1;
    }

    .cr-actions[b-19wr3l6306] {
        grid-column: span 1;
    }
}
/* /Pages/Compliance/CtrBatches.razor.rz.scp.css */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  CTR Batches  –  scoped component styles                     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Page shell ─────────────────────────────────────────────────── */
.page-container[b-j1rhe8kbgi] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 8px; }

.header-content[b-j1rhe8kbgi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 4px; }

.page-title[b-j1rhe8kbgi] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
}

.page-description[b-j1rhe8kbgi] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-j1rhe8kbgi] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.info-bar[b-j1rhe8kbgi], .error-bar[b-j1rhe8kbgi] { border-radius: 6px; }

/* ── Metrics row ─────────────────────────────────────────────────── */
.metrics-row[b-j1rhe8kbgi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-j1rhe8kbgi] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    transition: box-shadow 0.15s ease;
}

.metric-card:hover[b-j1rhe8kbgi] { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.icon-wrap[b-j1rhe8kbgi] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-blue[b-j1rhe8kbgi]   { background: rgba(0,120,212,.12); color: #0078d4; }
.icon-amber[b-j1rhe8kbgi]  { background: rgba(200,110,0,.12);  color: #c86e00; }
.icon-purple[b-j1rhe8kbgi] { background: rgba(100,0,200,.12);  color: #6400c8; }
.icon-green[b-j1rhe8kbgi]  { background: rgba(0,128,0,.12);    color: #007a00; }

.metric-body[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 2px; }

.metric-value[b-j1rhe8kbgi] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

.metric-label[b-j1rhe8kbgi] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Generate panel ──────────────────────────────────────────────── */
.generate-panel[b-j1rhe8kbgi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
}

.generate-panel-header[b-j1rhe8kbgi] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    width: 100%;
}

.generate-fields[b-j1rhe8kbgi] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1;
}

.generate-action[b-j1rhe8kbgi] { display: flex; align-items: flex-end; }

/* ── Form helpers ────────────────────────────────────────────────── */
.form-field[b-j1rhe8kbgi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.form-label[b-j1rhe8kbgi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.form-input[b-j1rhe8kbgi],
.form-select[b-j1rhe8kbgi] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-layer-floating);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.1s;
}

.form-input:focus[b-j1rhe8kbgi],
.form-select:focus[b-j1rhe8kbgi] { border-color: var(--accent-fill-rest); }

/* ── List container ──────────────────────────────────────────────── */
.list-container[b-j1rhe8kbgi] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    overflow: hidden;
}

.list-toolbar[b-j1rhe8kbgi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-wrap: wrap;
}

.toolbar-filters[b-j1rhe8kbgi] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-spacer[b-j1rhe8kbgi] { flex: 1; }

.record-count[b-j1rhe8kbgi] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Skeleton ────────────────────────────────────────────────────── */
.skeleton-list[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; }
.skeleton-row[b-j1rhe8kbgi] { display: flex; align-items: center; gap: 16px; padding: 10px 16px; }

/* ── State box ───────────────────────────────────────────────────── */
.state-box[b-j1rhe8kbgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 32px;
    text-align: center;
}

.state-icon[b-j1rhe8kbgi] { color: var(--neutral-foreground-hint); opacity: .6; }
.state-title[b-j1rhe8kbgi] { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-hint[b-j1rhe8kbgi]  { margin: 0; font-size: 14px; color: var(--neutral-foreground-hint); }

/* ── Data grid ───────────────────────────────────────────────────── */
[b-j1rhe8kbgi] table.ctr-grid { width: 100%; min-width: 960px; }

.grid-avatar[b-j1rhe8kbgi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.grid-avatar-teal[b-j1rhe8kbgi] { background: rgba(0,150,136,.15); color: #00897b; }

.record-main-cell[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 2px; }
.record-title[b-j1rhe8kbgi]  { font-size: 14px; font-weight: 500; }
.record-subtitle[b-j1rhe8kbgi] { font-size: 12px; color: var(--neutral-foreground-hint); }

.record-count-value[b-j1rhe8kbgi] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.code-value[b-j1rhe8kbgi] {
    font-family: var(--font-family-monospace, Consolas, monospace);
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Status badges ───────────────────────────────────────────────── */
.status-badge[b-j1rhe8kbgi] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-draft[b-j1rhe8kbgi]        { background: rgba(150,150,150,.15); color: #555; }
.status-generated[b-j1rhe8kbgi]    { background: rgba(0,120,212,.12);   color: #0063b1; }
.status-submitted[b-j1rhe8kbgi]    { background: rgba(100,0,200,.12);   color: #6400c8; }
.status-acknowledged[b-j1rhe8kbgi] { background: rgba(0,128,0,.12);     color: #007a00; }
.status-default[b-j1rhe8kbgi]      { background: rgba(150,150,150,.12); color: #666; }

/* ── Row actions ─────────────────────────────────────────────────── */
.row-actions-col[b-j1rhe8kbgi] { overflow: visible !important; }

.row-actions[b-j1rhe8kbgi] { display: flex; gap: 4px; align-items: center; }

.row-action-btn[b-j1rhe8kbgi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.row-action-btn:hover[b-j1rhe8kbgi] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

/* ── Mobile cards ────────────────────────────────────────────────── */
.entity-list-mobile[b-j1rhe8kbgi] { display: none; }

.entity-card[b-j1rhe8kbgi] {
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding: 14px 16px;
}

.entity-card:last-child[b-j1rhe8kbgi] { border-bottom: none; }

.entity-card-header[b-j1rhe8kbgi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 4px; }
.entity-card-name[b-j1rhe8kbgi]  { font-size: 14px; font-weight: 600; }
.entity-card-actions[b-j1rhe8kbgi] { display: flex; gap: 4px; }

.card-action-btn[b-j1rhe8kbgi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: var(--neutral-fill-stealth-rest);
    color: var(--neutral-foreground-hint);
    cursor: pointer;
}

.card-action-btn:hover[b-j1rhe8kbgi] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.entity-card-fields[b-j1rhe8kbgi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 2px; }
.field-label[b-j1rhe8kbgi] { font-size: 11px; color: var(--neutral-foreground-hint); text-transform: uppercase; letter-spacing: .3px; }
.field-value[b-j1rhe8kbgi] { font-size: 13px; color: var(--neutral-foreground-rest); }

/* ── List footer ─────────────────────────────────────────────────── */
.list-footer[b-j1rhe8kbgi] {
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    display: flex;
    justify-content: flex-end;
}

/* ── Dialog styles ───────────────────────────────────────────────── */
.dialog-subtitle[b-j1rhe8kbgi] { margin: 0 0 16px; font-size: 14px; color: var(--neutral-foreground-hint); }
.dialog-text[b-j1rhe8kbgi]     { margin: 0 0 12px; font-size: 14px; color: var(--neutral-foreground-rest); }
.dialog-batch-ref[b-j1rhe8kbgi] { margin: 0; font-size: 15px; color: var(--neutral-foreground-rest); }

.dialog-form[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 16px; }

.dialog-form-2col[b-j1rhe8kbgi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.form-field-full[b-j1rhe8kbgi] { grid-column: 1 / -1; }

.form-section-header[b-j1rhe8kbgi] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--neutral-foreground-hint);
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding-bottom: 6px;
    margin-top: 4px;
}

/* ── Records dialog: auto-detected vs. manual ───────────────────── */
.records-filter-chips[b-j1rhe8kbgi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-chip[b-j1rhe8kbgi] {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 999px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.filter-chip:hover[b-j1rhe8kbgi] { background: var(--neutral-fill-stealth-hover); }

.filter-chip-active[b-j1rhe8kbgi] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest, #fff);
}

.records-list[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 1px; }

.record-row[b-j1rhe8kbgi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
}

.record-row:last-child[b-j1rhe8kbgi] { border-bottom: none; }

.record-row-main[b-j1rhe8kbgi] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.auto-manual-badge[b-j1rhe8kbgi] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-auto[b-j1rhe8kbgi]   { background: rgba(0,128,0,.12);   color: #007a00; }
.badge-manual[b-j1rhe8kbgi] { background: rgba(150,150,150,.15); color: #555; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .metrics-row[b-j1rhe8kbgi] { grid-template-columns: 1fr 1fr; }
    [b-j1rhe8kbgi] .ctr-grid { display: none; }
    .entity-list-mobile[b-j1rhe8kbgi] { display: block; }
    .dialog-form-2col[b-j1rhe8kbgi] { grid-template-columns: 1fr; }
    .form-field-full[b-j1rhe8kbgi] { grid-column: 1; }
}

@media (max-width: 480px) {
    .page-container[b-j1rhe8kbgi] { padding: 16px; gap: 16px; }
    .metrics-row[b-j1rhe8kbgi] { grid-template-columns: 1fr; }
    .entity-card-fields[b-j1rhe8kbgi] { grid-template-columns: 1fr; }
}
/* /Pages/Compliance/DemandLoanPolicy.razor.rz.scp.css */
/* ==========================================================================
   DemandLoanPolicy.razor.css — Scoped styles for /compliance/demand-loan-policy
   List View archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ──────────────────────────────────────────────────────────── */
.title-section[b-ijjrzxihuz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-actions[b-ijjrzxihuz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── CONTENT CARDS ───────────────────────────────────────────────────────── */
.fluent-card[b-ijjrzxihuz] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    padding: 20px 24px;
}

.card-elevated[b-ijjrzxihuz] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.card-title[b-ijjrzxihuz] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 16px;
}

.card-title-danger[b-ijjrzxihuz] {
    color: #dc2626;
}

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */
.badge[b-ijjrzxihuz] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-success[b-ijjrzxihuz]   { background: color-mix(in srgb, #059669 15%, transparent); color: #047857; }
.badge-danger[b-ijjrzxihuz]    { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.badge-warning[b-ijjrzxihuz]   { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.badge-secondary[b-ijjrzxihuz] { background: color-mix(in srgb, var(--neutral-foreground-hint) 12%, transparent); color: var(--neutral-foreground-hint); }

/* ── HELPERS ─────────────────────────────────────────────────────────────── */
.text-muted[b-ijjrzxihuz] {
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

/* ── DIALOG FORM FIELDS ──────────────────────────────────────────────────── */
.form-label[b-ijjrzxihuz] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.form-control[b-ijjrzxihuz],
.form-select[b-ijjrzxihuz] {
    border-color: var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.form-control:focus[b-ijjrzxihuz],
.form-select:focus[b-ijjrzxihuz] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    outline: none;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-ijjrzxihuz] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-ijjrzxihuz] table.demand-loan-grid { min-width: 950px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-actions[b-ijjrzxihuz] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/Compliance/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   COMPLIANCE DASHBOARD — Dashboard + Mini-List Archetype (scoped styles)
   NOTE: tr.hover .row-actions reveal rule MUST stay in global-styles.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page container ─────────────────────────────────────────────────── */
.page-container[b-po8flwybhz] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────── */
.header-content[b-po8flwybhz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-po8flwybhz] { flex: 1; }

.page-title[b-po8flwybhz] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-po8flwybhz] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-po8flwybhz] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Error bar ──────────────────────────────────────────────────────── */
.error-bar[b-po8flwybhz] { margin: 0; }

/* ── Metric cards (4-col KPI row) ───────────────────────────────────── */
.metrics-row[b-po8flwybhz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-po8flwybhz] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-po8flwybhz] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-po8flwybhz] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap[b-po8flwybhz]  svg { fill: currentColor !important; }

.metric-icon-blue[b-po8flwybhz]  { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-po8flwybhz] { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-amber[b-po8flwybhz] { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-icon-red[b-po8flwybhz]   { background: rgba(239,68,68,0.12);  color: #DC2626; }

.metric-body[b-po8flwybhz] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-po8flwybhz] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.metric-value--sm[b-po8flwybhz]      { font-size: 10px; }
.metric-value--warning[b-po8flwybhz] { color: #D97706; }
.metric-value--danger[b-po8flwybhz]  { color: #DC2626; }

.metric-title[b-po8flwybhz] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-po8flwybhz] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Classification breakdown section ───────────────────────────────── */
.section-card[b-po8flwybhz] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section-header[b-po8flwybhz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
}

.section-header a.view-all-link[b-po8flwybhz] {
    margin-left: auto;
    font-size: 13px;
    color: #4F46E5;
    text-decoration: none;
    font-weight: 500;
}

.section-header a.view-all-link:hover[b-po8flwybhz] { text-decoration: underline; }

.section-title[b-po8flwybhz] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* ── Classification strip ────────────────────────────────────────────── */
.classification-strip[b-po8flwybhz] {
    display: flex;
    align-items: stretch;
    padding: 24px;
    gap: 0;
    flex-wrap: wrap;
}

.cls-item[b-po8flwybhz] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-inline: 24px;
}

.cls-item:first-child[b-po8flwybhz] {
    padding-left: 0;
}

.cls-label[b-po8flwybhz] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.cls-count[b-po8flwybhz] {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cls-desc[b-po8flwybhz] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.cls-count--standard[b-po8flwybhz]    { color: #10B981; }
.cls-count--substandard[b-po8flwybhz] { color: #F59E0B; }
.cls-count--doubtful[b-po8flwybhz]    { color: #D97706; }
.cls-count--loss[b-po8flwybhz]        { color: #EF4444; }

.cls-divider[b-po8flwybhz] {
    width: 1px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
    align-self: stretch;
    min-height: 60px;
}

/* ── List container (recent reports) ────────────────────────────────── */
.list-container[b-po8flwybhz] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Grid scroll wrapper ────────────────────────────────────────────── */
.grid-scroll-wrapper[b-po8flwybhz] { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID MIN-WIDTH (horizontal overflow safety net; scroll wrapper is global)
══════════════════════════════════════════════════════════════════════════════ */
[b-po8flwybhz] table.recent-reports-grid {
    min-width: 700px;
}

/* ── Empty state ────────────────────────────────────────────────────── */
.state-box[b-po8flwybhz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-po8flwybhz]  { color: var(--neutral-foreground-hint); opacity: 0.4; margin-bottom: 4px; }
.state-title[b-po8flwybhz] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-hint[b-po8flwybhz]  { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Row actions — INITIAL HIDDEN STATE (scoped)
     ⚠ Reveal rule (tr.hover) MUST live in wwwroot/global-styles.css ONLY  */
.row-actions[b-po8flwybhz] {
    opacity: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge[b-po8flwybhz] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge--approved[b-po8flwybhz]     { background: rgba(16,185,129,0.12); color: #10B981; }
.status-badge--submitted[b-po8flwybhz]    { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.status-badge--underreview[b-po8flwybhz]  { background: rgba(245,158,11,0.12); color: #D97706; }
.status-badge--draft[b-po8flwybhz]        { background: rgba(245,158,11,0.12); color: #D97706; }
.status-badge--pending[b-po8flwybhz]      { background: rgba(245,158,11,0.12); color: #D97706; }
.status-badge--rejected[b-po8flwybhz]     { background: rgba(239,68,68,0.12);  color: #EF4444; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .metrics-row[b-po8flwybhz] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-po8flwybhz] { padding: 16px; }
    .header-content[b-po8flwybhz] { flex-direction: column; align-items: stretch; }
    .header-actions[b-po8flwybhz] { justify-content: flex-end; flex-wrap: wrap; width: 100%; }
    .page-actions[b-po8flwybhz]   { justify-content: flex-end; flex-wrap: wrap; width: 100%; }
    .metrics-row[b-po8flwybhz]    { grid-template-columns: 1fr 1fr; gap: 12px; }
    .metric-value[b-po8flwybhz]   { font-size: 11px; }
    .metric-value--sm[b-po8flwybhz] { font-size: 9px; }
    .classification-strip[b-po8flwybhz] { padding: 16px; }
    .cls-count[b-po8flwybhz]      { font-size: 28px; }
    /* ⚠ MOBILE: actions always visible — touch screens have no hover */
    .row-actions[b-po8flwybhz]    { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-po8flwybhz]    { grid-template-columns: 1fr; }
    .page-title[b-po8flwybhz]     { font-size: 22px; }
    .cls-item[b-po8flwybhz]       { flex: 1 1 calc(50% - 1px); min-width: 0; padding: 8px 0; }
    .cls-divider[b-po8flwybhz]    { display: none; }
}

/* /Pages/Compliance/LodrFilings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   LODR FILINGS — Scoped styles
   Archetype: List View with embedded trigger form
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page container ───────────────────────────────────────────────────── */
.page-container[b-kmgerbnsjs] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 56px 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header[b-kmgerbnsjs] { margin-bottom: 0; }

.header-content[b-kmgerbnsjs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-kmgerbnsjs] { flex: 1; }

.page-title[b-kmgerbnsjs] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-kmgerbnsjs] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-kmgerbnsjs] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.error-bar[b-kmgerbnsjs] { margin: 0; }

/* ── Metric cards ─────────────────────────────────────────────────────── */
.metrics-row[b-kmgerbnsjs] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-kmgerbnsjs] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-kmgerbnsjs] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-kmgerbnsjs] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-kmgerbnsjs] { width: 22px; height: 22px; fill: currentColor !important; }

.metric-icon-blue[b-kmgerbnsjs]  { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--accent-foreground-rest); }
.metric-icon-green[b-kmgerbnsjs] { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-amber[b-kmgerbnsjs] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.metric-icon-red[b-kmgerbnsjs]   { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }

.metric-body[b-kmgerbnsjs] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-kmgerbnsjs] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-kmgerbnsjs] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 4px;
    white-space: nowrap;
}

.metric-desc[b-kmgerbnsjs] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Generate / Trigger panel ─────────────────────────────────────────── */
.generate-panel[b-kmgerbnsjs] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid var(--accent-fill-rest);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.generate-panel-header[b-kmgerbnsjs] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.generate-icon-wrap[b-kmgerbnsjs] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    color: var(--accent-foreground-rest);
    display: flex;
    align-items: center;
    justify-content: center;
}

.generate-icon-wrap svg[b-kmgerbnsjs] { width: 20px; height: 20px; fill: currentColor !important; }

.generate-title[b-kmgerbnsjs] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--neutral-foreground-rest);
}

.generate-subtitle[b-kmgerbnsjs] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* Stacked form grid: 4 columns on desktop */
.generate-fields[b-kmgerbnsjs] {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    gap: 16px;
    align-items: end;
}

/* Stacked form field: label on top, input below */
.form-field[b-kmgerbnsjs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-kmgerbnsjs] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
}

.generate-action[b-kmgerbnsjs] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Debenture issue confirmation card ────────────────────────────────── */
.issue-confirm-card[b-kmgerbnsjs] {
    background: rgba(0, 120, 212, 0.05);
    border: 1px solid rgba(0, 120, 212, 0.25);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.issue-confirm-header[b-kmgerbnsjs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.issue-confirm-header fluent-icon svg[b-kmgerbnsjs],
.issue-confirm-header svg[b-kmgerbnsjs] {
    width: 16px;
    height: 16px;
    color: #16a34a;
    fill: currentColor !important;
    flex-shrink: 0;
}

.issue-confirm-title[b-kmgerbnsjs] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-confirm-badge[b-kmgerbnsjs] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.issue-confirm-grid[b-kmgerbnsjs] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 16px;
}

.issue-confirm-item[b-kmgerbnsjs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.issue-confirm-label[b-kmgerbnsjs] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

.issue-confirm-value[b-kmgerbnsjs] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    font-weight: 500;
}

[b-kmgerbnsjs] table.lodr-grid { min-width: 1150px; }

/* ── List container ───────────────────────────────────────────────────── */
.list-container[b-kmgerbnsjs] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.list-toolbar[b-kmgerbnsjs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 20;
    overflow: visible;
}

.list-search[b-kmgerbnsjs] {
    flex: 1 1 200px;
    max-width: 280px;
}

.list-search fluent-search[b-kmgerbnsjs] { width: 100%; }

.toolbar-divider[b-kmgerbnsjs] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-kmgerbnsjs] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.toolbar-spacer[b-kmgerbnsjs] { flex: 1; }

.record-count[b-kmgerbnsjs] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Grid avatar ──────────────────────────────────────────────────────── */
.grid-avatar[b-kmgerbnsjs] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.avatar-interest[b-kmgerbnsjs] { background: color-mix(in srgb, #0078d4 15%, transparent); color: #0078d4; }
.avatar-annual[b-kmgerbnsjs]   { background: color-mix(in srgb, #107c10 15%, transparent); color: #107c10; }
.avatar-material[b-kmgerbnsjs] { background: color-mix(in srgb, #c42b1c 15%, transparent); color: #c42b1c; }
.avatar-default[b-kmgerbnsjs]  { background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent); color: var(--accent-foreground-rest); }

/* ── Filing type cell ─────────────────────────────────────────────────── */
.filing-cell[b-kmgerbnsjs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.filing-type-label[b-kmgerbnsjs] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filing-meta[b-kmgerbnsjs] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Overdue badge ────────────────────────────────────────────────────── */
.overdue-badge[b-kmgerbnsjs] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* ── Status badges (local overrides for LODR-specific statuses) ───────── */
.status-info[b-kmgerbnsjs] {
    background: rgba(0, 120, 212, 0.12);
    color: #0078d4;
}

/* ── Date cells ───────────────────────────────────────────────────────── */
.date-cell[b-kmgerbnsjs] {
    display: block;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.date-time[b-kmgerbnsjs] {
    display: block;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.overdue-date[b-kmgerbnsjs] {
    display: block;
    font-size: 13px;
    color: #dc2626;
    font-weight: 500;
    white-space: nowrap;
}

.muted-cell[b-kmgerbnsjs] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── SEBI reference number ────────────────────────────────────────────── */
.ref-number[b-kmgerbnsjs] {
    font-size: 12px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    color: var(--neutral-foreground-rest);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

/* ── Row action buttons ───────────────────────────────────────────────── */
.row-actions[b-kmgerbnsjs] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    transition: opacity 200ms ease;
}

.row-action-btn[b-kmgerbnsjs] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border, color, hover → global-styles.css */
}

/* ── Skeleton loading ─────────────────────────────────────────────────── */
.skeleton-list[b-kmgerbnsjs] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.skeleton-row[b-kmgerbnsjs] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.state-box[b-kmgerbnsjs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 24px;
    gap: 10px;
    text-align: center;
}

.state-icon[b-kmgerbnsjs] { color: var(--neutral-foreground-hint); opacity: 0.5; }
.state-title[b-kmgerbnsjs] { font-size: 15px; font-weight: 600; margin: 0; color: var(--neutral-foreground-rest); }
.state-hint[b-kmgerbnsjs]  { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; max-width: 360px; }

/* ── Pagination footer ────────────────────────────────────────────────── */
.list-footer[b-kmgerbnsjs] {
    padding: 14px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: center;
    background: var(--neutral-layer-2);
    border-radius: 0 0 10px 10px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .metrics-row[b-kmgerbnsjs]     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .generate-fields[b-kmgerbnsjs] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .page-container[b-kmgerbnsjs]  { padding: 20px 16px; gap: 20px; }
    .header-content[b-kmgerbnsjs]  { flex-direction: column; align-items: flex-start; }
    .header-actions[b-kmgerbnsjs]  { width: 100%; justify-content: flex-start; }
    .metrics-row[b-kmgerbnsjs]     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-card[b-kmgerbnsjs]     { padding: 16px; gap: 12px; }
    .metric-value[b-kmgerbnsjs]    { font-size: 11px; }
}

@media (max-width: 600px) {
    .page-container[b-kmgerbnsjs]  { padding: 16px; }
    .metrics-row[b-kmgerbnsjs]     { grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric-card[b-kmgerbnsjs]     { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
    .generate-fields[b-kmgerbnsjs] { grid-template-columns: 1fr; }
    .generate-panel[b-kmgerbnsjs]  { padding: 18px 16px; }
    .generate-action[b-kmgerbnsjs] { justify-content: stretch; }
    .generate-action fluent-button[b-kmgerbnsjs] { width: 100%; }
    .list-search[b-kmgerbnsjs]     { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-kmgerbnsjs] { display: none; }
    .toolbar-filters[b-kmgerbnsjs] { width: 100%; }
    .toolbar-filters fluent-select[b-kmgerbnsjs] { flex: 1 1 auto !important; width: auto !important; }
    /* Always show actions on mobile */
    .row-actions[b-kmgerbnsjs]     { opacity: 1; }
    .ref-number[b-kmgerbnsjs]      { max-width: 80px; }
}

/* ── Print / a11y ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .metric-card[b-kmgerbnsjs], .row-action-btn[b-kmgerbnsjs] { transition: none; }
}
/* /Pages/Compliance/McaCalendar.razor.rz.scp.css */
/* ==========================================================================
   McaCalendar.razor.css — Scoped styles for /compliance/mca-calendar
   List View archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ──────────────────────────────────────────────────────────── */
.title-section[b-wp3pan05qw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-actions[b-wp3pan05qw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── CONTENT CARDS ───────────────────────────────────────────────────────── */
.fluent-card[b-wp3pan05qw] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    padding: 20px 24px;
}

.card-elevated[b-wp3pan05qw] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.card-title[b-wp3pan05qw] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 16px;
}

.card-title-danger[b-wp3pan05qw] {
    color: #dc2626;
}

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */
.badge[b-wp3pan05qw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-success[b-wp3pan05qw] { background: color-mix(in srgb, #059669 15%, transparent); color: #047857; }
.badge-danger[b-wp3pan05qw]  { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.badge-warning[b-wp3pan05qw] { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }

/* ── HELPERS ─────────────────────────────────────────────────────────────── */
.text-muted[b-wp3pan05qw] {
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

/* ── DIALOG FORM FIELDS ──────────────────────────────────────────────────── */
.form-label[b-wp3pan05qw] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.form-control[b-wp3pan05qw],
.form-select[b-wp3pan05qw] {
    border-color: var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.form-control:focus[b-wp3pan05qw],
.form-select:focus[b-wp3pan05qw] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    outline: none;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-wp3pan05qw] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-wp3pan05qw] table.mca-overdue-grid { min-width: 900px; }
[b-wp3pan05qw] table.mca-pending-grid { min-width: 900px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-actions[b-wp3pan05qw] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/Compliance/MisReports.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   MIS REPORT BUILDER — Scoped styles  (§7.3 List View archetype)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────── */
.page-container[b-x9ej8qy1je] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────── */
.page-header[b-x9ej8qy1je] { margin-bottom: 8px; }

.header-content[b-x9ej8qy1je] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-x9ej8qy1je] { flex: 1; }

.page-title[b-x9ej8qy1je] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-x9ej8qy1je] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-x9ej8qy1je] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.error-bar[b-x9ej8qy1je] { margin: 0; }

/* ── Metric cards (§7.3.3 NBFC-STANDARD) ───────────────────────────── */
.metrics-row[b-x9ej8qy1je] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.metric-card[b-x9ej8qy1je] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-x9ej8qy1je] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-x9ej8qy1je] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-x9ej8qy1je] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-x9ej8qy1je]  {
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
    color: var(--accent-foreground-rest);
}

.metric-icon-green[b-x9ej8qy1je] {
    background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent);
    color: var(--success-foreground-rest, #16a34a);
}

.metric-body[b-x9ej8qy1je] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.metric-value[b-x9ej8qy1je] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-x9ej8qy1je] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-x9ej8qy1je] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container (FluentCard) ────────────────────────────────────── */
.list-container[b-x9ej8qy1je] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: visible;  /* allow dropdown overlays */
    padding: 0;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
/*
  ⚠️ Native divs receive b-xxxx scope attr — sizing works.
  FluentSearch/FluentSelect host elements do NOT — use Style= inline.
*/
.list-toolbar[b-x9ej8qy1je] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 10;
}

/* Native div wrapping FluentSearch — receives scope attr for flex sizing */
.list-search[b-x9ej8qy1je] {
    flex: 1 1 200px;
    max-width: 300px;
}

.list-search fluent-search[b-x9ej8qy1je] { width: 100%; }

.toolbar-divider[b-x9ej8qy1je] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-x9ej8qy1je] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton table ──────────────────────────────────────────────────── */
.skeleton-table[b-x9ej8qy1je] { display: flex; flex-direction: column; }

.skeleton-toolbar[b-x9ej8qy1je] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-search[b-x9ej8qy1je]  { height: 32px; width: 260px; border-radius: 4px; }
.skeleton-filter[b-x9ej8qy1je]  { height: 32px; width: 140px; border-radius: 4px; }

.skeleton-row[b-x9ej8qy1je] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-cell[b-x9ej8qy1je]         { height: 14px; border-radius: 4px; }
.skeleton-cell.wide[b-x9ej8qy1je]    { width: 25%; }
.skeleton-cell.medium[b-x9ej8qy1je]  { width: 20%; }
.skeleton-cell.short[b-x9ej8qy1je]   { width: 12%; }
.skeleton-cell.actions[b-x9ej8qy1je] { width: 90px; }

.skeleton-search[b-x9ej8qy1je],
.skeleton-filter[b-x9ej8qy1je],
.skeleton-cell[b-x9ej8qy1je] {
    background: linear-gradient(90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-x9ej8qy1je 1.5s infinite;
}

@keyframes shimmer-b-x9ej8qy1je {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state[b-x9ej8qy1je] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
}

.empty-heading[b-x9ej8qy1je] {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-description[b-x9ej8qy1je] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 400px;
}

/* ── Row actions (scoped: initial hidden state + structural only) ──── */
/*
  border/color/hover rules MUST live in global-styles.css — see §7.3.4.
  Scoped CSS here only sets the initial hidden state and dimensions.
*/
.row-actions[b-x9ej8qy1je] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-x9ej8qy1je] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border / color / hover → global-styles.css */
}

/* ── Pagination footer ───────────────────────────────────────────────── */
.list-footer[b-x9ej8qy1je] {
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-x9ej8qy1je] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.ml-auto[b-x9ej8qy1je] { margin-left: auto; }

/* ── Results section ─────────────────────────────────────────────────── */
.results-container[b-x9ej8qy1je] { margin-top: 0; }

.section-header[b-x9ej8qy1je] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.section-heading[b-x9ej8qy1je] {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.grid-scroll-wrapper[b-x9ej8qy1je] { overflow-x: auto; }

[b-x9ej8qy1je] table.mis-reports-grid { min-width: 820px; }

/* ── Result table ────────────────────────────────────────────────────── */
.result-table[b-x9ej8qy1je] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.result-table th[b-x9ej8qy1je] {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    border-bottom: 2px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    position: sticky;
    top: 0;
    z-index: 1;
}

.result-table td[b-x9ej8qy1je] {
    padding: 6px 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.result-table tbody tr:hover[b-x9ej8qy1je] {
    background: var(--neutral-fill-secondary-hover);
}

/* ── Dialog styles (FluentDialogBody / FluentDialogFooter) ───────────
   FluentDialogBody renders as <div class="fluent-dialog-body">.
   Use ::deep with CLASS selectors — NOT element selectors.            */
[b-x9ej8qy1je] .fluent-dialog-body {
    padding: 4px 28px 12px;
}

[b-x9ej8qy1je] .fluent-dialog-footer {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Form layout (vertical stacked — §7.4) ───────────────────────────── */
.form-section[b-x9ej8qy1je] {
    padding: 20px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.form-section.last[b-x9ej8qy1je] {
    padding-bottom: 4px;
    border-bottom: none;
}

.form-grid[b-x9ej8qy1je] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
}

/* Each field wrapper becomes one grid item; label + input stack vertically */
.form-grid > div[b-x9ej8qy1je] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-grid > .full-width[b-x9ej8qy1je] { grid-column: 1 / -1; }

/* Fluent web components fill their wrapper */
[b-x9ej8qy1je] fluent-text-field,
[b-x9ej8qy1je] fluent-text-area,
[b-x9ej8qy1je] fluent-select {
    width: 100%;
}

/* ── Status toggle row (for IsActive in edit dialog) ────────────────── */
.status-toggle-row[b-x9ej8qy1je] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.status-toggle-info[b-x9ej8qy1je] { display: flex; flex-direction: column; gap: 2px; }

.status-toggle-title[b-x9ej8qy1je] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.status-toggle-desc[b-x9ej8qy1je] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Guided form pickers (column / filter / groupby / sort) ─────────── */
.picker-label[b-x9ej8qy1je] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.picker-hint[b-x9ej8qy1je] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 8px;
}

.picker-all-toggle[b-x9ej8qy1je] { margin-bottom: 6px; }

.column-picker[b-x9ej8qy1je] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 12px;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    margin-top: 4px;
}

.filter-row[b-x9ej8qy1je] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}

.filter-eq[b-x9ej8qy1je] {
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    flex-shrink: 0;
    padding: 0 2px;
}

/* Native <select> inside a dialog loop. FluentSelect is not used for the operator and
   aggregate pickers because multiple dynamic FluentSelect instances inside a dialog loop
   silently trap their own DOM events; a plain select styled to match is reliable. */
.fluent-input[b-x9ej8qy1je] {
    padding: 6px 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    font-size: 14px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.fluent-input:focus[b-x9ej8qy1je] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    outline: none;
}

.sort-row[b-x9ej8qy1je] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ══ Responsive ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .metrics-row[b-x9ej8qy1je] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-x9ej8qy1je] { padding: 16px; gap: 16px; }
    .page-title[b-x9ej8qy1je] { font-size: 22px; }
    .header-content[b-x9ej8qy1je] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-x9ej8qy1je] { flex-wrap: wrap; }
    .metrics-row[b-x9ej8qy1je] { grid-template-columns: 1fr; gap: 12px; }
    .list-search[b-x9ej8qy1je] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-x9ej8qy1je] { display: none; }
    .toolbar-filters[b-x9ej8qy1je] { width: 100%; }
    .toolbar-filters > *[b-x9ej8qy1je] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 120px; }
    /* Always show actions on touch devices */
    .row-actions[b-x9ej8qy1je] { opacity: 1; }
    /* Form grid collapses to single column */
    .form-grid[b-x9ej8qy1je] { grid-template-columns: 1fr; }
}


/* /Pages/Compliance/NbsSubmissions.razor.rz.scp.css */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  NBS Submissions  –  scoped component styles                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Page shell ─────────────────────────────────────────────────── */
.page-container[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────────────── */
.page-header[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-content[b-zpzj966ikh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-zpzj966ikh] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
}

.page-description[b-zpzj966ikh] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-zpzj966ikh] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Error bar ───────────────────────────────────────────────────── */
.error-bar[b-zpzj966ikh] {
    border-radius: 6px;
}

/* ── Metrics row ─────────────────────────────────────────────────── */
.metrics-row[b-zpzj966ikh] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--neutral-layer-1);
    border-radius: 10px;
    border: 1px solid var(--neutral-stroke-layer-rest);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    transition: box-shadow 150ms ease;
}

.metric-card:hover[b-zpzj966ikh] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
}

.metric-icon-wrap[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.metric-icon-blue[b-zpzj966ikh]  { background: color-mix(in srgb, #0078d4 14%, transparent); color: #0078d4; }
.metric-icon-amber[b-zpzj966ikh] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.metric-icon-green[b-zpzj966ikh] { background: color-mix(in srgb, #107c10 14%, transparent); color: #107c10; }
.metric-icon-red[b-zpzj966ikh]   { background: color-mix(in srgb, #c42b1c 14%, transparent); color: #c42b1c; }

.metric-body[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-zpzj966ikh] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--neutral-foreground-rest);
}

.metric-title[b-zpzj966ikh] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.metric-desc[b-zpzj966ikh] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Generate panel ──────────────────────────────────────────────── */
.generate-panel[b-zpzj966ikh] {
    padding: 20px;
    background: var(--neutral-layer-1);
    border-radius: 10px;
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-left: 3px solid #4f46e5;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}

.generate-panel-header[b-zpzj966ikh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.generate-icon-wrap[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    background: color-mix(in srgb, #4f46e5 12%, transparent);
    color: #4f46e5;
}

.generate-title[b-zpzj966ikh] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.generate-subtitle[b-zpzj966ikh] {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.generate-fields[b-zpzj966ikh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

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

.form-label[b-zpzj966ikh] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.generate-action[b-zpzj966ikh] {
    display: flex;
    justify-content: flex-start;
}

/* ── List container ──────────────────────────────────────────────── */
.list-container[b-zpzj966ikh] {
    background: var(--neutral-layer-1);
    border-radius: 10px;
    border: 1px solid var(--neutral-stroke-layer-rest);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}

/* ── Toolbar ─────────────────────────────────────────────────────── */
.list-toolbar[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}

.list-search[b-zpzj966ikh] {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 320px;
}

.toolbar-divider[b-zpzj966ikh] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-spacer[b-zpzj966ikh] { flex: 1 1 auto; }

.record-count[b-zpzj966ikh] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Grid ─────────────────────────────────────────────────────────── */
[b-zpzj966ikh] table.nbs-grid { min-width: 950px; }

.grid-avatar[b-zpzj966ikh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.5px;
    overflow: hidden;
}

.avatar-nbs8[b-zpzj966ikh] { background: color-mix(in srgb, #0078d4 15%, transparent); color: #0078d4; }
.avatar-nbs9[b-zpzj966ikh] { background: color-mix(in srgb, #7c3aed 15%, transparent); color: #7c3aed; }

.record-main-cell[b-zpzj966ikh]   { display: flex; flex-direction: column; gap: 2px; }
.record-title[b-zpzj966ikh]       { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); }
.record-subtitle[b-zpzj966ikh]    { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── Type badges ─────────────────────────────────────────────────── */
.type-badge[b-zpzj966ikh] {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.type-nbs8[b-zpzj966ikh] { background: rgba(0, 120, 212, 0.12); color: #0078d4; }
.type-nbs9[b-zpzj966ikh] { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }

/* ── Status badges ───────────────────────────────────────────────── */
.status-badge[b-zpzj966ikh] {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-pending[b-zpzj966ikh]  { background: rgba(217, 119, 6, 0.12);   color: #d97706; }
.status-info[b-zpzj966ikh]     { background: rgba(0, 120, 212, 0.12);   color: #0078d4; }
.status-success[b-zpzj966ikh]  { background: rgba(16, 124, 16, 0.12);   color: #107c10; }
.status-rejected[b-zpzj966ikh] { background: rgba(196, 43, 28, 0.12);   color: #c42b1c; }

/* ── Row actions ─────────────────────────────────────────────────── */
.row-actions[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.row-action-btn[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    color: var(--neutral-foreground-hint);
    transition: background 0.12s, color 0.12s;
    padding: 0;
}

.row-action-btn:hover[b-zpzj966ikh] {
    background: var(--neutral-fill-hover);
    color: var(--neutral-foreground-rest);
}

/* code-value ─────────────────────────────────────────────────────── */
.code-value[b-zpzj966ikh] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    background: var(--neutral-fill-layer-rest);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-layer-rest);
    color: var(--neutral-foreground-rest);
}

.ack-number[b-zpzj966ikh] {
    font-size: 11px;
    letter-spacing: 0.3px;
}

/* ── Attempt history ─────────────────────────────────────────────── */
/* Every attempt at a filing, rejections included. The rejected ones are the reason this list exists,
   so they are shown in full rather than truncated behind a "show more". */
.details-section-title[b-zpzj966ikh] {
    margin: 20px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.details-section-note[b-zpzj966ikh] {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.attempt-list[b-zpzj966ikh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.attempt-item[b-zpzj966ikh] {
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--neutral-fill-layer-rest);
}

.attempt-head[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.attempt-when[b-zpzj966ikh] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.attempt-line[b-zpzj966ikh] {
    margin-top: 6px;
    font-size: 12px;
    word-break: break-word;
}

.attempt-response[b-zpzj966ikh] {
    margin: 6px 0 0;
    padding: 8px;
    max-height: 180px;
    overflow: auto;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--neutral-fill-input-rest);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 4px;
    color: var(--neutral-foreground-rest);
}

/* ── Skeleton ────────────────────────────────────────────────────── */
.skeleton-list[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.skeleton-row[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Empty / Error state ─────────────────────────────────────────── */
.state-box[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
}

.state-icon[b-zpzj966ikh] {
    color: var(--neutral-foreground-hint);
    opacity: 0.45;
}

.state-title[b-zpzj966ikh] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-hint[b-zpzj966ikh] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    max-width: 380px;
}

/* ── List footer / pagination ────────────────────────────────────── */
.list-footer[b-zpzj966ikh] {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Mobile entity cards ─────────────────────────────────────────── */
.entity-list-mobile[b-zpzj966ikh] { display: none; }

.entity-card[b-zpzj966ikh] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
}

.entity-card:last-child[b-zpzj966ikh] { border-bottom: none; }

.entity-card-header[b-zpzj966ikh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Always-visible action buttons in mobile entity cards */
.entity-card-actions[b-zpzj966ikh] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.card-action-btn[b-zpzj966ikh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    cursor: pointer;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    padding: 0;
}

.card-action-btn:hover[b-zpzj966ikh],
.card-action-btn:focus-visible[b-zpzj966ikh] {
    background: var(--neutral-fill-hover);
    color: var(--neutral-foreground-rest);
    border-color: var(--neutral-stroke-hover);
}

.card-action-btn:focus-visible[b-zpzj966ikh] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.entity-card-name[b-zpzj966ikh] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-card-fields[b-zpzj966ikh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.entity-card-field[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-label[b-zpzj966ikh] {
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.field-value[b-zpzj966ikh] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    word-break: break-all;
}

/* ── Dialog ──────────────────────────────────────────────────────── */
.dialog-subtitle[b-zpzj966ikh] {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.details-grid[b-zpzj966ikh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.details-field[b-zpzj966ikh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.details-field-wide[b-zpzj966ikh] {
    grid-column: span 2;
}

.details-label[b-zpzj966ikh] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-foreground-hint);
}

.details-value[b-zpzj966ikh] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
}

.details-value-danger[b-zpzj966ikh] {
    color: #c42b1c;
    background: rgba(196, 43, 28, 0.08);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-zpzj966ikh] {
        grid-template-columns: 1fr 1fr;
    }

    .generate-fields[b-zpzj966ikh] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .page-container[b-zpzj966ikh] { padding: 16px; gap: 14px; }
    .page-title[b-zpzj966ikh]      { font-size: 18px; }

    /* Single column — each KPI card occupies one full row */
    .metrics-row[b-zpzj966ikh] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .metric-card[b-zpzj966ikh]     { padding: 14px 12px; gap: 12px; }
    .metric-value[b-zpzj966ikh]    { font-size: 11px; }
    .metric-icon-wrap[b-zpzj966ikh]{ width: 36px; height: 36px; border-radius: 8px; }
    .metric-title[b-zpzj966ikh], .metric-desc[b-zpzj966ikh] { white-space: normal; }
    .metric-desc[b-zpzj966ikh] { font-size: 11px; }

    .generate-panel[b-zpzj966ikh]  { padding: 14px 12px; }
    /* Stacked vertical form layout on mobile — label above, input below */
    .generate-fields[b-zpzj966ikh] { grid-template-columns: 1fr; }

    .list-toolbar[b-zpzj966ikh]    { flex-direction: column; align-items: stretch; gap: 8px; }
    .list-search[b-zpzj966ikh]     { max-width: 100%; }
    .toolbar-filters[b-zpzj966ikh] { flex-wrap: wrap; }
    .toolbar-divider[b-zpzj966ikh] { display: none; }
    .record-count[b-zpzj966ikh]    { text-align: right; }

    /* Hide desktop grid, show mobile cards */
    [b-zpzj966ikh] .nbs-grid    { display: none !important; }
    .entity-list-mobile[b-zpzj966ikh] { display: block; }

    /* Mobile entity card actions are always visible — no hover needed on touch */
    .entity-card-actions[b-zpzj966ikh] { gap: 8px; }
    .card-action-btn[b-zpzj966ikh] {
        width: 38px;
        height: 38px;
    }

    .entity-card-fields[b-zpzj966ikh] { grid-template-columns: 1fr 1fr; }

    /* Dialog: single-column on mobile */
    .details-grid[b-zpzj966ikh] { grid-template-columns: 1fr; }
    .details-field-wide[b-zpzj966ikh] { grid-column: span 1; }

    /* Dialog fits within mobile viewport */
    .dialog-subtitle[b-zpzj966ikh] { margin-bottom: 12px; }
}
/* /Pages/Compliance/NtrBatches.razor.rz.scp.css */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  NTR Batches  –  scoped component styles                     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Page shell ─────────────────────────────────────────────────── */
.page-container[b-c2il5zkbgn] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-c2il5zkbgn] { display: flex; flex-direction: column; gap: 8px; }

.header-content[b-c2il5zkbgn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-c2il5zkbgn] { display: flex; flex-direction: column; gap: 4px; }

.page-title[b-c2il5zkbgn] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
}

.page-description[b-c2il5zkbgn] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-c2il5zkbgn] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.info-bar[b-c2il5zkbgn], .error-bar[b-c2il5zkbgn] { border-radius: 6px; }

/* ── Metrics row ─────────────────────────────────────────────────── */
.metrics-row[b-c2il5zkbgn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-c2il5zkbgn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    transition: box-shadow 0.15s ease;
}

.metric-card:hover[b-c2il5zkbgn] { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.icon-wrap[b-c2il5zkbgn] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-blue[b-c2il5zkbgn]   { background: rgba(0,120,212,.12); color: #0078d4; }
.icon-amber[b-c2il5zkbgn]  { background: rgba(200,110,0,.12);  color: #c86e00; }
.icon-purple[b-c2il5zkbgn] { background: rgba(100,0,200,.12);  color: #6400c8; }
.icon-green[b-c2il5zkbgn]  { background: rgba(0,128,0,.12);    color: #007a00; }

.metric-body[b-c2il5zkbgn] { display: flex; flex-direction: column; gap: 2px; }

.metric-value[b-c2il5zkbgn] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

.metric-label[b-c2il5zkbgn] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Generate panel ──────────────────────────────────────────────── */
.generate-panel[b-c2il5zkbgn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
}

.generate-panel-header[b-c2il5zkbgn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    width: 100%;
}

.generate-fields[b-c2il5zkbgn] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1;
}

.generate-action[b-c2il5zkbgn] { display: flex; align-items: flex-end; }

/* ── Form helpers ────────────────────────────────────────────────── */
.form-field[b-c2il5zkbgn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.form-label[b-c2il5zkbgn] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.form-input[b-c2il5zkbgn],
.form-select[b-c2il5zkbgn] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-layer-floating);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.1s;
}

.form-input:focus[b-c2il5zkbgn],
.form-select:focus[b-c2il5zkbgn] { border-color: var(--accent-fill-rest); }

/* ── List container ──────────────────────────────────────────────── */
.list-container[b-c2il5zkbgn] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    overflow: hidden;
}

.list-toolbar[b-c2il5zkbgn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-wrap: wrap;
}

.toolbar-filters[b-c2il5zkbgn] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-spacer[b-c2il5zkbgn] { flex: 1; }

.record-count[b-c2il5zkbgn] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Skeleton ────────────────────────────────────────────────────── */
.skeleton-list[b-c2il5zkbgn] { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; }
.skeleton-row[b-c2il5zkbgn] { display: flex; align-items: center; gap: 16px; padding: 10px 16px; }

/* ── State box ───────────────────────────────────────────────────── */
.state-box[b-c2il5zkbgn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 32px;
    text-align: center;
}

.state-icon[b-c2il5zkbgn] { color: var(--neutral-foreground-hint); opacity: .6; }
.state-title[b-c2il5zkbgn] { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-hint[b-c2il5zkbgn]  { margin: 0; font-size: 14px; color: var(--neutral-foreground-hint); }

/* ── Data grid ───────────────────────────────────────────────────── */
[b-c2il5zkbgn] table.ntr-grid { width: 100%; min-width: 900px; }

.grid-avatar[b-c2il5zkbgn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.grid-avatar-teal[b-c2il5zkbgn] { background: rgba(0,150,136,.15); color: #00897b; }

.record-main-cell[b-c2il5zkbgn] { display: flex; flex-direction: column; gap: 2px; }
.record-title[b-c2il5zkbgn]  { font-size: 14px; font-weight: 500; }
.record-subtitle[b-c2il5zkbgn] { font-size: 12px; color: var(--neutral-foreground-hint); }

.record-count-value[b-c2il5zkbgn] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.code-value[b-c2il5zkbgn] {
    font-family: var(--font-family-monospace, Consolas, monospace);
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Status badges ───────────────────────────────────────────────── */
.status-badge[b-c2il5zkbgn] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-draft[b-c2il5zkbgn]        { background: rgba(150,150,150,.15); color: #555; }
.status-generated[b-c2il5zkbgn]    { background: rgba(0,120,212,.12);   color: #0063b1; }
.status-submitted[b-c2il5zkbgn]    { background: rgba(100,0,200,.12);   color: #6400c8; }
.status-acknowledged[b-c2il5zkbgn] { background: rgba(0,128,0,.12);     color: #007a00; }
.status-default[b-c2il5zkbgn]      { background: rgba(150,150,150,.12); color: #666; }

/* ── Row actions ─────────────────────────────────────────────────── */
.row-actions-col[b-c2il5zkbgn] { overflow: visible !important; }

.row-actions[b-c2il5zkbgn] { display: flex; gap: 4px; align-items: center; }

.row-action-btn[b-c2il5zkbgn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.row-action-btn:hover[b-c2il5zkbgn] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

/* ── Mobile cards ────────────────────────────────────────────────── */
.entity-list-mobile[b-c2il5zkbgn] { display: none; }

.entity-card[b-c2il5zkbgn] {
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding: 14px 16px;
}

.entity-card:last-child[b-c2il5zkbgn] { border-bottom: none; }

.entity-card-header[b-c2il5zkbgn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-c2il5zkbgn] { display: flex; flex-direction: column; gap: 4px; }
.entity-card-name[b-c2il5zkbgn]  { font-size: 14px; font-weight: 600; }
.entity-card-actions[b-c2il5zkbgn] { display: flex; gap: 4px; }

.card-action-btn[b-c2il5zkbgn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: var(--neutral-fill-stealth-rest);
    color: var(--neutral-foreground-hint);
    cursor: pointer;
}

.card-action-btn:hover[b-c2il5zkbgn] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.entity-card-fields[b-c2il5zkbgn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-c2il5zkbgn] { display: flex; flex-direction: column; gap: 2px; }
.field-label[b-c2il5zkbgn] { font-size: 11px; color: var(--neutral-foreground-hint); text-transform: uppercase; letter-spacing: .3px; }
.field-value[b-c2il5zkbgn] { font-size: 13px; color: var(--neutral-foreground-rest); }

/* ── List footer ─────────────────────────────────────────────────── */
.list-footer[b-c2il5zkbgn] {
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    display: flex;
    justify-content: flex-end;
}

/* ── Dialog styles ───────────────────────────────────────────────── */
.dialog-subtitle[b-c2il5zkbgn] { margin: 0 0 16px; font-size: 14px; color: var(--neutral-foreground-hint); }
.dialog-text[b-c2il5zkbgn]     { margin: 0 0 12px; font-size: 14px; color: var(--neutral-foreground-rest); }
.dialog-batch-ref[b-c2il5zkbgn] { margin: 0; font-size: 15px; color: var(--neutral-foreground-rest); }

.dialog-form[b-c2il5zkbgn] { display: flex; flex-direction: column; gap: 16px; }

.dialog-form-2col[b-c2il5zkbgn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.form-field-full[b-c2il5zkbgn] { grid-column: 1 / -1; }

.form-section-header[b-c2il5zkbgn] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--neutral-foreground-hint);
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding-bottom: 6px;
    margin-top: 4px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .metrics-row[b-c2il5zkbgn] { grid-template-columns: 1fr 1fr; }
    [b-c2il5zkbgn] .ntr-grid { display: none; }
    .entity-list-mobile[b-c2il5zkbgn] { display: block; }
    .dialog-form-2col[b-c2il5zkbgn] { grid-template-columns: 1fr; }
    .form-field-full[b-c2il5zkbgn] { grid-column: 1; }
}

@media (max-width: 480px) {
    .page-container[b-c2il5zkbgn] { padding: 16px; gap: 16px; }
    .metrics-row[b-c2il5zkbgn] { grid-template-columns: 1fr; }
    .entity-card-fields[b-c2il5zkbgn] { grid-template-columns: 1fr; }
}
/* /Pages/Compliance/OverseasInvestments.razor.rz.scp.css */
.page-container[b-s7iagbn954] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.info-bar[b-s7iagbn954],
.error-bar[b-s7iagbn954] {
    margin-bottom: 1rem;
}

/* ── Metrics ─────────────────────────────────────────────────────── */

.metrics-row[b-s7iagbn954] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card[b-s7iagbn954] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 8px;
    background: var(--neutral-layer-1, #fff);
}

.icon-wrap[b-s7iagbn954] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    flex-shrink: 0;
}

.icon-blue[b-s7iagbn954]  { background: #e5f1fb; color: #0f6cbd; }
.icon-green[b-s7iagbn954] { background: #e3f5e8; color: #107c41; }
.icon-amber[b-s7iagbn954] { background: #fdf3e3; color: #b26a00; }
.icon-red[b-s7iagbn954]   { background: #fde7e9; color: #c50f1f; }

.metric-body[b-s7iagbn954] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.metric-value[b-s7iagbn954] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.metric-label[b-s7iagbn954] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint, #616161);
}

/* ── Panels ──────────────────────────────────────────────────────── */

.generate-panel[b-s7iagbn954] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 8px;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--neutral-layer-1, #fff);
}

.generate-panel-header[b-s7iagbn954] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.generate-panel-note[b-s7iagbn954] {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint, #616161);
}

.generate-fields[b-s7iagbn954] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.generate-action[b-s7iagbn954] {
    display: flex;
    justify-content: flex-end;
}

.generate-result[b-s7iagbn954] {
    margin-top: 1rem;
}

.generate-warnings[b-s7iagbn954] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 6px;
    padding: 0.85rem 1rem;
}

.generate-warnings-title[b-s7iagbn954] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.generate-warnings ul[b-s7iagbn954] {
    margin: 0;
    padding-left: 1.25rem;
}

.generate-warnings li[b-s7iagbn954] {
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}

.quarter-end-value[b-s7iagbn954] {
    padding-top: 0.4rem;
    font-weight: 600;
}

/* ── Form fields ─────────────────────────────────────────────────── */

.form-field[b-s7iagbn954] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-label[b-s7iagbn954] {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.form-input[b-s7iagbn954] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 4px;
    font: inherit;
    background: var(--neutral-fill-input-rest, #fff);
    color: var(--neutral-foreground-rest, #242424);
    width: 100%;
    box-sizing: border-box;
}

.field-hint[b-s7iagbn954] {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #616161);
}

.dialog-form[b-s7iagbn954] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.form-field-wide[b-s7iagbn954] {
    grid-column: 1 / -1;
}

.dialog-subtitle[b-s7iagbn954] {
    margin: 0 0 1rem;
    color: var(--neutral-foreground-hint, #616161);
}

/* ── Lists ───────────────────────────────────────────────────────── */

.list-container[b-s7iagbn954] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 8px;
    background: var(--neutral-layer-1, #fff);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.list-toolbar[b-s7iagbn954] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
}

.list-toolbar-title[b-s7iagbn954] {
    font-weight: 600;
}

.empty-state[b-s7iagbn954] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--neutral-foreground-hint, #616161);
}

.record-subtitle[b-s7iagbn954] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint, #616161);
}

.status-badge[b-s7iagbn954] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 0.4rem;
}

.status-nil[b-s7iagbn954] {
    background: #f0f0f0;
    color: #616161;
}

/* ── Partner table ───────────────────────────────────────────────── */

.partner-section[b-s7iagbn954] {
    margin-top: 1.25rem;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    padding-top: 1rem;
}

.partner-section-header[b-s7iagbn954] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.partner-table[b-s7iagbn954] {
    width: 100%;
    border-collapse: collapse;
}

.partner-table th[b-s7iagbn954] {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint, #616161);
    padding: 0.35rem 0.4rem;
}

.partner-table td[b-s7iagbn954] {
    padding: 0.25rem 0.4rem;
    vertical-align: middle;
}

.partner-currency[b-s7iagbn954] {
    text-transform: uppercase;
}
/* /Pages/Compliance/RegulatoryReturns.razor.rz.scp.css */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  Regulatory Returns (Plan 64)  –  scoped component styles    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Page shell ─────────────────────────────────────────────────── */
.page-container[b-c41uvj0bcy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Info / Error bars ───────────────────────────────────────────── */
.info-bar[b-c41uvj0bcy], .error-bar[b-c41uvj0bcy] { border-radius: 6px; }

/* ── Metrics row ─────────────────────────────────────────────────── */
.metrics-row[b-c41uvj0bcy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-c41uvj0bcy] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    transition: box-shadow 0.15s ease;
}

.metric-card:hover[b-c41uvj0bcy] { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.icon-wrap[b-c41uvj0bcy] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-blue[b-c41uvj0bcy]   { background: rgba(0,120,212,.12); color: #0078d4; }
.icon-amber[b-c41uvj0bcy]  { background: rgba(200,110,0,.12);  color: #c86e00; }
.icon-purple[b-c41uvj0bcy] { background: rgba(100,0,200,.12);  color: #6400c8; }
.icon-green[b-c41uvj0bcy]  { background: rgba(0,128,0,.12);    color: #007a00; }
.icon-red[b-c41uvj0bcy]    { background: rgba(220,38,38,.12);  color: #dc2626; }

.metric-body[b-c41uvj0bcy] { display: flex; flex-direction: column; gap: 2px; }

.metric-value[b-c41uvj0bcy] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

.metric-label[b-c41uvj0bcy] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Generate panel ──────────────────────────────────────────────── */
.generate-panel[b-c41uvj0bcy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
}

.generate-panel-header[b-c41uvj0bcy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    width: 100%;
}

.generate-fields[b-c41uvj0bcy] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1;
}

.generate-action[b-c41uvj0bcy] { display: flex; align-items: flex-end; }

/* ── Form helpers ────────────────────────────────────────────────── */
.form-field[b-c41uvj0bcy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.form-label[b-c41uvj0bcy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.form-input[b-c41uvj0bcy],
.form-select[b-c41uvj0bcy] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-layer-floating);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.1s;
}

.form-input:focus[b-c41uvj0bcy],
.form-select:focus[b-c41uvj0bcy] { border-color: var(--accent-fill-rest); }

/* ── List container ──────────────────────────────────────────────── */
.list-container[b-c41uvj0bcy] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    overflow: hidden;
}

/* ── List toolbar ────────────────────────────────────────────────── */
.list-toolbar[b-c41uvj0bcy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-wrap: wrap;
}

.toolbar-filters[b-c41uvj0bcy] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-spacer[b-c41uvj0bcy] { flex: 1; }

.record-count[b-c41uvj0bcy] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Skeleton loading ────────────────────────────────────────────── */
.skeleton-list[b-c41uvj0bcy] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 0;
}

.skeleton-row[b-c41uvj0bcy] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
}

/* ── Empty / error state box ─────────────────────────────────────── */
.state-box[b-c41uvj0bcy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 32px;
    text-align: center;
}

.state-icon[b-c41uvj0bcy] { color: var(--neutral-foreground-hint); opacity: .6; }

.state-title[b-c41uvj0bcy] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-hint[b-c41uvj0bcy] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

/* ── Data grid ───────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-c41uvj0bcy] { overflow-x: auto; }

[b-c41uvj0bcy] table.rr-grid { width: 100%; min-width: 1080px; }

/* record cell */
.record-main-cell[b-c41uvj0bcy] { display: flex; flex-direction: column; gap: 2px; }
.record-title[b-c41uvj0bcy] { font-size: 14px; font-weight: 500; }
.record-subtitle[b-c41uvj0bcy] { font-size: 12px; color: var(--neutral-foreground-hint); }
.overdue-text[b-c41uvj0bcy] { color: #dc2626; font-weight: 600; }

/* code value */
.code-value[b-c41uvj0bcy] {
    font-family: var(--font-family-monospace, Consolas, monospace);
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Status badges ───────────────────────────────────────────────── */
.status-badge[b-c41uvj0bcy] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-draft[b-c41uvj0bcy]         { background: rgba(150,150,150,.15); color: #555; }
.status-generated[b-c41uvj0bcy]     { background: rgba(0,120,212,.12);   color: #0063b1; }
.status-submitted[b-c41uvj0bcy]     { background: rgba(100,0,200,.12);   color: #6400c8; }
.status-acknowledged[b-c41uvj0bcy]  { background: rgba(0,128,0,.12);     color: #007a00; }
.status-overdue-badge[b-c41uvj0bcy] { background: rgba(220,38,38,.12);   color: #dc2626; }
/* Emailed during a portal outage — amber, because the online filing is still owed. */
.status-contingency[b-c41uvj0bcy]   { background: rgba(234,88,12,.12);   color: #c2410c; }
.status-default[b-c41uvj0bcy]       { background: rgba(150,150,150,.12); color: #666; }
/* A filed nil return: teal, so it reads as a filing in its own right rather than as a paler
   version of Complete or a variant of Pending. */
.status-nil[b-c41uvj0bcy]           { background: rgba(13,148,136,.12);  color: #0d9488; }
/* Nothing failed, but something could not be checked. Amber rather than green: a check we could
   not take is not a check that passed. */
.status-quality-fair[b-c41uvj0bcy]  { background: rgba(202,138,4,.12);   color: #a16207; }

/* ── Data-quality findings, inside the submit dialog ──────────────── */
.dialog-note[b-c41uvj0bcy] {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.quality-findings[b-c41uvj0bcy] {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(220,38,38,.25);
    border-radius: 6px;
    background: rgba(220,38,38,.05);
}

.quality-findings-title[b-c41uvj0bcy] {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #b91c1c;
}

.quality-findings-list[b-c41uvj0bcy] {
    margin: 0 0 10px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quality-findings-list li[b-c41uvj0bcy] { font-size: 12px; }

.quality-findings-list .record-title[b-c41uvj0bcy]    { display: block; font-weight: 600; }
.quality-findings-list .record-subtitle[b-c41uvj0bcy] { display: block; color: var(--neutral-foreground-hint); }

.quality-findings-hint[b-c41uvj0bcy] {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
}

.field-error[b-c41uvj0bcy] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #b91c1c;
}

/* ── Bulk sign-off ───────────────────────────────────────────────── */
.bulk-bar[b-c41uvj0bcy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 6px;
    background: var(--neutral-layer-2, #fafafa);
}

.bulk-count[b-c41uvj0bcy] { font-size: 13px; font-weight: 600; }

.bulk-hint[b-c41uvj0bcy]  { font-size: 12px; color: #c2410c; }

.bulk-result[b-c41uvj0bcy] { display: flex; flex-direction: column; gap: 6px; }

.bulk-failures[b-c41uvj0bcy] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
}

.bulk-confirm-list[b-c41uvj0bcy] {
    margin: 8px 0 0;
    padding-left: 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
}

.bulk-confirm-list li[b-c41uvj0bcy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #ededed);
}

.bulk-confirm-list li:last-child[b-c41uvj0bcy] { border-bottom: none; }

.row-select-col[b-c41uvj0bcy] { overflow: visible !important; }

.row-select[b-c41uvj0bcy] { cursor: pointer; width: 16px; height: 16px; }

/* ── Row actions ─────────────────────────────────────────────────── */
.row-actions-col[b-c41uvj0bcy] { overflow: visible !important; }

.row-actions[b-c41uvj0bcy] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.row-action-btn[b-c41uvj0bcy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.row-action-btn:hover:not(:disabled)[b-c41uvj0bcy] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.row-action-btn:disabled[b-c41uvj0bcy] {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Mobile cards ────────────────────────────────────────────────── */
.entity-list-mobile[b-c41uvj0bcy] { display: none; }

.entity-card[b-c41uvj0bcy] {
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding: 14px 16px;
}

.entity-card:last-child[b-c41uvj0bcy] { border-bottom: none; }

.entity-card-header[b-c41uvj0bcy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-c41uvj0bcy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.entity-card-name[b-c41uvj0bcy] { font-size: 14px; font-weight: 600; }

.entity-card-actions[b-c41uvj0bcy] { display: flex; gap: 4px; }

.card-action-btn[b-c41uvj0bcy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: var(--neutral-fill-stealth-rest);
    color: var(--neutral-foreground-hint);
    cursor: pointer;
}

.card-action-btn:hover[b-c41uvj0bcy] { background: var(--neutral-fill-stealth-hover); color: var(--neutral-foreground-rest); }

.entity-card-fields[b-c41uvj0bcy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-c41uvj0bcy] { display: flex; flex-direction: column; gap: 2px; }
.field-label[b-c41uvj0bcy] { font-size: 11px; color: var(--neutral-foreground-hint); text-transform: uppercase; letter-spacing: .3px; }
.field-value[b-c41uvj0bcy] { font-size: 13px; color: var(--neutral-foreground-rest); }

/* ── List footer ─────────────────────────────────────────────────── */
.list-footer[b-c41uvj0bcy] {
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    display: flex;
    justify-content: flex-end;
}

/* ── Dialog styles ───────────────────────────────────────────────── */
.dialog-subtitle[b-c41uvj0bcy] {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.dialog-form[b-c41uvj0bcy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-c41uvj0bcy] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    [b-c41uvj0bcy] .rr-grid { display: none; }
    .grid-scroll-wrapper[b-c41uvj0bcy] { display: none; }
    .entity-list-mobile[b-c41uvj0bcy] { display: block; }
}

@media (max-width: 480px) {
    .page-container[b-c41uvj0bcy] { padding: 16px; gap: 16px; }
    .metrics-row[b-c41uvj0bcy] { grid-template-columns: 1fr; }
    .entity-card-fields[b-c41uvj0bcy] { grid-template-columns: 1fr; }
}
/* /Pages/Compliance/ReportDetail.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   COMPLIANCE REPORT DETAIL — Scoped styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page container ─────────────────────────────────────────────────── */
.page-container[b-0jm2333her] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────── */
.page-header[b-0jm2333her] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-0jm2333her] { flex: 1; }

.page-title[b-0jm2333her] {
    font-size: 26px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-subtitle[b-0jm2333her] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-0jm2333her] { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Error bar ──────────────────────────────────────────────────────── */
.error-bar[b-0jm2333her] { margin: 0; }

/* ── Loading ────────────────────────────────────────────────────────── */
.loading-center[b-0jm2333her] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

/* ── Status bar ─────────────────────────────────────────────────────── */
.status-bar[b-0jm2333her] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 12px 20px;
    flex-wrap: wrap;
}

.status-bar-left[b-0jm2333her]  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-bar-right[b-0jm2333her] { display: flex; align-items: center; gap: 8px; }

/* ── Section title ──────────────────────────────────────────────────── */
.detail-section-title[b-0jm2333her] {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-foreground-hint);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Metadata card ──────────────────────────────────────────────────── */
.meta-card[b-0jm2333her] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.meta-row[b-0jm2333her] {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.meta-row:last-child[b-0jm2333her] { border-bottom: none; }

.meta-label[b-0jm2333her] {
    flex: 0 0 160px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
}

.meta-value[b-0jm2333her] {
    flex: 1;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.remarks-text[b-0jm2333her] {
    font-style: italic;
    color: #EF4444;
}

/* ── Status badges ──────────────────────────────────────────────────── */
.detail-badge[b-0jm2333her] {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.detail-badge--approved[b-0jm2333her]     { background: rgba(16,185,129,0.12); color: #10B981; }
.detail-badge--submitted[b-0jm2333her]    { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.detail-badge--underreview[b-0jm2333her]  { background: rgba(245,158,11,0.12); color: #D97706; }
.detail-badge--draft[b-0jm2333her]        { background: rgba(107,114,128,0.12); color: #6B7280; }
.detail-badge--generated[b-0jm2333her]    { background: rgba(59,130,246,0.12); color: #3B82F6; }
.detail-badge--rejected[b-0jm2333her]     { background: rgba(239,68,68,0.12);  color: #EF4444; }

/* ── Remarks chip ───────────────────────────────────────────────────── */
.remarks-chip[b-0jm2333her] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 2px 8px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Report content card ────────────────────────────────────────────── */
.report-content-card[b-0jm2333her] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 4px 0;
}

/* ── Report data table ──────────────────────────────────────────────── */
.report-table[b-0jm2333her] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.report-table-key[b-0jm2333her] {
    width: 240px;
    padding: 10px 20px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    vertical-align: top;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.report-table-val[b-0jm2333her] {
    padding: 10px 20px;
    color: var(--neutral-foreground-rest);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    word-break: break-word;
}

.report-table tr:last-child .report-table-key[b-0jm2333her],
.report-table tr:last-child .report-table-val[b-0jm2333her] { border-bottom: none; }

/* Raw JSON fallback */
.raw-json[b-0jm2333her] {
    font-family: var(--font-monospace, monospace);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-2);
    padding: 16px 20px;
    margin: 0;
    border-radius: 8px;
}

/* Muted helper text */
.meta-muted[b-0jm2333her] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-0jm2333her]  { padding: 16px; }
    .page-header[b-0jm2333her]     { flex-direction: column; align-items: stretch; }
    .page-actions[b-0jm2333her]    { justify-content: flex-end; }
    .meta-label[b-0jm2333her]      { flex: 0 0 120px; }
    .status-bar[b-0jm2333her]      { flex-direction: column; align-items: flex-start; }
    .status-bar-right[b-0jm2333her] { width: 100%; justify-content: flex-end; }
}

@media (max-width: 480px) {
    .page-title[b-0jm2333her]    { font-size: 20px; }
    .meta-row[b-0jm2333her]      { flex-direction: column; gap: 4px; }
    .meta-label[b-0jm2333her]    { flex: none; }
}
/* /Pages/Compliance/Reports.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   COMPLIANCE REPORTS — List View Archetype  (scoped styles)
   NOTE: tr.hover .row-actions reveal rule MUST stay in global-styles.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page container ─────────────────────────────────────────────────── */
.page-container[b-m12gxm06r9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────── */
.header-content[b-m12gxm06r9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-m12gxm06r9] { flex: 1; }

.page-title[b-m12gxm06r9] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-m12gxm06r9] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-m12gxm06r9] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Error bar ──────────────────────────────────────────────────────── */
.error-bar[b-m12gxm06r9] { margin: 0; }

/* ── Generate report panel ──────────────────────────────────────────── */
.generate-panel[b-m12gxm06r9] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid var(--accent-fill-rest);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.generate-panel-header[b-m12gxm06r9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.generate-title[b-m12gxm06r9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* 3-col fixed grid for generate form — 6 fields → 2 even rows */
.generate-fields[b-m12gxm06r9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* Vertical stacked form field — label above input */
.form-field[b-m12gxm06r9] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.generate-action[b-m12gxm06r9] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* ── List container ─────────────────────────────────────────────────── */
.list-container[b-m12gxm06r9] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Toolbar ────────────────────────────────────────────────────────── */
.list-toolbar[b-m12gxm06r9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    position: relative;
    z-index: 10;
}

/*
 * ⚠️ NBFC-CRITICAL: Wrap FluentSearch in <div class="list-search"> so that the
 * Blazor scope attribute [b-xxxx] lands on this native element, enabling flex
 * sizing. FluentSearch is a web component — Class= on the host element and scope
 * attributes are NOT injected into shadow DOM.
 */
.list-search[b-m12gxm06r9] { flex: 1 1 200px; max-width: 300px; }

.toolbar-divider[b-m12gxm06r9] { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }

.toolbar-filters[b-m12gxm06r9] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Skeleton loader ────────────────────────────────────────────────── */
.skeleton-list[b-m12gxm06r9] { display: flex; flex-direction: column; }

.skeleton-row[b-m12gxm06r9] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-m12gxm06r9] { border-bottom: none; }

/* ── Empty state ────────────────────────────────────────────────────── */
.state-box[b-m12gxm06r9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-m12gxm06r9]  { color: var(--neutral-foreground-hint); opacity: 0.45; margin-bottom: 4px; }
.state-title[b-m12gxm06r9] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-hint[b-m12gxm06r9]  { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Grid scroll wrapper ────────────────────────────────────────────── */
.grid-scroll-wrapper[b-m12gxm06r9] { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID MIN-WIDTH (horizontal overflow safety net; scroll wrapper is global)
══════════════════════════════════════════════════════════════════════════════ */
[b-m12gxm06r9] table.compliance-reports-grid {
    min-width: 900px;
}

/* ── Row actions — INITIAL HIDDEN STATE (scoped)
     ⚠ Reveal rule (tr.hover) MUST live in wwwroot/global-styles.css ONLY  */
.row-actions[b-m12gxm06r9] {
    opacity: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: flex-end;
    transition: opacity 200ms ease;
}

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge[b-m12gxm06r9] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge--approved[b-m12gxm06r9]     { background: rgba(16,185,129,0.12); color: #10B981; }
.status-badge--submitted[b-m12gxm06r9]    { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.status-badge--underreview[b-m12gxm06r9]  { background: rgba(245,158,11,0.12); color: #D97706; }
.status-badge--draft[b-m12gxm06r9]        { background: rgba(245,158,11,0.12); color: #D97706; }
.status-badge--pending[b-m12gxm06r9]      { background: rgba(245,158,11,0.12); color: #D97706; }
.status-badge--rejected[b-m12gxm06r9]     { background: rgba(239,68,68,0.12);  color: #EF4444; }

/* ── Pagination footer ──────────────────────────────────────────────── */
.list-footer[b-m12gxm06r9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.pager-count[b-m12gxm06r9] { font-size: 13px; color: var(--neutral-foreground-hint); }

.pager-controls[b-m12gxm06r9] { display: flex; align-items: center; gap: 4px; }

.pager-pages[b-m12gxm06r9] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    padding: 0 8px;
    min-width: 60px;
    text-align: center;
}

.pager-btn[b-m12gxm06r9] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
    transition: background 150ms ease;
}

.pager-btn:hover:not([disabled])[b-m12gxm06r9] { background: var(--neutral-layer-2); }
.pager-btn[disabled][b-m12gxm06r9]             { opacity: 0.4; cursor: not-allowed; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-m12gxm06r9]  { padding: 20px 24px; }
}

@media (max-width: 768px) {
    .page-container[b-m12gxm06r9]  { padding: 16px; }
    .header-content[b-m12gxm06r9]  { flex-direction: column; align-items: stretch; }
    .header-actions[b-m12gxm06r9]  { justify-content: flex-end; }
    .generate-fields[b-m12gxm06r9] { grid-template-columns: 1fr 1fr; }
    .list-search[b-m12gxm06r9]     { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-m12gxm06r9] { display: none; }
    .toolbar-filters[b-m12gxm06r9] { width: 100%; }
    /* ⚠ MOBILE: actions always visible — touch screens have no hover */
    .row-actions[b-m12gxm06r9]     { opacity: 1; }
}

@media (max-width: 480px) {
    .page-title[b-m12gxm06r9]      { font-size: 20px; }
    .generate-fields[b-m12gxm06r9] { grid-template-columns: 1fr; }
    .toolbar-filters > *[b-m12gxm06r9] { flex: 1 1 calc(50% - 4px) !important; min-width: 120px; }
}

/* ── Workflow steps indicator ───────────────────────────────────────── */
.workflow-steps[b-m12gxm06r9] {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 16px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow-x: auto;
}

.workflow-step[b-m12gxm06r9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ws-circle[b-m12gxm06r9] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
    font-weight: 600;
    transition: background 250ms ease, border-color 250ms ease;
}

.ws-label[b-m12gxm06r9] {
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    text-align: center;
    transition: color 250ms ease;
}

.workflow-step-line[b-m12gxm06r9] {
    flex: 1;
    height: 2px;
    background: var(--neutral-stroke-rest);
    min-width: 24px;
    margin-bottom: 24px; /* align with circle centers */
}

/* Active step */
.workflow-step--active .ws-circle[b-m12gxm06r9] {
    border-color: var(--accent-fill-rest);
    background: rgba(var(--accent-fill-rest-rgb, 0,120,212), 0.08);
    color: var(--accent-fill-rest);
}
.workflow-step--active .ws-label[b-m12gxm06r9] {
    color: var(--accent-fill-rest);
    font-weight: 600;
}

/* Completed step */
.workflow-step--done .ws-circle[b-m12gxm06r9] {
    border-color: #10B981;
    background: rgba(16,185,129,0.12);
    color: #10B981;
}
.workflow-step--done .ws-label[b-m12gxm06r9] { color: #10B981; }

/* Rejected step */
.workflow-step--rejected .ws-circle[b-m12gxm06r9] {
    border-color: #EF4444;
    background: rgba(239,68,68,0.1);
    color: #EF4444;
}
.workflow-step--rejected .ws-label[b-m12gxm06r9] { color: #EF4444; }

/* Completed connector line */
.workflow-step-line--done[b-m12gxm06r9] { background: #10B981; }

/* ── Row action button colour variants ──────────────────────────────── */
.row-action-btn--primary[b-m12gxm06r9] { color: var(--accent-fill-rest); }
.row-action-btn--primary:hover[b-m12gxm06r9] { background: rgba(var(--accent-fill-rest-rgb, 0,120,212), 0.08); }

.row-action-btn--success[b-m12gxm06r9] { color: #10B981; }
.row-action-btn--success:hover[b-m12gxm06r9] { background: rgba(16,185,129,0.10); }

.row-action-btn--danger[b-m12gxm06r9]  { color: #EF4444; }
.row-action-btn--danger:hover[b-m12gxm06r9]  { background: rgba(239,68,68,0.10); }

/* /Pages/Compliance/SanctionsMasterList.razor.rz.scp.css */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  Sanctions Master List Upload  –  scoped component styles    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Page shell ─────────────────────────────────────────────────── */
.page-container[b-nhefu8wjtn] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Info / Error bars ───────────────────────────────────────────── */
.info-bar[b-nhefu8wjtn], .error-bar[b-nhefu8wjtn] { border-radius: 6px; }

/* ── Metrics row ─────────────────────────────────────────────────── */
.metrics-row[b-nhefu8wjtn] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-nhefu8wjtn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    transition: box-shadow 0.15s ease;
}

.metric-card:hover[b-nhefu8wjtn] { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.icon-wrap[b-nhefu8wjtn] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-blue[b-nhefu8wjtn]   { background: rgba(0,120,212,.12); color: #0078d4; }
.icon-purple[b-nhefu8wjtn] { background: rgba(100,0,200,.12);  color: #6400c8; }
.icon-green[b-nhefu8wjtn]  { background: rgba(0,128,0,.12);    color: #007a00; }

.metric-body[b-nhefu8wjtn] { display: flex; flex-direction: column; gap: 2px; }

.metric-value[b-nhefu8wjtn] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

.metric-label[b-nhefu8wjtn] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Upload panel ────────────────────────────────────────────────── */
.generate-panel[b-nhefu8wjtn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
}

.generate-panel-header[b-nhefu8wjtn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    width: 100%;
}

.generate-fields[b-nhefu8wjtn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    flex: 1;
}

.generate-action[b-nhefu8wjtn] { display: flex; align-items: flex-end; }

.form-field[b-nhefu8wjtn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

/* ── Drop zone (mirrors Documents/Index.razor.css) ──────────────────── */
.upload-drop-zone[b-nhefu8wjtn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border: 2px dashed var(--neutral-stroke-rest);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms ease;
    text-align: center;
    min-width: 260px;
}

.upload-drop-zone:hover[b-nhefu8wjtn] { border-color: var(--accent-stroke-control-rest); }

.drop-icon[b-nhefu8wjtn] { opacity: 0.45; }

.drop-label[b-nhefu8wjtn] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.file-browse-wrapper[b-nhefu8wjtn] {
    position: relative;
    display: inline-flex;
}

.file-browse-btn[b-nhefu8wjtn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1.5px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-1);
    user-select: none;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease;
    pointer-events: none;
}

.upload-drop-zone:hover .file-browse-btn[b-nhefu8wjtn] {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--accent-stroke-control-rest);
}

.file-input-overlay[b-nhefu8wjtn] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-count-label[b-nhefu8wjtn] {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-foreground-rest);
}

/* ── List container ──────────────────────────────────────────────── */
.list-container[b-nhefu8wjtn] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    overflow: hidden;
}

.list-toolbar[b-nhefu8wjtn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-wrap: wrap;
}

.record-count[b-nhefu8wjtn] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Skeleton loading ────────────────────────────────────────────── */
.skeleton-list[b-nhefu8wjtn] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 0;
}

.skeleton-row[b-nhefu8wjtn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
}

/* ── Empty / error state box ─────────────────────────────────────── */
.state-box[b-nhefu8wjtn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 32px;
    text-align: center;
}

.state-icon[b-nhefu8wjtn] { color: var(--neutral-foreground-hint); opacity: .6; }

.state-title[b-nhefu8wjtn] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-hint[b-nhefu8wjtn] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

/* ── Data grid ───────────────────────────────────────────────────── */
[b-nhefu8wjtn] table.cbwtr-grid { width: 100%; min-width: 820px; }

.code-value[b-nhefu8wjtn] {
    font-family: var(--font-family-monospace, Consolas, monospace);
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Status badges ───────────────────────────────────────────────── */
.status-badge[b-nhefu8wjtn] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-acknowledged[b-nhefu8wjtn] { background: rgba(0,128,0,.12);     color: #007a00; }
.status-pending[b-nhefu8wjtn]       { background: rgba(217,119,6,.12);   color: #d97706; }
.status-failed[b-nhefu8wjtn]         { background: rgba(220,38,38,.12);   color: #dc2626; }
.status-default[b-nhefu8wjtn]        { background: rgba(150,150,150,.12); color: #666; }

/* ── Mobile cards ────────────────────────────────────────────────── */
.entity-list-mobile[b-nhefu8wjtn] { display: none; }

.entity-card[b-nhefu8wjtn] {
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding: 14px 16px;
}

.entity-card:last-child[b-nhefu8wjtn] { border-bottom: none; }

.entity-card-header[b-nhefu8wjtn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-nhefu8wjtn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.entity-card-name[b-nhefu8wjtn] { font-size: 14px; font-weight: 600; }

.entity-card-fields[b-nhefu8wjtn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-nhefu8wjtn] { display: flex; flex-direction: column; gap: 2px; }
.field-label[b-nhefu8wjtn] { font-size: 11px; color: var(--neutral-foreground-hint); text-transform: uppercase; letter-spacing: .3px; }
.field-value[b-nhefu8wjtn] { font-size: 13px; color: var(--neutral-foreground-rest); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .metrics-row[b-nhefu8wjtn] { grid-template-columns: 1fr 1fr; }

    [b-nhefu8wjtn] .cbwtr-grid { display: none; }
    .entity-list-mobile[b-nhefu8wjtn] { display: block; }
}

@media (max-width: 480px) {
    .page-container[b-nhefu8wjtn] { padding: 16px; gap: 16px; }
    .metrics-row[b-nhefu8wjtn] { grid-template-columns: 1fr; }
    .entity-card-fields[b-nhefu8wjtn] { grid-template-columns: 1fr; }
}
/* /Pages/Compliance/StatutoryReports.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   STATUTORY REPORTS — Scoped styles
   ═══════════════════════════════════════════════════════════════════════ */

.page-container[b-1td2niml3f] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header[b-1td2niml3f] {
    margin-bottom: 0;
}

.header-content[b-1td2niml3f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-1td2niml3f] { flex: 1; }

.page-title[b-1td2niml3f] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-1td2niml3f] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-1td2niml3f] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.error-bar[b-1td2niml3f] { margin: 0; }

/* ── Metric cards ─────────────────────────────────────────────────────── */
.metrics-row[b-1td2niml3f] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-1td2niml3f] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-1td2niml3f] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-1td2niml3f] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-1td2niml3f] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-1td2niml3f]  { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--accent-foreground-rest); }
.metric-icon-green[b-1td2niml3f] { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-amber[b-1td2niml3f] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

.metric-body[b-1td2niml3f] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-1td2niml3f] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-1td2niml3f] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-1td2niml3f] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Generate panel ───────────────────────────────────────────────────── */
.generate-panel[b-1td2niml3f] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 24px;
}

.generate-panel-header[b-1td2niml3f] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.generate-title[b-1td2niml3f] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--neutral-foreground-rest);
}

.generate-subtitle[b-1td2niml3f] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.generate-fields[b-1td2niml3f] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Stacked form field: label above input */
.form-field[b-1td2niml3f] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-1td2niml3f] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
}

.generate-action[b-1td2niml3f] {
    display: flex;
    justify-content: flex-end;
}

[b-1td2niml3f] table.statutory-grid { min-width: 920px; }

/* ── List card container ──────────────────────────────────────────────── */
.list-container[b-1td2niml3f] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.list-toolbar[b-1td2niml3f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

/* Native div wrapper — scope attr lands here */
.list-search[b-1td2niml3f] {
    flex: 1 1 200px;
    max-width: 300px;
}

.list-search fluent-search[b-1td2niml3f] { width: 100%; }

.toolbar-divider[b-1td2niml3f] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-1td2niml3f] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton loading ─────────────────────────────────────────────────── */
.skeleton-list[b-1td2niml3f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.skeleton-row[b-1td2niml3f] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 0;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.state-box[b-1td2niml3f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 24px;
    gap: 8px;
    text-align: center;
}

.state-icon[b-1td2niml3f] { color: var(--neutral-foreground-hint); }
.state-title[b-1td2niml3f] { font-size: 15px; font-weight: 600; margin: 0; color: var(--neutral-foreground-rest); }
.state-hint[b-1td2niml3f]  { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Row actions — initial hidden state only (reveal in global-styles.css) ── */
.row-actions[b-1td2niml3f] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-1td2niml3f] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border, color, hover → global-styles.css */
}

/* ── Report type avatar (per-type color tints) ────────────────────────── */
.report-type-label[b-1td2niml3f] {
    font-size: 13px;
    font-weight: 500;
}

.period-range[b-1td2niml3f] {
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

/* Per-type avatar colour overrides — supplement global .grid-avatar base */
.report-avatar-cibil[b-1td2niml3f]  { background: color-mix(in srgb, #0078d4 15%, transparent); color: #0078d4; }
.report-avatar-xbrl[b-1td2niml3f]   { background: color-mix(in srgb, #9747ff 15%, transparent); color: #9747ff; }
.report-avatar-gst[b-1td2niml3f]    { background: color-mix(in srgb, #107c10 15%, transparent); color: #107c10; }
.report-avatar-tds[b-1td2niml3f]    { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.report-avatar-alm[b-1td2niml3f]    { background: color-mix(in srgb, #c42b1c 15%, transparent); color: #c42b1c; }
.report-avatar-default[b-1td2niml3f]{ background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent); color: var(--accent-foreground-rest); }

/* ── Status badges ────────────────────────────────────────────────────── */
.status-badge[b-1td2niml3f] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--generated[b-1td2niml3f]   { background: rgba(0, 120, 212, 0.12); color: #0078d4; }
.status-badge--underreview[b-1td2niml3f] { background: rgba(255, 185, 0, 0.14);  color: #d48c00; }
.status-badge--submitted[b-1td2niml3f]   { background: rgba(151, 71, 255, 0.12); color: #9747ff; }
.status-badge--accepted[b-1td2niml3f]    { background: rgba(16, 124, 16, 0.12);  color: #107c10; }
.status-badge--rejected[b-1td2niml3f]    { background: rgba(196, 43, 28, 0.12);  color: #c42b1c; }

/* ── Pagination footer ────────────────────────────────────────────────── */
.list-footer[b-1td2niml3f] {
    padding: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: center;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-1td2niml3f]     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .generate-fields[b-1td2niml3f] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .page-container[b-1td2niml3f]  { padding: 16px; }
    .header-content[b-1td2niml3f]  { flex-direction: column; align-items: flex-start; }
    .metrics-row[b-1td2niml3f]     { grid-template-columns: 1fr; }
    .generate-fields[b-1td2niml3f] { grid-template-columns: 1fr; }
    .list-search[b-1td2niml3f]     { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-1td2niml3f] { display: none; }
    .toolbar-filters[b-1td2niml3f] { width: 100%; }
    .toolbar-filters > *[b-1td2niml3f] { flex: 1 1 auto !important; width: auto !important; }
    .row-actions[b-1td2niml3f]     { opacity: 1; }
}

/*── GST return summary (Plan 76.D) ──────────────────────────────────────────*/
.gst-summary-panel[b-1td2niml3f] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 0 0 20px 0;
}

.gst-summary-header[b-1td2niml3f] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.gst-summary-title[b-1td2niml3f] {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.gst-summary-period[b-1td2niml3f] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.gst-summary-grid[b-1td2niml3f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.gst-summary-cell[b-1td2niml3f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 6px;
    background: var(--neutral-layer-2);
    min-width: 0;
}

.gst-summary-excluded[b-1td2niml3f] {
    background: color-mix(in srgb, #d97706 10%, transparent);
}

.gst-summary-label[b-1td2niml3f] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--neutral-foreground-hint);
}

.gst-summary-value[b-1td2niml3f] {
    font-size: 20px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.gst-summary-sub[b-1td2niml3f] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    overflow-wrap: anywhere;
}

.gst-summary-note[b-1td2niml3f] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
    margin: 14px 0 0 0;
}

@media (max-width: 700px) {
    .gst-summary-panel[b-1td2niml3f] { padding: 16px; }
    .gst-summary-grid[b-1td2niml3f]  { grid-template-columns: 1fr; }
}
/* /Pages/Compliance/TdsChallans.razor.rz.scp.css */
/* TDS CHALLANS — List archetype contract */

.error-bar[b-8kule0q837] { margin: 0 0 4px 0; }

/* ── KPI row (4 cards) ─────────────────────────────────────────
   The shared .metrics-row (global-styles.css) defaults to a 3-column
   grid, sized for pages with 3 KPI cards. This page has 4 — override
   locally (scoped via CSS isolation, so other pages keep 3 columns)
   so all 4 cards sit in one row at equal width. */
.metrics-row[b-8kule0q837] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .metrics-row[b-8kule0q837] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .metrics-row[b-8kule0q837] { grid-template-columns: 1fr; }
}

/* ── Loading skeleton ─────────────────────────────────────── */
.skeleton-loader[b-8kule0q837] {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

/* ── Empty state ──────────────────────────────────────────── */
.empty-state[b-8kule0q837] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 64px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state svg[b-8kule0q837] { opacity: 0.5; }

.empty-state p[b-8kule0q837] {
    margin: 0;
    font-size: 14px;
}

/* ── Overdue deadline text ────────────────────────────────── */
.text-danger[b-8kule0q837] {
    color: #DC2626;
    font-weight: 600;
}

/* ── Row actions (grid Actions column) ───────────────────────
   Base opacity:0/size rules live here (scoped, rendered by this component).
   The hover-reveal (tr.hover .row-actions { opacity:1 }), mobile
   always-visible override, and sticky Actions column pin live in
   global-styles.css — a scoped rule here can never target <th>/<td>,
   since those are rendered by FluentDataGrid's own component and carry
   ITS scope hash, not this file's. See CLAUDE.md notes on FluentDataGrid
   <tr> using display:contents. */

.row-actions[b-8kule0q837] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity 200ms ease;
}

.row-action-btn[b-8kule0q837] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

/* ── Two-line stacked cell (Challan Number/AY/Quarter, BSR/Deposit Date) ── */
.cell-stack[b-8kule0q837] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-secondary[b-8kule0q837] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    line-height: 1.3;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-8kule0q837] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* min-width values below track each grid's own GridTemplateColumns sum (see
   TdsChallans.razor) plus a small buffer. tds-deductees-grid mixes a 1fr
   Deductee Name track with fixed-px columns — same "fixed-px + 1fr text
   column, no minmax, min-width safety net" pattern as
   Accounting/AccountLedger.razor.css's .account-ledger-grid, so the flex
   track never gets squeezed below a readable floor before horizontal
   scroll (.grid-scroll-wrapper) kicks in. */
[b-8kule0q837] table.tds-challans-grid { min-width: 1090px; }
[b-8kule0q837] table.tds-deductees-grid { min-width: 950px; }
[b-8kule0q837] table.tds-export-grid { min-width: 720px; }

/* ── Inline action row (Export 26Q dialog "Generate" button) ── */
.form-actions-inline[b-8kule0q837] {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 0;
}

/* ── Native <select> styled to match FluentSearch height ─────
   (FluentSelect traps DOM events inside FluentDialog — see CLAUDE.md gotcha #8) */
.fluent-input[b-8kule0q837] {
    appearance: none;
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-input-rest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5 7l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 12px;
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.fluent-input:focus[b-8kule0q837] {
    outline: none;
    border-color: var(--accent-stroke-control-rest);
    box-shadow: 0 0 0 1px var(--accent-stroke-control-rest);
}

.fluent-label[b-8kule0q837] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
    margin-bottom: 5px;
}

/* ── Form layout (vertical stacked — §7.4) ───────────────────
   2 columns on desktop, each cell already stacks label above input via
   FluentTextField/FluentNumberField/FluentDatePicker's own Label prop. */
.form-grid-2col[b-8kule0q837] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    padding: 4px 0;
}

.form-divider[b-8kule0q837] {
    height: 1px;
    background: var(--neutral-stroke-divider-rest);
    margin: 4px 0;
}

/* ── Read-only detail fields (View Challan dialog) ───────────── */
.details-grid[b-8kule0q837] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 4px 0 12px;
}

.details-field[b-8kule0q837] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.details-field-wide[b-8kule0q837] { grid-column: 1 / -1; }

.details-label[b-8kule0q837] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.details-value[b-8kule0q837] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
}

.code-value[b-8kule0q837] {
    font-family: "Cascadia Code", "Consolas", monospace;
}

/* ── Dialog styles (FluentDialogBody / FluentDialogFooter) ───
   FluentDialogBody/Footer render as classed divs — use ::deep with
   CLASS selectors, not element selectors, per Blazor CSS isolation rules. */
[b-8kule0q837] .fluent-dialog-body {
    padding: 4px 24px 12px;
    overflow-y: auto;
}

[b-8kule0q837] .fluent-dialog-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 600px) {
    .form-grid-2col[b-8kule0q837],
    .details-grid[b-8kule0q837] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Compliance/TdsSubmissions.razor.rz.scp.css */
/* TDS SUBMISSIONS — List archetype contract */

.page-container[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

.page-header[b-d37xgmg4vl] { margin-bottom: 0; }

.header-content[b-d37xgmg4vl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-d37xgmg4vl] { flex: 1; }

.page-title[b-d37xgmg4vl] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-d37xgmg4vl] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-d37xgmg4vl] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.error-bar[b-d37xgmg4vl] { margin: 0; }

.metrics-row[b-d37xgmg4vl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.metric-card[b-d37xgmg4vl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    overflow: hidden;
    min-width: 0;
}

.metric-card:hover[b-d37xgmg4vl] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-d37xgmg4vl] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-d37xgmg4vl] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-d37xgmg4vl]  { background: color-mix(in srgb, #0078d4 14%, transparent); color: #0078d4; }
.metric-icon-green[b-d37xgmg4vl] { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-amber[b-d37xgmg4vl] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.metric-icon-red[b-d37xgmg4vl]   { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }

.metric-body[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-d37xgmg4vl] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-d37xgmg4vl] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-d37xgmg4vl] {
    display: block;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.generate-panel[b-d37xgmg4vl] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid #0078d4;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.generate-panel-header[b-d37xgmg4vl] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.generate-icon-wrap[b-d37xgmg4vl] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, #0078d4 12%, transparent);
    color: #0078d4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.generate-title[b-d37xgmg4vl] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--neutral-foreground-rest);
}

.generate-subtitle[b-d37xgmg4vl] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.generate-fields[b-d37xgmg4vl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

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

.form-label[b-d37xgmg4vl] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.generate-action[b-d37xgmg4vl] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.list-container[b-d37xgmg4vl] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

.list-toolbar[b-d37xgmg4vl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-d37xgmg4vl] {
    flex: 1 1 220px;
    max-width: 320px;
}

.toolbar-divider[b-d37xgmg4vl] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-d37xgmg4vl] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-spacer[b-d37xgmg4vl] { flex: 1; }

.record-count[b-d37xgmg4vl] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

[b-d37xgmg4vl] table.tds-grid { min-width: 1040px; }

.grid-avatar[b-d37xgmg4vl] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.avatar-pending[b-d37xgmg4vl]   { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.avatar-generated[b-d37xgmg4vl] { background: color-mix(in srgb, #0078d4 15%, transparent); color: #0078d4; }
.avatar-uploaded[b-d37xgmg4vl]  { background: color-mix(in srgb, #0f6cbd 15%, transparent); color: #0f6cbd; }
.avatar-processed[b-d37xgmg4vl] { background: color-mix(in srgb, #107c10 15%, transparent); color: #107c10; }
.avatar-rejected[b-d37xgmg4vl]  { background: color-mix(in srgb, #c42b1c 15%, transparent); color: #c42b1c; }

.record-main-cell[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.record-title[b-d37xgmg4vl] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-subtitle[b-d37xgmg4vl] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.status-info[b-d37xgmg4vl] {
    background: rgba(0, 120, 212, 0.12);
    color: #0078d4;
}

.status-success[b-d37xgmg4vl] {
    background: rgba(16, 124, 16, 0.12);
    color: #107c10;
}

.status-rejected[b-d37xgmg4vl] {
    background: rgba(196, 43, 28, 0.12);
    color: #c42b1c;
}

.amount-cell[b-d37xgmg4vl] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.row-actions[b-d37xgmg4vl] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-d37xgmg4vl] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.row-action-btn--accent[b-d37xgmg4vl] {
    color: var(--colorBrandForeground1);
}

.row-action-btn--accent:hover[b-d37xgmg4vl] {
    background-color: var(--colorBrandBackground2Hover);
}

/* PRN input dialog */
.prn-field[b-d37xgmg4vl] {
    margin-top: var(--spacingVerticalM);
}

.prn-input-field[b-d37xgmg4vl] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    font-size: 14px;
    font-family: var(--fontFamilyBase);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    box-sizing: border-box;
}

.prn-input-field:focus[b-d37xgmg4vl] {
    outline: none;
    border-color: var(--colorBrandStroke1);
    box-shadow: 0 0 0 2px var(--colorBrandBackground2);
}

.field-error[b-d37xgmg4vl] {
    display: block;
    color: var(--colorStatusDangerForeground1);
    font-size: 12px;
    margin-top: 4px;
}

.dialog-instruction[b-d37xgmg4vl] {
    color: var(--colorNeutralForeground2);
    font-size: 13px;
    margin: var(--spacingVerticalS) 0;
}

.skeleton-list[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.skeleton-row[b-d37xgmg4vl] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
}

.state-box[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 64px 24px;
}

.state-icon[b-d37xgmg4vl] { color: var(--neutral-foreground-hint); opacity: 0.5; }
.state-title[b-d37xgmg4vl] { font-size: 15px; font-weight: 600; margin: 0; color: var(--neutral-foreground-rest); }
.state-hint[b-d37xgmg4vl] { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; max-width: 460px; }

.list-footer[b-d37xgmg4vl] {
    padding: 14px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: center;
    background: var(--neutral-layer-2);
}

.entity-list-mobile[b-d37xgmg4vl] { display: none; }

.entity-card[b-d37xgmg4vl] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 14px;
}

.entity-card-header[b-d37xgmg4vl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.entity-card-name[b-d37xgmg4vl] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.entity-card-fields[b-d37xgmg4vl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.entity-card-field[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.field-label[b-d37xgmg4vl] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.field-value[b-d37xgmg4vl] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.dialog-subtitle[b-d37xgmg4vl] {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.details-grid[b-d37xgmg4vl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.details-field[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.details-field-wide[b-d37xgmg4vl] { grid-column: 1 / -1; }

.details-label[b-d37xgmg4vl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.details-value[b-d37xgmg4vl] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
}

.code-value[b-d37xgmg4vl] {
    font-family: "Cascadia Code", "Consolas", monospace;
}

/* ── Status badge modifiers (pending not in global-styles) ──────────────── */
.status-pending[b-d37xgmg4vl] { background: rgba(217, 119, 6, 0.12); color: #d97706; }

/* ── Tabs & info bar ────────────────────────────────────────────────────── */
.tds-hub-tabs[b-d37xgmg4vl] { width: 100%; }

.traces-info-bar[b-d37xgmg4vl] { margin: 0 0 20px 0; }

/* ── Export section ─────────────────────────────────────────────────────── */
.export-section[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.export-card[b-d37xgmg4vl] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.export-card-header[b-d37xgmg4vl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
}

.export-card-icon[b-d37xgmg4vl] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, #0078d4 12%, transparent);
    color: #0078d4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.export-card-meta[b-d37xgmg4vl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.export-card-title[b-d37xgmg4vl] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.export-card-desc[b-d37xgmg4vl] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.export-card-body[b-d37xgmg4vl] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-grid[b-d37xgmg4vl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.export-actions[b-d37xgmg4vl] {
    display: flex;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.export-status-bar[b-d37xgmg4vl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid transparent;
}

.export-status-success[b-d37xgmg4vl] {
    background: rgba(16, 124, 16, 0.08);
    color: #107c10;
    border-color: rgba(16, 124, 16, 0.2);
}

.export-status-warning[b-d37xgmg4vl] {
    background: rgba(209, 151, 0, 0.08);
    color: #8a6200;
    border-color: rgba(209, 151, 0, 0.2);
}

.export-status-error[b-d37xgmg4vl] {
    background: rgba(196, 43, 28, 0.08);
    color: #c42b1c;
    border-color: rgba(196, 43, 28, 0.2);
}

.info-panel[b-d37xgmg4vl] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid #0078d4;
    border-radius: 8px;
    padding: 16px 20px;
}

.info-panel-header[b-d37xgmg4vl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 8px;
}

.info-panel-text[b-d37xgmg4vl] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    line-height: 1.6;
}

/* ── Mobile entity card action buttons (always visible) ─────────────────── */
.entity-card-actions[b-d37xgmg4vl] {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.entity-action-btn[b-d37xgmg4vl] {
    width: 36px;
    height: 36px;
    background: transparent;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
    transition: background 150ms ease, color 150ms ease;
}

.entity-action-btn:hover[b-d37xgmg4vl] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

.entity-action-btn--accent[b-d37xgmg4vl] {
    color: #0078d4;
    border-color: rgba(0, 120, 212, 0.25);
}

.entity-action-btn--accent:hover[b-d37xgmg4vl] {
    background: rgba(0, 120, 212, 0.08);
    color: #0078d4;
}

@media (max-width: 1024px) {
    .metrics-row[b-d37xgmg4vl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .page-container[b-d37xgmg4vl] { padding: 20px 16px; gap: 20px; }
    .header-content[b-d37xgmg4vl] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-d37xgmg4vl] { width: 100%; }
    .metrics-row[b-d37xgmg4vl] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-card[b-d37xgmg4vl] { padding: 14px 12px; gap: 10px; overflow: hidden; }
    .metric-icon-wrap[b-d37xgmg4vl] { width: 40px; height: 40px; flex-shrink: 0; }
    .metric-value[b-d37xgmg4vl] { font-size: 11px; }
    .metric-title[b-d37xgmg4vl] { white-space: normal; line-height: 1.2; }
    .metric-desc[b-d37xgmg4vl] { display: none; }
    .generate-fields[b-d37xgmg4vl] { grid-template-columns: 1fr; }
    .generate-action[b-d37xgmg4vl] { justify-content: stretch; }
    .generate-action fluent-button[b-d37xgmg4vl] { width: 100%; }
    .list-search[b-d37xgmg4vl] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-d37xgmg4vl] { display: none; }
    .toolbar-filters[b-d37xgmg4vl] { width: 100%; }
    .toolbar-filters > *[b-d37xgmg4vl] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 120px; }

    .list-container fluent-data-grid[b-d37xgmg4vl] { display: none; }
    .entity-list-mobile[b-d37xgmg4vl] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .row-actions[b-d37xgmg4vl] { opacity: 1; }

    .details-grid[b-d37xgmg4vl] { grid-template-columns: 1fr; }

    /* Export section on mobile */
    .form-grid[b-d37xgmg4vl] { grid-template-columns: 1fr; }
    .export-actions[b-d37xgmg4vl] { justify-content: stretch; }
    .export-card-header[b-d37xgmg4vl] { padding: 16px; }
    .export-card-body[b-d37xgmg4vl] { padding: 16px; }
    .info-panel[b-d37xgmg4vl] { padding: 14px 16px; }

    /* Entity card actions — enlarge touch targets on mobile */
    .entity-action-btn[b-d37xgmg4vl] { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .metric-card[b-d37xgmg4vl],
    .row-actions[b-d37xgmg4vl],
    .row-action-btn[b-d37xgmg4vl] {
        transition: none;
    }
}
/* /Pages/Customers/Create.razor.rz.scp.css */
/* ── Page container ────────────────────────────────────────────────────────── */
.page-container[b-cj9m1j7jnn] {
    padding: 28px 32px;
    max-width: 960px;
    margin: 0 auto;
    animation: page-enter-b-cj9m1j7jnn 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes page-enter-b-cj9m1j7jnn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header[b-cj9m1j7jnn] {
    margin-bottom: 24px;
}

.header-content[b-cj9m1j7jnn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.back-nav[b-cj9m1j7jnn] {
    margin-bottom: 4px;
    margin-left: -8px; /* align icon-text button with content edge */
}

.title-section[b-cj9m1j7jnn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-cj9m1j7jnn] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-subtitle[b-cj9m1j7jnn] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

/* ── Step indicator ────────────────────────────────────────────────────────── */
.step-indicator[b-cj9m1j7jnn] {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 16px 20px;
    gap: 0;
    overflow-x: auto;
}

.step-item[b-cj9m1j7jnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    transition: background 150ms;
}

.step-item:hover[b-cj9m1j7jnn] {
    background: var(--neutral-fill-hover);
}

.step-circle[b-cj9m1j7jnn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    transition: background 200ms, border-color 200ms, color 200ms;
}

.step-number[b-cj9m1j7jnn] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.step-label[b-cj9m1j7jnn] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    transition: color 200ms;
}

/* Current step */
.step-item.step-current .step-circle[b-cj9m1j7jnn] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: white; /* explicit — per Wizard rule #14 */
}

.step-item.step-current .step-label[b-cj9m1j7jnn] {
    color: var(--accent-fill-rest);
    font-weight: 600;
}

/* Completed step */
.step-item.step-completed .step-circle[b-cj9m1j7jnn] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent);
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
}

.step-item.step-completed .step-label[b-cj9m1j7jnn] {
    color: var(--accent-fill-rest);
}

/* Step connector line */
.step-connector[b-cj9m1j7jnn] {
    flex: 1;
    min-width: 24px;
    height: 2px;
    background: var(--neutral-stroke-rest);
    border-radius: 1px;
}

/* ── Form card ─────────────────────────────────────────────────────────────── */
.form-card[b-cj9m1j7jnn] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: clip; /* clip (not hidden) so .form-actions sticky child works */
}

.form-error-bar[b-cj9m1j7jnn] {
    /* MessageBar fills width inside card */
}

/* ── Form section ──────────────────────────────────────────────────────────── */
.form-section-wrap[b-cj9m1j7jnn] {
    padding: 28px 32px 8px;
}

.form-section-header[b-cj9m1j7jnn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-subtle);
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.subsection-label[b-cj9m1j7jnn] {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

/* ── Form grid ─────────────────────────────────────────────────────────────── */
.form-grid[b-cj9m1j7jnn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-bottom: 20px;
}

.form-grid .full-width[b-cj9m1j7jnn] {
    grid-column: 1 / -1;
}

.form-grid--single[b-cj9m1j7jnn] {
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ── Checkbox row + hint text ─────────────────────────────────────────────── */
.form-check-row[b-cj9m1j7jnn] {
    display: flex;
    align-items: center;
    padding-top: 4px;
}

.hint-text[b-cj9m1j7jnn] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 4px 0 0;
}

/* ── Form actions ──────────────────────────────────────────────────────────── */
.form-actions[b-cj9m1j7jnn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 20px 32px 24px;
    border-top: 1px solid var(--neutral-stroke-subtle);
    margin-top: 8px;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--neutral-layer-1);
}

.step-nav-left[b-cj9m1j7jnn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-nav-right[b-cj9m1j7jnn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-cj9m1j7jnn] {
        padding: 16px;
    }

    .page-title[b-cj9m1j7jnn] {
        font-size: 22px;
    }

    .step-indicator[b-cj9m1j7jnn] {
        padding: 12px;
        gap: 0;
    }

    .step-item[b-cj9m1j7jnn] {
        padding: 4px 8px;
    }

    .step-label[b-cj9m1j7jnn] {
        font-size: 11px;
    }

    .form-section-wrap[b-cj9m1j7jnn] {
        padding: 20px 16px 8px;
    }

    .form-grid[b-cj9m1j7jnn] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-grid .full-width[b-cj9m1j7jnn] {
        grid-column: 1;
    }

    .form-actions[b-cj9m1j7jnn] {
        padding: 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .step-nav-left[b-cj9m1j7jnn],
    .step-nav-right[b-cj9m1j7jnn] {
        width: 100%;
    }

    .step-nav-right[b-cj9m1j7jnn] {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .step-label[b-cj9m1j7jnn] {
        display: none; /* show only circles on very small screens */
    }

    .step-connector[b-cj9m1j7jnn] {
        min-width: 16px;
    }
}

/* ── Mobile compact step progress (hidden on desktop) ───────────────────── */
.step-mobile-progress[b-cj9m1j7jnn] {
    display: none;
}

@media (max-width: 767px) {
    .step-indicator[b-cj9m1j7jnn] {
        display: none;
    }

    .step-mobile-progress[b-cj9m1j7jnn] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        background: var(--neutral-layer-1);
        border: 1px solid var(--neutral-stroke-rest);
        border-radius: 12px;
        padding: 16px 20px;
    }

    .step-mobile-header[b-cj9m1j7jnn] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .step-mobile-title[b-cj9m1j7jnn] {
        font-size: 14px;
        font-weight: 600;
        color: var(--neutral-foreground-rest);
    }

    .step-mobile-counter[b-cj9m1j7jnn] {
        font-size: 12px;
        color: var(--neutral-foreground-hint);
    }
}

/* /Pages/Customers/Detail.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-bhrwvus8fp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.page-container[b-bhrwvus8fp] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-bhrwvus8fp 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-bhrwvus8fp] { margin-bottom: 0; }

.header-content[b-bhrwvus8fp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.back-nav[b-bhrwvus8fp] { width: 100%; }

.title-section[b-bhrwvus8fp] { flex: 1; }

.customer-header-row[b-bhrwvus8fp] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-avatar[b-bhrwvus8fp] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
}

.page-title[b-bhrwvus8fp] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-bhrwvus8fp] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-bhrwvus8fp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   METRIC CARDS ROW
══════════════════════════════════════════════════════════════════════════════ */
.metrics-row[b-bhrwvus8fp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-bhrwvus8fp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}

.metric-icon-wrap[b-bhrwvus8fp] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-bhrwvus8fp] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-bhrwvus8fp]   { background: rgba(79, 70, 229, 0.14); color: #4338ca; }
.metric-icon-green[b-bhrwvus8fp]  { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
.metric-icon-purple[b-bhrwvus8fp] { background: rgba(99, 102, 241, 0.18); color: #5b21b6; }
.metric-icon-amber[b-bhrwvus8fp]  { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

.metric-body[b-bhrwvus8fp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-value[b-bhrwvus8fp] {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.metric-title[b-bhrwvus8fp] {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TAB CONTAINER
══════════════════════════════════════════════════════════════════════════════ */
.detail-tabs-container[b-bhrwvus8fp] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}

.tab-content[b-bhrwvus8fp] {
    padding: 24px 0 0;
    min-height: 200px;
}

.tab-toolbar[b-bhrwvus8fp] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.form-check-row[b-bhrwvus8fp] {
    display: flex;
    align-items: center;
    padding-top: 4px;
}

.statement-toolbar[b-bhrwvus8fp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.statement-toolbar-actions[b-bhrwvus8fp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.statement-toolbar-dates[b-bhrwvus8fp] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.list-container[b-bhrwvus8fp] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
}

.list-footer[b-bhrwvus8fp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-bhrwvus8fp] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID SCROLL WRAPPER (FluentDataGrid horizontal overflow safety net)
══════════════════════════════════════════════════════════════════════════════ */
.grid-scroll-wrapper[b-bhrwvus8fp] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-bhrwvus8fp] table.credit-reports-grid {
    min-width: 750px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DETAIL GRID (2-col cards)
══════════════════════════════════════════════════════════════════════════════ */
.detail-grid[b-bhrwvus8fp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.section-card[b-bhrwvus8fp] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    padding: 20px;
}

.section-title[b-bhrwvus8fp] {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.01em;
}

.hint-text[b-bhrwvus8fp] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: -12px 0 16px;
}

.detail-row[b-bhrwvus8fp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.detail-row:last-child[b-bhrwvus8fp] { border-bottom: none; }

.detail-label[b-bhrwvus8fp] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
}

.detail-value[b-bhrwvus8fp] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════════════════════════ */
.kyc-badge[b-bhrwvus8fp] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.kyc-badge--approved[b-bhrwvus8fp]    { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
.kyc-badge--pending[b-bhrwvus8fp]     { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.kyc-badge--underreview[b-bhrwvus8fp] { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; }
.kyc-badge--rejected[b-bhrwvus8fp]    { background: color-mix(in srgb, var(--error-foreground-rest, #dc2626) 12%, transparent); color: var(--error-foreground-rest, #dc2626); }
.kyc-badge--incomplete[b-bhrwvus8fp]  { background: color-mix(in srgb, #6b7280 12%, transparent); color: #6b7280; }

.credit-score[b-bhrwvus8fp] { font-weight: 700; font-variant-numeric: tabular-nums; }
.credit-score--excellent[b-bhrwvus8fp] { color: var(--success-foreground-rest, #16a34a); }
.credit-score--good[b-bhrwvus8fp]      { color: #2563eb; }
.credit-score--fair[b-bhrwvus8fp]      { color: #d97706; }
.credit-score--poor[b-bhrwvus8fp]      { color: var(--error-foreground-rest, #dc2626); }

/* ══════════════════════════════════════════════════════════════════════════════
   STATE BOXES
══════════════════════════════════════════════════════════════════════════════ */
.state-box[b-bhrwvus8fp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

.state-box-sm[b-bhrwvus8fp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .metrics-row[b-bhrwvus8fp] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-bhrwvus8fp] { padding: 16px 16px 32px; gap: 16px; }
    .metrics-row[b-bhrwvus8fp] { grid-template-columns: 1fr; }
    .detail-grid[b-bhrwvus8fp] { grid-template-columns: 1fr; }
    .detail-tabs-container[b-bhrwvus8fp] { padding: 16px; }
    .statement-toolbar[b-bhrwvus8fp] { flex-direction: column; align-items: stretch; }
    .statement-toolbar-dates[b-bhrwvus8fp] { width: 100%; }
    .statement-toolbar-dates > *[b-bhrwvus8fp] { flex: 1 1 0; }
}
/* /Pages/Customers/Edit.razor.rz.scp.css */
/* ── Page container ────────────────────────────────────────────────────────── */
.page-container[b-viu8dfnjfq] {
    padding: 28px 32px;
    max-width: 960px;
    margin: 0 auto;
    animation: page-enter-b-viu8dfnjfq 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes page-enter-b-viu8dfnjfq {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header[b-viu8dfnjfq] {
    margin-bottom: 24px;
}

.header-content[b-viu8dfnjfq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.back-nav[b-viu8dfnjfq] {
    margin-bottom: 4px;
    margin-left: -8px; /* align icon-text button with content edge */
}

.title-section[b-viu8dfnjfq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-viu8dfnjfq] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-subtitle[b-viu8dfnjfq] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

/* ── Step indicator ────────────────────────────────────────────────────────── */
.step-indicator[b-viu8dfnjfq] {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 16px 20px;
    gap: 0;
    overflow-x: auto;
}

.step-item[b-viu8dfnjfq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    transition: background 150ms;
}

.step-item:hover[b-viu8dfnjfq] {
    background: var(--neutral-fill-hover);
}

.step-circle[b-viu8dfnjfq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    transition: background 200ms, border-color 200ms, color 200ms;
}

.step-number[b-viu8dfnjfq] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.step-label[b-viu8dfnjfq] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    transition: color 200ms;
}

/* Current step */
.step-item.step-current .step-circle[b-viu8dfnjfq] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: white; /* explicit — per Wizard rule #14 */
}

.step-item.step-current .step-label[b-viu8dfnjfq] {
    color: var(--accent-fill-rest);
    font-weight: 600;
}

/* Completed step */
.step-item.step-completed .step-circle[b-viu8dfnjfq] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent);
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
}

.step-item.step-completed .step-label[b-viu8dfnjfq] {
    color: var(--accent-fill-rest);
}

/* Step connector line */
.step-connector[b-viu8dfnjfq] {
    flex: 1;
    min-width: 24px;
    height: 2px;
    background: var(--neutral-stroke-rest);
    border-radius: 1px;
}

/* ── Form card ─────────────────────────────────────────────────────────────── */
.form-card[b-viu8dfnjfq] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: clip; /* clip (not hidden) so .form-actions sticky child works */
}

.form-error-bar[b-viu8dfnjfq] {
    /* MessageBar fills width inside card */
}

/* ── Form section ──────────────────────────────────────────────────────────── */
.form-section-wrap[b-viu8dfnjfq] {
    padding: 28px 32px 8px;
}

.form-section-header[b-viu8dfnjfq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-subtle);
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.subsection-label[b-viu8dfnjfq] {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

/* ── Form grid ─────────────────────────────────────────────────────────────── */
.form-grid[b-viu8dfnjfq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-bottom: 20px;
}

.form-grid .full-width[b-viu8dfnjfq] {
    grid-column: 1 / -1;
}

/* ── Hint text ─────────────────────────────────────────────────────────────── */
.hint-text[b-viu8dfnjfq] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 4px 0 0;
}

/* ── Form actions ──────────────────────────────────────────────────────────── */
.form-actions[b-viu8dfnjfq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 20px 32px 24px;
    border-top: 1px solid var(--neutral-stroke-subtle);
    margin-top: 8px;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--neutral-layer-1);
}

.step-nav-left[b-viu8dfnjfq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-nav-right[b-viu8dfnjfq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-viu8dfnjfq] {
        padding: 16px;
    }

    .page-title[b-viu8dfnjfq] {
        font-size: 22px;
    }

    .step-indicator[b-viu8dfnjfq] {
        padding: 12px;
        gap: 0;
    }

    .step-item[b-viu8dfnjfq] {
        padding: 4px 8px;
    }

    .step-label[b-viu8dfnjfq] {
        font-size: 11px;
    }

    .form-section-wrap[b-viu8dfnjfq] {
        padding: 20px 16px 8px;
    }

    .form-grid[b-viu8dfnjfq] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-grid .full-width[b-viu8dfnjfq] {
        grid-column: 1;
    }

    .form-actions[b-viu8dfnjfq] {
        padding: 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .step-nav-left[b-viu8dfnjfq],
    .step-nav-right[b-viu8dfnjfq] {
        width: 100%;
    }

    .step-nav-right[b-viu8dfnjfq] {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .step-label[b-viu8dfnjfq] {
        display: none; /* show only circles on very small screens */
    }

    .step-connector[b-viu8dfnjfq] {
        min-width: 16px;
    }
}

/* ── Mobile compact step progress (hidden on desktop) ───────────────────── */
.step-mobile-progress[b-viu8dfnjfq] {
    display: none;
}

@media (max-width: 767px) {
    .step-indicator[b-viu8dfnjfq] {
        display: none;
    }

    .step-mobile-progress[b-viu8dfnjfq] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        background: var(--neutral-layer-1);
        border: 1px solid var(--neutral-stroke-rest);
        border-radius: 12px;
        padding: 16px 20px;
    }

    .step-mobile-header[b-viu8dfnjfq] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .step-mobile-title[b-viu8dfnjfq] {
        font-size: 14px;
        font-weight: 600;
        color: var(--neutral-foreground-rest);
    }

    .step-mobile-counter[b-viu8dfnjfq] {
        font-size: 12px;
        color: var(--neutral-foreground-hint);
    }
}
/* /Pages/Customers/Index.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-g4fmafp9vs {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.page-container[b-g4fmafp9vs] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-g4fmafp9vs 280ms ease;
}


/* ══════════════════════════════════════════════════════════════════════════════
   METRIC CARDS ROW
══════════════════════════════════════════════════════════════════════════════ */
.metrics-row[b-g4fmafp9vs] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-g4fmafp9vs] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-g4fmafp9vs] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-g4fmafp9vs] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-g4fmafp9vs] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-g4fmafp9vs]   { background: rgba(79, 70, 229, 0.14); color: #4338ca; }
.metric-icon-green[b-g4fmafp9vs]  { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
.metric-icon-purple[b-g4fmafp9vs] { background: rgba(99, 102, 241, 0.18); color: #5b21b6; }
.metric-icon-amber[b-g4fmafp9vs]  { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

.metric-body[b-g4fmafp9vs] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-g4fmafp9vs] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-g4fmafp9vs] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-g4fmafp9vs] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DATA CARD
══════════════════════════════════════════════════════════════════════════════ */
.list-container[b-g4fmafp9vs] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-g4fmafp9vs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    background: var(--neutral-layer-1);
    border-radius: 10px 10px 0 0;
    z-index: 10;
}
.list-search[b-g4fmafp9vs]    { flex: 1; min-width: 200px; }
.toolbar-divider[b-g4fmafp9vs] { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }
.toolbar-filters[b-g4fmafp9vs] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton-list[b-g4fmafp9vs] { display: flex; flex-direction: column; }
.skeleton-row[b-g4fmafp9vs] {
    display: grid;
    grid-template-columns: 140px 1.6fr 130px 120px 130px 160px 104px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}
.skeleton-row:last-child[b-g4fmafp9vs] { border-bottom: none; }
.skeleton-persona[b-g4fmafp9vs] { display: flex; align-items: center; gap: 10px; }

/* ── State box (empty / error) ────────────────────────────────────────────── */
.state-box[b-g4fmafp9vs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}
.state-icon[b-g4fmafp9vs]         { opacity: .3; }
.state-icon-error[b-g4fmafp9vs]   { opacity: 1; color: var(--error-foreground-rest, #DC2626); }
.state-title[b-g4fmafp9vs]        { margin: 0; font-size: 17px; font-weight: 700; color: var(--neutral-foreground-rest); }
.state-message[b-g4fmafp9vs]      { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); max-width: 380px; }

/* ── Grid scroll wrapper ──────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-g4fmafp9vs] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-g4fmafp9vs] table.customers-grid { min-width: 1260px; }

/* ── List footer ──────────────────────────────────────────────────────────── */
.list-footer[b-g4fmafp9vs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    gap: 8px;
}
.results-count[b-g4fmafp9vs] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ══════════════════════════════════════════════════════════════════════════════
   CUSTOMER PERSONA (AVATAR + NAME)
══════════════════════════════════════════════════════════════════════════════ */
.customer-persona[b-g4fmafp9vs] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.customer-avatar[b-g4fmafp9vs] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.customer-fullname[b-g4fmafp9vs] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Phone cell ───────────────────────────────────────────────────────────── */
.phone-cell[b-g4fmafp9vs] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--neutral-foreground-rest);
}

/* ══════════════════════════════════════════════════════════════════════════════
   KYC STATUS BADGES
══════════════════════════════════════════════════════════════════════════════ */
.kyc-badge[b-g4fmafp9vs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}
.kyc-badge--incomplete[b-g4fmafp9vs]  { background: rgba(107,114,128,.12); color: #6B7280; }
.kyc-badge--pending[b-g4fmafp9vs]     { background: rgba(245,158,11,.12);  color: #D97706; }
.kyc-badge--underreview[b-g4fmafp9vs] { background: rgba(59,130,246,.12);  color: #2563EB; }
.kyc-badge--approved[b-g4fmafp9vs]    { background: rgba(16,185,129,.12);  color: #059669; }
.kyc-badge--rejected[b-g4fmafp9vs]    { background: rgba(239,68,68,.12);   color: #DC2626; }

/* ══════════════════════════════════════════════════════════════════════════════
   CREDIT SCORE INDICATORS
══════════════════════════════════════════════════════════════════════════════ */
.credit-score[b-g4fmafp9vs] {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.credit-score--excellent[b-g4fmafp9vs] { color: #059669; }
.credit-score--good[b-g4fmafp9vs]      { color: #2563EB; }
.credit-score--fair[b-g4fmafp9vs]      { color: #D97706; }
.credit-score--poor[b-g4fmafp9vs]      { color: #DC2626; }
.credit-na[b-g4fmafp9vs]               { color: var(--neutral-foreground-hint); opacity: .5; }

/* ── Row actions ──────────────────────────────────────────────────────────── */
/* Initial hidden state — reveal rule is in global-styles.css (tr.hover pattern) */
.row-actions[b-g4fmafp9vs] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-g4fmafp9vs] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}

.row-action-copied[b-g4fmafp9vs] {
    color: #059669;
    background: rgba(16, 185, 129, 0.10);
}

/* ══════════════════════════════════════════════════════════════════════════════
   KYC APPROVAL CHECKLIST DIALOG
══════════════════════════════════════════════════════════════════════════════ */
.kyc-checklist[b-g4fmafp9vs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kyc-checklist-item[b-g4fmafp9vs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-fill-rest);
}
.kyc-chk[b-g4fmafp9vs] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--accent-fill-rest);
}
.kyc-chk-label[b-g4fmafp9vs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 14px;
    cursor: pointer;
}
.kyc-doc-badge[b-g4fmafp9vs] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: capitalize;
    flex-shrink: 0;
}
.kyc-doc-pending[b-g4fmafp9vs]  { background: rgba(245,158,11,.12); color: #D97706; }
.kyc-doc-approved[b-g4fmafp9vs] { background: rgba(16,185,129,.12); color: #059669; }
.kyc-doc-rejected[b-g4fmafp9vs] { background: rgba(239,68,68,.12);  color: #DC2626; }
.kyc-doc-missing[b-g4fmafp9vs]  { background: rgba(107,114,128,.12); color: #6B7280; }

/* ── Link User dialog ───────────────────────────────────────────────────────── */
.row-action-linked[b-g4fmafp9vs] { color: var(--success, #16a34a); }

.link-user-current[b-g4fmafp9vs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 4px;
}

.link-user-results[b-g4fmafp9vs] {
    margin-top: 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}

.link-user-result-row[b-g4fmafp9vs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    transition: background 100ms;
}
.link-user-result-row:last-child[b-g4fmafp9vs] { border-bottom: none; }
.link-user-result-row:hover[b-g4fmafp9vs] { background: var(--neutral-layer-3); }
.link-user-result-selected[b-g4fmafp9vs] { background: rgba(79,70,229,.08) !important; }

.link-user-result-info[b-g4fmafp9vs] { flex: 1; min-width: 0; }
.link-user-result-name[b-g4fmafp9vs] { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-user-result-meta[b-g4fmafp9vs] { display: flex; gap: 5px; font-size: 12px; color: var(--neutral-foreground-hint); flex-wrap: wrap; margin-top: 1px; }
.link-user-meta-sep[b-g4fmafp9vs] { opacity: 0.4; }
.kyc-doc-link[b-g4fmafp9vs] {
    font-size: 12px;
    color: var(--accent-foreground-rest);
    text-decoration: none;
    flex-shrink: 0;
}
.kyc-doc-link:hover[b-g4fmafp9vs] { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-container[b-g4fmafp9vs] { padding: 20px 20px 32px; }
    .metrics-row[b-g4fmafp9vs] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-g4fmafp9vs]  { padding: 16px 12px 24px; gap: 16px; }
    .header-content[b-g4fmafp9vs]  { flex-direction: column; align-items: flex-start; }
    .header-actions[b-g4fmafp9vs]  { width: 100%; }
    .metrics-row[b-g4fmafp9vs]     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-value[b-g4fmafp9vs]    { font-size: 12px; }
    .list-toolbar[b-g4fmafp9vs]    { flex-direction: column; align-items: stretch; }
    .toolbar-divider[b-g4fmafp9vs] { display: none; }
    .list-search[b-g4fmafp9vs]     { min-width: 0; }
    /* Always show row actions on touch devices */
    .row-actions[b-g4fmafp9vs]     { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-g4fmafp9vs] { grid-template-columns: 1fr; }
    .metric-card[b-g4fmafp9vs] { gap: 12px; padding: 16px; }
    .metric-value[b-g4fmafp9vs] { font-size: 11px; }
}

/* /Pages/Customers/KycReview.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-luwcdmtbju {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.page-container[b-luwcdmtbju] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-luwcdmtbju 280ms ease;
}

.page-header[b-luwcdmtbju] { margin-bottom: 0; }

.header-content[b-luwcdmtbju] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-luwcdmtbju] { flex: 1; }

.page-title[b-luwcdmtbju] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-luwcdmtbju] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Metrics ─────────────────────────────────────────────────────────────── */
.metrics-row[b-luwcdmtbju] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-luwcdmtbju] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}

.metric-icon-wrap[b-luwcdmtbju] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-luwcdmtbju] { width: 24px; height: 24px; fill: currentColor !important; }
.metric-icon-blue[b-luwcdmtbju]   { background: rgba(79, 70, 229, 0.14); color: #4338ca; }
.metric-icon-amber[b-luwcdmtbju]  { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

.metric-body[b-luwcdmtbju] { display: flex; flex-direction: column; gap: 2px; }

.metric-value[b-luwcdmtbju] {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.metric-title[b-luwcdmtbju] {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

/* ── List container ──────────────────────────────────────────────────────── */
.list-container[b-luwcdmtbju] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Review card ─────────────────────────────────────────────────────────── */
.review-card[b-luwcdmtbju] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.review-card-header[b-luwcdmtbju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.review-customer-info[b-luwcdmtbju] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.grid-avatar[b-luwcdmtbju] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.review-customer-name[b-luwcdmtbju] {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.review-customer-code[b-luwcdmtbju] {
    display: block;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.review-no-docs[b-luwcdmtbju] {
    padding: 16px 0;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

.review-actions[b-luwcdmtbju] {
    display: flex;
    gap: 8px;
}

.review-card-footer[b-luwcdmtbju] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.kyc-badge[b-luwcdmtbju] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.kyc-badge--approved[b-luwcdmtbju]    { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
.kyc-badge--pending[b-luwcdmtbju]     { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.kyc-badge--underreview[b-luwcdmtbju] { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; }
.kyc-badge--rejected[b-luwcdmtbju]    { background: color-mix(in srgb, var(--error-foreground-rest, #dc2626) 12%, transparent); color: var(--error-foreground-rest, #dc2626); }

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-luwcdmtbju] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-luwcdmtbju] table.kyc-documents-grid { min-width: 900px; }

/* ── State box ───────────────────────────────────────────────────────────── */
.state-box[b-luwcdmtbju] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-luwcdmtbju] { padding: 16px 16px 32px; gap: 16px; }
    .metrics-row[b-luwcdmtbju] { grid-template-columns: 1fr; }
    .review-card[b-luwcdmtbju] { padding: 16px; }
}
/* /Pages/Customers/VideoKycBookings.razor.rz.scp.css */
/* ── Grid scroll wrapper (horizontal overflow safety net) ─────────────────── */
.grid-scroll-wrapper[b-7vg2hjzsnj] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-7vg2hjzsnj] table.video-kyc-grid {
    min-width: 900px;
}

/* ── Row actions — INITIAL hidden state only (hover reveal is in global-styles.css) ── */
.row-actions[b-7vg2hjzsnj] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

/* ── Row action button — structural/sizing only (border/color/hover in global-styles.css) ── */
.row-action-btn[b-7vg2hjzsnj] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* ── Booking reference column — monospace for readability ─────────────────── */
.booking-ref-col[b-7vg2hjzsnj] {
    font-family: var(--font-monospace, ui-monospace, monospace);
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Dialog section heading ────────────────────────────────────────────────── */
.dialog-section-title[b-7vg2hjzsnj] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Booking detail info grid (label / value pairs) ───────────────────────── */
.detail-grid[b-7vg2hjzsnj] {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 6px 16px;
    align-items: center;
}

.detail-label[b-7vg2hjzsnj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Stacked form field (label on top, input below) ───────────────────────── */
.form-field[b-7vg2hjzsnj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-7vg2hjzsnj] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
}

/* ── Customer search results dropdown ─────────────────────────────────────── */
.customer-search-results[b-7vg2hjzsnj] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-floating);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}

.customer-result-item[b-7vg2hjzsnj] {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.customer-result-item:hover[b-7vg2hjzsnj], .customer-result-item.selected[b-7vg2hjzsnj] {
    background: var(--neutral-fill-stealth-hover);
}

.customer-result-meta[b-7vg2hjzsnj] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── Selected customer chip ─────────────────────────────────────────────── */
.selected-customer-chip[b-7vg2hjzsnj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border-radius: 12px;
    font-size: 13px;
    margin-top: 6px;
}

.selected-customer-chip button[b-7vg2hjzsnj] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
}

/* ── Mobile responsive overrides ──────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Always reveal row actions on touch screens */
    .row-actions[b-7vg2hjzsnj] {
        opacity: 1;
    }

    .detail-grid[b-7vg2hjzsnj] {
        grid-template-columns: 80px 1fr;
    }
}
/* /Pages/DataCleanup/DataCleanup.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*  Data Cleanup — Settings/Utility archetype                                */
/*  Design system: 12px radius · --neutral-layer-2 surface · Indigo accent   */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-fv3lpe3sxq {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-fv3lpe3sxq] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-fv3lpe3sxq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.page-header-text[b-fv3lpe3sxq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-fv3lpe3sxq] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.page-subtitle[b-fv3lpe3sxq] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.page-actions[b-fv3lpe3sxq] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Danger banner ────────────────────────────────────────────────────────── */
.danger-banner[b-fv3lpe3sxq] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.20);
    animation: card-enter-b-fv3lpe3sxq 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.danger-banner-icon[b-fv3lpe3sxq] {
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 1px;
}

.danger-banner-content[b-fv3lpe3sxq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.danger-banner-title[b-fv3lpe3sxq] {
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
}

.danger-banner-desc[b-fv3lpe3sxq] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

/* ── Settings group card ──────────────────────────────────────────────────── */
.settings-group[b-fv3lpe3sxq] {
    padding: 20px 24px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    animation: card-enter-b-fv3lpe3sxq 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.form-section-header[b-fv3lpe3sxq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.filter-grid[b-fv3lpe3sxq] {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

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

.field-label[b-fv3lpe3sxq] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.filter-hint[b-fv3lpe3sxq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    padding-bottom: 6px;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading-section[b-fv3lpe3sxq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 0;
}

.loading-text[b-fv3lpe3sxq] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

/* ── Metric cards ─────────────────────────────────────────────────────────── */
.metrics-row[b-fv3lpe3sxq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.metric-card[b-fv3lpe3sxq] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 200ms ease, transform 200ms ease;
    animation: card-enter-b-fv3lpe3sxq 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.metric-card:hover[b-fv3lpe3sxq] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}

.metric-icon-wrap[b-fv3lpe3sxq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.metric-icon-blue[b-fv3lpe3sxq]   { background: rgba(79, 70, 229, 0.10); color: #4F46E5; }
.metric-icon-amber[b-fv3lpe3sxq]  { background: rgba(217, 119, 6, 0.10);  color: #d97706; }
.metric-icon-green[b-fv3lpe3sxq]  { background: rgba(5, 150, 105, 0.10);  color: #059669; }
.metric-icon-purple[b-fv3lpe3sxq] { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }

.metric-body[b-fv3lpe3sxq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-fv3lpe3sxq] {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.metric-label[b-fv3lpe3sxq] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-hint[b-fv3lpe3sxq] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── Card surface (categories, history) ───────────────────────────────────── */
.card-surface[b-fv3lpe3sxq] {
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    overflow: hidden;
    animation: card-enter-b-fv3lpe3sxq 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.card-toolbar[b-fv3lpe3sxq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
    gap: 12px;
}

.card-toolbar-title[b-fv3lpe3sxq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.card-toolbar-actions[b-fv3lpe3sxq] {
    display: flex;
    gap: 8px;
}

.card-footer[b-fv3lpe3sxq] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.grid-wrapper[b-fv3lpe3sxq] {
    padding: 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-fv3lpe3sxq] table.cleanup-history-grid {
    min-width: 840px;
}

/* ── Category grid ────────────────────────────────────────────────────────── */
.category-grid[b-fv3lpe3sxq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 20px;
}

.category-card[b-fv3lpe3sxq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--neutral-stroke-rest);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.category-card:hover[b-fv3lpe3sxq] {
    border-color: #4F46E5;
    background: rgba(79, 70, 229, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08);
}

.category-card.category-selected[b-fv3lpe3sxq] {
    border-color: #4F46E5;
    background: rgba(79, 70, 229, 0.08);
}

.category-check[b-fv3lpe3sxq] {
    flex-shrink: 0;
}

.category-info[b-fv3lpe3sxq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.category-name[b-fv3lpe3sxq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.category-desc[b-fv3lpe3sxq] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

.category-count[b-fv3lpe3sxq] {
    font-size: 18px;
    font-weight: 700;
    color: #4F46E5;
    flex-shrink: 0;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state[b-fv3lpe3sxq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}

.empty-state-icon[b-fv3lpe3sxq] { color: #059669; }

.empty-state-title[b-fv3lpe3sxq] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.empty-state-desc[b-fv3lpe3sxq] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Sticky action bar ────────────────────────────────────────────────────── */
.action-bar[b-fv3lpe3sxq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 24px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
    animation: card-enter-b-fv3lpe3sxq 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.action-reason[b-fv3lpe3sxq] {
    flex: 1;
    min-width: 200px;
    max-width: 500px;
}

.action-buttons[b-fv3lpe3sxq] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Result card ──────────────────────────────────────────────────────────── */
.result-card[b-fv3lpe3sxq] {
    border-radius: 12px;
    overflow: hidden;
    animation: card-enter-b-fv3lpe3sxq 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.result-success[b-fv3lpe3sxq] {
    border: 1px solid rgba(5, 150, 105, 0.25);
}

.result-error[b-fv3lpe3sxq] {
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.result-header[b-fv3lpe3sxq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 15px;
}

.result-success .result-header[b-fv3lpe3sxq] {
    background: rgba(5, 150, 105, 0.08);
    color: #059669;
}

.result-error .result-header[b-fv3lpe3sxq] {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.result-body[b-fv3lpe3sxq] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--neutral-layer-2);
}

.result-stat[b-fv3lpe3sxq] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.result-stat-value[b-fv3lpe3sxq] {
    font-size: 32px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.result-stat-label[b-fv3lpe3sxq] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.result-details[b-fv3lpe3sxq] {
    max-width: 500px;
}

.deleted-badge[b-fv3lpe3sxq] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(79, 70, 229, 0.10);
    color: #4F46E5;
}

.result-meta[b-fv3lpe3sxq] {
    display: flex;
    gap: 24px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    flex-wrap: wrap;
}

/* ── Grid date styling ────────────────────────────────────────────────────── */
.grid-date[b-fv3lpe3sxq] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

/* ── Responsive: 1024px ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-fv3lpe3sxq] {
        padding: 24px;
    }
    .metrics-row[b-fv3lpe3sxq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Responsive: 768px ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-fv3lpe3sxq] {
        padding: 16px;
        gap: 20px;
    }
    .page-header[b-fv3lpe3sxq] {
        flex-direction: column;
    }
    .page-actions[b-fv3lpe3sxq] {
        width: 100%;
    }
    .page-actions[b-fv3lpe3sxq]  fluent-button {
        width: 100%;
    }
    .metrics-row[b-fv3lpe3sxq] {
        grid-template-columns: 1fr 1fr;
    }
    .category-grid[b-fv3lpe3sxq] {
        grid-template-columns: 1fr;
    }
    .action-bar[b-fv3lpe3sxq] {
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    }
    .action-reason[b-fv3lpe3sxq] {
        max-width: none;
    }
    .action-buttons[b-fv3lpe3sxq] {
        justify-content: stretch;
    }
    .action-buttons[b-fv3lpe3sxq]  fluent-button {
        flex: 1;
    }
}

/* ── Responsive: 640px ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .page-title[b-fv3lpe3sxq] {
        font-size: 22px;
    }
    .metrics-row[b-fv3lpe3sxq] {
        grid-template-columns: 1fr;
    }
    .filter-grid[b-fv3lpe3sxq] {
        flex-direction: column;
        align-items: stretch;
    }
    .result-stat-value[b-fv3lpe3sxq] {
        font-size: 24px;
    }
}

/* ── Responsive: 375px ────────────────────────────────────────────────────── */
@media (max-width: 375px) {
    .page-container[b-fv3lpe3sxq] {
        padding: 12px;
        gap: 16px;
    }
    .page-title[b-fv3lpe3sxq] {
        font-size: 20px;
    }
    .metric-card[b-fv3lpe3sxq] {
        padding: 16px;
    }
    .settings-group[b-fv3lpe3sxq] {
        padding: 16px;
    }
    .category-grid[b-fv3lpe3sxq] {
        padding: 12px;
        gap: 8px;
    }
}

/* ── Metric card warning state ────────────────────────────────────────────── */
.metric-icon-red[b-fv3lpe3sxq] { background: rgba(220, 38, 38, 0.10); color: #dc2626; }

.metric-card-warning[b-fv3lpe3sxq] {
    border-color: rgba(220, 38, 38, 0.30);
    background: rgba(220, 38, 38, 0.03);
}

/* ── Section sub-label ────────────────────────────────────────────────────── */
.section-sub-label[b-fv3lpe3sxq] {
    padding: 8px 20px 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

/* ── Integrity issues section ─────────────────────────────────────────────── */
.integrity-section[b-fv3lpe3sxq] {
    border-top: 1px solid var(--neutral-stroke-rest);
    padding-top: 4px;
}

.integrity-section-header[b-fv3lpe3sxq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 20px 8px;
    flex-wrap: wrap;
    color: #d97706;
}

.integrity-section-title[b-fv3lpe3sxq] {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.integrity-section-desc[b-fv3lpe3sxq] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    flex: 1;
    min-width: 200px;
    align-self: center;
}

/* Integrity category card — amber theme */
.category-card.category-integrity[b-fv3lpe3sxq] {
    border-color: rgba(217, 119, 6, 0.30);
    background: rgba(217, 119, 6, 0.03);
}

.category-card.category-integrity:hover[b-fv3lpe3sxq] {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.08);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.10);
}

.category-card.category-integrity.category-selected[b-fv3lpe3sxq] {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.10);
}

.count-warning[b-fv3lpe3sxq] {
    color: #d97706;
}

/* No integrity issues indicator */
.integrity-clean[b-fv3lpe3sxq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 16px;
    font-size: 13px;
    color: #059669;
}
/* /Pages/DataProtection/BreachIncidents.razor.rz.scp.css */
/* ==========================================================================
   BreachIncidents.razor.css — Scoped styles for /data-protection/breach
   List View archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ───────────────────────────────────────────────────────────── */
.page-container[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-rko8idkxoi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-rko8idkxoi] {
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.3;
}

.page-description[b-rko8idkxoi] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI METRICS ROW ─────────────────────────────────────────────────────── */
.metrics-row[b-rko8idkxoi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.metric-icon-wrap[b-rko8idkxoi] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-rko8idkxoi]   { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.metric-icon-amber[b-rko8idkxoi]  { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.metric-icon-red[b-rko8idkxoi]    { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.metric-icon-green[b-rko8idkxoi]  { background: color-mix(in srgb, #059669 15%, transparent); color: #059669; }

.metric-body[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-rko8idkxoi] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.metric-title[b-rko8idkxoi] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-rko8idkxoi] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── LIST CARD ───────────────────────────────────────────────────────────── */
.list-container[b-rko8idkxoi] {
    overflow: hidden;
}

/* ── TOOLBAR ─────────────────────────────────────────────────────────────── */
.list-toolbar[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.list-search[b-rko8idkxoi] {
    flex: 1;
    min-width: 180px;
}

.toolbar-divider[b-rko8idkxoi] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── SKELETON LOADING ────────────────────────────────────────────────────── */
.skeleton-list[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.skeleton-row[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state-title[b-rko8idkxoi] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-state-desc[b-rko8idkxoi] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 360px;
}

/* ── DATA GRID ───────────────────────────────────────────────────────────── */
[b-rko8idkxoi] table.breach-grid {
    width: 100%;
    min-width: 1080px;
}

.incident-title-cell[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.incident-title[b-rko8idkxoi] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── SEVERITY / STATUS (merged column) ──────────────────────────────────── */
.severity-status-cell[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* ── DEADLINE CELLS (merged CERT-In + DPB column) ───────────────────────── */
.deadlines-cell[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.deadline-cell[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.deadline-label[b-rko8idkxoi] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.deadline-cell.deadline-exceeded[b-rko8idkxoi] {
    color: var(--error-foreground-rest, #dc2626);
    font-weight: 600;
}

.deadline-cell.deadline-exceeded .deadline-label[b-rko8idkxoi] {
    color: inherit;
}

/* ── ROW ACTIONS (always visible — matches the dominant codebase pattern,
   e.g. customers-grid, disbursements-grid; structural sizing only) ─── */
.row-actions[b-rko8idkxoi] {
    opacity: 1;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}

.row-action-btn[b-rko8idkxoi] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge[b-rko8idkxoi] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-success[b-rko8idkxoi]  { background: color-mix(in srgb, #059669 15%, transparent); color: #047857; }
.badge-warning[b-rko8idkxoi]  { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.badge-danger[b-rko8idkxoi]   { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.badge-critical[b-rko8idkxoi] { background: #ef4444; color: #fff; }
.badge-info[b-rko8idkxoi]     { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #1d4ed8; }
.badge-neutral[b-rko8idkxoi]  { background: color-mix(in srgb, #6b7280 15%, transparent); color: #4b5563; }

/* ── DIALOG SHARED ───────────────────────────────────────────────────────── */
.dialog-header-content[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
}

.dialog-scroll-body[b-rko8idkxoi] {
    overflow-y: auto;
    max-height: calc(85vh - 130px);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── FORM SECTIONS ───────────────────────────────────────────────────────── */
.form-section[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--neutral-layer-3);
    border-radius: 8px;
}

.form-section-title[b-rko8idkxoi] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.form-section-desc[b-rko8idkxoi] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: -6px 0 0 0;
}

/* ── FORM FIELDS (stacked: label above, input below) ─────────────────────── */
.form-field[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-rko8idkxoi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.form-row[b-rko8idkxoi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── CATEGORIES GRID (checkbox fix: 2-column, checkboxes on same line) ───── */
.categories-grid[b-rko8idkxoi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.category-item[b-rko8idkxoi] {
    display: flex;
    align-items: center;
}

/* ── DETAIL DIALOG ───────────────────────────────────────────────────────── */
.detail-grid[b-rko8idkxoi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-field[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-rko8idkxoi] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.detail-value[b-rko8idkxoi] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.detail-section[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-text[b-rko8idkxoi] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    margin: 0;
    white-space: pre-wrap;
}

/* ── CATEGORY CHIPS ──────────────────────────────────────────────────────── */
.category-chips[b-rko8idkxoi] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip[b-rko8idkxoi] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--neutral-layer-3);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
}

/* ── NOTIFICATION STATUS CARDS ───────────────────────────────────────────── */
.notification-row[b-rko8idkxoi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.notification-item[b-rko8idkxoi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
}

.notification-item.done[b-rko8idkxoi]    { border-color: #059669; background: color-mix(in srgb, #059669 8%, transparent); }
.notification-item.overdue[b-rko8idkxoi] { border-color: #ef4444; background: color-mix(in srgb, #ef4444 8%, transparent); }
.notification-item.pending[b-rko8idkxoi] { border-color: var(--neutral-stroke-rest); }

.notif-header[b-rko8idkxoi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notif-title[b-rko8idkxoi] {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.notif-deadline[b-rko8idkxoi],
.notif-done[b-rko8idkxoi],
.notif-ref[b-rko8idkxoi] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.notif-done[b-rko8idkxoi] { color: #059669; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-rko8idkxoi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .list-toolbar[b-rko8idkxoi] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-divider[b-rko8idkxoi] {
        display: none;
    }

    .toolbar-filters[b-rko8idkxoi] {
        flex-wrap: wrap;
    }

    .detail-grid[b-rko8idkxoi],
    .notification-row[b-rko8idkxoi] {
        grid-template-columns: 1fr;
    }

    .form-row[b-rko8idkxoi] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .page-container[b-rko8idkxoi] {
        padding: 16px 12px;
    }

    .metrics-row[b-rko8idkxoi] {
        grid-template-columns: 1fr 1fr;
    }

    .metric-card[b-rko8idkxoi] {
        padding: 12px 14px;
    }

    .metric-value[b-rko8idkxoi] {
        font-size: 10px;
    }

    .row-actions[b-rko8idkxoi] {
        flex-wrap: nowrap;
    }

    .categories-grid[b-rko8idkxoi] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/DataProtection/ConsentManagement.razor.rz.scp.css */
/* ==========================================================================
   ConsentManagement.razor.css — Scoped styles for /data-protection/consent
   List View archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ───────────────────────────────────────────────────────────── */
.page-container[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-j1xdalmgk7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-j1xdalmgk7] {
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.3;
}

.page-description[b-j1xdalmgk7] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI METRICS ROW ─────────────────────────────────────────────────────── */
.metrics-row[b-j1xdalmgk7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.metric-icon-wrap[b-j1xdalmgk7] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-green[b-j1xdalmgk7]  { background: color-mix(in srgb, #059669 15%, transparent); color: #059669; }
.metric-icon-gray[b-j1xdalmgk7]   { background: color-mix(in srgb, #6b7280 15%, transparent); color: #6b7280; }
.metric-icon-amber[b-j1xdalmgk7]  { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }

.metric-body[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-j1xdalmgk7] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.metric-title[b-j1xdalmgk7] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-j1xdalmgk7] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── LIST CONTAINER & TOOLBAR ────────────────────────────────────────────── */
.list-container[b-j1xdalmgk7] {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px;
}

.list-toolbar[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.list-search[b-j1xdalmgk7] {
    flex: 1;
    min-width: 200px;
}

.toolbar-divider[b-j1xdalmgk7] {
    width: 1px;
    height: 28px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── CUSTOMER LOOKUP CARD ────────────────────────────────────────────────── */
.customer-lookup-card[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 16px 0;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-3);
    flex-wrap: wrap;
}

.customer-lookup-loading[b-j1xdalmgk7] {
    color: var(--neutral-foreground-hint);
    font-size: 13px;
    gap: 10px;
}

.customer-lookup-error[b-j1xdalmgk7] {
    border-color: var(--error-fill-rest);
    background: color-mix(in srgb, var(--error-fill-rest) 8%, transparent);
    color: var(--error-foreground-rest);
    font-size: 13px;
}

.lookup-customer-info[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.lookup-avatar[b-j1xdalmgk7] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, transparent);
    color: var(--accent-foreground-rest);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
}

.lookup-details[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lookup-name[b-j1xdalmgk7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lookup-meta[b-j1xdalmgk7] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.lookup-actions[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── SKELETON LOADING ────────────────────────────────────────────────────── */
.skeleton-table[b-j1xdalmgk7] {
    padding: 0 16px 16px;
}

.skeleton-toolbar[b-j1xdalmgk7] {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    margin-bottom: 8px;
}

.skeleton-search[b-j1xdalmgk7] {
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-layer-3) 25%, var(--neutral-layer-4) 50%, var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: cs-shimmer-b-j1xdalmgk7 1.4s infinite;
    flex: 1;
}

.skeleton-filter[b-j1xdalmgk7] {
    height: 32px;
    width: 140px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-layer-3) 25%, var(--neutral-layer-4) 50%, var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: cs-shimmer-b-j1xdalmgk7 1.4s infinite;
    flex-shrink: 0;
}

.skeleton-row[b-j1xdalmgk7] {
    display: grid;
    grid-template-columns: 56px 1.6fr 1.3fr 0.9fr 0.9fr 1fr 72px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-cell[b-j1xdalmgk7] {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-layer-3) 25%, var(--neutral-layer-4) 50%, var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: cs-shimmer-b-j1xdalmgk7 1.4s infinite;
}

.skeleton-cell.short[b-j1xdalmgk7]   { width: 40px; }
.skeleton-cell.medium[b-j1xdalmgk7]  { width: 80%; }
.skeleton-cell.wide[b-j1xdalmgk7]    { width: 90%; }
.skeleton-cell.actions[b-j1xdalmgk7] { width: 48px; }

@keyframes cs-shimmer-b-j1xdalmgk7 {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 12px;
}

.empty-heading[b-j1xdalmgk7] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 8px 0 0;
}

.empty-description[b-j1xdalmgk7] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    max-width: 380px;
    line-height: 1.5;
    margin: 0;
}

/* ── GRID ────────────────────────────────────────────────────────────────── */
.customer-id-cell[b-j1xdalmgk7] {
    font-size: 12px;
    font-family: var(--font-monospace, 'Consolas', monospace);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-id-full[b-j1xdalmgk7] {
    display: none; /* shown only in detail dialog */
}

/* ── PURPOSE BADGES ──────────────────────────────────────────────────────── */
.purpose-badge[b-j1xdalmgk7] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.purpose-loanprocessing[b-j1xdalmgk7]         { background: #dbeafe; color: #1e40af; }
.purpose-creditbureapull[b-j1xdalmgk7]        { background: #fef3c7; color: #92400e; }
.purpose-creditbureareporting[b-j1xdalmgk7]   { background: #fde68a; color: #78350f; }
.purpose-marketingcommunication[b-j1xdalmgk7] { background: #fce7f3; color: #9d174d; }
.purpose-datasharingwithinsurer[b-j1xdalmgk7] { background: #d1fae5; color: #065f46; }
.purpose-datasharingwithrecovery[b-j1xdalmgk7]{ background: #fee2e2; color: #991b1b; }
.purpose-profileanalytics[b-j1xdalmgk7]       { background: #ede9fe; color: #5b21b6; }
.purpose-kycverification[b-j1xdalmgk7]        { background: #ccfbf1; color: #134e4a; }
.purpose-dataretention[b-j1xdalmgk7]          { background: #f3f4f6; color: #374151; }

/* ── CHANNEL BADGES ──────────────────────────────────────────────────────── */
.channel-badge[b-j1xdalmgk7] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.channel-app[b-j1xdalmgk7]   { background: #e0e7ff; color: #3730a3; }
.channel-web[b-j1xdalmgk7]   { background: #d1fae5; color: #065f46; }
.channel-sms[b-j1xdalmgk7]   { background: #fef3c7; color: #92400e; }
.channel-paper[b-j1xdalmgk7] { background: #f3f4f6; color: #374151; }
.channel-ivr[b-j1xdalmgk7]   { background: #fee2e2; color: #991b1b; }
.channel-email[b-j1xdalmgk7] { background: #dbeafe; color: #1e40af; }

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */
.status-badge[b-j1xdalmgk7] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-active[b-j1xdalmgk7]    { background: #d1fae5; color: #065f46; }
.status-withdrawn[b-j1xdalmgk7] { background: #f3f4f6; color: #6b7280; }
.status-expired[b-j1xdalmgk7]   { background: #fee2e2; color: #991b1b; }

/* ── ROW ACTIONS ─────────────────────────────────────────────────────────── */
.row-actions[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.row-action-danger[b-j1xdalmgk7] {
    color: #dc2626 !important;
}

.row-action-danger:hover[b-j1xdalmgk7] {
    background: color-mix(in srgb, #dc2626 12%, transparent) !important;
    color: #b91c1c !important;
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ─────────────────── */
.grid-scroll-wrapper[b-j1xdalmgk7] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-j1xdalmgk7] table.consent-grid {
    min-width: 950px;
}

/* ── PAGINATION FOOTER ───────────────────────────────────────────────────── */
.list-footer[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-j1xdalmgk7] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── MOBILE CARD LIST ────────────────────────────────────────────────────── */
.entity-list-mobile[b-j1xdalmgk7] {
    display: none;
    flex-direction: column;
    gap: 0;
}

.entity-card[b-j1xdalmgk7] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.entity-card:last-child[b-j1xdalmgk7] {
    border-bottom: none;
}

.entity-card-header[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.entity-card-title[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.entity-card-name[b-j1xdalmgk7] {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-monospace, 'Consolas', monospace);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-card-actions[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.entity-card-fields[b-j1xdalmgk7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.entity-card-field[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-label[b-j1xdalmgk7] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-foreground-hint);
}

.field-value[b-j1xdalmgk7] {
    font-size: 12px;
    color: var(--neutral-foreground-rest);
}

/* ── DETAIL DIALOG ───────────────────────────────────────────────────────── */
.detail-grid[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-row[b-j1xdalmgk7] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    align-items: start;
}

.detail-row:last-child[b-j1xdalmgk7] {
    border-bottom: none;
}

.detail-row-full[b-j1xdalmgk7] {
    grid-template-columns: 1fr;
    gap: 4px;
}

.detail-label[b-j1xdalmgk7] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-foreground-hint);
    padding-top: 2px;
}

.detail-value[b-j1xdalmgk7] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    word-break: break-all;
}

.detail-value-mono[b-j1xdalmgk7] {
    font-family: var(--font-monospace, 'Consolas', monospace);
    font-size: 12px;
}

.consent-text-value[b-j1xdalmgk7] {
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── FORM ────────────────────────────────────────────────────────────────── */
.form-stack[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.form-label[b-j1xdalmgk7] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.form-required[b-j1xdalmgk7] {
    color: var(--error-fill-rest);
    margin-left: 2px;
}

.form-validation[b-j1xdalmgk7] {
    font-size: 12px;
    color: var(--error-foreground-rest);
}

.consent-date-input[b-j1xdalmgk7] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 150ms;
}

.consent-date-input:focus[b-j1xdalmgk7] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

/* ── WITHDRAW INFO ───────────────────────────────────────────────────────── */
.withdraw-info[b-j1xdalmgk7] {
    background: var(--neutral-layer-3);
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest);
    padding: 4px 12px;
}

.withdraw-info .detail-row[b-j1xdalmgk7] {
    padding: 8px 0;
}

/* ── DIALOG CUSTOMER SEARCH ──────────────────────────────────────────────── */
.dlg-search-spinner[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.dlg-search-empty[b-j1xdalmgk7] {
    padding: 10px 4px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.dlg-search-results[b-j1xdalmgk7] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    margin-top: 6px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}

.dlg-result-item[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.dlg-result-item:last-child[b-j1xdalmgk7] {
    border-bottom: none;
}

.dlg-result-item:hover[b-j1xdalmgk7] {
    background: var(--neutral-fill-secondary-hover);
}

.dlg-result-avatar[b-j1xdalmgk7] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.dlg-result-info[b-j1xdalmgk7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.dlg-result-name[b-j1xdalmgk7] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlg-result-meta[b-j1xdalmgk7] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* Confirmed customer card */
.dlg-customer-card[b-j1xdalmgk7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest);
    border: 1px solid var(--accent-stroke-control-rest);
}

.dlg-card-avatar[b-j1xdalmgk7] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.dlg-card-info[b-j1xdalmgk7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.dlg-card-name[b-j1xdalmgk7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.dlg-card-meta[b-j1xdalmgk7] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-j1xdalmgk7] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .page-container[b-j1xdalmgk7] {
        padding: 16px;
        gap: 14px;
    }

    .page-header[b-j1xdalmgk7] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-j1xdalmgk7] {
        justify-content: flex-end;
    }

    .metrics-row[b-j1xdalmgk7] {
        grid-template-columns: 1fr;
    }

    .list-toolbar[b-j1xdalmgk7] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .toolbar-divider[b-j1xdalmgk7] {
        display: none;
    }

    .toolbar-filters[b-j1xdalmgk7] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-filters fluent-select[b-j1xdalmgk7] {
        width: 100% !important;
    }

    .detail-row[b-j1xdalmgk7] {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}
/* /Pages/DataProtection/DataPortabilityRequests.razor.rz.scp.css */
/* ==========================================================================
   DataPortabilityRequests.razor.css — Scoped styles for /data-protection/portability
   List View archetype per AI-Agent-UI-Generation-Guide §7.3 (copied from
   ErasureRequests.razor.css to keep the DataProtection page family visually identical)
   ========================================================================== */

/* ── PAGE SHELL ───────────────────────────────────────────────────────────── */
.page-container[b-68a17qiwrj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-68a17qiwrj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-68a17qiwrj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-68a17qiwrj] {
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.3;
}

.page-description[b-68a17qiwrj] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-68a17qiwrj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI METRICS ROW ─────────────────────────────────────────────────────── */
.metrics-row[b-68a17qiwrj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-68a17qiwrj] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.metric-icon-wrap[b-68a17qiwrj] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-68a17qiwrj]  { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.metric-icon-amber[b-68a17qiwrj] { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.metric-icon-red[b-68a17qiwrj]   { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.metric-icon-green[b-68a17qiwrj] { background: color-mix(in srgb, #059669 15%, transparent); color: #059669; }

.metric-body[b-68a17qiwrj] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-68a17qiwrj] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.metric-title[b-68a17qiwrj] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-68a17qiwrj] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── LIST CARD ───────────────────────────────────────────────────────────── */
.list-container[b-68a17qiwrj] {
    overflow: hidden;
}

/* ── TOOLBAR ─────────────────────────────────────────────────────────────── */
.list-toolbar[b-68a17qiwrj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.list-search[b-68a17qiwrj] {
    flex: 1;
    min-width: 180px;
}

.toolbar-divider[b-68a17qiwrj] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-68a17qiwrj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── SKELETON LOADING ────────────────────────────────────────────────────── */
.skeleton-list[b-68a17qiwrj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.skeleton-row[b-68a17qiwrj] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state[b-68a17qiwrj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state-title[b-68a17qiwrj] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-state-desc[b-68a17qiwrj] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 360px;
}

/* ── DATA GRID ───────────────────────────────────────────────────────────── */
[b-68a17qiwrj] table.portability-grid {
    width: 100%;
}

.customer-cell[b-68a17qiwrj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.customer-id[b-68a17qiwrj] {
    font-family: monospace;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
}

/* ── ROW ACTIONS ─────────────────────────────────────────────────────────── */
.row-actions[b-68a17qiwrj] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge[b-68a17qiwrj] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-success[b-68a17qiwrj] { background: color-mix(in srgb, #059669 15%, transparent); color: #047857; }
.badge-warning[b-68a17qiwrj] { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.badge-danger[b-68a17qiwrj]  { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.badge-info[b-68a17qiwrj]    { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #1d4ed8; }
.badge-neutral[b-68a17qiwrj] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #4b5563; }

/* ── DIALOG SHARED ───────────────────────────────────────────────────────── */
.dialog-header-content[b-68a17qiwrj] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
}

.dialog-scroll-body[b-68a17qiwrj] {
    overflow-y: auto;
    max-height: calc(85vh - 130px);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── FORM FIELDS (stacked: label above, input below) ─────────────────────── */
.form-field[b-68a17qiwrj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-68a17qiwrj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.form-error[b-68a17qiwrj] {
    font-size: 12px;
    color: var(--error-foreground-rest, #dc2626);
}

.form-section-title[b-68a17qiwrj] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

/* ── DETAIL DIALOG ───────────────────────────────────────────────────────── */
.detail-grid[b-68a17qiwrj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-field[b-68a17qiwrj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-68a17qiwrj] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.detail-value[b-68a17qiwrj] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.detail-section[b-68a17qiwrj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-text[b-68a17qiwrj] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    margin: 0;
    white-space: pre-wrap;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-68a17qiwrj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .list-toolbar[b-68a17qiwrj] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-divider[b-68a17qiwrj] {
        display: none;
    }

    .toolbar-filters[b-68a17qiwrj] {
        flex-wrap: wrap;
    }

    .detail-grid[b-68a17qiwrj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .page-container[b-68a17qiwrj] {
        padding: 16px 12px;
    }

    .metrics-row[b-68a17qiwrj] {
        grid-template-columns: 1fr 1fr;
    }

    .metric-card[b-68a17qiwrj] {
        padding: 12px 14px;
    }

    .metric-value[b-68a17qiwrj] {
        font-size: 10px;
    }

    .metric-desc[b-68a17qiwrj] {
        display: none;
    }

    .page-header[b-68a17qiwrj] {
        flex-direction: column;
        gap: 12px;
    }

    .header-actions[b-68a17qiwrj] {
        width: 100%;
        justify-content: flex-end;
    }

    .row-actions[b-68a17qiwrj] {
        opacity: 1;
    }
}
/* /Pages/DataProtection/ErasureRequests.razor.rz.scp.css */
/* ==========================================================================
   ErasureRequests.razor.css — Scoped styles for /data-protection/erasure
   List View archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ───────────────────────────────────────────────────────────── */
.page-container[b-pc8scd0zn7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-pc8scd0zn7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-pc8scd0zn7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-pc8scd0zn7] {
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.3;
}

.page-description[b-pc8scd0zn7] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-pc8scd0zn7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI METRICS ROW ─────────────────────────────────────────────────────── */
.metrics-row[b-pc8scd0zn7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-pc8scd0zn7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.metric-icon-wrap[b-pc8scd0zn7] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-pc8scd0zn7]  { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.metric-icon-amber[b-pc8scd0zn7] { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.metric-icon-red[b-pc8scd0zn7]   { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.metric-icon-green[b-pc8scd0zn7] { background: color-mix(in srgb, #059669 15%, transparent); color: #059669; }

.metric-body[b-pc8scd0zn7] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-pc8scd0zn7] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.metric-title[b-pc8scd0zn7] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-pc8scd0zn7] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── LIST CARD ───────────────────────────────────────────────────────────── */
.list-container[b-pc8scd0zn7] {
    overflow: hidden;
}

/* ── TOOLBAR ─────────────────────────────────────────────────────────────── */
.list-toolbar[b-pc8scd0zn7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.list-search[b-pc8scd0zn7] {
    flex: 1;
    min-width: 180px;
}

.toolbar-divider[b-pc8scd0zn7] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-pc8scd0zn7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── SKELETON LOADING ────────────────────────────────────────────────────── */
.skeleton-list[b-pc8scd0zn7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.skeleton-row[b-pc8scd0zn7] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state[b-pc8scd0zn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state-title[b-pc8scd0zn7] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-state-desc[b-pc8scd0zn7] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 360px;
}

/* ── DATA GRID ───────────────────────────────────────────────────────────── */
[b-pc8scd0zn7] table.erasure-grid {
    width: 100%;
}

.customer-cell[b-pc8scd0zn7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.customer-id[b-pc8scd0zn7] {
    font-family: monospace;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
}

/* ── ROW ACTIONS ─────────────────────────────────────────────────────────── */
.row-actions[b-pc8scd0zn7] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge[b-pc8scd0zn7] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-success[b-pc8scd0zn7] { background: color-mix(in srgb, #059669 15%, transparent); color: #047857; }
.badge-warning[b-pc8scd0zn7] { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.badge-danger[b-pc8scd0zn7]  { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.badge-info[b-pc8scd0zn7]    { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #1d4ed8; }
.badge-neutral[b-pc8scd0zn7] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #4b5563; }

/* ── DIALOG SHARED ───────────────────────────────────────────────────────── */
.dialog-header-content[b-pc8scd0zn7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
}

.dialog-scroll-body[b-pc8scd0zn7] {
    overflow-y: auto;
    max-height: calc(85vh - 130px);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── FORM FIELDS (stacked: label above, input below) ─────────────────────── */
.form-field[b-pc8scd0zn7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-pc8scd0zn7] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.form-error[b-pc8scd0zn7] {
    font-size: 12px;
    color: var(--error-foreground-rest, #dc2626);
}

.form-section-title[b-pc8scd0zn7] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

/* ── DETAIL DIALOG ───────────────────────────────────────────────────────── */
.detail-grid[b-pc8scd0zn7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-field[b-pc8scd0zn7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-pc8scd0zn7] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.detail-value[b-pc8scd0zn7] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.detail-section[b-pc8scd0zn7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-text[b-pc8scd0zn7] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    margin: 0;
    white-space: pre-wrap;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-pc8scd0zn7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .list-toolbar[b-pc8scd0zn7] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-divider[b-pc8scd0zn7] {
        display: none;
    }

    .toolbar-filters[b-pc8scd0zn7] {
        flex-wrap: wrap;
    }

    .detail-grid[b-pc8scd0zn7] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .page-container[b-pc8scd0zn7] {
        padding: 16px 12px;
    }

    .metrics-row[b-pc8scd0zn7] {
        grid-template-columns: 1fr 1fr;
    }

    .metric-card[b-pc8scd0zn7] {
        padding: 12px 14px;
    }

    .metric-value[b-pc8scd0zn7] {
        font-size: 10px;
    }

    .metric-desc[b-pc8scd0zn7] {
        display: none;
    }

    .page-header[b-pc8scd0zn7] {
        flex-direction: column;
        gap: 12px;
    }

    .header-actions[b-pc8scd0zn7] {
        width: 100%;
        justify-content: flex-end;
    }

    .row-actions[b-pc8scd0zn7] {
        opacity: 1;
    }
}
/* /Pages/DataProtection/PrivacyNoticeAcceptances.razor.rz.scp.css */
/* ==========================================================================
   PrivacyNoticeAcceptances — scoped styles
   List View archetype (Guide §7.3)
   ========================================================================== */

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header[b-t8sc9sbqd5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.title-section[b-t8sc9sbqd5] {
    flex: 1;
}

.page-title[b-t8sc9sbqd5] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
}

.page-description[b-t8sc9sbqd5] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-t8sc9sbqd5] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── KPI metrics row ─────────────────────────────────────────────────────── */
.metrics-row[b-t8sc9sbqd5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-t8sc9sbqd5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-t8sc9sbqd5] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-t8sc9sbqd5] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-t8sc9sbqd5] {
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
    color: var(--accent-foreground-rest);
}

.metric-icon-green[b-t8sc9sbqd5] {
    background: color-mix(in srgb, #16a34a 12%, transparent);
    color: #16a34a;
}

.metric-icon-purple[b-t8sc9sbqd5] {
    background: color-mix(in srgb, var(--accent-fill-rest) 20%, transparent);
    color: var(--accent-foreground-rest);
}

.metric-body[b-t8sc9sbqd5] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-t8sc9sbqd5] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-t8sc9sbqd5] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-t8sc9sbqd5] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container (FluentCard wrapper) ─────────────────────────────────── */
.list-container[b-t8sc9sbqd5] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.list-toolbar[b-t8sc9sbqd5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-t8sc9sbqd5] {
    flex: 1 1 200px;
    max-width: 320px;
}

.toolbar-divider[b-t8sc9sbqd5] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-t8sc9sbqd5] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.version-badge[b-t8sc9sbqd5] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    color: var(--accent-foreground-rest);
}

.channel-badge[b-t8sc9sbqd5] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-hint);
}

.channel-badge.channel-app[b-t8sc9sbqd5]    { background: rgba(99,102,241,0.12);  color: #6366f1; }
.channel-badge.channel-web[b-t8sc9sbqd5]    { background: rgba(16,185,129,0.12);  color: #10b981; }
.channel-badge.channel-sms[b-t8sc9sbqd5]    { background: rgba(245,158,11,0.12);  color: #f59e0b; }
.channel-badge.channel-paper[b-t8sc9sbqd5]  { background: rgba(107,114,128,0.12); color: #6b7280; }
.channel-badge.channel-ivr[b-t8sc9sbqd5]    { background: rgba(239,68,68,0.12);   color: #ef4444; }
.channel-badge.channel-email[b-t8sc9sbqd5]  { background: rgba(59,130,246,0.12);  color: #3b82f6; }

/* ── Customer ID cell ────────────────────────────────────────────────────── */
.customer-id-cell[b-t8sc9sbqd5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Full GUID is shown only in the detail dialog, never in the grid/card list. */
.customer-id-full[b-t8sc9sbqd5] {
    display: none;
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ────────────────── */
.grid-scroll-wrapper[b-t8sc9sbqd5] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-t8sc9sbqd5] table.privacy-notice-grid {
    min-width: 950px;
}

/* ── List footer ─────────────────────────────────────────────────────────── */
.list-footer[b-t8sc9sbqd5] {
    padding: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-t8sc9sbqd5] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state[b-t8sc9sbqd5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
}

.empty-heading[b-t8sc9sbqd5] {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-description[b-t8sc9sbqd5] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 400px;
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton-toolbar[b-t8sc9sbqd5] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-search[b-t8sc9sbqd5] {
    height: 32px;
    width: 260px;
    border-radius: 4px;
}

.skeleton-filter[b-t8sc9sbqd5] {
    height: 32px;
    width: 140px;
    border-radius: 4px;
}

.skeleton-row[b-t8sc9sbqd5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-cell[b-t8sc9sbqd5] {
    height: 14px;
    border-radius: 4px;
}

.skeleton-cell.wide[b-t8sc9sbqd5]    { width: 25%; }
.skeleton-cell.medium[b-t8sc9sbqd5]  { width: 20%; }
.skeleton-cell.short[b-t8sc9sbqd5]   { width: 12%; }
.skeleton-cell.actions[b-t8sc9sbqd5] { width: 90px; }

.skeleton-search[b-t8sc9sbqd5],
.skeleton-filter[b-t8sc9sbqd5],
.skeleton-cell[b-t8sc9sbqd5] {
    background: linear-gradient(
        90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%
    );
    background-size: 200% 100%;
    animation: pn-shimmer-b-t8sc9sbqd5 1.5s infinite;
}

@keyframes pn-shimmer-b-t8sc9sbqd5 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Row actions (initial hidden — hover reveal is in global-styles.css) ──── */
.row-actions[b-t8sc9sbqd5] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-t8sc9sbqd5] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.mobile-action-btn[b-t8sc9sbqd5] {
    opacity: 1;
}

/* ── Mobile card list (hidden on desktop, shown via media query) ─────────── */
.entity-list-mobile[b-t8sc9sbqd5] {
    display: none;
}

.entity-card[b-t8sc9sbqd5] {
    padding: 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
}

.entity-card-header[b-t8sc9sbqd5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.entity-card-title[b-t8sc9sbqd5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.entity-card-name[b-t8sc9sbqd5] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.entity-card-fields[b-t8sc9sbqd5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-t8sc9sbqd5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-label[b-t8sc9sbqd5] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    letter-spacing: 0.04em;
}

.field-value[b-t8sc9sbqd5] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Detail dialog content ───────────────────────────────────────────────── */
.detail-grid[b-t8sc9sbqd5] {
    display: flex;
    flex-direction: column;
}

.detail-row[b-t8sc9sbqd5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.detail-row:last-child[b-t8sc9sbqd5] {
    border-bottom: none;
}

.detail-label[b-t8sc9sbqd5] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-value[b-t8sc9sbqd5] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.detail-value-mono[b-t8sc9sbqd5] {
    font-family: monospace;
    font-size: 13px;
    word-break: break-all;
}

/* ── Customer lookup confirmation card ──────────────────────────────────── */
.customer-lookup-card[b-t8sc9sbqd5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    margin: 0 16px 8px;
    background: color-mix(in srgb, var(--accent-fill-rest) 6%, var(--neutral-layer-1));
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 40%, transparent);
    border-radius: 8px;
    flex-wrap: wrap;
    animation: lookup-slide-in-b-t8sc9sbqd5 0.15s ease-out;
}

@keyframes lookup-slide-in-b-t8sc9sbqd5 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.customer-lookup-loading[b-t8sc9sbqd5] {
    border-color: var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    justify-content: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.customer-lookup-error[b-t8sc9sbqd5] {
    background: color-mix(in srgb, #d13438 6%, var(--neutral-layer-1));
    border-color: color-mix(in srgb, #d13438 40%, transparent);
    justify-content: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #d13438;
}

.lookup-customer-info[b-t8sc9sbqd5] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.lookup-avatar[b-t8sc9sbqd5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.lookup-details[b-t8sc9sbqd5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lookup-name[b-t8sc9sbqd5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lookup-meta[b-t8sc9sbqd5] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lookup-actions[b-t8sc9sbqd5] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

/* ── Responsive overrides ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-t8sc9sbqd5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .metrics-row[b-t8sc9sbqd5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .list-search[b-t8sc9sbqd5] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .toolbar-divider[b-t8sc9sbqd5] {
        display: none;
    }

    .toolbar-filters[b-t8sc9sbqd5] {
        width: 100%;
    }

    /* Show card list, hide desktop grid (the grid itself is hidden via global-styles.css media query) */
    .entity-list-mobile[b-t8sc9sbqd5] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
}
/* /Pages/DataProtection/RetentionPolicies.razor.rz.scp.css */
/* ==========================================================================
   RetentionPolicies.razor.css — Scoped styles for /data-protection/retention
   List View archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ───────────────────────────────────────────────────────────── */
.page-container[b-eucef6u2ff] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-eucef6u2ff] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-eucef6u2ff] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-eucef6u2ff] {
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.3;
}

.page-description[b-eucef6u2ff] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-eucef6u2ff] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI METRICS ROW ─────────────────────────────────────────────────────── */
.metrics-row[b-eucef6u2ff] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-eucef6u2ff] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.metric-icon-wrap[b-eucef6u2ff] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-eucef6u2ff]  { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.metric-icon-amber[b-eucef6u2ff] { background: color-mix(in srgb, #d97706 15%, transparent); color: #d97706; }
.metric-icon-teal[b-eucef6u2ff]  { background: color-mix(in srgb, #0891b2 15%, transparent); color: #0891b2; }
.metric-icon-red[b-eucef6u2ff]   { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }

.metric-body[b-eucef6u2ff] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-eucef6u2ff] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.metric-title[b-eucef6u2ff] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.metric-desc[b-eucef6u2ff] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── LIST CARD ───────────────────────────────────────────────────────────── */
.list-container[b-eucef6u2ff] {
    overflow: hidden;
}

/* ── TOOLBAR ─────────────────────────────────────────────────────────────── */
.list-toolbar[b-eucef6u2ff] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.list-search[b-eucef6u2ff] {
    flex: 1;
    min-width: 180px;
}

.toolbar-divider[b-eucef6u2ff] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-eucef6u2ff] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── SKELETON LOADING ────────────────────────────────────────────────────── */
.skeleton-list[b-eucef6u2ff] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.skeleton-row[b-eucef6u2ff] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state[b-eucef6u2ff] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state-title[b-eucef6u2ff] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-state-desc[b-eucef6u2ff] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 400px;
}

/* ── DATA GRID ───────────────────────────────────────────────────────────── */
[b-eucef6u2ff] table.retention-grid {
    width: 100%;
}

.category-cell[b-eucef6u2ff] {
    display: block;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.legal-basis-cell[b-eucef6u2ff] {
    display: block;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.retention-days[b-eucef6u2ff] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

/* ── ROW ACTIONS ─────────────────────────────────────────────────────────── */
.row-actions[b-eucef6u2ff] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge[b-eucef6u2ff] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-success[b-eucef6u2ff] { background: color-mix(in srgb, #059669 15%, transparent); color: #047857; }
.badge-warning[b-eucef6u2ff] { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.badge-danger[b-eucef6u2ff]  { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.badge-info[b-eucef6u2ff]    { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #1d4ed8; }
.badge-neutral[b-eucef6u2ff] { background: color-mix(in srgb, #6b7280 15%, transparent); color: #4b5563; }

/* ── DIALOG SHARED ───────────────────────────────────────────────────────── */
.dialog-header-content[b-eucef6u2ff] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
}

.dialog-scroll-body[b-eucef6u2ff] {
    overflow-y: auto;
    max-height: calc(85vh - 130px);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── FORM FIELDS (stacked: label above, input below) ─────────────────────── */
.form-field[b-eucef6u2ff] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-eucef6u2ff] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── DELETE CONFIRM DETAIL ───────────────────────────────────────────────── */
.detail-grid[b-eucef6u2ff] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-field[b-eucef6u2ff] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-eucef6u2ff] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.detail-value[b-eucef6u2ff] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-eucef6u2ff] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .list-toolbar[b-eucef6u2ff] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-divider[b-eucef6u2ff] {
        display: none;
    }

    .toolbar-filters[b-eucef6u2ff] {
        flex-wrap: wrap;
    }

    .detail-grid[b-eucef6u2ff] {
        grid-template-columns: 1fr;
    }

    .category-cell[b-eucef6u2ff],
    .legal-basis-cell[b-eucef6u2ff] {
        max-width: 160px;
    }
}

@media (max-width: 600px) {
    .page-container[b-eucef6u2ff] {
        padding: 16px 12px;
    }

    .metrics-row[b-eucef6u2ff] {
        grid-template-columns: 1fr 1fr;
    }

    .metric-card[b-eucef6u2ff] {
        padding: 12px 14px;
    }

    .metric-value[b-eucef6u2ff] {
        font-size: 10px;
    }

    .metric-desc[b-eucef6u2ff] {
        display: none;
    }

    .page-header[b-eucef6u2ff] {
        flex-direction: column;
        gap: 12px;
    }

    .header-actions[b-eucef6u2ff] {
        width: 100%;
        justify-content: flex-end;
    }

    .row-actions[b-eucef6u2ff] {
        opacity: 1;
    }
}
/* /Pages/Debentures/Allotments/Index.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-zazlql9xq2 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.page-container[b-zazlql9xq2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-zazlql9xq2 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-zazlql9xq2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-zazlql9xq2] { flex: 1; }

.page-title[b-zazlql9xq2] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-zazlql9xq2] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.page-actions[b-zazlql9xq2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIST CONTAINER — main data card
══════════════════════════════════════════════════════════════════════════════ */
.list-container[b-zazlql9xq2] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-zazlql9xq2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    background: var(--neutral-layer-1);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
    contain: none;
    content-visibility: visible;
}

.list-search[b-zazlql9xq2] {
    flex: 1;
    min-width: 200px;
}

.toolbar-divider[b-zazlql9xq2] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-zazlql9xq2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton-list[b-zazlql9xq2] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.skeleton-row[b-zazlql9xq2] {
    display: grid;
    grid-template-columns: 56px 150px 1.5fr 1fr 90px 120px 120px 90px 72px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-row:last-child[b-zazlql9xq2] { border-bottom: none; }

/* ── State box (empty / error) ────────────────────────────────────────────── */
.state-box[b-zazlql9xq2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-zazlql9xq2]         { opacity: .3; }
.state-title[b-zazlql9xq2]        { margin: 0; font-size: 17px; font-weight: 700; color: var(--neutral-foreground-rest); }
.state-hint[b-zazlql9xq2]         { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); max-width: 360px; }

/* ── Grid scroll wrapper ──────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-zazlql9xq2] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-zazlql9xq2] table.allotments-grid {
    min-width: 1080px;
}

/* ── List footer ──────────────────────────────────────────────────────────── */
.list-footer[b-zazlql9xq2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-zazlql9xq2] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Row actions ──────────────────────────────────────────────────────────── */
/* Initial hidden state — reveal rule is in global-styles.css (tr.hover pattern) */
.row-actions[b-zazlql9xq2] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-zazlql9xq2] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-container[b-zazlql9xq2] { padding: 20px 20px 32px; }
}

@media (max-width: 768px) {
    .page-container[b-zazlql9xq2]  { padding: 16px 12px 24px; gap: 16px; }
    .page-header[b-zazlql9xq2]     { flex-direction: column; align-items: flex-start; }
    .page-actions[b-zazlql9xq2]    { width: 100%; }
    .list-toolbar[b-zazlql9xq2]    { flex-direction: column; align-items: stretch; }
    .toolbar-divider[b-zazlql9xq2] { display: none; }
    .list-search[b-zazlql9xq2]     { min-width: 0; }
    .toolbar-filters[b-zazlql9xq2] { width: 100%; }
    /* Always show row actions on touch devices */
    .row-actions[b-zazlql9xq2]     { opacity: 1; }
}
/* /Pages/Debentures/Issues/Create.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-956byxbsy2 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.page-container[b-956byxbsy2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-956byxbsy2 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-956byxbsy2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-956byxbsy2] { flex: 1; }

.page-title[b-956byxbsy2] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-956byxbsy2] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.page-actions[b-956byxbsy2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CREATE FORM CARD
══════════════════════════════════════════════════════════════════════════════ */
.create-card[b-956byxbsy2] {
    max-width: 900px;
}

/* Section headings inside form */
.section-heading[b-956byxbsy2] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

.section-separator[b-956byxbsy2] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── Full-width field (spans all form-grid columns) ─────────────────────── */
.full-width[b-956byxbsy2] {
    grid-column: 1 / -1;
}

/* ── Native select styled to match FluentUI inputs ───────────────────────── */
.fluent-label[b-956byxbsy2] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
    margin-bottom: 5px;
    letter-spacing: 0;
}

.form-select[b-956byxbsy2] {
    width: 100%;
    height: 32px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    padding: 0 8px;
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size, 14px);
    font-family: var(--body-font, inherit);
    box-sizing: border-box;
    cursor: pointer;
}

.form-select:hover[b-956byxbsy2] {
    border-color: var(--neutral-stroke-hover);
    background-color: var(--neutral-fill-input-hover);
}

.form-select:focus[b-956byxbsy2] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

/* ── Native input styled to match FluentUI inputs — used where FluentNumberField's
   own step-validation rejects valid decimal values against a fractional Step,
   silently blocking form submission (see CLAUDE.md gotcha #8 pattern). ──────── */
.fluent-input[b-956byxbsy2] {
    width: 100%;
    height: 32px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    padding: 0 8px;
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size, 14px);
    font-family: var(--body-font, inherit);
    box-sizing: border-box;
}

.fluent-input:hover[b-956byxbsy2] {
    border-color: var(--neutral-stroke-hover);
    background-color: var(--neutral-fill-input-hover);
}

.fluent-input:focus[b-956byxbsy2] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

/* ── Form actions — sticky bar always visible at bottom of viewport ──────── */
.page-form-actions[b-956byxbsy2] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
    padding: 14px 0;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    max-width: 900px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-container[b-956byxbsy2]    { padding: 20px 20px 32px; }
    .create-card[b-956byxbsy2]       { max-width: 100%; }
    .page-form-actions[b-956byxbsy2] { max-width: 100%; }
}

@media (max-width: 768px) {
    .page-container[b-956byxbsy2]  { padding: 16px 12px 24px; gap: 16px; }
    .page-header[b-956byxbsy2]     { flex-direction: column; align-items: flex-start; }
    .page-actions[b-956byxbsy2]    { width: 100%; }
    .page-form-actions[b-956byxbsy2] {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .page-form-actions fluent-button[b-956byxbsy2] {
        width: 100%;
    }
}
/* /Pages/Debentures/Issues/Detail.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   ENTITY HEADER
══════════════════════════════════════════════════════════════════════════════ */
.entity-header[b-1swh5jee2g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.header-navigation[b-1swh5jee2g] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.header-content[b-1swh5jee2g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.entity-info[b-1swh5jee2g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.entity-name[b-1swh5jee2g] {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}

.entity-meta[b-1swh5jee2g] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-text[b-1swh5jee2g] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-1swh5jee2g] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DETAIL KPI ROW — 4 equal columns (overrides global 3-col metrics-row)
══════════════════════════════════════════════════════════════════════════════ */
.detail-kpi-row[b-1swh5jee2g] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-icon-purple[b-1swh5jee2g] {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.metric-value-na[b-1swh5jee2g] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

@media (max-width: 900px) { .detail-kpi-row[b-1swh5jee2g] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .detail-kpi-row[b-1swh5jee2g] { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════════════════════════════════════════════════════════════════════
   SKELETON LOADING STATE
══════════════════════════════════════════════════════════════════════════════ */
.entity-skeleton[b-1swh5jee2g] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: card-enter 280ms ease;
}

.skeleton-header-block[b-1swh5jee2g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-name-bar[b-1swh5jee2g] {
    height: 32px;
    width: 45%;
    border-radius: 6px;
}

.skeleton-meta-row[b-1swh5jee2g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skeleton-badge-bar[b-1swh5jee2g] {
    height: 22px;
    width: 80px;
    border-radius: 12px;
}

.skeleton-meta-bar[b-1swh5jee2g] {
    height: 14px;
    width: 100px;
    border-radius: 4px;
}

.skeleton-sections[b-1swh5jee2g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.skeleton-card-block[b-1swh5jee2g] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-heading-bar[b-1swh5jee2g] {
    height: 18px;
    width: 40%;
    border-radius: 4px;
    margin-bottom: 4px;
}

.skeleton-fields[b-1swh5jee2g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.skeleton-field[b-1swh5jee2g] {
    height: 52px;
    border-radius: 6px;
}

/* Shimmer animation */
.skeleton-name-bar[b-1swh5jee2g],
.skeleton-badge-bar[b-1swh5jee2g],
.skeleton-meta-bar[b-1swh5jee2g],
.skeleton-heading-bar[b-1swh5jee2g],
.skeleton-field[b-1swh5jee2g] {
    background: linear-gradient(
        90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-1swh5jee2g 1.5s ease-in-out infinite;
}

@keyframes shimmer-b-1swh5jee2g {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   NOT-FOUND / ERROR STATE
══════════════════════════════════════════════════════════════════════════════ */
.error-state[b-1swh5jee2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
}

.error-heading[b-1swh5jee2g] {
    font-size: 20px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.error-description[b-1swh5jee2g] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 400px;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TAB CONTENT
══════════════════════════════════════════════════════════════════════════════ */
.tab-content[b-1swh5jee2g] {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DETAIL SECTIONS (Overview tab — two section cards side by side)
══════════════════════════════════════════════════════════════════════════════ */
.detail-sections[b-1swh5jee2g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.detail-section[b-1swh5jee2g] {
    padding: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION HEADING (card title — prominent, not uppercase)
══════════════════════════════════════════════════════════════════════════════ */
.section-heading[b-1swh5jee2g] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DETAILS GRID (label / value pairs)
══════════════════════════════════════════════════════════════════════════════ */
.details-grid[b-1swh5jee2g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Each field: bordered card with tight label+value */
.detail-item[b-1swh5jee2g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

/* Label: bold, 12px uppercase — SCANNABLE at a glance */
.detail-label[b-1swh5jee2g] {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 0;
}

/* Value: 14px regular weight */
.detail-value[b-1swh5jee2g] {
    font-size: 14px;
    font-weight: 400;
    color: var(--neutral-foreground-rest);
    line-height: 1.5;
    margin: 0;
}

/* Null/empty placeholder */
.detail-empty[b-1swh5jee2g] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.amount-cell[b-1swh5jee2g] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.error-value[b-1swh5jee2g]   { color: var(--error-fill-rest, #dc2626); }
.success-value[b-1swh5jee2g] { color: var(--success-fill-rest, #16a34a); }

/* Remarks section */
.remarks-section[b-1swh5jee2g] { margin-top: 0; }

.remarks-text[b-1swh5jee2g] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    line-height: 1.6;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DRR GRID
══════════════════════════════════════════════════════════════════════════════ */
.drr-grid[b-1swh5jee2g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.drr-card[b-1swh5jee2g] { padding: 20px; }

/* ══════════════════════════════════════════════════════════════════════════════
   INLINE FORM (Add Allotment / Early Redemption)
══════════════════════════════════════════════════════════════════════════════ */
.toolbar-row[b-1swh5jee2g] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.da-label[b-1swh5jee2g] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
    margin-bottom: 5px;
}

.da-required[b-1swh5jee2g] {
    color: var(--error-foreground-rest, #dc2626);
    margin-left: 2px;
}

.da-field-full[b-1swh5jee2g] { grid-column: 1 / -1; }

.da-input[b-1swh5jee2g] {
    width: 100%;
    height: 32px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    padding: 0 8px;
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size, 14px);
    font-family: var(--body-font, inherit);
    box-sizing: border-box;
    cursor: pointer;
}

.da-input:focus[b-1swh5jee2g] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.field-error[b-1swh5jee2g] {
    font-size: 12px;
    color: var(--error-foreground-rest, #dc2626);
    margin-top: 4px;
}

.error-bar[b-1swh5jee2g] {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
}

/* Scrollable inline form with sticky bottom action bar */
.inline-form-card[b-1swh5jee2g] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inline-form-body[b-1swh5jee2g] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding-bottom: 4px;
}

.inline-form-actions-bar[b-1swh5jee2g] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-rest);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRID MIN-WIDTH (horizontal overflow safety net; scroll wrapper is global)
══════════════════════════════════════════════════════════════════════════════ */
[b-1swh5jee2g] table.holdings-grid {
    min-width: 840px;
}

[b-1swh5jee2g] table.redemptions-grid {
    min-width: 1080px;
}

[b-1swh5jee2g] table.coupon-schedule-grid {
    min-width: 520px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE CARD LIST — for allotment registry
══════════════════════════════════════════════════════════════════════════════ */
.holdings-mobile[b-1swh5jee2g] {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.holding-card[b-1swh5jee2g] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.holding-card-header[b-1swh5jee2g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.holding-card-name[b-1swh5jee2g] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.holding-card-sub[b-1swh5jee2g] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.holding-card-fields[b-1swh5jee2g] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.holding-card-field[b-1swh5jee2g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.holding-card-field .field-label[b-1swh5jee2g] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

.holding-card-field .field-value[b-1swh5jee2g] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* Skeleton sections: single column on smaller desktop */
    .skeleton-sections[b-1swh5jee2g] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    /* Section cards stack vertically on tablet */
    .detail-sections[b-1swh5jee2g] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    /* Entity header: stack vertically */
    .header-content[b-1swh5jee2g] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-1swh5jee2g] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .entity-name[b-1swh5jee2g] { font-size: 22px; }

    /* Details grid: single column */
    .details-grid[b-1swh5jee2g]  { grid-template-columns: 1fr; }

    /* Tab top spacing */
    .tab-content[b-1swh5jee2g] { padding-top: 8px; }

    /* DRR: single column */
    .drr-grid[b-1swh5jee2g] { grid-template-columns: 1fr; }

    /* Inline form: constrain height */
    .inline-form-card[b-1swh5jee2g] { max-height: 80vh; }

    /* Full-width buttons in form action bar */
    .inline-form-actions-bar[b-1swh5jee2g] {
        flex-direction: column-reverse;
    }

    .inline-form-actions-bar fluent-button[b-1swh5jee2g],
    .inline-form-actions-bar > fluent-button[b-1swh5jee2g] {
        width: 100%;
    }

    /* Toolbar row: full-width buttons */
    .toolbar-row[b-1swh5jee2g] { justify-content: stretch; }
    .toolbar-row fluent-button[b-1swh5jee2g] { width: 100%; }

    /* Skeleton: single column */
    .skeleton-sections[b-1swh5jee2g] { grid-template-columns: 1fr; }
    .skeleton-fields[b-1swh5jee2g]   { grid-template-columns: 1fr; }

    /* Mobile holdings: show card list, hide grid */
    .holdings-mobile[b-1swh5jee2g] { display: flex; }
    .holdings-grid-wrapper[b-1swh5jee2g] { display: none; }
}
/* /Pages/Debentures/Issues/Edit.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-k2yprcjy79 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.page-container[b-k2yprcjy79] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-k2yprcjy79 280ms ease;
}

.page-header[b-k2yprcjy79] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-k2yprcjy79] { flex: 1; }
.page-title[b-k2yprcjy79]    { margin: 0 0 4px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--neutral-foreground-rest); }
.page-subtitle[b-k2yprcjy79] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.page-actions[b-k2yprcjy79]  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.create-card[b-k2yprcjy79] { max-width: 900px; }

.section-heading[b-k2yprcjy79] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}
.section-separator[b-k2yprcjy79] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.full-width[b-k2yprcjy79] { grid-column: 1 / -1; }

.page-form-actions[b-k2yprcjy79] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
    padding: 14px 0;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    max-width: 900px;
}

/* ── Native select styled to match FluentUI inputs ───────────────────────── */
.fluent-label[b-k2yprcjy79] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
    margin-bottom: 5px;
    letter-spacing: 0;
}

.form-select[b-k2yprcjy79] {
    width: 100%;
    height: 32px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    padding: 0 8px;
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size, 14px);
    font-family: var(--body-font, inherit);
    box-sizing: border-box;
    cursor: pointer;
}

.form-select:hover[b-k2yprcjy79] {
    border-color: var(--neutral-stroke-hover);
    background-color: var(--neutral-fill-input-hover);
}

.form-select:focus[b-k2yprcjy79] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

/* ── Native input styled to match FluentUI inputs — used where FluentNumberField's
   own step-validation rejects valid decimal values against a fractional Step,
   silently blocking form submission (see CLAUDE.md gotcha #8 pattern). ──────── */
.fluent-input[b-k2yprcjy79] {
    width: 100%;
    height: 32px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    padding: 0 8px;
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size, 14px);
    font-family: var(--body-font, inherit);
    box-sizing: border-box;
}

.fluent-input:hover[b-k2yprcjy79] {
    border-color: var(--neutral-stroke-hover);
    background-color: var(--neutral-fill-input-hover);
}

.fluent-input:focus[b-k2yprcjy79] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-container[b-k2yprcjy79]    { padding: 20px 20px 32px; }
    .create-card[b-k2yprcjy79]       { max-width: 100%; }
    .page-form-actions[b-k2yprcjy79] { max-width: 100%; }
}

@media (max-width: 768px) {
    .page-container[b-k2yprcjy79]  { padding: 16px 12px 24px; gap: 16px; }
    .page-header[b-k2yprcjy79]     { flex-direction: column; align-items: flex-start; }
    .page-actions[b-k2yprcjy79]    { width: 100%; }
    .page-form-actions[b-k2yprcjy79] {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .page-form-actions fluent-button[b-k2yprcjy79] {
        width: 100%;
    }
}
/* /Pages/Debentures/Issues/Index.razor.rz.scp.css */
/* ── 4-column metric cards for this page ────────────────────────────────── */
/* minmax(0,1fr) forces truly equal columns — plain 1fr respects min-content */
.metrics-row[b-cj0wbzw6z0] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) { .metrics-row[b-cj0wbzw6z0] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .metrics-row[b-cj0wbzw6z0] { grid-template-columns: minmax(0, 1fr); } }

/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-cj0wbzw6z0 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.page-container[b-cj0wbzw6z0] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-cj0wbzw6z0 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-cj0wbzw6z0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-cj0wbzw6z0] { flex: 1; }

.page-title[b-cj0wbzw6z0] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-cj0wbzw6z0] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.page-actions[b-cj0wbzw6z0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIST CONTAINER — main data card
══════════════════════════════════════════════════════════════════════════════ */
.list-container[b-cj0wbzw6z0] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-cj0wbzw6z0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    background: var(--neutral-layer-1);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
    contain: none;
    content-visibility: visible;
}

.list-search[b-cj0wbzw6z0] {
    flex: 1;
    min-width: 200px;
}

.toolbar-divider[b-cj0wbzw6z0] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-cj0wbzw6z0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton-list[b-cj0wbzw6z0] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.skeleton-row[b-cj0wbzw6z0] {
    display: grid;
    grid-template-columns: 56px 1.8fr 140px 120px 110px 160px 110px 90px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-row:last-child[b-cj0wbzw6z0] { border-bottom: none; }

/* ── State box (empty / error) ────────────────────────────────────────────── */
.state-box[b-cj0wbzw6z0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-cj0wbzw6z0]         { opacity: .3; }
.state-title[b-cj0wbzw6z0]        { margin: 0; font-size: 17px; font-weight: 700; color: var(--neutral-foreground-rest); }
.state-hint[b-cj0wbzw6z0]         { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); max-width: 360px; }

/* ── Grid scroll wrapper ──────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-cj0wbzw6z0] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-cj0wbzw6z0] table.issues-grid {
    min-width: 1020px;
}

/* ── List footer ──────────────────────────────────────────────────────────── */
.list-footer[b-cj0wbzw6z0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-cj0wbzw6z0] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Row actions ──────────────────────────────────────────────────────────── */
/* Initial hidden state — reveal rule is in global-styles.css (tr.hover pattern) */
.row-actions[b-cj0wbzw6z0] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-cj0wbzw6z0] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE ENTITY CARD LIST
══════════════════════════════════════════════════════════════════════════════ */
.entity-list-mobile[b-cj0wbzw6z0] {
    display: none; /* hidden on desktop — shown on mobile via media query */
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 12px;
}

.entity-card[b-cj0wbzw6z0] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 12px 14px;
    transition: box-shadow 150ms ease;
}

.entity-card-header[b-cj0wbzw6z0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.entity-card-title[b-cj0wbzw6z0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.entity-card-name[b-cj0wbzw6z0] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    line-height: 1.3;
}

.entity-card-sub[b-cj0wbzw6z0] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

.entity-card-fields[b-cj0wbzw6z0] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-cj0wbzw6z0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.entity-card-field .field-label[b-cj0wbzw6z0] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

.entity-card-field .field-value[b-cj0wbzw6z0] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.mobile-actions[b-cj0wbzw6z0] {
    opacity: 1 !important; /* always visible on mobile */
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-container[b-cj0wbzw6z0] { padding: 20px 20px 32px; }
}

@media (max-width: 768px) {
    .page-container[b-cj0wbzw6z0]  { padding: 16px 12px 24px; gap: 16px; }
    .page-header[b-cj0wbzw6z0]     { flex-direction: column; align-items: flex-start; }
    .page-actions[b-cj0wbzw6z0]    { width: 100%; }
    .list-toolbar[b-cj0wbzw6z0]    { flex-direction: column; align-items: stretch; }
    .toolbar-divider[b-cj0wbzw6z0] { display: none; }
    .list-search[b-cj0wbzw6z0]     { min-width: 0; }
    .toolbar-filters[b-cj0wbzw6z0] { width: 100%; }
    /* Hide desktop grid; show mobile cards */
    .grid-scroll-wrapper[b-cj0wbzw6z0] { display: none; }
    .entity-list-mobile[b-cj0wbzw6z0]  { display: flex; }
    /* Always show row actions on touch devices */
    .row-actions[b-cj0wbzw6z0]     { opacity: 1; }
}
/* /Pages/DepositCompliance/Alerts.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-opcrydf6y9 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-opcrydf6y9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-opcrydf6y9 280ms ease;
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ───────────────── */
.grid-scroll-wrapper[b-opcrydf6y9] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-opcrydf6y9] table.alerts-grid {
    min-width: 900px;
}

/* ── Accessible severity indicator (icon + text, never color-only) ──────── */
.severity-indicator[b-opcrydf6y9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.severity-critical[b-opcrydf6y9] { color: #dc2626; }
.severity-warning[b-opcrydf6y9]  { color: #d97706; }
.severity-info[b-opcrydf6y9]     { color: #6366f1; }

/* ── Alert cell (title + code + message stacked) ─────────────────────────── */
.alert-cell[b-opcrydf6y9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    min-width: 0;
}

.alert-title[b-opcrydf6y9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.alert-code[b-opcrydf6y9] {
    font-family: monospace;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    letter-spacing: 0.02em;
}

.alert-message[b-opcrydf6y9] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

/* ── Status badges ────────────────────────────────────────────────────────── */
.status-badge[b-opcrydf6y9] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-active[b-opcrydf6y9]     { background: rgba(99, 102, 241, 0.12);  color: #4f46e5; }
.status-pending[b-opcrydf6y9]     { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.status-success[b-opcrydf6y9]    { background: rgba(16, 185, 129, 0.12);  color: #059669; }
.status-danger[b-opcrydf6y9]     { background: rgba(239, 68, 68, 0.12);   color: #dc2626; }

/* ── Row actions (opacity:0 initial — hover reveal is in global-styles.css) ─ */
.row-actions[b-opcrydf6y9] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    transition: opacity 150ms ease;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-opcrydf6y9] {
        padding: 16px 12px 24px;
        gap: 16px;
    }
    .alert-message[b-opcrydf6y9] {
        max-width: 220px;
    }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .page-container[b-opcrydf6y9] {
        animation: none;
    }
}
/* /Pages/DepositCompliance/Index.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-kwmywbbd5s] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

.page-header[b-kwmywbbd5s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.page-header-text[b-kwmywbbd5s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-kwmywbbd5s] {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-kwmywbbd5s] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-kwmywbbd5s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── KPI GRID — 2 × 3 EQUAL-WIDTH LAYOUT ───────────────────────────────── */
.kpi-grid[b-kwmywbbd5s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

@keyframes card-enter-b-kwmywbbd5s {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpi-card[b-kwmywbbd5s], .table-card[b-kwmywbbd5s] {
    animation: card-enter-b-kwmywbbd5s 300ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.kpi-card:nth-child(1)[b-kwmywbbd5s] { animation-delay: 0ms; }
.kpi-card:nth-child(2)[b-kwmywbbd5s] { animation-delay: 50ms; }
.kpi-card:nth-child(3)[b-kwmywbbd5s] { animation-delay: 100ms; }
.kpi-card:nth-child(4)[b-kwmywbbd5s] { animation-delay: 150ms; }
.kpi-card:nth-child(5)[b-kwmywbbd5s] { animation-delay: 200ms; }
.kpi-card:nth-child(6)[b-kwmywbbd5s] { animation-delay: 250ms; }

.kpi-card[b-kwmywbbd5s] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
}

.kpi-card:hover[b-kwmywbbd5s] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.kpi-pass[b-kwmywbbd5s] {
    border-left: 3px solid #22c55e;
}

.kpi-fail[b-kwmywbbd5s] {
    border-left: 3px solid #ef4444;
}

.kpi-warn[b-kwmywbbd5s] {
    border-left: 3px solid #f59e0b;
}

.kpi-neutral[b-kwmywbbd5s] {
    border-left: 3px solid #0078d4;
}

.kpi-header[b-kwmywbbd5s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.kpi-label[b-kwmywbbd5s] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-value[b-kwmywbbd5s] {
    font-size: 32px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
    margin-bottom: 8px;
}

.kpi-footer[b-kwmywbbd5s] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.kpi-period[b-kwmywbbd5s] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── SKELETON ──────────────────────────────────────────────────────────── */
.kpi-skeleton[b-kwmywbbd5s] {
    background: linear-gradient(90deg,
        var(--neutral-layer-3, #ebebeb) 25%,
        var(--neutral-layer-4, #e0e0e0) 50%,
        var(--neutral-layer-3, #ebebeb) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-kwmywbbd5s 1.5s infinite;
}

@keyframes shimmer-b-kwmywbbd5s {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-label[b-kwmywbbd5s] {
    height: 12px;
    width: 60%;
    border-radius: 4px;
    margin-bottom: 12px;
    background: var(--neutral-layer-4, #e0e0e0);
}

.skeleton-value[b-kwmywbbd5s] {
    height: 32px;
    width: 40%;
    border-radius: 4px;
    margin-bottom: 8px;
    background: var(--neutral-layer-4, #e0e0e0);
}

.skeleton-sub[b-kwmywbbd5s] {
    height: 12px;
    width: 50%;
    border-radius: 4px;
    background: var(--neutral-layer-4, #e0e0e0);
}

.table-skeleton[b-kwmywbbd5s] {
    background: linear-gradient(90deg,
        var(--neutral-layer-3, #ebebeb) 25%,
        var(--neutral-layer-4, #e0e0e0) 50%,
        var(--neutral-layer-3, #ebebeb) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-kwmywbbd5s 1.5s infinite;
}

/* ── EMPTY STATE ───────────────────────────────────────────────────────── */
.dashboard-empty[b-kwmywbbd5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
}

.empty-message[b-kwmywbbd5s] {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-hint[b-kwmywbbd5s] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 480px;
    line-height: 1.5;
}

.empty-table-hint[b-kwmywbbd5s] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    padding: 20px 0;
    text-align: center;
}

/* ── TABLE CARDS ───────────────────────────────────────────────────────── */
.table-card[b-kwmywbbd5s] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 24px;
    overflow: hidden;
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ── */
.grid-scroll-wrapper[b-kwmywbbd5s] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-kwmywbbd5s] table.alm-grid {
    min-width: 950px;
}

.dashboard-tables[b-kwmywbbd5s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.card-header[b-kwmywbbd5s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title[b-kwmywbbd5s] {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.view-all-link[b-kwmywbbd5s] {
    font-size: 13px;
    color: var(--accent-foreground-rest);
    text-decoration: none;
    padding: 8px 0;
}

.view-all-link:hover[b-kwmywbbd5s] {
    text-decoration: underline;
}

/* ── ALERTS ────────────────────────────────────────────────────────────── */
.alerts-list[b-kwmywbbd5s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-row[b-kwmywbbd5s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    background: var(--neutral-fill-rest, #fafafa);
    transition: background 120ms ease;
}

.alert-row:hover[b-kwmywbbd5s] {
    background: var(--neutral-layer-3, #ebebeb);
}

.alert-indicator[b-kwmywbbd5s] {
    width: 4px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 32px;
}

.alert-critical .alert-indicator[b-kwmywbbd5s] { background: #ef4444; }
.alert-warning  .alert-indicator[b-kwmywbbd5s] { background: #f59e0b; }
.alert-info     .alert-indicator[b-kwmywbbd5s] { background: #6366f1; }

.alert-critical[b-kwmywbbd5s] {
    border-left: none;
}

.alert-warning[b-kwmywbbd5s] {
    border-left: none;
}

.alert-info[b-kwmywbbd5s] {
    border-left: none;
}

.alert-body[b-kwmywbbd5s] {
    flex: 1;
    min-width: 0;
}

.severity-indicator[b-kwmywbbd5s] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 2px;
}

.alert-critical .severity-indicator[b-kwmywbbd5s] { color: #ef4444; }
.alert-warning  .severity-indicator[b-kwmywbbd5s] { color: #f59e0b; }
.alert-info     .severity-indicator[b-kwmywbbd5s] { color: #6366f1; }

.alert-title[b-kwmywbbd5s] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 2px;
}

.alert-meta[b-kwmywbbd5s] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.alert-actions[b-kwmywbbd5s] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── QUICK LINKS ───────────────────────────────────────────────────────── */
.quick-links-section[b-kwmywbbd5s] {
    margin-top: 8px;
}

.links-grid[b-kwmywbbd5s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.link-card[b-kwmywbbd5s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

.link-card:hover[b-kwmywbbd5s] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    border-color: var(--accent-fill-rest);
}

.link-icon[b-kwmywbbd5s] {
    color: var(--accent-fill-rest);
}

.link-title[b-kwmywbbd5s] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.link-desc[b-kwmywbbd5s] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── SNAPSHOT TIMESTAMP ────────────────────────────────────────────────── */
.snapshot-ts[b-kwmywbbd5s] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── RESPONSIVE — DESKTOP (1280+) is the default ──────────────────────── */
@media (max-width: 1280px) {
    .kpi-grid[b-kwmywbbd5s] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-tables[b-kwmywbbd5s] {
        grid-template-columns: 1fr;
    }
    .links-grid[b-kwmywbbd5s] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-container[b-kwmywbbd5s] {
        padding: 16px;
        gap: 16px;
    }
    .kpi-grid[b-kwmywbbd5s] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .kpi-value[b-kwmywbbd5s] {
        font-size: 24px;
    }
    .page-header[b-kwmywbbd5s] {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-title[b-kwmywbbd5s] {
        font-size: 22px;
    }
    .page-actions[b-kwmywbbd5s] {
        width: 100%;
        flex-wrap: wrap;
    }
    .dashboard-tables[b-kwmywbbd5s] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .links-grid[b-kwmywbbd5s] {
        grid-template-columns: 1fr;
    }
    .card-header[b-kwmywbbd5s] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .section-title[b-kwmywbbd5s] {
        font-size: 16px;
    }
    .alert-row[b-kwmywbbd5s] {
        flex-wrap: wrap;
    }
    .alert-actions[b-kwmywbbd5s] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .kpi-card[b-kwmywbbd5s],
    .table-card[b-kwmywbbd5s],
    .link-card[b-kwmywbbd5s],
    .alert-row[b-kwmywbbd5s] {
        transition: none;
        animation: none;
    }
    .kpi-skeleton[b-kwmywbbd5s], .table-skeleton[b-kwmywbbd5s] {
        animation: none;
    }
    .kpi-card:hover[b-kwmywbbd5s] {
        transform: none;
    }
}
/* /Pages/DepositCompliance/LiquidAssets.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-kk5z32p2pq {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.page-container[b-kk5z32p2pq] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-kk5z32p2pq 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-kk5z32p2pq] { margin-bottom: 0; }

.header-content[b-kk5z32p2pq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-kk5z32p2pq] { flex: 1; }

.page-title[b-kk5z32p2pq] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-kk5z32p2pq] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-kk5z32p2pq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   METRIC CARDS ROW
══════════════════════════════════════════════════════════════════════════════ */
.metrics-row[b-kk5z32p2pq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-kk5z32p2pq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-kk5z32p2pq] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-kk5z32p2pq] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-kk5z32p2pq] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-kk5z32p2pq]   { background: rgba(79, 70, 229, 0.14); color: #4338ca; }
.metric-icon-green[b-kk5z32p2pq]  { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
.metric-icon-red[b-kk5z32p2pq]    { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.metric-icon-purple[b-kk5z32p2pq] { background: rgba(99, 102, 241, 0.18); color: #5b21b6; }

.metric-body[b-kk5z32p2pq] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-kk5z32p2pq] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-kk5z32p2pq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-kk5z32p2pq] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DATA CARD
══════════════════════════════════════════════════════════════════════════════ */
.list-container[b-kk5z32p2pq] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-kk5z32p2pq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    background: var(--neutral-layer-1);
    border-radius: 10px 10px 0 0;
    z-index: 10;
}
.list-search[b-kk5z32p2pq]    { flex: 1; min-width: 200px; }
.toolbar-divider[b-kk5z32p2pq] { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }
.toolbar-filters[b-kk5z32p2pq] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton-list[b-kk5z32p2pq] { display: flex; flex-direction: column; }
.skeleton-row[b-kk5z32p2pq] {
    display: grid;
    grid-template-columns: 56px 140px 1.4fr 130px 120px 120px 90px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}
.skeleton-row:last-child[b-kk5z32p2pq] { border-bottom: none; }

/* ── State box (empty / error) ────────────────────────────────────────────── */
.state-box[b-kk5z32p2pq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}
.state-icon[b-kk5z32p2pq]       { opacity: .3; }
.state-icon-error[b-kk5z32p2pq] { opacity: 1; color: var(--error-foreground-rest, #DC2626); }
.state-title[b-kk5z32p2pq]      { margin: 0; font-size: 17px; font-weight: 700; color: var(--neutral-foreground-rest); }
.state-message[b-kk5z32p2pq]    { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); max-width: 380px; }

/* ── Grid scroll wrapper ──────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-kk5z32p2pq] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

[b-kk5z32p2pq] table.liquid-assets-grid { min-width: 1020px; }

/* ── List footer ──────────────────────────────────────────────────────────── */
.list-footer[b-kk5z32p2pq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    gap: 8px;
}
.results-count[b-kk5z32p2pq] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID CELLS
══════════════════════════════════════════════════════════════════════════════ */
.asset-description[b-kk5z32p2pq] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amount-cell[b-kk5z32p2pq] {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

/* ── RBI badge ────────────────────────────────────────────────────────────── */
.rbi-badge[b-kk5z32p2pq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}
.rbi-badge--yes[b-kk5z32p2pq] { background: rgba(16, 185, 129, 0.12); color: #059669; }
.rbi-badge--no[b-kk5z32p2pq]  { background: rgba(107, 114, 128, 0.12); color: #6B7280; }

/* ── Row actions ──────────────────────────────────────────────────────────── */
/* Initial hidden state — reveal rule is in global-styles.css (tr.hover pattern) */
.row-actions[b-kk5z32p2pq] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-kk5z32p2pq] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DIALOG FORM
══════════════════════════════════════════════════════════════════════════════ */
.dialog-form[b-kk5z32p2pq] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-section[b-kk5z32p2pq] {
    padding: 20px 0;
}

.form-grid[b-kk5z32p2pq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.full-width[b-kk5z32p2pq] {
    grid-column: 1 / -1;
}

/* ── Toggle row ───────────────────────────────────────────────────────────── */
.toggle-row[b-kk5z32p2pq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
}

.toggle-info[b-kk5z32p2pq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label[b-kk5z32p2pq] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.toggle-desc[b-kk5z32p2pq] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-container[b-kk5z32p2pq] { padding: 20px 20px 32px; }
    .metrics-row[b-kk5z32p2pq] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-kk5z32p2pq]  { padding: 16px 12px 24px; gap: 16px; }
    .header-content[b-kk5z32p2pq]  { flex-direction: column; align-items: flex-start; }
    .header-actions[b-kk5z32p2pq]  { width: 100%; }
    .metrics-row[b-kk5z32p2pq]     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-value[b-kk5z32p2pq]    { font-size: 12px; }
    .list-toolbar[b-kk5z32p2pq]    { flex-direction: column; align-items: stretch; }
    .toolbar-divider[b-kk5z32p2pq] { display: none; }
    .list-search[b-kk5z32p2pq]     { min-width: 0; }
    .form-grid[b-kk5z32p2pq]       { grid-template-columns: 1fr; }
    /* Always show row actions on touch devices */
    .row-actions[b-kk5z32p2pq]     { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-kk5z32p2pq] { grid-template-columns: 1fr; }
    .metric-card[b-kk5z32p2pq] { gap: 12px; padding: 16px; }
    .metric-value[b-kk5z32p2pq] { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .metric-card[b-kk5z32p2pq] { transition: none; }
    .metric-card:hover[b-kk5z32p2pq] { transform: none; }
}
/* /Pages/DepositCompliance/NbsReturns.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-yqeyve2p5h {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.page-container[b-yqeyve2p5h] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-yqeyve2p5h 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-yqeyve2p5h] { margin-bottom: 0; }

.header-content[b-yqeyve2p5h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-yqeyve2p5h] { flex: 1; }

.page-title[b-yqeyve2p5h] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-yqeyve2p5h] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-yqeyve2p5h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   METRIC CARDS ROW
══════════════════════════════════════════════════════════════════════════════ */
.metrics-row[b-yqeyve2p5h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-yqeyve2p5h] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-yqeyve2p5h] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-yqeyve2p5h] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-yqeyve2p5h] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-yqeyve2p5h]  { background: rgba(79, 70, 229, 0.14); color: #4338ca; }
.metric-icon-amber[b-yqeyve2p5h] { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.metric-icon-green[b-yqeyve2p5h] { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }

.metric-body[b-yqeyve2p5h] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-yqeyve2p5h] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-yqeyve2p5h] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-yqeyve2p5h] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DATA CARD
══════════════════════════════════════════════════════════════════════════════ */
.list-container[b-yqeyve2p5h] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-yqeyve2p5h] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    background: var(--neutral-layer-1);
    border-radius: 10px 10px 0 0;
    z-index: 10;
}

.list-search[b-yqeyve2p5h]    { flex: 1; min-width: 200px; }
.toolbar-divider[b-yqeyve2p5h] { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }
.toolbar-filters[b-yqeyve2p5h] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton-list[b-yqeyve2p5h] { display: flex; flex-direction: column; }
.skeleton-row[b-yqeyve2p5h] {
    display: grid;
    grid-template-columns: 52px 80px 130px 1fr 120px 120px 108px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}
.skeleton-row:last-child[b-yqeyve2p5h] { border-bottom: none; }

/* ── State box (empty / error) ────────────────────────────────────────────── */
.state-box[b-yqeyve2p5h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}
.state-icon[b-yqeyve2p5h]       { opacity: .3; }
.state-icon-error[b-yqeyve2p5h] { opacity: 1; color: var(--error-foreground-rest, #DC2626); }
.state-title[b-yqeyve2p5h]      { margin: 0; font-size: 17px; font-weight: 700; color: var(--neutral-foreground-rest); }
.state-message[b-yqeyve2p5h]    { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); max-width: 380px; }

/* ── Grid scroll wrapper ──────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-yqeyve2p5h] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

[b-yqeyve2p5h] table.nbs-returns-grid { min-width: 930px; }

/* ── List footer ──────────────────────────────────────────────────────────── */
.list-footer[b-yqeyve2p5h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    gap: 8px;
}
.results-count[b-yqeyve2p5h] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID CELLS
══════════════════════════════════════════════════════════════════════════════ */

/* ── Return type avatar ───────────────────────────────────────────────────── */
.return-avatar[b-yqeyve2p5h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    margin-left: 8px;
}

.return-avatar--nbs8[b-yqeyve2p5h] { background: rgba(79, 70, 229, 0.14); color: #4338ca; }
.return-avatar--nbs9[b-yqeyve2p5h] { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.return-avatar--nbs10[b-yqeyve2p5h] { background: rgba(16, 185, 129, 0.14); color: #059669; }

/* ── Period range cell ────────────────────────────────────────────────────── */
.period-range[b-yqeyve2p5h] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Date cells ───────────────────────────────────────────────────────────── */
.date-normal[b-yqeyve2p5h]  { font-size: 13px; color: var(--neutral-foreground-rest); }
.date-overdue[b-yqeyve2p5h] { font-size: 13px; font-weight: 600; color: var(--error-foreground-rest, #DC2626); }

/* ── Status badge ─────────────────────────────────────────────────────────── */
.status-badge[b-yqeyve2p5h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}

/* Map to project-standard state class names */
.status-pending[b-yqeyve2p5h]  { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.status-active[b-yqeyve2p5h]   { background: rgba(79, 70, 229, 0.12);  color: #4338ca; }
.status-success[b-yqeyve2p5h]  { background: rgba(16, 185, 129, 0.12); color: #059669; }

/* ── Row actions ──────────────────────────────────────────────────────────── */
.row-actions[b-yqeyve2p5h] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-yqeyve2p5h] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
    transition: background 150ms ease, color 150ms ease;
}

.row-action-btn:hover[b-yqeyve2p5h] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

.row-action-btn:focus-visible[b-yqeyve2p5h] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.row-action-accent[b-yqeyve2p5h] { color: var(--accent-fill-rest); }
.row-action-accent:hover[b-yqeyve2p5h] { background: rgba(79, 70, 229, 0.10); color: #4338ca; }

/* ══════════════════════════════════════════════════════════════════════════════
   DIALOG FORM
══════════════════════════════════════════════════════════════════════════════ */
.dialog-form[b-yqeyve2p5h] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0 8px;
}

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

.form-label[b-yqeyve2p5h] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.form-required[b-yqeyve2p5h] { color: var(--error-foreground-rest, #ef4444); }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-container[b-yqeyve2p5h] { padding: 20px 20px 32px; }
    .metrics-row[b-yqeyve2p5h]    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-yqeyve2p5h]  { padding: 16px 12px 24px; gap: 16px; }
    .header-content[b-yqeyve2p5h]  { flex-direction: column; align-items: flex-start; }
    .header-actions[b-yqeyve2p5h]  { width: 100%; justify-content: flex-start; }
    .metrics-row[b-yqeyve2p5h]     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-value[b-yqeyve2p5h]    { font-size: 12px; }
    .list-toolbar[b-yqeyve2p5h]    { flex-direction: column; align-items: stretch; }
    .toolbar-divider[b-yqeyve2p5h] { display: none; }
    .list-search[b-yqeyve2p5h]     { min-width: 0; }
    /* Always show row actions on touch devices */
    .row-actions[b-yqeyve2p5h]     { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-yqeyve2p5h]  { grid-template-columns: 1fr; }
    .metric-card[b-yqeyve2p5h]  { gap: 12px; padding: 16px; }
    .metric-value[b-yqeyve2p5h] { font-size: 11px; }
    .page-title[b-yqeyve2p5h]   { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .metric-card[b-yqeyve2p5h] { transition: none; }
    .metric-card:hover[b-yqeyve2p5h] { transform: none; }
}
/* /Pages/Deposits/Accounts/Detail.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────── */
.page-container[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 40px;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Entity Header */
.entity-header[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.header-navigation[b-f1x2wgtkze] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-content[b-f1x2wgtkze] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.entity-info[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entity-name[b-f1x2wgtkze] {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.entity-meta[b-f1x2wgtkze] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-text[b-f1x2wgtkze] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-f1x2wgtkze] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Detail Sections */
.detail-sections[b-f1x2wgtkze] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.detail-section[b-f1x2wgtkze] {
    padding: 20px;
}

.section-heading[b-f1x2wgtkze] {
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ── */
.grid-scroll-wrapper[b-f1x2wgtkze] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-f1x2wgtkze] table.interest-schedule-grid {
    min-width: 790px;
}

[b-f1x2wgtkze] table.rd-installments-grid {
    min-width: 640px;
}

/* Details Grid (2-col label/value pairs) */
.details-grid[b-f1x2wgtkze] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-actions[b-f1x2wgtkze] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.detail-item[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.detail-label[b-f1x2wgtkze] {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-f1x2wgtkze] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

/* A lone item left over in the final row of the 2-col grid spans full width
   instead of leaving an empty cell next to it. */
.details-grid .detail-item:last-child:nth-child(odd)[b-f1x2wgtkze] {
    grid-column: 1 / -1;
}

.amount-cell[b-f1x2wgtkze] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.detail-empty-hint[b-f1x2wgtkze] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* Nominee card */
.section-heading-row[b-f1x2wgtkze] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-heading-row .section-heading[b-f1x2wgtkze] {
    margin-bottom: 0;
}

.section-heading-secondary[b-f1x2wgtkze] {
    margin-top: 24px;
}

.nominee-list[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nominee-row[b-f1x2wgtkze] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
    flex-wrap: wrap;
}

.nominee-row-main[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nominee-row-badges[b-f1x2wgtkze] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.nominee-row-actions[b-f1x2wgtkze] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Nominee dialogs */
.error-bar[b-f1x2wgtkze] {
    margin: 0;
}

.dialog-form[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.dialog-hint[b-f1x2wgtkze] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 4px 0;
}

.form-field[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label-stacked[b-f1x2wgtkze] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    display: block;
}

.field-required[b-f1x2wgtkze] {
    color: #EF4444;
    margin-left: 2px;
}

.dialog-validation-msg[b-f1x2wgtkze] {
    font-size: 11px;
    color: #EF4444;
}

.dialog-form-grid[b-f1x2wgtkze] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dialog-info-grid[b-f1x2wgtkze] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
}

.dialog-info-row[b-f1x2wgtkze] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.dialog-info-label[b-f1x2wgtkze] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    min-width: 80px;
    flex-shrink: 0;
}

.dialog-info-value[b-f1x2wgtkze] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* Responsive */
@media (max-width: 767px) {
    .detail-sections[b-f1x2wgtkze] {
        grid-template-columns: 1fr;
    }

    .details-grid[b-f1x2wgtkze] {
        grid-template-columns: 1fr;
    }

    .header-content[b-f1x2wgtkze] {
        flex-direction: column;
    }

    .header-actions[b-f1x2wgtkze] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/Deposits/Accounts/Index.razor.rz.scp.css */
/* ============================================================
   Deposit Accounts — List View (Index.razor.css)
   Archetype: List View  |  Design: Google Stitch-grade minimal
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.page-container[b-gskdcsyjnr] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 40px;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── Page header ───────────────────────────────────────────── */
.page-header[b-gskdcsyjnr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-gskdcsyjnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-gskdcsyjnr] {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.25;
}

.page-subtitle[b-gskdcsyjnr] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Metrics row ───────────────────────────────────────────── */
.metrics-row[b-gskdcsyjnr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-gskdcsyjnr] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

.metric-card:hover[b-gskdcsyjnr] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--neutral-stroke-hover);
}

.metric-icon-wrap[b-gskdcsyjnr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.metric-icon-blue[b-gskdcsyjnr]  { background: rgba(79, 70, 229, 0.10); color: #4F46E5; }
.metric-icon-orange[b-gskdcsyjnr] { background: rgba(245, 158, 11, 0.10); color: #D97706; }
.metric-icon-green[b-gskdcsyjnr] { background: rgba(16, 185, 129, 0.10); color: #059669; }

.metric-body[b-gskdcsyjnr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-gskdcsyjnr] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.metric-title[b-gskdcsyjnr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-desc[b-gskdcsyjnr] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

/* ── List container & toolbar ──────────────────────────────── */
.list-container[b-gskdcsyjnr] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.list-toolbar[b-gskdcsyjnr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.list-search[b-gskdcsyjnr] {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 360px;
}

.toolbar-divider[b-gskdcsyjnr] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-gskdcsyjnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Skeleton loading ──────────────────────────────────────── */
.skeleton-list[b-gskdcsyjnr] {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-row[b-gskdcsyjnr] {
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
}

/* ── Empty / error state ───────────────────────────────────── */
.state-box[b-gskdcsyjnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    gap: 12px;
    text-align: center;
}

.state-icon[b-gskdcsyjnr] {
    color: var(--neutral-foreground-hint);
    opacity: 0.35;
    width: 48px;
    height: 48px;
}

.state-title[b-gskdcsyjnr] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.state-desc[b-gskdcsyjnr] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 280px;
}

/* ── Grid scroll wrapper ───────────────────────────────────── */
.grid-scroll-wrapper[b-gskdcsyjnr] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Accounts grid min-width (prevents column squish/header truncation) ── */
[b-gskdcsyjnr] table.accounts-grid {
    min-width: 1300px;
}

/* ── Grid avatar ───────────────────────────────────────────── */
.grid-avatar[b-gskdcsyjnr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.10);
    color: #4F46E5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* ── Customer / amount cells ───────────────────────────────── */
.customer-name-cell[b-gskdcsyjnr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.customer-primary[b-gskdcsyjnr] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.customer-secondary[b-gskdcsyjnr] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.amount-cell[b-gskdcsyjnr] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.tenure-cell[b-gskdcsyjnr] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Row actions ───────────────────────────────────────────── */
.row-actions[b-gskdcsyjnr] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.row-action-btn[b-gskdcsyjnr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    padding: 0;
}

.row-action-btn:hover[b-gskdcsyjnr] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

/* ── Grid footer ───────────────────────────────────────────── */
.list-footer[b-gskdcsyjnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    gap: 16px;
    flex-wrap: wrap;
}

.results-count[b-gskdcsyjnr] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── DataGrid adjustments ──────────────────────────────────── */
.page-container[b-gskdcsyjnr]  table {
    width: 100%;
    border-collapse: collapse;
}

.page-container[b-gskdcsyjnr]  th.column-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
    padding: 10px 8px;
    white-space: nowrap;
    background: var(--neutral-layer-1);
}

.page-container[b-gskdcsyjnr]  td {
    padding: 10px 8px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    vertical-align: middle;
}

.page-container[b-gskdcsyjnr]  tr:last-child td {
    border-bottom: none;
}

.page-container[b-gskdcsyjnr]  tr:hover td {
    background: rgba(0,0,0,0.02);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .metrics-row[b-gskdcsyjnr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-container[b-gskdcsyjnr] {
        padding: 20px 16px;
        gap: 16px;
    }

    .metrics-row[b-gskdcsyjnr] {
        grid-template-columns: 1fr;
    }

    .list-toolbar[b-gskdcsyjnr] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .list-search[b-gskdcsyjnr] {
        max-width: none;
    }

    .toolbar-divider[b-gskdcsyjnr] {
        display: none;
    }

    .list-footer[b-gskdcsyjnr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Always show row action buttons on mobile */
    .row-actions[b-gskdcsyjnr] {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .row-action-btn[b-gskdcsyjnr] {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .page-title[b-gskdcsyjnr] {
        font-size: 20px;
    }

    .metric-card[b-gskdcsyjnr] {
        padding: 16px;
    }

    .metric-value[b-gskdcsyjnr] {
        font-size: 11px;
    }
}
/* /Pages/Deposits/Accounts/PrematureClosure.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────── */
.page-container[b-ysamuixytk] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 40px;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Page header */
.page-header[b-ysamuixytk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-ysamuixytk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-ysamuixytk] {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.page-subtitle[b-ysamuixytk] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-ysamuixytk] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Constrained card width for closure review */
.closure-card[b-ysamuixytk] {
    max-width: 720px;
}

/* Section Heading */
.section-heading[b-ysamuixytk] {
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

/* Details Grid */
.details-grid[b-ysamuixytk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.detail-item[b-ysamuixytk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.detail-label[b-ysamuixytk] {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-ysamuixytk] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.amount-cell[b-ysamuixytk] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.penalty-value[b-ysamuixytk] {
    color: var(--error-base);
}

/* Net Payout highlight row */
.net-payout-row[b-ysamuixytk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 2px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
    margin-bottom: 20px;
}

.net-payout-label[b-ysamuixytk] {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-foreground-rest);
}

.net-payout-value[b-ysamuixytk] {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-fill-rest);
    font-variant-numeric: tabular-nums;
}

/* Form Actions (button row) */
.form-actions[b-ysamuixytk] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 767px) {
    .details-grid[b-ysamuixytk] {
        grid-template-columns: 1fr;
    }

    .net-payout-row[b-ysamuixytk] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .form-actions[b-ysamuixytk] {
        flex-direction: column-reverse;
    }

    .form-actions fluent-button[b-ysamuixytk] {
        width: 100%;
    }
}
/* /Pages/Deposits/Accounts/RdPayment.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-mg1f4p9pz7 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page container override (narrow form layout) ────────────────────────── */
.page-container[b-mg1f4p9pz7] {
    max-width: 900px;
    gap: 20px;
    padding: 28px 32px 40px;
}

/* ── Section cards ───────────────────────────────────────────────────────── */
.section-card[b-mg1f4p9pz7] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-card--success[b-mg1f4p9pz7] {
    border-left: 4px solid #10b981;
}

.section-title[b-mg1f4p9pz7] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── Account lookup row ──────────────────────────────────────────────────── */
.form-lookup-row[b-mg1f4p9pz7] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Loading wrap ────────────────────────────────────────────────────────── */
.loading-wrap[b-mg1f4p9pz7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Form grid (2-column) ────────────────────────────────────────────────── */
.form-grid[b-mg1f4p9pz7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}

.form-field[b-mg1f4p9pz7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-field--wide[b-mg1f4p9pz7] { grid-column: span 2; }

/* ── Field label (native controls: <select>, date inputs) ───────────────── */
.fluent-label[b-mg1f4p9pz7],
.field-label[b-mg1f4p9pz7] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
    margin-bottom: 5px;
}

/* ── Native <select> — outlined to match FluentTextField ────────────────── */
.native-select[b-mg1f4p9pz7] {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.native-select:focus[b-mg1f4p9pz7] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
}

.native-select:hover:not(:focus)[b-mg1f4p9pz7] {
    border-color: var(--neutral-stroke-strong-rest);
}

/* ── Form actions row ────────────────────────────────────────────────────── */
.form-actions[b-mg1f4p9pz7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 4px;
}

/* ── Selected account confirmation card ──────────────────────────────────── */
.account-confirmation-card[b-mg1f4p9pz7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 20px;
    padding: 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 4px solid var(--accent-fill-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
    animation: card-enter-b-mg1f4p9pz7 200ms ease;
}

.confirmation-item[b-mg1f4p9pz7] { display: flex; flex-direction: column; gap: 2px; }

.confirmation-label[b-mg1f4p9pz7] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.confirmation-value[b-mg1f4p9pz7] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.tenure-unit[b-mg1f4p9pz7] {
    font-size: 12px;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    margin-left: 3px;
}

/* ── Compact state box (inside a card) ───────────────────────────────────── */
.state-box--compact[b-mg1f4p9pz7] {
    padding: 24px;
}

/* ── Success icon tint ───────────────────────────────────────────────────── */
.state-icon--success[b-mg1f4p9pz7] {
    opacity: 1 !important;
    color: #10b981;
}

/* ── Receipt ─────────────────────────────────────────────────────────────── */
.receipt-header[b-mg1f4p9pz7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.receipt-title-block[b-mg1f4p9pz7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.receipt-icon[b-mg1f4p9pz7] {
    color: #10b981;
    flex-shrink: 0;
}

.receipt-actions[b-mg1f4p9pz7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.receipt-voucher[b-mg1f4p9pz7] { display: flex; flex-direction: column; gap: 12px; }

.voucher-row--number[b-mg1f4p9pz7] { display: flex; align-items: baseline; gap: 12px; }

.voucher-divider[b-mg1f4p9pz7] { height: 1px; background: var(--neutral-stroke-divider-rest); }

.voucher-grid[b-mg1f4p9pz7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
}

.voucher-item[b-mg1f4p9pz7] { display: flex; flex-direction: column; gap: 2px; }

.voucher-label[b-mg1f4p9pz7] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.voucher-value[b-mg1f4p9pz7]          { font-size: 14px; color: var(--neutral-foreground-rest); }
.voucher-value--accent[b-mg1f4p9pz7]  { font-size: 18px; font-weight: 700; color: #10b981; }
.voucher-value--large[b-mg1f4p9pz7]   { font-size: 20px; font-weight: 700; }

/* ── Batch installments table ────────────────────────────────────────────── */
.batch-installments-table[b-mg1f4p9pz7] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
}

.batch-installments-table thead th[b-mg1f4p9pz7] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    white-space: nowrap;
}

.batch-installments-table tbody td[b-mg1f4p9pz7] {
    padding: 13px 16px;
    color: var(--neutral-foreground-rest);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    white-space: nowrap;
}

.batch-installments-table tbody tr:last-child td[b-mg1f4p9pz7] {
    border-bottom: none;
}

.batch-installments-table tbody tr:hover td[b-mg1f4p9pz7] {
    background: var(--neutral-layer-2);
}

.batch-installments-table thead th.amount-col[b-mg1f4p9pz7],
.batch-installments-table tbody td.amount-col[b-mg1f4p9pz7],
.batch-installments-table tfoot td.amount-col[b-mg1f4p9pz7] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.batch-installments-table tfoot .batch-total-row td[b-mg1f4p9pz7] {
    padding: 14px 16px;
    background: var(--neutral-layer-2);
    border-top: 2px solid var(--neutral-stroke-rest);
    border-bottom: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.batch-installments-table tfoot .batch-total-row td.amount-col[b-mg1f4p9pz7] {
    font-size: 16px;
    color: #10b981;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-mg1f4p9pz7] { padding: 16px 12px 24px; }
    .form-grid[b-mg1f4p9pz7]      { grid-template-columns: 1fr; }
    .form-field--wide[b-mg1f4p9pz7] { grid-column: span 1; }
    .voucher-grid[b-mg1f4p9pz7]   { grid-template-columns: 1fr 1fr; }
    .account-confirmation-card[b-mg1f4p9pz7] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .voucher-grid[b-mg1f4p9pz7]     { grid-template-columns: 1fr; }
    .account-confirmation-card[b-mg1f4p9pz7] { grid-template-columns: 1fr; }
    .form-actions[b-mg1f4p9pz7]     { flex-direction: column; }
    .form-actions > *[b-mg1f4p9pz7] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .page-container[b-mg1f4p9pz7] { animation: none; }
}
/* /Pages/Deposits/Accounts/RdSchedule.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-70131383af {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-70131383af] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 32px 40px;
    max-width: 1200px;
    margin: 0 auto;
    animation: card-enter-b-70131383af 280ms ease;
}

/* -- List container (FluentCard) ------------------------------------------ */
.list-container[b-70131383af] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.list-toolbar[b-70131383af] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; }
.list-search[b-70131383af]  { flex: 1; min-width: 200px; max-width: 360px; }

/* ── KPI strip ───────────────────────────────────────────────────────────── */
.kpi-strip[b-70131383af] {
    display: flex;
    align-items: stretch;
    background: var(--neutral-layer-2, #f8f9fb);
    border: 1px solid var(--neutral-stroke-rest, #e1e4e8);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    overflow: hidden;
    margin: 0 16px 12px;
}
.kpi-strip-item[b-70131383af]   { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 20px; flex: 1; gap: 2px; min-width: 0; }
.kpi-strip-label[b-70131383af]  { font-size: 11px; color: var(--neutral-foreground-hint, #6b7280); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.kpi-strip-value[b-70131383af]  { font-size: 20px; font-weight: 700; color: var(--neutral-foreground-rest, #1f2328); white-space: nowrap; }
.kpi-strip-value--accent[b-70131383af] { color: #dc2626; }
.kpi-strip-value--compact[b-70131383af] { font-size: 15px; }
.kpi-strip-divider[b-70131383af] { width: 1px; background: var(--neutral-stroke-rest, #e1e4e8); flex-shrink: 0; }

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-70131383af] { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px; }
.skeleton-row[b-70131383af]  { display: flex; gap: 12px; align-items: center; }

/* ── Empty / error state box ─────────────────────────────────────────────── */
.state-box[b-70131383af] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-icon[b-70131383af]    { opacity: .35; }
.state-title[b-70131383af]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-70131383af] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-badge[b-70131383af] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
}
.status-badge--paid[b-70131383af]    { background: #dcfce7; color: #15803d; }
.status-badge--overdue[b-70131383af] { background: #fee2e2; color: #dc2626; }
.status-badge--due[b-70131383af]     { background: #dbeafe; color: #1e40af; }
.status-badge--waived[b-70131383af]  { background: #f1f0ff; color: #4338ca; }

/* ── Scroll wrapper ───────────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-70131383af] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Schedule grid min-width (all-fr columns incl. "Installment Amount" header) ── */
[b-70131383af] table.schedule-grid { min-width: 1080px; }

/* ── Row actions — INITIAL STATE (opacity hidden in scoped CSS)
     The *reveal* rule (tr.hover) lives in wwwroot/global-styles.css only —
     FluentDataGrid's JS-injected ".hover" class has no [b-xxxx] scope attribute. */
.row-actions[b-70131383af] {
    opacity: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: flex-end;
    transition: opacity 200ms ease;
}
.row-action-btn[b-70131383af] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-rest);
    transition: background 150ms ease, color 150ms ease;
}
.row-action-btn:hover[b-70131383af] { background: var(--neutral-fill-hover); }
.row-action-btn:disabled[b-70131383af] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 767px) {
    table.fluent-data-grid.schedule-grid .row-actions[b-70131383af] { opacity: 1; }
}

/* -- List footer ---------------------------------------------------------- */
.list-footer[b-70131383af] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
    gap: 8px;
}
.results-count[b-70131383af] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* -- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) { .page-container[b-70131383af] { padding: 20px 20px 32px; } }
@media (max-width: 768px) {
    .page-container[b-70131383af] { padding: 16px 12px 24px; }
    .list-search[b-70131383af]    { max-width: 100%; }
    .kpi-strip[b-70131383af]      { flex-wrap: wrap; }
    .kpi-strip-item[b-70131383af] { min-width: 40%; }
}
/* /Pages/Deposits/Applications/Create.razor.rz.scp.css */
/* ──────────────────────────────────────────────
   Deposit Application – Create Page (Scoped CSS)
   ────────────────────────────────────────────── */

/* Page container */
.da-page[b-1ctfs0eph8] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 32px;
    max-width: 880px;
    margin: 0 auto;
    min-height: 100%;
}

/* ─── Header ─── */
.da-nav[b-1ctfs0eph8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.da-header[b-1ctfs0eph8] {
    margin-bottom: 24px;
}

.da-header-content[b-1ctfs0eph8] {
    padding-top: 8px;
}

.da-title[b-1ctfs0eph8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px;
    line-height: 1.25;
}

.da-subtitle[b-1ctfs0eph8] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ─── Form Layout ─── */
.da-form-layout[b-1ctfs0eph8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 80px; /* room for sticky footer */
}

/* ─── Form Sections ─── */
.da-form-section[b-1ctfs0eph8] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    padding: 24px;
}

.da-section-title[b-1ctfs0eph8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
}

.da-section-title fluent-icon[b-1ctfs0eph8] {
    color: var(--accent-fill-rest);
}

.da-section-hint[b-1ctfs0eph8] {
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint);
    margin: -8px 0 16px;
    font-style: italic;
}

/* ─── Grid ─── */
.da-form-grid[b-1ctfs0eph8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.da-field-full[b-1ctfs0eph8] {
    grid-column: 1 / -1;
}

/* ─── Labels & Fields ─── */
.da-label[b-1ctfs0eph8] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

.da-required[b-1ctfs0eph8] {
    color: var(--error-foreground, #DC2626);
    margin-left: 2px;
}

.da-validation-msg[b-1ctfs0eph8] {
    display: block;
    font-size: 0.75rem;
    color: var(--error-foreground, #DC2626);
    margin-top: 4px;
}

.da-checkbox-row[b-1ctfs0eph8] {
    padding-top: 8px;
}

/* ─── Sticky Footer Bar ─── */
.da-footer-bar[b-1ctfs0eph8] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    margin: 0 -32px;    /* bleed to page edges */
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .da-page[b-1ctfs0eph8] {
        padding: 16px;
    }

    .da-form-grid[b-1ctfs0eph8] {
        grid-template-columns: 1fr;
    }

    .da-field-full[b-1ctfs0eph8] {
        grid-column: 1;
    }

    .da-footer-bar[b-1ctfs0eph8] {
        margin: 0 -16px;
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .da-footer-bar[b-1ctfs0eph8] {
        flex-direction: column-reverse;
    }

    .da-footer-bar fluent-button[b-1ctfs0eph8] {
        width: 100%;
    }
}
/* /Pages/Deposits/Applications/Detail.razor.rz.scp.css */
/* Page container */
.page-container[b-gn4wowj468] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* Danger button variant */
.btn-danger[b-gn4wowj468]::part(control) {
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #DC2626 !important;
}
.btn-danger[b-gn4wowj468]::part(control):hover {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: #EF4444 !important;
}

/* Entity Header */
.entity-header[b-gn4wowj468] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.header-navigation[b-gn4wowj468] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-content[b-gn4wowj468] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.entity-info[b-gn4wowj468] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entity-name[b-gn4wowj468] {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.entity-meta[b-gn4wowj468] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-text[b-gn4wowj468] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
}

.header-actions[b-gn4wowj468] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Detail Sections (2-col grid) */
.detail-sections[b-gn4wowj468] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.detail-section[b-gn4wowj468] {
    padding: 20px;
}

.maturity-section[b-gn4wowj468] {
    grid-column: 1 / -1;
}

/* Section Headings */
.section-heading[b-gn4wowj468] {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

.section-heading-secondary[b-gn4wowj468] {
    margin-top: 20px;
}

/* Details Grid */
.details-grid[b-gn4wowj468] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.detail-item[b-gn4wowj468] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.detail-label[b-gn4wowj468] {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-empty-hint[b-gn4wowj468] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.detail-subtext[b-gn4wowj468] {
    font-size: 11px;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    margin-left: 4px;
}

.detail-value[b-gn4wowj468] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.amount-cell[b-gn4wowj468] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.warning-value[b-gn4wowj468] {
    color: var(--warning-fill-rest, #d97706);
    font-weight: 600;
}

.error-value[b-gn4wowj468] {
    color: var(--error-fill-rest, #dc2626);
}

/* Rate override row */
.rate-override-row[b-gn4wowj468] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* Edit Nominee dialog */
.error-bar[b-gn4wowj468] {
    margin: 0;
}

.dialog-form[b-gn4wowj468] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.dialog-hint[b-gn4wowj468] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 4px 0;
}

.form-field[b-gn4wowj468] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label-stacked[b-gn4wowj468] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    display: block;
}

.field-required[b-gn4wowj468] {
    color: #EF4444;
    margin-left: 2px;
}

.dialog-validation-msg[b-gn4wowj468] {
    font-size: 11px;
    color: #EF4444;
}

/* Responsive */
@media (max-width: 767px) {
    .detail-sections[b-gn4wowj468] {
        grid-template-columns: 1fr;
    }

    .maturity-section[b-gn4wowj468] {
        grid-column: 1;
    }

    .details-grid[b-gn4wowj468] {
        grid-template-columns: 1fr;
    }

    .header-content[b-gn4wowj468] {
        flex-direction: column;
    }

    .header-actions[b-gn4wowj468] {
        width: 100%;
        justify-content: flex-end;
    }

    .rate-override-row[b-gn4wowj468] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Deposits/Applications/Index.razor.rz.scp.css */
/* ==========================================================================
   DEPOSIT APPLICATIONS — Page scoped styles
   Archetype: List View
   Pattern follows AI-Agent-UI-Generation-Guide §7.3 (List Archetype)
   ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-y0prb2z9qw] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-y0prb2z9qw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-y0prb2z9qw] { flex: 1; min-width: 0; }

.page-title[b-y0prb2z9qw] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-subtitle[b-y0prb2z9qw] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-y0prb2z9qw] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Metric / overview cards ─────────────────────────────────────────────── */
.metrics-row[b-y0prb2z9qw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-y0prb2z9qw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-y0prb2z9qw] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-y0prb2z9qw] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-y0prb2z9qw] { width: 22px; height: 22px; fill: currentColor !important; }

.metric-icon-blue[b-y0prb2z9qw]   { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--accent-foreground-rest); }
.metric-icon-green[b-y0prb2z9qw]  { background: rgba(16, 185, 129, 0.12); color: #059669; }
.metric-icon-amber[b-y0prb2z9qw]  { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.metric-icon-red[b-y0prb2z9qw]    { background: rgba(239, 68, 68, 0.12); color: #DC2626; }

.metric-body[b-y0prb2z9qw] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.metric-value[b-y0prb2z9qw] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.metric-title[b-y0prb2z9qw] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 5px;
    white-space: nowrap;
}

/* ── List container card ────────────────────────────────────────────────── */
.list-container[b-y0prb2z9qw] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.list-toolbar[b-y0prb2z9qw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 12px 12px 0 0;
}

.list-search[b-y0prb2z9qw] {
    flex: 1 1 200px;
    max-width: 320px;
}

.toolbar-divider[b-y0prb2z9qw] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-y0prb2z9qw] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton loading ───────────────────────────────────────────────────── */
.skeleton-list[b-y0prb2z9qw] {
    display: flex;
    flex-direction: column;
}

.skeleton-row[b-y0prb2z9qw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-row:last-child[b-y0prb2z9qw] { border-bottom: none; }

/* ── Empty / Error state ────────────────────────────────────────────────── */
.state-box[b-y0prb2z9qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 32px;
    text-align: center;
}

.state-icon[b-y0prb2z9qw] { opacity: 0.30; }
.state-icon-error[b-y0prb2z9qw] { color: var(--error-fill-rest); opacity: 0.70; }

.state-title[b-y0prb2z9qw] {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.state-message[b-y0prb2z9qw] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 8px;
    max-width: 380px;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-y0prb2z9qw] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Grid avatar ─────────────────────────────────────────────────────────── */
.grid-avatar[b-y0prb2z9qw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-fill-rest) 20%, transparent);
    color: var(--accent-foreground-rest);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    user-select: none;
}

/* ── Customer name cell ─────────────────────────────────────────────────── */
.customer-name-cell[b-y0prb2z9qw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.customer-name-text[b-y0prb2z9qw] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-product-sub[b-y0prb2z9qw] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Amount cell ─────────────────────────────────────────────────────────── */
.amount-cell[b-y0prb2z9qw] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 14px;
}

/* ── Tenure cell ─────────────────────────────────────────────────────────── */
.tenure-cell[b-y0prb2z9qw] {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

.tenure-unit[b-y0prb2z9qw] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-left: 2px;
}

/* ── Row actions ─────────────────────────────────────────────────────────── */
/* Initial hidden — reveal rule lives in global-styles.css (tr.hover scope) */
.row-actions[b-y0prb2z9qw] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    transition: opacity 200ms ease;
}

.row-action-btn[b-y0prb2z9qw] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── List footer (pagination) ────────────────────────────────────────────── */
.list-footer[b-y0prb2z9qw] {
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--neutral-layer-2);
}

.results-count[b-y0prb2z9qw] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Applications grid specific ──────────────────────────────────────────── */
[b-y0prb2z9qw] table.applications-grid {
    width: 100%;
    min-width: 1170px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .metrics-row[b-y0prb2z9qw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-y0prb2z9qw]      { padding: 16px; gap: 16px; }
    .page-title[b-y0prb2z9qw]          { font-size: 22px; }
    .page-header[b-y0prb2z9qw]         { flex-direction: column; align-items: flex-start; }
    .page-actions[b-y0prb2z9qw]        { width: 100%; }
    .page-actions > *[b-y0prb2z9qw]    { flex: 1; }
    .metrics-row[b-y0prb2z9qw]         { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-value[b-y0prb2z9qw]        { font-size: 11px; }
    .list-search[b-y0prb2z9qw]         { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-y0prb2z9qw]     { display: none; }
    .toolbar-filters[b-y0prb2z9qw]     { width: 100%; }
    .toolbar-filters > *[b-y0prb2z9qw] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 120px; }
    /* On mobile, action buttons are always visible */
    .row-actions[b-y0prb2z9qw]         { opacity: 1; }
    .state-box[b-y0prb2z9qw]           { padding: 48px 16px; }
}

@media (max-width: 480px) {
    .metrics-row[b-y0prb2z9qw]         { grid-template-columns: 1fr; }
    .toolbar-filters > *[b-y0prb2z9qw] { flex: 1 1 100% !important; }
}
/* /Pages/Deposits/Compliance/Form15GH.razor.rz.scp.css */
/* FORM 15G/H — List View archetype contract
   ─────────────────────────────────────────────────────────────────────────── */

.page-container[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page Header ── */

.page-header[b-mia71co1xg] { margin-bottom: 0; }

.header-content[b-mia71co1xg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-mia71co1xg] { flex: 1; }

.page-title[b-mia71co1xg] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-mia71co1xg] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-mia71co1xg] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.error-bar[b-mia71co1xg] { margin: 0; }

/* ── Metric Cards ── */

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

.metric-card[b-mia71co1xg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-mia71co1xg] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-mia71co1xg] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-mia71co1xg] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-mia71co1xg]  { background: color-mix(in srgb, #0078d4 14%, transparent); color: #0078d4; }
.metric-icon-green[b-mia71co1xg] { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-amber[b-mia71co1xg] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.metric-icon-red[b-mia71co1xg]   { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }

.metric-body[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.metric-value[b-mia71co1xg] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-mia71co1xg] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-desc[b-mia71co1xg] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List Container ── */

.list-container[b-mia71co1xg] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

.list-toolbar[b-mia71co1xg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-mia71co1xg] {
    flex: 1 1 220px;
    max-width: 320px;
}

.toolbar-divider[b-mia71co1xg] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-mia71co1xg] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-spacer[b-mia71co1xg] { flex: 1; }

.record-count[b-mia71co1xg] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Form-type avatar (replaces generic grid-avatar for Form15G/H pages) ── */

.form-type-avatar[b-mia71co1xg] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    text-transform: uppercase;
}

.fta-15g[b-mia71co1xg] {
    background: color-mix(in srgb, #0078d4 15%, transparent);
    color: #0078d4;
}

.fta-15h[b-mia71co1xg] {
    background: color-mix(in srgb, #7c3aed 14%, transparent);
    color: #7c3aed;
}

/* ── Form type status badges ── */
.status-form-15g[b-mia71co1xg] {
    background: rgba(0, 120, 212, 0.10);
    color: #0078d4;
}
.status-form-15h[b-mia71co1xg] {
    background: rgba(124, 58, 237, 0.10);
    color: #7c3aed;
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ── */
.grid-scroll-wrapper[b-mia71co1xg] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-mia71co1xg] table.form15gh-grid {
    min-width: 870px;
}

/* ── Main cell (account + PAN stacked) ── */

.record-main-cell[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.record-title[b-mia71co1xg] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-subtitle[b-mia71co1xg] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.pan-cell[b-mia71co1xg] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pan-reveal-btn[b-mia71co1xg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}

.pan-reveal-btn:hover:not(:disabled)[b-mia71co1xg] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

.pan-reveal-btn:disabled[b-mia71co1xg] {
    opacity: 0.5;
    cursor: default;
}

.fy-cell[b-mia71co1xg] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}

.amount-cell[b-mia71co1xg] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Row actions — start hidden, revealed by tr.hover ── */

.row-actions[b-mia71co1xg] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-mia71co1xg] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Skeleton & States ── */

.skeleton-list[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.skeleton-row[b-mia71co1xg] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
}

.state-box[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 64px 24px;
}

.state-icon[b-mia71co1xg] { color: var(--neutral-foreground-hint); opacity: 0.5; }
.state-title[b-mia71co1xg] { font-size: 15px; font-weight: 600; margin: 0; color: var(--neutral-foreground-rest); }
.state-hint[b-mia71co1xg] { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; max-width: 460px; }

/* ── Pagination footer ── */

.list-footer[b-mia71co1xg] {
    padding: 14px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--neutral-layer-2);
}

/* ── Mobile entity cards ── */

.entity-list-mobile[b-mia71co1xg] { display: none; }

.entity-card[b-mia71co1xg] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 14px;
    background: var(--neutral-layer-1);
}

.entity-card-header[b-mia71co1xg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.entity-card-avatar[b-mia71co1xg] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.entity-card-title[b-mia71co1xg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entity-card-name[b-mia71co1xg] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-card-sub[b-mia71co1xg] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.entity-card-status[b-mia71co1xg] { flex-shrink: 0; }

.entity-card-fields[b-mia71co1xg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.entity-card-field[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.field-label[b-mia71co1xg] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.field-value[b-mia71co1xg] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.entity-card-actions[b-mia71co1xg] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Reject dialog form ── */

.dialog-form[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.dialog-info-grid[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

.dialog-info-row[b-mia71co1xg] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.dialog-info-label[b-mia71co1xg] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    min-width: 80px;
    flex-shrink: 0;
}

.dialog-info-value[b-mia71co1xg] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.form-field[b-mia71co1xg] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label-stacked[b-mia71co1xg] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    display: block;
}

.field-required[b-mia71co1xg] {
    color: #EF4444;
    margin-left: 2px;
}

.dialog-form-grid[b-mia71co1xg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dialog-hint[b-mia71co1xg] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 4px 0;
}

.dialog-hint-inline[b-mia71co1xg] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.dialog-validation-msg[b-mia71co1xg] {
    font-size: 11px;
    color: #EF4444;
}

/* ── Responsive breakpoints ── */

@media (max-width: 1024px) {
    .metrics-row[b-mia71co1xg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .page-container[b-mia71co1xg] { padding: 20px 16px; gap: 20px; }
    .header-content[b-mia71co1xg] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-mia71co1xg] { width: 100%; }
    .metrics-row[b-mia71co1xg] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-card[b-mia71co1xg] { padding: 16px; gap: 12px; }
    .metric-value[b-mia71co1xg] { font-size: 11px; }
    .list-search[b-mia71co1xg] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-mia71co1xg] { display: none; }
    .toolbar-filters[b-mia71co1xg] { width: 100%; }
    .toolbar-filters > *[b-mia71co1xg] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 110px; }

    /* Hide desktop grid, show mobile cards */
    .list-container table[b-mia71co1xg] { display: none; }
    .entity-list-mobile[b-mia71co1xg] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    /* Always visible actions on mobile */
    .row-actions[b-mia71co1xg] { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-mia71co1xg] { grid-template-columns: 1fr; }
    .entity-card-fields[b-mia71co1xg] { grid-template-columns: 1fr; }
    .toolbar-filters > *[b-mia71co1xg] { flex: 1 1 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .metric-card[b-mia71co1xg],
    .row-actions[b-mia71co1xg],
    .row-action-btn[b-mia71co1xg] {
        transition: none;
    }
}
/* /Pages/Deposits/Compliance/TdsReports.razor.rz.scp.css */
/* TDS REPORTS — List archetype contract */

.page-container[b-9zqejtq5xa] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

.page-header[b-9zqejtq5xa] { margin-bottom: 0; }

.header-content[b-9zqejtq5xa] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-9zqejtq5xa] { flex: 1; }

.page-title[b-9zqejtq5xa] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-9zqejtq5xa] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-9zqejtq5xa] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.error-bar[b-9zqejtq5xa] { margin: 0; }

/* ── Metric Cards ── */

.metrics-row[b-9zqejtq5xa] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-9zqejtq5xa] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-9zqejtq5xa] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-9zqejtq5xa] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-9zqejtq5xa] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-9zqejtq5xa]  { background: color-mix(in srgb, #0078d4 14%, transparent); color: #0078d4; }
.metric-icon-green[b-9zqejtq5xa] { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-amber[b-9zqejtq5xa] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.metric-icon-red[b-9zqejtq5xa]   { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }

.metric-body[b-9zqejtq5xa] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-9zqejtq5xa] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-9zqejtq5xa] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-9zqejtq5xa] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Quarter Summary Section ── */

.section-card[b-9zqejtq5xa] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-header[b-9zqejtq5xa] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.section-title[b-9zqejtq5xa] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* ── List Container ── */

.list-container[b-9zqejtq5xa] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

.list-toolbar[b-9zqejtq5xa] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-9zqejtq5xa] {
    flex: 1 1 220px;
    max-width: 320px;
}

.toolbar-divider[b-9zqejtq5xa] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-9zqejtq5xa] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-spacer[b-9zqejtq5xa] { flex: 1; }

.record-count[b-9zqejtq5xa] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Data Grid ── */

/* Grid scroll wrapper (horizontal overflow safety net) */
.grid-scroll-wrapper[b-9zqejtq5xa] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-9zqejtq5xa] table.tds-summary-grid {
    min-width: 720px;
}

[b-9zqejtq5xa] table.tds-depositor-grid {
    min-width: 900px;
}

/* Grid avatar — structural only; visual style from global-styles.css .grid-avatar */

.record-main-cell[b-9zqejtq5xa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.record-title[b-9zqejtq5xa] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-subtitle[b-9zqejtq5xa] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.amount-cell[b-9zqejtq5xa] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.pan-cell[b-9zqejtq5xa] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.row-actions[b-9zqejtq5xa] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-9zqejtq5xa] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Skeleton & Empty/Error States ── */

.skeleton-list[b-9zqejtq5xa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.skeleton-row[b-9zqejtq5xa] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
}

.state-box[b-9zqejtq5xa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 64px 24px;
}

.state-icon[b-9zqejtq5xa] { color: var(--neutral-foreground-hint); opacity: 0.5; }
.state-title[b-9zqejtq5xa] { font-size: 15px; font-weight: 600; margin: 0; color: var(--neutral-foreground-rest); }
.state-hint[b-9zqejtq5xa] { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; max-width: 460px; }

/* ── Footer ── */

.list-footer[b-9zqejtq5xa] {
    padding: 14px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--neutral-layer-2);
    flex-wrap: wrap;
    gap: 8px;
}

.footer-summary[b-9zqejtq5xa] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

/* ── Mobile Entity Cards ── */

.entity-list-mobile[b-9zqejtq5xa] { display: none; }

.entity-card[b-9zqejtq5xa] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 14px;
}

.entity-card-header[b-9zqejtq5xa] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-9zqejtq5xa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.entity-card-name[b-9zqejtq5xa] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.entity-card-fields[b-9zqejtq5xa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.entity-card-field[b-9zqejtq5xa] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.field-label[b-9zqejtq5xa] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.field-value[b-9zqejtq5xa] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .metrics-row[b-9zqejtq5xa] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .page-container[b-9zqejtq5xa] { padding: 20px 16px; gap: 20px; }
    .header-content[b-9zqejtq5xa] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-9zqejtq5xa] { width: 100%; }
    .metrics-row[b-9zqejtq5xa] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-card[b-9zqejtq5xa] { padding: 16px; gap: 12px; }
    .metric-value[b-9zqejtq5xa] { font-size: 11px; }
    .list-search[b-9zqejtq5xa] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-9zqejtq5xa] { display: none; }
    .toolbar-filters[b-9zqejtq5xa] { width: 100%; }
    .toolbar-filters > *[b-9zqejtq5xa] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 120px; }

    .list-container table[b-9zqejtq5xa] { display: none; }
    .entity-list-mobile[b-9zqejtq5xa] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .row-actions[b-9zqejtq5xa] { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-9zqejtq5xa] { grid-template-columns: 1fr; }
    .entity-card-fields[b-9zqejtq5xa] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .metric-card[b-9zqejtq5xa],
    .row-actions[b-9zqejtq5xa],
    .row-action-btn[b-9zqejtq5xa] {
        transition: none;
    }
}
/* /Pages/Deposits/DeathClaims/Index.razor.rz.scp.css */
/* DEATH CLAIMS — List View archetype contract
   ─────────────────────────────────────────────────────────────────────────── */

.page-container[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page Header ── */

.page-header[b-8nl6qrd476] { margin-bottom: 0; }

.header-content[b-8nl6qrd476] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-8nl6qrd476] { flex: 1; }

.page-title[b-8nl6qrd476] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-8nl6qrd476] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-8nl6qrd476] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.error-bar[b-8nl6qrd476] { margin: 0; }

/* ── Metric Cards ── */

.metrics-row[b-8nl6qrd476] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-8nl6qrd476] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-8nl6qrd476] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-8nl6qrd476] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-8nl6qrd476] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-8nl6qrd476]  { background: color-mix(in srgb, #0078d4 14%, transparent); color: #0078d4; }
.metric-icon-green[b-8nl6qrd476] { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-amber[b-8nl6qrd476] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.metric-icon-red[b-8nl6qrd476]   { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }

.metric-body[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.metric-value[b-8nl6qrd476] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-8nl6qrd476] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-desc[b-8nl6qrd476] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List Container ── */

.list-container[b-8nl6qrd476] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

.list-toolbar[b-8nl6qrd476] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-8nl6qrd476] {
    flex: 1 1 220px;
    max-width: 320px;
}

.toolbar-divider[b-8nl6qrd476] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-8nl6qrd476] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-spacer[b-8nl6qrd476] { flex: 1; }

.record-count[b-8nl6qrd476] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Main cell (claimant/account stacked) ── */

.record-main-cell[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.record-title[b-8nl6qrd476] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-subtitle[b-8nl6qrd476] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.nominee-match[b-8nl6qrd476] {
    color: #059669;
    font-weight: 600;
}

.nominee-mismatch[b-8nl6qrd476] {
    color: #D97706;
    font-weight: 600;
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ── */
.grid-scroll-wrapper[b-8nl6qrd476] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-8nl6qrd476] table.death-claims-grid {
    min-width: 1060px;
}

/* ── Document status dots ── */

.doc-badges[b-8nl6qrd476] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.doc-dot[b-8nl6qrd476] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(156, 163, 175, 0.15);
    color: var(--neutral-foreground-hint);
}

.doc-dot-on[b-8nl6qrd476] {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.pan-cell[b-8nl6qrd476] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pan-reveal-btn[b-8nl6qrd476] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}

.pan-reveal-btn:hover:not(:disabled)[b-8nl6qrd476] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

.pan-reveal-btn:disabled[b-8nl6qrd476] {
    opacity: 0.5;
    cursor: default;
}

.amount-cell[b-8nl6qrd476] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Row actions — start hidden, revealed by tr.hover ── */

.row-actions[b-8nl6qrd476] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-8nl6qrd476] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Skeleton & States ── */

.skeleton-list[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.skeleton-row[b-8nl6qrd476] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
}

.state-box[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 64px 24px;
}

.state-icon[b-8nl6qrd476] { color: var(--neutral-foreground-hint); opacity: 0.5; }
.state-title[b-8nl6qrd476] { font-size: 15px; font-weight: 600; margin: 0; color: var(--neutral-foreground-rest); }
.state-hint[b-8nl6qrd476] { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; max-width: 460px; }

/* ── Pagination footer ── */

.list-footer[b-8nl6qrd476] {
    padding: 14px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--neutral-layer-2);
}

/* ── Mobile entity cards ── */

.entity-list-mobile[b-8nl6qrd476] { display: none; }

.entity-card[b-8nl6qrd476] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 14px;
    background: var(--neutral-layer-1);
}

.entity-card-header[b-8nl6qrd476] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.entity-card-title[b-8nl6qrd476] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entity-card-name[b-8nl6qrd476] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-card-sub[b-8nl6qrd476] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.entity-card-status[b-8nl6qrd476] { flex-shrink: 0; }

.entity-card-fields[b-8nl6qrd476] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.entity-card-field[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.field-label[b-8nl6qrd476] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.field-value[b-8nl6qrd476] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.entity-card-actions[b-8nl6qrd476] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Dialog form ── */

.dialog-form[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.dialog-info-grid[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

.dialog-info-row[b-8nl6qrd476] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.dialog-info-label[b-8nl6qrd476] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    min-width: 80px;
    flex-shrink: 0;
}

.dialog-info-value[b-8nl6qrd476] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.form-field[b-8nl6qrd476] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label-stacked[b-8nl6qrd476] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    display: block;
}

.field-required[b-8nl6qrd476] {
    color: #EF4444;
    margin-left: 2px;
}

.dialog-form-grid[b-8nl6qrd476] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dialog-hint[b-8nl6qrd476] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 4px 0;
}

.dialog-hint-inline[b-8nl6qrd476] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.dialog-validation-msg[b-8nl6qrd476] {
    font-size: 11px;
    color: #EF4444;
}

/* ── Responsive breakpoints ── */

@media (max-width: 1024px) {
    .metrics-row[b-8nl6qrd476] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .page-container[b-8nl6qrd476] { padding: 20px 16px; gap: 20px; }
    .header-content[b-8nl6qrd476] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-8nl6qrd476] { width: 100%; }
    .metrics-row[b-8nl6qrd476] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-card[b-8nl6qrd476] { padding: 16px; gap: 12px; }
    .metric-value[b-8nl6qrd476] { font-size: 11px; }
    .list-search[b-8nl6qrd476] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-8nl6qrd476] { display: none; }
    .toolbar-filters[b-8nl6qrd476] { width: 100%; }
    .toolbar-filters > *[b-8nl6qrd476] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 110px; }

    /* Hide desktop grid, show mobile cards */
    .list-container table[b-8nl6qrd476] { display: none; }
    .entity-list-mobile[b-8nl6qrd476] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    /* Always visible actions on mobile */
    .row-actions[b-8nl6qrd476] { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-8nl6qrd476] { grid-template-columns: 1fr; }
    .entity-card-fields[b-8nl6qrd476] { grid-template-columns: 1fr; }
    .toolbar-filters > *[b-8nl6qrd476] { flex: 1 1 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .metric-card[b-8nl6qrd476],
    .row-actions[b-8nl6qrd476],
    .row-action-btn[b-8nl6qrd476] {
        transition: none;
    }
}
/* /Pages/Deposits/PendingPayouts/Index.razor.rz.scp.css */
/* PENDING PAYOUTS — List View archetype contract
   ─────────────────────────────────────────────────────────────────────────── */

.page-container[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page Header ── */

.page-header[b-u9kwytncmi] { margin-bottom: 0; }

.header-content[b-u9kwytncmi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-u9kwytncmi] { flex: 1; }

.page-title[b-u9kwytncmi] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-u9kwytncmi] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-u9kwytncmi] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.error-bar[b-u9kwytncmi] { margin: 0; }

/* ── Metric Cards ── */

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

.metric-card[b-u9kwytncmi] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-u9kwytncmi] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-u9kwytncmi] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-u9kwytncmi] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-u9kwytncmi]  { background: color-mix(in srgb, #0078d4 14%, transparent); color: #0078d4; }
.metric-icon-green[b-u9kwytncmi] { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-amber[b-u9kwytncmi] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.metric-icon-red[b-u9kwytncmi]   { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }

.metric-body[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.metric-value[b-u9kwytncmi] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-u9kwytncmi] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-desc[b-u9kwytncmi] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List Container ── */

.list-container[b-u9kwytncmi] {
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

.list-toolbar[b-u9kwytncmi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-u9kwytncmi] {
    flex: 1 1 220px;
    max-width: 320px;
}

.toolbar-divider[b-u9kwytncmi] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-u9kwytncmi] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-spacer[b-u9kwytncmi] { flex: 1; }

.record-count[b-u9kwytncmi] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Main cell (account/customer stacked) ── */

.record-main-cell[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.record-title[b-u9kwytncmi] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-subtitle[b-u9kwytncmi] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ── */
.grid-scroll-wrapper[b-u9kwytncmi] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-u9kwytncmi] table.pending-payouts-grid {
    min-width: 900px;
}

.amount-cell[b-u9kwytncmi] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

/* ── Row actions — start hidden, revealed by tr.hover ── */

.row-actions[b-u9kwytncmi] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-u9kwytncmi] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.row-action-success[b-u9kwytncmi] { color: #059669; }
.row-action-success:hover[b-u9kwytncmi] { background: color-mix(in srgb, #059669 12%, transparent); }

/* ── Skeleton & States ── */

.skeleton-list[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.skeleton-row[b-u9kwytncmi] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
}

.state-box[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 64px 24px;
}

.state-icon[b-u9kwytncmi] { color: var(--neutral-foreground-hint); opacity: 0.5; }
.state-title[b-u9kwytncmi] { font-size: 15px; font-weight: 600; margin: 0; color: var(--neutral-foreground-rest); }
.state-hint[b-u9kwytncmi] { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; max-width: 460px; }

/* ── Pagination footer ── */

.list-footer[b-u9kwytncmi] {
    padding: 14px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--neutral-layer-2);
}

/* ── Mobile entity cards ── */

.entity-list-mobile[b-u9kwytncmi] { display: none; }

.entity-card[b-u9kwytncmi] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 14px;
    background: var(--neutral-layer-1);
}

.entity-card-header[b-u9kwytncmi] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.entity-card-title[b-u9kwytncmi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entity-card-name[b-u9kwytncmi] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-card-sub[b-u9kwytncmi] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.entity-card-fields[b-u9kwytncmi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.entity-card-field[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.field-label[b-u9kwytncmi] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.field-value[b-u9kwytncmi] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.entity-card-actions[b-u9kwytncmi] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Dialog form ── */

.dialog-form[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.dialog-info-grid[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

.dialog-info-row[b-u9kwytncmi] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.dialog-info-label[b-u9kwytncmi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    min-width: 80px;
    flex-shrink: 0;
}

.dialog-info-value[b-u9kwytncmi] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.form-field[b-u9kwytncmi] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label-stacked[b-u9kwytncmi] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    display: block;
}

.field-required[b-u9kwytncmi] {
    color: #EF4444;
    margin-left: 2px;
}

.dialog-hint[b-u9kwytncmi] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 4px 0;
}

.dialog-validation-msg[b-u9kwytncmi] {
    font-size: 11px;
    color: #EF4444;
}

/* ── Responsive breakpoints ── */

@media (max-width: 1024px) {
    .metrics-row[b-u9kwytncmi] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .page-container[b-u9kwytncmi] { padding: 20px 16px; gap: 20px; }
    .header-content[b-u9kwytncmi] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-u9kwytncmi] { width: 100%; }
    .metrics-row[b-u9kwytncmi] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-card[b-u9kwytncmi] { padding: 16px; gap: 12px; }
    .metric-value[b-u9kwytncmi] { font-size: 11px; }
    .list-search[b-u9kwytncmi] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-u9kwytncmi] { display: none; }
    .toolbar-filters[b-u9kwytncmi] { width: 100%; }
    .toolbar-filters > *[b-u9kwytncmi] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 110px; }

    /* Hide desktop grid, show mobile cards */
    .grid-scroll-wrapper[b-u9kwytncmi] { display: none; }
    .entity-list-mobile[b-u9kwytncmi] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    /* Always visible actions on mobile */
    .row-actions[b-u9kwytncmi] { opacity: 1; }
}

@media (max-width: 480px) {
    .metrics-row[b-u9kwytncmi] { grid-template-columns: 1fr; }
    .entity-card-fields[b-u9kwytncmi] { grid-template-columns: 1fr; }
    .toolbar-filters > *[b-u9kwytncmi] { flex: 1 1 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .metric-card[b-u9kwytncmi],
    .row-actions[b-u9kwytncmi],
    .row-action-btn[b-u9kwytncmi] {
        transition: none;
    }
}
/* /Pages/Deposits/Products/CreateUpdateDepositProductModal.razor.rz.scp.css */
.form-section[b-db1fv6t03t] {
    padding: 20px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.form-section.last[b-db1fv6t03t] {
    padding-bottom: 4px;
    border-bottom: none;
}

.form-section-header[b-db1fv6t03t] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.form-section-header span[b-db1fv6t03t] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-foreground-hint);
}

.form-grid[b-db1fv6t03t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: stretch;
}

.form-grid > .full-width[b-db1fv6t03t] {
    grid-column: 1 / -1;
}

/* ── Interest slab table ─────────────────────────────────────────────────── */
.slab-list[b-db1fv6t03t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each slab as a card on mobile, grid row on desktop */
.slab-row[b-db1fv6t03t] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 36px;
    gap: 8px;
    align-items: end;
    padding: 12px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.slab-field[b-db1fv6t03t] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.slab-row-index[b-db1fv6t03t] {
    display: none; /* shown on mobile only */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
    margin-bottom: 8px;
    grid-column: 1 / -1;
}

.slab-empty-hint[b-db1fv6t03t] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    padding: 16px 0;
    text-align: center;
}

.slab-overlap-error[b-db1fv6t03t] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    padding: 10px 14px;
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 8px;
}

/* ── Status toggle row ───────────────────────────────────────────────────── */
.status-toggle-row[b-db1fv6t03t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    height: 100%;
    box-sizing: border-box;
    min-height: 42px;
}

.status-toggle-info[b-db1fv6t03t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-toggle-title[b-db1fv6t03t] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — form inside dialog
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .form-grid[b-db1fv6t03t] {
        grid-template-columns: 1fr;
    }

    .slab-row[b-db1fv6t03t] {
        /* Collapse to 2-col card layout on mobile */
        grid-template-columns: 1fr 1fr;
        row-gap: 12px;
    }

    .slab-row-index[b-db1fv6t03t] {
        display: block;
    }

    /* Delete button: full-row on mobile */
    .slab-row > fluent-button:last-child[b-db1fv6t03t] {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 480px) {
    .slab-row[b-db1fv6t03t] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Deposits/Products/Index.razor.rz.scp.css */
/* ==========================================================================
   DEPOSIT PRODUCTS — Page scoped styles
   Archetype: List View
   Pattern follows AI-Agent-UI-Generation-Guide §7.3 (List Archetype)
   ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-1ypr0lqv5y] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-1ypr0lqv5y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.page-header-text[b-1ypr0lqv5y] { flex: 1; min-width: 0; }

.page-title[b-1ypr0lqv5y] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-subtitle[b-1ypr0lqv5y] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-1ypr0lqv5y] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Metric cards ───────────────────────────────────────────────────────── */
.metrics-row[b-1ypr0lqv5y] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-1ypr0lqv5y] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-1ypr0lqv5y] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-1ypr0lqv5y] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-1ypr0lqv5y] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-1ypr0lqv5y]   { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--accent-foreground-rest); }
.metric-icon-green[b-1ypr0lqv5y]  { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-orange[b-1ypr0lqv5y] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }
.metric-icon-amber[b-1ypr0lqv5y]  { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

.metric-body[b-1ypr0lqv5y] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.metric-value[b-1ypr0lqv5y] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-1ypr0lqv5y] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-1ypr0lqv5y] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container card ────────────────────────────────────────────────── */
.list-container[b-1ypr0lqv5y] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.list-toolbar[b-1ypr0lqv5y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-1ypr0lqv5y] {
    flex: 1 1 200px;
    max-width: 300px;
}

.list-search fluent-search[b-1ypr0lqv5y] { width: 100%; }

.toolbar-divider[b-1ypr0lqv5y] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-1ypr0lqv5y] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton loading ───────────────────────────────────────────────────── */
.skeleton-list[b-1ypr0lqv5y] {
    display: flex;
    flex-direction: column;
}

.skeleton-row[b-1ypr0lqv5y] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-row:last-child[b-1ypr0lqv5y] { border-bottom: none; }

/* ── Empty / Error state ────────────────────────────────────────────────── */
.state-box[b-1ypr0lqv5y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-1ypr0lqv5y] {
    opacity: 0.35;
    margin-bottom: 4px;
}

.state-icon-error[b-1ypr0lqv5y] {
    opacity: 0.70;
    color: var(--error-foreground-rest);
}

.state-title[b-1ypr0lqv5y] {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.state-message[b-1ypr0lqv5y] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 4px;
    max-width: 360px;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-1ypr0lqv5y] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-1ypr0lqv5y] table.products-grid {
    min-width: 1060px;
}

/* ── Row actions ─────────────────────────────────────────────────────────── */
/* Initial hidden — reveal rule lives in global-styles.css (tr.hover scope) */
.row-actions[b-1ypr0lqv5y] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    transition: opacity 200ms ease;
}

.row-action-btn[b-1ypr0lqv5y] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Tenure badge in cells ── */
.tenure-cell[b-1ypr0lqv5y] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

.tenure-unit[b-1ypr0lqv5y] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-left: 2px;
}

/* ── Grid name cell ─────────────────────────────────────────────────────── */
.product-name-cell[b-1ypr0lqv5y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.product-name-text[b-1ypr0lqv5y] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-name-sub[b-1ypr0lqv5y] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Pagination footer ──────────────────────────────────────────────────── */
.list-footer[b-1ypr0lqv5y] {
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--neutral-layer-2);
}

.results-count[b-1ypr0lqv5y] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .metrics-row[b-1ypr0lqv5y] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-1ypr0lqv5y]      { padding: 16px; gap: 16px; }
    .page-title[b-1ypr0lqv5y]          { font-size: 22px; }
    .page-header[b-1ypr0lqv5y]         { flex-direction: column; align-items: flex-start; }
    .page-actions[b-1ypr0lqv5y]        { width: 100%; }
    .page-actions > *[b-1ypr0lqv5y]    { flex: 1; }
    .metrics-row[b-1ypr0lqv5y]         { grid-template-columns: 1fr; }
    .metric-value[b-1ypr0lqv5y]        { font-size: 12px; }
    .list-search[b-1ypr0lqv5y]         { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-1ypr0lqv5y]     { display: none; }
    .toolbar-filters[b-1ypr0lqv5y]     { width: 100%; }
    .toolbar-filters > *[b-1ypr0lqv5y] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 120px; }
    /* On mobile, action buttons are always visible (not hover-only) */
    .row-actions[b-1ypr0lqv5y]         { opacity: 1; }
    .state-box[b-1ypr0lqv5y]           { padding: 48px 16px; }
}

@media (max-width: 480px) {
    .toolbar-filters > *[b-1ypr0lqv5y] { flex: 1 1 100% !important; }
}
/* /Pages/Disbursements/Create.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-54siuiqhb8] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 860px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.back-link[b-54siuiqhb8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    margin-bottom: 12px;
}
.back-link:hover[b-54siuiqhb8] { color: var(--accent-fill-rest); }
.header-content[b-54siuiqhb8] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.title-section[b-54siuiqhb8] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-54siuiqhb8] { font-size: 28px; font-weight: 700; color: var(--neutral-foreground-rest); margin: 0; line-height: 1.2; }
.page-description[b-54siuiqhb8] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Form card ───────────────────────────────────────────────────────────── */
.form-card[b-54siuiqhb8] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Form section ────────────────────────────────────────────────────────── */
.form-section[b-54siuiqhb8] { padding: 28px 32px; }
.form-section-header[b-54siuiqhb8] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.form-section-icon[b-54siuiqhb8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(var(--accent-fill-rest-rgb, 0, 120, 212), 0.1);
    color: var(--accent-fill-rest);
    flex-shrink: 0;
}
.form-section-title[b-54siuiqhb8] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}
.section-divider[b-54siuiqhb8] { height: 1px; background: var(--neutral-stroke-rest); }

/* ── Form grid (2-column stacked) ────────────────────────────────────────── */
.form-grid[b-54siuiqhb8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}
.span-full[b-54siuiqhb8] { grid-column: 1 / -1; }
.full-width-field[b-54siuiqhb8] { margin-top: 16px; }
.field-with-hint[b-54siuiqhb8] { display: flex; flex-direction: column; gap: 4px; }

/* ── Select + action row ─────────────────────────────────────────────────── */
.form-select-row[b-54siuiqhb8] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}

/* ── Info rows (read-only display) ──────────────────────────────────────── */
.info-row[b-54siuiqhb8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
}
.info-label[b-54siuiqhb8] { font-size: 12px; font-weight: 500; color: var(--neutral-foreground-hint); text-transform: uppercase; letter-spacing: 0.04em; }
.info-value[b-54siuiqhb8] { font-size: 14px; color: var(--neutral-foreground-rest); font-weight: 500; }
.info-link[b-54siuiqhb8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--accent-fill-rest);
    text-decoration: none;
    margin-left: 8px;
}
.amount-val[b-54siuiqhb8] { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.net-amount[b-54siuiqhb8] { color: var(--accent-fill-rest); font-size: 18px; }
.mode-chip[b-54siuiqhb8] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: rgb(67, 56, 202);
    width: fit-content;
}

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.skeleton-list[b-54siuiqhb8] { display: flex; flex-direction: column; gap: 12px; padding: 28px 32px; }
.skeleton-row[b-54siuiqhb8] { display: flex; flex-direction: column; gap: 6px; }
.skeleton-label[b-54siuiqhb8] {
    width: 120px; height: 12px; border-radius: 4px;
    background: var(--neutral-stroke-rest); opacity: 0.7;
}
.skeleton-input[b-54siuiqhb8] {
    width: 100%; height: 36px; border-radius: 4px;
    background: var(--neutral-stroke-rest); opacity: 0.5;
}

/* ── State box ──────────────────────────────────────────────────────────── */
.state-box[b-54siuiqhb8] {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 64px 32px;
}
.state-icon[b-54siuiqhb8] { opacity: 0.35; }
.state-title[b-54siuiqhb8] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-message[b-54siuiqhb8] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; text-align: center; }

/* ── Message bar ─────────────────────────────────────────────────────────── */
.form-message[b-54siuiqhb8] { margin: 0 32px; }

/* ── Form actions ────────────────────────────────────────────────────────── */
.form-actions[b-54siuiqhb8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.form-actions-left[b-54siuiqhb8]  { display: flex; gap: 8px; }
.form-actions-right[b-54siuiqhb8] { display: flex; gap: 8px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .page-container[b-54siuiqhb8] { padding: 16px; }
    .form-section[b-54siuiqhb8] { padding: 20px 16px; }
    .form-grid[b-54siuiqhb8] { grid-template-columns: 1fr; }
    .form-select-row[b-54siuiqhb8] { flex-direction: column; align-items: stretch; }
    .form-actions[b-54siuiqhb8] { flex-direction: column; gap: 8px; padding: 16px; }
    .form-actions-left[b-54siuiqhb8], .form-actions-right[b-54siuiqhb8] { width: 100%; justify-content: stretch; flex-direction: column; }
}

/* ── Verification badge ─────────────────────────────────────────────────── */
.verify-badge-row[b-54siuiqhb8] { margin-top: -8px; margin-bottom: 4px; }
.verify-badge[b-54siuiqhb8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.verify-badge--verified[b-54siuiqhb8] {
    background: rgba(16, 124, 16, 0.12);
    color: rgb(16, 124, 16);
    border: 1px solid rgba(16, 124, 16, 0.25);
}
.verify-badge--unverified[b-54siuiqhb8] {
    background: rgba(var(--neutral-foreground-hint-rgb, 96, 96, 96), 0.08);
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
}

.field-hint[b-54siuiqhb8] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin: 4px 0 0;
}
/* /Pages/Disbursements/Index.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-98iuo8kcrn] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header[b-98iuo8kcrn] { }
.header-content[b-98iuo8kcrn] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.title-section[b-98iuo8kcrn] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-98iuo8kcrn] { font-size: 28px; font-weight: 700; color: var(--neutral-foreground-rest); margin: 0; line-height: 1.2; }
.page-description[b-98iuo8kcrn] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }
.header-actions[b-98iuo8kcrn] { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Metrics row (KPI cards) ─────────────────────────────────────────────── */
.metrics-row[b-98iuo8kcrn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.metric-card[b-98iuo8kcrn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
}
.metric-icon-wrap[b-98iuo8kcrn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}
.metric-icon-blue[b-98iuo8kcrn]  { background: rgba(59, 130, 246, 0.12); color: rgb(37, 99, 235); }
.metric-icon-green[b-98iuo8kcrn] { background: rgba(34, 197, 94,  0.12); color: rgb(21, 128, 61); }
.metric-icon-amber[b-98iuo8kcrn] { background: rgba(245, 158, 11, 0.12); color: rgb(146, 64, 14); }
.metric-icon-red[b-98iuo8kcrn]   { background: rgba(239, 68, 68,  0.12); color: rgb(185, 28, 28); }
.metric-body[b-98iuo8kcrn] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.metric-value[b-98iuo8kcrn] { font-size: 14px; font-weight: 700; color: var(--neutral-foreground-rest); line-height: 1.1; }
.metric-title[b-98iuo8kcrn] { font-size: 14px; font-weight: 600; color: var(--neutral-foreground-rest); }
.metric-desc[b-98iuo8kcrn]  { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── List container ─────────────────────────────────────────────────────── */
.list-container[b-98iuo8kcrn] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Grid scroll wrapper ────────────────────────────────────────────────── */
/* Grid was previously unwrapped; fixed-px columns mixed with fr columns and
   no min-width safety net would squish/clip on narrow viewports instead of
   scrolling horizontally. */
.grid-scroll-wrapper[b-98iuo8kcrn] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-98iuo8kcrn] table.disbursements-grid {
    min-width: 1450px;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.list-toolbar[b-98iuo8kcrn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    flex-wrap: wrap;
    z-index: 10;
    position: relative;
}
.list-search[b-98iuo8kcrn] { flex: 1; min-width: 180px; max-width: 320px; }
.toolbar-divider[b-98iuo8kcrn] { width: 1px; height: 28px; background: var(--neutral-stroke-rest); flex-shrink: 0; }
.toolbar-filters[b-98iuo8kcrn] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.skeleton-list[b-98iuo8kcrn] { display: flex; flex-direction: column; }
.skeleton-row[b-98iuo8kcrn] {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.skeleton-row:last-child[b-98iuo8kcrn] { border-bottom: none; }
.skeleton-cell[b-98iuo8kcrn] {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-stroke-rest) 0%, var(--neutral-fill-hover) 50%, var(--neutral-stroke-rest) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-98iuo8kcrn 1.5s infinite;
    height: 14px;
}
.skeleton-cell.avatar[b-98iuo8kcrn]  { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton-cell.wide[b-98iuo8kcrn]    { width: 140px; }
.skeleton-cell.medium[b-98iuo8kcrn]  { width: 110px; }
.skeleton-cell.short[b-98iuo8kcrn]   { width: 80px; }
.skeleton-cell.badge[b-98iuo8kcrn]   { width: 90px; height: 22px; border-radius: 20px; }
.skeleton-cell.actions[b-98iuo8kcrn] { width: 120px; }
@keyframes skeleton-shimmer-b-98iuo8kcrn { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── State box ──────────────────────────────────────────────────────────── */
.state-box[b-98iuo8kcrn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 32px;
}
.state-icon[b-98iuo8kcrn] { opacity: 0.35; }
.state-title[b-98iuo8kcrn] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-message[b-98iuo8kcrn] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; text-align: center; }

/* ── Grid cell helpers ──────────────────────────────────────────────────── */
.grid-name[b-98iuo8kcrn]  { font-weight: 500; color: var(--neutral-foreground-rest); }
.amount-cell[b-98iuo8kcrn]{ font-weight: 600; color: var(--neutral-foreground-rest); font-variant-numeric: tabular-nums; }
.date-cell[b-98iuo8kcrn]  { font-size: 13px; color: var(--neutral-foreground-hint); }
.mode-badge[b-98iuo8kcrn] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.12);
    color: rgb(67, 56, 202);
}

/* ── Row actions (hover reveal handled in global-styles.css) ─────────────── */
.row-actions[b-98iuo8kcrn] {
    display: flex;
    gap: 2px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.row-action-btn[b-98iuo8kcrn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
    transition: background 0.12s, border-color 0.12s;
}
.row-action-btn:hover[b-98iuo8kcrn] {
    background: var(--neutral-fill-hover);
    border-color: var(--neutral-stroke-rest);
}
.row-action-accent[b-98iuo8kcrn]  { color: var(--accent-fill-rest); }
.row-action-warning[b-98iuo8kcrn] { color: rgb(146, 64, 14); }
.row-action-warning:hover[b-98iuo8kcrn] { background: rgba(245, 158, 11, 0.12) !important; }
.row-action-danger[b-98iuo8kcrn]  { color: rgb(185, 28, 28); }
.row-action-danger:hover[b-98iuo8kcrn]  { background: rgba(239, 68, 68, 0.12) !important; }

/* ── Status badges (rgba for dark-mode safety) ──────────────────────────── */
.status-badge[b-98iuo8kcrn] { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-disb--draft[b-98iuo8kcrn]                { background: rgba(100, 116, 139, 0.12); color: rgb(71, 85, 105); }
.status-disb--pendingverification[b-98iuo8kcrn]  { background: rgba(245, 158, 11,  0.14); color: rgb(146, 64, 14); }
.status-disb--verificationfailed[b-98iuo8kcrn]   { background: rgba(239, 68, 68,   0.12); color: rgb(185, 28, 28); }
.status-disb--pendingprocessing[b-98iuo8kcrn]    { background: rgba(59, 130, 246,  0.12); color: rgb(37, 99, 235); }
.status-disb--processing[b-98iuo8kcrn]           { background: rgba(99, 102, 241,  0.12); color: rgb(67, 56, 202); }
.status-disb--completed[b-98iuo8kcrn]            { background: rgba(34, 197, 94,   0.12); color: rgb(21, 128, 61); }
.status-disb--failed[b-98iuo8kcrn]               { background: rgba(239, 68, 68,   0.12); color: rgb(185, 28, 28); }
.status-disb--held[b-98iuo8kcrn]                 { background: rgba(245, 158, 11,  0.14); color: rgb(146, 64, 14); }
.status-disb--rejected[b-98iuo8kcrn]             { background: rgba(100, 116, 139, 0.12); color: rgb(71, 85, 105); }

/* ── List footer ─────────────────────────────────────────────────────────── */
.list-footer[b-98iuo8kcrn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.results-count[b-98iuo8kcrn] { font-size: 13px; font-weight: 500; color: var(--neutral-foreground-hint); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .metrics-row[b-98iuo8kcrn] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .page-container[b-98iuo8kcrn] { padding: 16px; gap: 16px; }
    .metrics-row[b-98iuo8kcrn] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metric-card[b-98iuo8kcrn] { padding: 14px; gap: 12px; }
    .metric-value[b-98iuo8kcrn] { font-size: 11px; }
    .list-toolbar[b-98iuo8kcrn] { flex-direction: column; align-items: stretch; }
    .list-search[b-98iuo8kcrn] { max-width: 100%; }
    .toolbar-divider[b-98iuo8kcrn] { display: none; }
    .toolbar-filters[b-98iuo8kcrn] { flex-direction: row; flex-wrap: wrap; }
    .row-actions[b-98iuo8kcrn] { opacity: 1; }
    .list-footer[b-98iuo8kcrn] { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
    .metrics-row[b-98iuo8kcrn] { grid-template-columns: 1fr; }
}
/* /Pages/Disbursements/View.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-9saxq6rjg2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.back-link[b-9saxq6rjg2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    margin-bottom: 8px;
}
.back-link:hover[b-9saxq6rjg2] { color: var(--accent-fill-rest); }
.page-header[b-9saxq6rjg2] {
    position: relative;
}
.header-main[b-9saxq6rjg2] { display: flex; flex-direction: column; gap: 4px; }
.entity-number[b-9saxq6rjg2] { font-size: 13px; font-weight: 500; color: var(--neutral-foreground-hint); letter-spacing: 0.06em; text-transform: uppercase; }
.header-row[b-9saxq6rjg2] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-title[b-9saxq6rjg2] { font-size: 28px; font-weight: 700; color: var(--neutral-foreground-rest); margin: 0; line-height: 1.2; }
.page-description[b-9saxq6rjg2] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }
.header-actions[b-9saxq6rjg2] { margin-top: 12px; }

/* ── Detail Sections Grid ────────────────────────────────────────────────── */
.detail-sections-grid[b-9saxq6rjg2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* ── Detail Section ──────────────────────────────────────────────────────── */
.detail-section[b-9saxq6rjg2] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}
.remarks-section[b-9saxq6rjg2] { /* full-width */ }

/* ── Section Head ────────────────────────────────────────────────────────── */
.section-head[b-9saxq6rjg2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
}
.section-head-icon[b-9saxq6rjg2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(var(--accent-fill-rest-rgb, 0,120,212), 0.1);
    color: var(--accent-fill-rest);
    flex-shrink: 0;
}
.section-head-text[b-9saxq6rjg2] { display: flex; flex-direction: column; gap: 2px; }
.section-head-title[b-9saxq6rjg2] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.section-head-subtitle[b-9saxq6rjg2] { font-size: 12px; color: var(--neutral-foreground-hint); margin: 0; }
.section-divider[b-9saxq6rjg2] { height: 1px; background: var(--neutral-stroke-rest); margin: 0; }

/* ── Section Body ────────────────────────────────────────────────────────── */
.section-body[b-9saxq6rjg2] { padding: 16px 24px 24px; }

/* ── Detail Table ────────────────────────────────────────────────────────── */
.detail-table[b-9saxq6rjg2] { display: flex; flex-direction: column; gap: 0; }
.detail-row[b-9saxq6rjg2] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.detail-row:last-child[b-9saxq6rjg2] { border-bottom: none; }
.detail-row--highlight[b-9saxq6rjg2] {
    background: rgba(var(--accent-fill-rest-rgb, 0,120,212), 0.04);
    padding: 10px 8px;
    border-radius: 6px;
    margin: 2px -8px;
    border-bottom: none;
}
.detail-label[b-9saxq6rjg2] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
    min-width: 160px;
    flex-shrink: 0;
}
.detail-value[b-9saxq6rjg2] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    word-break: break-word;
}
.detail-subtext[b-9saxq6rjg2] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    font-weight: 400;
}
.detail-bold[b-9saxq6rjg2] { font-weight: 600; }
.detail-amount[b-9saxq6rjg2] { font-weight: 700; font-variant-numeric: tabular-nums; }
.detail-mono[b-9saxq6rjg2] { font-family: monospace; font-size: 13px; letter-spacing: 0.03em; }
.detail-link[b-9saxq6rjg2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-fill-rest);
    text-decoration: none;
    margin-left: 10px;
}
.detail-link:hover[b-9saxq6rjg2] { text-decoration: underline; }

/* ── Mode badge ──────────────────────────────────────────────────────────── */
.mode-badge[b-9saxq6rjg2] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.12);
    color: rgb(67, 56, 202);
}

/* ── Status badges (rgba for dark-mode safety) ──────────────────────────── */
.status-badge[b-9saxq6rjg2] { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-disb--draft[b-9saxq6rjg2]                { background: rgba(100, 116, 139, 0.12); color: rgb(71, 85, 105); }
.status-disb--pendingverification[b-9saxq6rjg2]  { background: rgba(245, 158, 11,  0.14); color: rgb(146, 64, 14); }
.status-disb--verificationfailed[b-9saxq6rjg2]   { background: rgba(239, 68, 68,   0.12); color: rgb(185, 28, 28); }
.status-disb--pendingprocessing[b-9saxq6rjg2]    { background: rgba(59, 130, 246,  0.12); color: rgb(37, 99, 235); }
.status-disb--processing[b-9saxq6rjg2]           { background: rgba(99, 102, 241,  0.12); color: rgb(67, 56, 202); }
.status-disb--completed[b-9saxq6rjg2]            { background: rgba(34, 197, 94,   0.12); color: rgb(21, 128, 61); }
.status-disb--failed[b-9saxq6rjg2]               { background: rgba(239, 68, 68,   0.12); color: rgb(185, 28, 28); }
.status-disb--held[b-9saxq6rjg2]                 { background: rgba(245, 158, 11,  0.14); color: rgb(146, 64, 14); }
.status-disb--rejected[b-9saxq6rjg2]             { background: rgba(100, 116, 139, 0.12); color: rgb(71, 85, 105); }

.hold-reason[b-9saxq6rjg2] {
    color: rgb(146, 64, 14);
    font-weight: 500;
}

/* ── Remarks ─────────────────────────────────────────────────────────────── */
.remarks-text[b-9saxq6rjg2] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.skeleton-list[b-9saxq6rjg2] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}
.skeleton-row[b-9saxq6rjg2] {
    display: flex;
    gap: 48px;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.skeleton-row:last-child[b-9saxq6rjg2] { border-bottom: none; }
.skeleton-label[b-9saxq6rjg2] {
    width: 130px; height: 12px; border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-stroke-rest) 0%, var(--neutral-fill-hover) 50%, var(--neutral-stroke-rest) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-9saxq6rjg2 1.5s infinite;
    flex-shrink: 0;
}
.skeleton-value[b-9saxq6rjg2] {
    flex: 1; height: 14px; border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-stroke-rest) 0%, var(--neutral-fill-hover) 50%, var(--neutral-stroke-rest) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-9saxq6rjg2 1.5s infinite 0.1s;
}
@keyframes skeleton-shimmer-b-9saxq6rjg2 { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── State box ──────────────────────────────────────────────────────────── */
.state-box[b-9saxq6rjg2] {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 64px 32px;
}
.state-icon[b-9saxq6rjg2] { opacity: 0.35; }
.state-title[b-9saxq6rjg2] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }

/* ── Action bar ──────────────────────────────────────────────────────────── */
.action-bar[b-9saxq6rjg2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* ── Checklist section ──────────────────────────────────────────────────── */
.checklist-section[b-9saxq6rjg2] { /* full-width */ }

.checklist-items[b-9saxq6rjg2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.checklist-item[b-9saxq6rjg2] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}
.checklist-item:last-child[b-9saxq6rjg2] { border-bottom: none; }

.ci-icon[b-9saxq6rjg2] {
    flex-shrink: 0;
    width: 22px;
    padding-top: 1px;
}
.checklist-item--pass .ci-icon[b-9saxq6rjg2] { color: var(--success-foreground, #107c10); }
.checklist-item--fail .ci-icon[b-9saxq6rjg2] { color: var(--error-foreground, #c42b1c); }
.checklist-item--na  .ci-icon[b-9saxq6rjg2] { color: var(--neutral-foreground-hint); }

.ci-body[b-9saxq6rjg2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ci-label[b-9saxq6rjg2] { font-size: 14px; font-weight: 500; }
.checklist-item--pass .ci-label[b-9saxq6rjg2] { color: var(--neutral-foreground-rest); }
.checklist-item--fail .ci-label[b-9saxq6rjg2] { color: var(--error-foreground, #c42b1c); }
.checklist-item--na  .ci-label[b-9saxq6rjg2] { color: var(--neutral-foreground-hint); }

.ci-detail[b-9saxq6rjg2] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.ci-action[b-9saxq6rjg2] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
    width: 100%;
    padding-left: 34px;
}

/* ── CERSAI section ─────────────────────────────────────────────────────── */
.cersai-section[b-9saxq6rjg2] { /* full-width */ }

.cersai-edit-row[b-9saxq6rjg2] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-top: 4px;
}

.cersai-error[b-9saxq6rjg2] {
    color: var(--error-foreground);
    font-size: 12px;
    margin: 6px 0 0;
}

/* ── Cooling-off exit (Plan 44 · Phase 44.2) ────────────────────────────── */
.cooling-off-exited-badge[b-9saxq6rjg2] {
    background: rgba(34, 197, 94, 0.12);
    color: rgb(21, 128, 61);
}
.cooling-off-bar[b-9saxq6rjg2] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cooling-off-bar strong[b-9saxq6rjg2] { flex-shrink: 0; }
.cooling-off-days[b-9saxq6rjg2] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.cooling-off-bar > .cooling-off-days:last-of-type[b-9saxq6rjg2],
.cooling-off-bar > button[b-9saxq6rjg2] { margin-left: auto; }
.cooling-off-reason-details[b-9saxq6rjg2] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 16px 24px;
}
.cooling-off-reason-details summary[b-9saxq6rjg2] {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}
.cooling-off-reason-details .remarks-text[b-9saxq6rjg2] { margin-top: 10px; }
.char-count[b-9saxq6rjg2] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
    display: block;
}

@media (max-width: 900px) {
    .detail-sections-grid[b-9saxq6rjg2] { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .page-container[b-9saxq6rjg2] { padding: 16px; gap: 16px; }
    .detail-label[b-9saxq6rjg2] { min-width: 120px; }
    .section-head[b-9saxq6rjg2] { padding: 16px 16px 12px; }
    .section-body[b-9saxq6rjg2] { padding: 12px 16px 16px; }
    .action-bar[b-9saxq6rjg2] { flex-direction: row; justify-content: space-between; padding: 12px 16px; }
}
/* /Pages/Documents/Index.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-xxsx2l2x26] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header[b-xxsx2l2x26] { margin-bottom: 8px; }

.header-content[b-xxsx2l2x26] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-xxsx2l2x26] { flex: 1; }

.page-title[b-xxsx2l2x26] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-xxsx2l2x26] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-xxsx2l2x26] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Metric cards ───────────────────────────────────────────────────────── */
.metrics-row[b-xxsx2l2x26] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-xxsx2l2x26] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-xxsx2l2x26] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-xxsx2l2x26] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-xxsx2l2x26] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-xxsx2l2x26]   { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--accent-foreground-rest); }
.metric-icon-green[b-xxsx2l2x26]  { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-amber[b-xxsx2l2x26]  { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

.metric-body[b-xxsx2l2x26] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.metric-value[b-xxsx2l2x26] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-xxsx2l2x26] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-xxsx2l2x26] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container card ────────────────────────────────────────────────── */
.list-container[b-xxsx2l2x26] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
/*
  ⚠️ CRITICAL: Blazor scoped CSS scope attributes (b-xxxx) do NOT land on
  web-component host elements such as <fluent-search> and <fluent-select>.
  Wrap FluentSearch in a native <div class="list-search"> — native elements
  DO receive the scope attribute → flex sizing works.
  Use inline Style= for fixed widths on FluentSelect.
*/
.list-toolbar[b-xxsx2l2x26] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-xxsx2l2x26] {
    flex: 1 1 200px;
    max-width: 300px;
}

.list-search fluent-search[b-xxsx2l2x26] { width: 100%; }

.toolbar-divider[b-xxsx2l2x26] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-xxsx2l2x26] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton loading ───────────────────────────────────────────────────── */
.skeleton-table[b-xxsx2l2x26] { display: flex; flex-direction: column; }

.skeleton-toolbar-row[b-xxsx2l2x26] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}

.skeleton-row-item[b-xxsx2l2x26] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-row-item:last-child[b-xxsx2l2x26] { border-bottom: none; }

.skeleton-cell[b-xxsx2l2x26] {
    background: linear-gradient(90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-xxsx2l2x26 1.5s infinite;
    flex-shrink: 0;
}

@keyframes shimmer-b-xxsx2l2x26 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state[b-xxsx2l2x26] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.empty-heading[b-xxsx2l2x26] {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-description[b-xxsx2l2x26] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 360px;
}

/* ── Grid scroll wrapper ────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-xxsx2l2x26] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-xxsx2l2x26] table.documents-grid { min-width: 950px; }

/* ── Grid cell helpers ──────────────────────────────────────────────────── */
.file-name-cell[b-xxsx2l2x26] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.file-name-text[b-xxsx2l2x26] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-name-sub[b-xxsx2l2x26] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-type-label[b-xxsx2l2x26] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.amount-cell[b-xxsx2l2x26] {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

/* ── Row actions — initial hidden state only (reveal in global-styles.css) */
.row-actions[b-xxsx2l2x26] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-xxsx2l2x26] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border, color, hover → global-styles.css */
}

/* ── Pagination footer ──────────────────────────────────────────────────── */
.list-footer[b-xxsx2l2x26] {
    padding: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-xxsx2l2x26] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Upload dialog form ─────────────────────────────────────────────────── */
.upload-form[b-xxsx2l2x26] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.upload-drop-zone[b-xxsx2l2x26] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    border: 2px dashed var(--neutral-stroke-rest);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms ease;
    text-align: center;
}

.upload-drop-zone:hover[b-xxsx2l2x26] { border-color: var(--accent-stroke-control-rest); }

.drop-icon[b-xxsx2l2x26] { opacity: 0.45; }

.drop-label[b-xxsx2l2x26] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Browse button (hides native file input with styled overlay) ─────────── */
.file-browse-wrapper[b-xxsx2l2x26] {
    position: relative;
    display: inline-flex;
}

.file-browse-btn[b-xxsx2l2x26] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1.5px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-1);
    user-select: none;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease;
    pointer-events: none; /* let the overlay capture the click */
}

.upload-drop-zone:hover .file-browse-btn[b-xxsx2l2x26] {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--accent-stroke-control-rest);
}

.file-input-overlay[b-xxsx2l2x26] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-count-label[b-xxsx2l2x26] {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-foreground-rest);
}

.upload-fields[b-xxsx2l2x26] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.upload-progress-row[b-xxsx2l2x26] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
}

.upload-progress-label[b-xxsx2l2x26] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-xxsx2l2x26] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-xxsx2l2x26] { padding: 16px; gap: 16px; }
    .page-title[b-xxsx2l2x26] { font-size: 22px; }
    .metrics-row[b-xxsx2l2x26] { grid-template-columns: 1fr; }
    .metric-value[b-xxsx2l2x26] { font-size: 12px; }
    .header-content[b-xxsx2l2x26] { flex-direction: column; align-items: flex-start; }
    .list-search[b-xxsx2l2x26] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-xxsx2l2x26] { display: none; }
    .toolbar-filters[b-xxsx2l2x26] { width: 100%; }
    .toolbar-filters > *[b-xxsx2l2x26] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 120px; }
    .row-actions[b-xxsx2l2x26] { opacity: 1; }
    .upload-fields[b-xxsx2l2x26] { grid-template-columns: 1fr; }
}

/* /Pages/GoldLoan/GoldLoanLtv.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   GOLD LOAN LTV MONITOR — Dashboard Archetype (scoped styles)
   Archetype: Dashboard + List View
   NOTE: Row-action hover reveal rule MUST stay in global-styles.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page container ─────────────────────────────────────────────────── */
.page-container[b-04e8hb866w] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────── */
.header-content[b-04e8hb866w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-04e8hb866w] { flex: 1; }

.page-title[b-04e8hb866w] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-04e8hb866w] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-04e8hb866w] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── KPI metric cards ───────────────────────────────────────────────── */
.metrics-row[b-04e8hb866w] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-04e8hb866w] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-04e8hb866w] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-card--alert[b-04e8hb866w] {
    border-left: 3px solid #DC2626;
}

.metric-icon-wrap[b-04e8hb866w] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-skeleton[b-04e8hb866w] { background: var(--neutral-layer-2); }
.metric-icon-wrap[b-04e8hb866w]  svg { fill: currentColor !important; }

.metric-icon-blue[b-04e8hb866w]   { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-04e8hb866w]  { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-amber[b-04e8hb866w]  { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-icon-red[b-04e8hb866w]    { background: rgba(239,68,68,0.12);  color: #DC2626; }
.metric-icon-orange[b-04e8hb866w] { background: rgba(249,115,22,0.12); color: #EA580C; }

.metric-body[b-04e8hb866w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-04e8hb866w] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.metric-value--sm[b-04e8hb866w]     { font-size: 10px; letter-spacing: -0.02em; }
.metric-value--danger[b-04e8hb866w] { color: #DC2626; }

.metric-title[b-04e8hb866w] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-desc[b-04e8hb866w] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tabs card wrapper ──────────────────────────────────────────────── */
.tabs-card[b-04e8hb866w] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Search / filter toolbar ────────────────────────────────────────── */
.toolbar[b-04e8hb866w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}

.toolbar-search[b-04e8hb866w] { flex: 1; min-width: 0; }

.toolbar-right[b-04e8hb866w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.section-title[b-04e8hb866w] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.record-count[b-04e8hb866w] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Grid scroll wrapper ────────────────────────────────────────────── */
.grid-scroll-wrapper[b-04e8hb866w] { overflow-x: auto; }

[b-04e8hb866w] table.data-grid { width: 100%; }

/* ── Skeleton table ─────────────────────────────────────────────────── */
.skeleton-table[b-04e8hb866w] {
    padding: 16px 20px;
}

/* ── Empty / state box ──────────────────────────────────────────────── */
.state-box[b-04e8hb866w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-04e8hb866w]  { color: var(--neutral-foreground-hint); opacity: 0.4; margin-bottom: 4px; }
.state-title[b-04e8hb866w] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-hint[b-04e8hb866w]  { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; max-width: 380px; }

/* ── Grid cell types ────────────────────────────────────────────────── */
.ltv-cell[b-04e8hb866w] {
    display: flex;
    align-items: center;
}

.amount-cell[b-04e8hb866w] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.date-cell[b-04e8hb866w] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge[b-04e8hb866w] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--breached[b-04e8hb866w]  { background: rgba(239,68,68,0.12);  color: #DC2626; }
.status-badge--compliant[b-04e8hb866w] { background: rgba(16,185,129,0.12); color: #059669; }
.status-badge--warning[b-04e8hb866w]   { background: rgba(245,158,11,0.12); color: #D97706; }

/* ── Pagination bar ─────────────────────────────────────────────────── */
.pagination-bar[b-04e8hb866w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    gap: 12px;
}

.pagination-info[b-04e8hb866w] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.pagination-controls[b-04e8hb866w] {
    display: flex;
    gap: 4px;
}

/* ── Price Feed panel ───────────────────────────────────────────────── */
.price-feed-panel[b-04e8hb866w] {
    display: flex;
    flex-direction: column;
}

.price-card[b-04e8hb866w] {
    margin: 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    max-width: 460px;
}

.price-card-inner[b-04e8hb866w] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
}

.price-icon-wrap[b-04e8hb866w] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79,70,229,0.12);
    color: #4F46E5;
}

.price-icon-wrap[b-04e8hb866w]  svg { fill: currentColor !important; }

.price-details[b-04e8hb866w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-row[b-04e8hb866w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label[b-04e8hb866w] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.detail-value[b-04e8hb866w] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.detail-value--accent[b-04e8hb866w] {
    font-size: 18px;
    color: #4F46E5;
}

.price-note[b-04e8hb866w] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-1);
}

.price-note[b-04e8hb866w]  svg { fill: currentColor !important; color: var(--neutral-foreground-hint); flex-shrink: 0; }

/* ── Top-up guidance footnote card ───────────────────────────────────── */
.footnote-card[b-04e8hb866w] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 20px 20px;
    padding: 16px 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid #D97706;
    border-radius: 10px;
}

.footnote-icon[b-04e8hb866w] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

.footnote-icon[b-04e8hb866w]  svg { fill: currentColor !important; }

.footnote-body[b-04e8hb866w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.footnote-title[b-04e8hb866w] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.footnote-steps[b-04e8hb866w] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
}

.footnote-steps li + li[b-04e8hb866w] { margin-top: 2px; }

.footnote-link[b-04e8hb866w] {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #4F46E5;
    text-decoration: none;
}

.footnote-link:hover[b-04e8hb866w] { text-decoration: underline; }

/* ── Form styles (stacked: label on top, input below) ───────────────── */
.form-stack[b-04e8hb866w] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.form-field[b-04e8hb866w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-04e8hb866w] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.form-required[b-04e8hb866w] {
    color: #DC2626;
    margin-left: 2px;
}

.form-hint[b-04e8hb866w] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

/* ── Row actions (mobile always visible) ────────────────────────────── */
.row-actions[b-04e8hb866w] {
    opacity: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .metrics-row[b-04e8hb866w] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-04e8hb866w] { padding: 16px; gap: 16px; }
    .header-content[b-04e8hb866w] { flex-direction: column; align-items: stretch; }
    .header-actions[b-04e8hb866w] { justify-content: flex-end; flex-wrap: wrap; width: 100%; }
    .metrics-row[b-04e8hb866w]    { grid-template-columns: 1fr 1fr; gap: 12px; }
    .metric-value[b-04e8hb866w]   { font-size: 11px; }
    .metric-value--sm[b-04e8hb866w] { font-size: 8px; }
    .toolbar[b-04e8hb866w]        { flex-direction: column; align-items: stretch; }
    .toolbar-right[b-04e8hb866w]  { justify-content: flex-end; }
    .toolbar-search[b-04e8hb866w] { max-width: 100% !important; }
    /* ⚠ MOBILE: row actions always visible — touch screens have no hover */
    .row-actions[b-04e8hb866w]    { opacity: 1; }
    .price-card[b-04e8hb866w]     { margin: 12px; max-width: 100%; }
}

@media (max-width: 480px) {
    .metrics-row[b-04e8hb866w]    { grid-template-columns: 1fr; }
    .page-title[b-04e8hb866w]     { font-size: 22px; }
    .metric-card[b-04e8hb866w]    { padding: 14px; }
    .state-box[b-04e8hb866w]      { padding: 48px 16px; }
    .pagination-bar[b-04e8hb866w] { flex-direction: column; gap: 8px; align-items: center; }
}
/* /Pages/Identity/Roles/Create.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Identity › Roles › Create — World-class form page
   ═══════════════════════════════════════════════════════════════ */

@keyframes slide-up-b-dqf2ffzwvk {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page container ─────────────────────────────────────────────────── */
.page-container[b-dqf2ffzwvk] {
    padding: 32px;
    max-width: 680px;   /* narrow: form pages are focused, not sprawling */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: slide-up-b-dqf2ffzwvk 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Back / breadcrumb link ─────────────────────────────────────────── */
.breadcrumb[b-dqf2ffzwvk] { display: flex; align-items: center; }

.back-link[b-dqf2ffzwvk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--accent-foreground-rest);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease;
    text-decoration: none;
}

.back-link:hover[b-dqf2ffzwvk] {
    background: var(--neutral-fill-hover);
    color: var(--accent-foreground-hover);
}

.back-link:focus-visible[b-dqf2ffzwvk] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.back-link svg[b-dqf2ffzwvk] { fill: currentColor !important; }

/* ── Page header ────────────────────────────────────────────────────── */
.page-header[b-dqf2ffzwvk] { display: flex; flex-direction: column; gap: 6px; }

.page-title[b-dqf2ffzwvk] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--neutral-foreground-rest);
}

.page-subtitle[b-dqf2ffzwvk] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

/* ── Form card / section card ───────────────────────────────────────── */
.section-card[b-dqf2ffzwvk],
.form-card[b-dqf2ffzwvk] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 28px;
}

/* ── Error banner ────────────────────────────────────────────────────── */
.form-error-banner[b-dqf2ffzwvk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 8px;
    color: var(--error-foreground-rest, #dc2626);
    font-size: 14px;
}

.form-error-banner svg[b-dqf2ffzwvk] { fill: currentColor !important; flex-shrink: 0; }

/* ── Form grid ───────────────────────────────────────────────────────── */
.form-grid[b-dqf2ffzwvk] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 28px;
}

.form-field[b-dqf2ffzwvk] { display: flex; flex-direction: column; gap: 4px; }
.form-field--full[b-dqf2ffzwvk] { /* spans full width, already default */ }
.form-field--flags[b-dqf2ffzwvk] { display: flex; flex-direction: column; gap: 16px; }

/* Full-width fluent-text-field */
[b-dqf2ffzwvk] .form-field--full fluent-text-field { width: 100%; }

.flag-row[b-dqf2ffzwvk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-hint[b-dqf2ffzwvk] {
    margin: 0;
    margin-left: 2px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

/* ── Form actions ────────────────────────────────────────────────────── */
.form-actions[b-dqf2ffzwvk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-dqf2ffzwvk] { padding: 16px; gap: 14px; }
    .page-title[b-dqf2ffzwvk]     { font-size: 22px; }
    .form-card[b-dqf2ffzwvk]      { padding: 20px; }
    .form-actions[b-dqf2ffzwvk]   { flex-direction: column-reverse; align-items: stretch; }
}
/* /Pages/Identity/Roles/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Identity › Roles — World-class list page
   Tokens: all colors via CSS custom properties (auto light/dark)
   Metrics: explicit px for spacing/sizing/typography
   ═══════════════════════════════════════════════════════════════ */

/* ── Entry animation ──────────────────────────────────────────── */
@keyframes slide-up-b-k86wz7wwid {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page container ───────────────────────────────────────────── */
.page-container[b-k86wz7wwid] {
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
    animation: slide-up-b-k86wz7wwid 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Page header ──────────────────────────────────────────────── */
.page-header[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.page-header-left[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title[b-k86wz7wwid] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.3px;
}

/* Count pill next to title */
.role-count-pill[b-k86wz7wwid] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    line-height: 1;
    flex-shrink: 0;
}

/* ── Metric cards (§7.3.3) ────────────────────────────────────── */
.metrics-row[b-k86wz7wwid] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 4px;
}

.metric-card[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-k86wz7wwid] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-k86wz7wwid] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-k86wz7wwid] { width: 22px; height: 22px; fill: currentColor !important; }

.metric-icon-blue[b-k86wz7wwid]   { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--accent-foreground-rest); }
.metric-icon-green[b-k86wz7wwid]  { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
.metric-icon-purple[b-k86wz7wwid] { background: color-mix(in srgb, var(--accent-fill-rest) 22%, transparent); color: var(--accent-foreground-rest); }
.metric-icon-red[b-k86wz7wwid]    { background: color-mix(in srgb, #c62828 12%, transparent); color: #c62828; }
.metric-icon-amber[b-k86wz7wwid]  { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

.metric-body[b-k86wz7wwid] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.metric-value[b-k86wz7wwid] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-k86wz7wwid] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-k86wz7wwid] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Toolbar: filter chips + search ──────────────────────────── */
.list-toolbar[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-chipbar[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-chip[b-k86wz7wwid] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
    line-height: 1.4;
}

.filter-chip:hover[b-k86wz7wwid] {
    background: var(--neutral-fill-hover);
    border-color: var(--neutral-stroke-hover);
}

.filter-chip:focus-visible[b-k86wz7wwid] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.filter-chip--active[b-k86wz7wwid] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

.filter-chip--active:hover[b-k86wz7wwid] {
    background: var(--accent-fill-hover);
    border-color: var(--accent-fill-hover);
}

.chip-count[b-k86wz7wwid] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,0.12);
    line-height: 1;
}

.filter-chip--active .chip-count[b-k86wz7wwid] {
    background: rgba(255,255,255,0.25);
}

/* Native div wrapper for FluentSearch — scope attr lands here enabling flex sizing */
.list-search[b-k86wz7wwid] {
    flex: 1 1 200px;
    max-width: 320px;
}

/* ── Data card ────────────────────────────────────────────────── */
.list-container[b-k86wz7wwid] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
}

/* ── States: loading / error / empty ────────────────────────── */
.state-container[b-k86wz7wwid] {
    padding: 64px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.state-caption[b-k86wz7wwid] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    max-width: 320px;
    line-height: 1.5;
}

.state-caption--error[b-k86wz7wwid] {
    color: var(--error-foreground-rest, #dc2626);
}

.empty-icon-wrap[b-k86wz7wwid] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--neutral-fill-rest);
    border: 1px solid var(--neutral-stroke-rest);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.empty-icon-wrap svg[b-k86wz7wwid] { opacity: 0.5; }

.empty-heading[b-k86wz7wwid] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── Grid: name cell ──────────────────────────────────────────── */
.name-cell[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Role initial avatar circle */
.role-avatar[b-k86wz7wwid] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    user-select: none;
    line-height: 1;
}

.name-info[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.role-name[b-k86wz7wwid] {
    font-weight: 500;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Role type tags */
.role-tag[b-k86wz7wwid] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.tag-system[b-k86wz7wwid] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

.tag-default[b-k86wz7wwid] {
    background: var(--neutral-fill-rest);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
}

/* ── Grid: boolean cells ──────────────────────────────────────── */
.bool-yes[b-k86wz7wwid],
.bool-no[b-k86wz7wwid] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bool-no[b-k86wz7wwid] {
    font-size: 16px;
    color: var(--neutral-foreground-hint);
    opacity: 0.4;
    line-height: 1;
}

/* ── Grid: horizontal overflow safety net ────────────────────── */
.grid-scroll-wrapper[b-k86wz7wwid] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-k86wz7wwid] table.roles-grid {
    width: 100%;
    min-width: 640px;
}

/* Center the icon columns in the grid */
[b-k86wz7wwid] .roles-grid th:nth-child(3),
[b-k86wz7wwid] .roles-grid th:nth-child(4),
[b-k86wz7wwid] .roles-grid td:nth-child(3),
[b-k86wz7wwid] .roles-grid td:nth-child(4) {
    text-align: center;
}

/* ── Grid: row actions (hover-reveal) ────────────────────────── */
/* Initial hidden state — global-styles.css handles tr.hover .row-actions { opacity:1 }
   and mobile always-visible via @media (max-width:640px) in global-styles.css.      */
.row-actions[b-k86wz7wwid] {
    /* No width/stretch needed: the row-actions-col grid track is "auto" (see
       GridTemplateColumns in Index.razor), so the cell sizes itself to this div's
       own natural (shrink-to-fit) content width — the div never needs to fill a
       wider cell, sidestepping the sticky/percentage-resolution issues a fixed-px
       track previously caused. See feedback memory on the roles-grid CSS saga for
       the rejected width:100%/position:absolute attempts and why they were needed
       only because the cell was a fixed size wider than the buttons. */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.row-action-btn[b-k86wz7wwid] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    /* color, border, hover states defined in global-styles.css */
    line-height: 0;
    flex-shrink: 0;
}

.row-action-btn svg[b-k86wz7wwid] { fill: currentColor !important; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-k86wz7wwid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-k86wz7wwid] { padding: 16px; gap: 12px; }
    .page-title[b-k86wz7wwid]     { font-size: 22px; }

    .page-header[b-k86wz7wwid] {
        flex-direction: column;
        align-items: flex-start;
    }

    .list-toolbar[b-k86wz7wwid]   { flex-direction: column; align-items: stretch; }
    .list-search[b-k86wz7wwid]    { max-width: 100%; flex: auto; }
    .filter-chipbar[b-k86wz7wwid] { justify-content: flex-start; }
}

@media (max-width: 480px) {
    .metrics-row[b-k86wz7wwid] { grid-template-columns: 1fr; }
}

/* ── Page header ──────────────────────────────────────────────── */
.page-header[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

/* ── Name cell ────────────────────────────────────────────────── */
.name-cell[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-name[b-k86wz7wwid] {
    font-weight: 500;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.system-badge[b-k86wz7wwid] {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.default-badge[b-k86wz7wwid] {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* ── Column filter popup ──────────────────────────────────────── */
/* FluentDataGrid renders ColumnOptions inside a popup panel      */
.col-filter-pop[b-k86wz7wwid] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    min-width: 200px;
}

.col-filter-label[b-k86wz7wwid] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--neutral-foreground-hint);
}

.col-filter-clear[b-k86wz7wwid] {
    align-self: flex-start;
    padding: 4px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms ease;
}

.col-filter-clear:hover[b-k86wz7wwid] { background: var(--neutral-fill-hover); }

/* Tristate button group (All / Yes / No) */
.filter-tri[b-k86wz7wwid] {
    display: flex;
    gap: 4px;
}

.tri-btn[b-k86wz7wwid] {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
    text-align: center;
}

.tri-btn:hover[b-k86wz7wwid] {
    background: var(--neutral-fill-hover);
    border-color: var(--neutral-stroke-hover);
}

.tri-btn:focus-visible[b-k86wz7wwid] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.tri-btn--active[b-k86wz7wwid] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font-weight: 600;
}

.tri-btn--active:hover[b-k86wz7wwid] {
    background: var(--accent-fill-hover);
    border-color: var(--accent-fill-hover);
}

/* ── Active filters indicator bar ────────────────────────────── */
.active-filters-bar[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.active-filters-label[b-k86wz7wwid] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
}

.active-filter-chip[b-k86wz7wwid] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--neutral-fill-rest);
    border: 1px solid var(--neutral-stroke-rest);
    font-size: 12px;
    color: var(--neutral-foreground-rest);
}

.active-filter-chip strong[b-k86wz7wwid] { font-weight: 600; }

.remove-filter-btn[b-k86wz7wwid] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: 2px;
    transition: background 100ms ease;
}

.remove-filter-btn:hover[b-k86wz7wwid] {
    background: var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
}

.clear-all-btn[b-k86wz7wwid] {
    padding: 3px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    background: transparent;
    color: var(--accent-foreground-rest);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
    flex-shrink: 0;
}

.clear-all-btn:hover[b-k86wz7wwid] { background: var(--neutral-fill-hover); }

.filter-match-count[b-k86wz7wwid] {
    margin-left: auto;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Page header text (subtitle) ─────────────────────────────── */
.page-header-text[b-k86wz7wwid] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-subtitle[b-k86wz7wwid] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Skeleton loading list ────────────────────────────────────── */
.skeleton-list[b-k86wz7wwid] {
    padding: 8px 0;
}

.skeleton-row[b-k86wz7wwid] {
    display: grid;
    padding: 10px 16px;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-k86wz7wwid] { border-bottom: none; }

.skeleton-cell[b-k86wz7wwid] {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--neutral-fill-rest) 25%, var(--neutral-fill-hover) 50%, var(--neutral-fill-rest) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-k86wz7wwid 1.5s infinite;
}

@keyframes shimmer-b-k86wz7wwid {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── List footer ──────────────────────────────────────────────── */
.list-footer[b-k86wz7wwid] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    gap: 12px;
    flex-wrap: wrap;
}

.results-count[b-k86wz7wwid] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-k86wz7wwid] {
        padding: 16px;
    }

    .page-header[b-k86wz7wwid] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title[b-k86wz7wwid] {
        font-size: 22px;
    }

    .row-actions[b-k86wz7wwid] {
        opacity: 1;
    }

    .search-wrapper[b-k86wz7wwid] {
        max-width: 100%;
    }
}
/* /Pages/Identity/Roles/Permissions.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-1jcswdeqq1 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-1jcswdeqq1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 900px;
    margin: 0 auto;
    animation: card-enter-b-1jcswdeqq1 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-1jcswdeqq1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-1jcswdeqq1] { display: flex; flex-direction: column; gap: 2px; }
.page-title[b-1jcswdeqq1]    { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-1jcswdeqq1] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.page-actions[b-1jcswdeqq1]  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Section card ────────────────────────────────────────────────────────── */
.section-card[b-1jcswdeqq1] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── List toolbar ────────────────────────────────────────────────────────── */
.list-toolbar[b-1jcswdeqq1] { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-1jcswdeqq1] { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.skeleton-row[b-1jcswdeqq1]  { display: flex; gap: 12px; align-items: center; }

/* ── Empty / error state box ─────────────────────────────────────────────── */
.state-box[b-1jcswdeqq1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-box--compact[b-1jcswdeqq1] { padding: 24px; }
.state-icon[b-1jcswdeqq1]    { opacity: .35; }
.state-title[b-1jcswdeqq1]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-1jcswdeqq1] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Permission tree ─────────────────────────────────────────────────────── */
.permission-tree[b-1jcswdeqq1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.permission-module[b-1jcswdeqq1] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.permission-children[b-1jcswdeqq1] {
    padding-left: 24px;
    border-left: 2px solid var(--neutral-stroke-rest);
    margin-left: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Form actions (right-aligned, Cancel then Save) ─────────────────────── */
.form-actions[b-1jcswdeqq1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── Save error banner ───────────────────────────────────────────────────── */
.save-error-banner[b-1jcswdeqq1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--error-fill-rest, #fef2f2);
    border: 1px solid var(--error-stroke-rest, #fca5a5);
    color: var(--error-foreground, #b91c1c);
    font-size: 13px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) { .page-container[b-1jcswdeqq1] { padding: 20px 20px 32px; } }
@media (max-width: 768px)  { .page-container[b-1jcswdeqq1] { padding: 16px 12px 24px; } }

/* /Pages/Identity/Users/Create.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-zciu1s9tgt {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-zciu1s9tgt] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 860px;
    margin: 0 auto;
    animation: card-enter-b-zciu1s9tgt 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-zciu1s9tgt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-zciu1s9tgt] { display: flex; flex-direction: column; gap: 2px; }
.page-title[b-zciu1s9tgt]    { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-zciu1s9tgt] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.page-actions[b-zciu1s9tgt]  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Section card ────────────────────────────────────────────────────────── */
.section-card[b-zciu1s9tgt] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Error banner ────────────────────────────────────────────────────────── */
.form-error-banner[b-zciu1s9tgt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 8px;
    color: var(--error-foreground-rest, #dc2626);
    font-size: 14px;
}

.form-error-banner svg[b-zciu1s9tgt] { fill: currentColor !important; flex-shrink: 0; }

/* ── Form fields / actions ───────────────────────────────────────────────── */
.form-fields[b-zciu1s9tgt]  { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-actions[b-zciu1s9tgt] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Custom field helpers ────────────────────────────────────────────────── */
.field-flex[b-zciu1s9tgt] { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }

.form-select[b-zciu1s9tgt] {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 6px 10px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/* ── Role grid ───────────────────────────────────────────────────────────── */
.role-grid[b-zciu1s9tgt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-zciu1s9tgt] { display: flex; flex-direction: column; gap: 8px; }
.skeleton-row[b-zciu1s9tgt]  { display: flex; gap: 12px; align-items: center; }

/* ── State box ───────────────────────────────────────────────────────────── */
.state-box[b-zciu1s9tgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-box--compact[b-zciu1s9tgt] { padding: 24px; }
.state-icon[b-zciu1s9tgt]    { opacity: .35; }
.state-title[b-zciu1s9tgt]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-zciu1s9tgt] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-zciu1s9tgt] { padding: 16px 12px 24px; }
    .role-grid[b-zciu1s9tgt]      { grid-template-columns: 1fr; }
}
/* /Pages/Identity/Users/CreateUserModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CreateUserModal — World-class Form View (AI-Agent-UI-Generation-Guide §7.4)
   Outlined inputs handled globally in global-styles.css.
   This file covers dialog-specific layout, sections, chips, and toggles.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Dialog Body & Footer chrome ───────────────────────────────────────────
   All body/footer styles (padding, border, bg, box-shadow, flex layout) live
   in global-styles.css. ::deep from this scoped file cannot reach those divs
   because their ancestor chain doesn't include this component's scope attr.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── SECTIONS — horizontal rhythm with bottom-border dividers ────────────── */
.form-section[b-es8ct9s0l5] {
    padding: 24px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.form-section.last[b-es8ct9s0l5] {
    padding-bottom: 8px;
    border-bottom: none;
}

/* Section header: FluentIcon (16px) + small-caps uppercase label */
.form-section-header[b-es8ct9s0l5] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.form-section-header span[b-es8ct9s0l5] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-foreground-hint);
}

/* Icon inside section header — muted fill, constrained size */
.form-section-header svg[b-es8ct9s0l5] {
    fill: var(--neutral-foreground-hint) !important;
    width: 14px;
    height: 14px;
}

/* ── 2-COLUMN FORM GRID ──────────────────────────────────────────────────── */
.form-grid[b-es8ct9s0l5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}

/* Wrapper div per field: single grid item; label stacks above input inside */
/* minmax(0,1fr) + min-width:0 prevent web-component from blowing out column */
.form-grid > div[b-es8ct9s0l5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* fluent-select inside a wrapper div fills its container */
.form-grid fluent-select[b-es8ct9s0l5] {
    width: 100%;
}

.form-grid > .full-width[b-es8ct9s0l5] {
    grid-column: 1 / -1;
}

/* ── STANDALONE LABEL (for non-FluentTextField items: chips, toggles) ──── */
.field-label[b-es8ct9s0l5] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ── ROLE CHIPS — pill multi-select ──────────────────────────────────────── */
.role-chips[b-es8ct9s0l5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
}

.role-chip[b-es8ct9s0l5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border: 1.5px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
    font-family: inherit;
    white-space: nowrap;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.role-chip:hover:not(.chip-selected)[b-es8ct9s0l5] {
    border-color: var(--neutral-stroke-strong-rest);
    background: var(--neutral-fill-hover);
    color: var(--neutral-foreground-rest);
}

.role-chip.chip-selected[b-es8ct9s0l5] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest);
    color: #ffffff;
}

.role-chip.chip-selected svg[b-es8ct9s0l5] {
    fill: #ffffff !important;
    width: 12px;
    height: 12px;
}

.role-chip:focus-visible[b-es8ct9s0l5] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 2px;
}

.role-chips-empty[b-es8ct9s0l5] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    padding: 6px 0;
}

/* Primary branch badge inside chip */
.primary-badge[b-es8ct9s0l5] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 2px;
    line-height: 1.5;
    vertical-align: middle;
}

/* Hint text below chip group */
.field-hint[b-es8ct9s0l5] {
    display: block;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 6px;
    line-height: 1.4;
}

/* ── STATUS TOGGLE ROW (IsActive, IsEnabled booleans) ─────────────────── */
.status-toggle-row[b-es8ct9s0l5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.status-toggle-info[b-es8ct9s0l5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.status-toggle-title[b-es8ct9s0l5] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.status-toggle-desc[b-es8ct9s0l5] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .form-grid[b-es8ct9s0l5] { grid-template-columns: 1fr; }
    .status-toggle-row[b-es8ct9s0l5] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/Identity/Users/Edit.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-lw02exeymm {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-lw02exeymm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 900px;
    margin: 0 auto;
    animation: card-enter-b-lw02exeymm 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-lw02exeymm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-lw02exeymm] { display: flex; flex-direction: column; gap: 2px; }
.page-title[b-lw02exeymm]    { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-lw02exeymm] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.page-actions[b-lw02exeymm]  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Section cards ───────────────────────────────────────────────────────── */
.section-card[b-lw02exeymm] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.section-title[b-lw02exeymm] { margin: 0; font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); }

/* ── Error banner ────────────────────────────────────────────────────────── */
.form-error-banner[b-lw02exeymm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 8px;
    color: var(--error-foreground-rest, #dc2626);
    font-size: 14px;
}

.form-error-banner svg[b-lw02exeymm] { fill: currentColor !important; flex-shrink: 0; }

/* ── Form fields / actions ───────────────────────────────────────────────── */
.form-fields[b-lw02exeymm]  { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-actions[b-lw02exeymm] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Custom field helpers ────────────────────────────────────────────────── */
.field-flex[b-lw02exeymm] { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }

.form-select[b-lw02exeymm] {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 6px 10px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/* ── Role grid ───────────────────────────────────────────────────────────── */
.role-grid[b-lw02exeymm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
}

/* ── Detail row (for MFA section) ────────────────────────────────────────── */
.detail-row[b-lw02exeymm]   { display: flex; align-items: baseline; gap: 12px; }
.detail-label[b-lw02exeymm] {
    width: 120px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-badge[b-lw02exeymm] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
}
.status-badge--active[b-lw02exeymm]   { background: #dcfce7; color: #15803d; }
.status-badge--inactive[b-lw02exeymm] { background: #f1f5f9; color: #64748b; }

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-lw02exeymm] { display: flex; flex-direction: column; gap: 8px; }
.skeleton-row[b-lw02exeymm]  { display: flex; gap: 12px; align-items: center; }

/* ── State box ───────────────────────────────────────────────────────────── */
.state-box[b-lw02exeymm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-icon[b-lw02exeymm]    { opacity: .35; }
.state-title[b-lw02exeymm]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-lw02exeymm] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-lw02exeymm] { padding: 16px 12px 24px; }
    .role-grid[b-lw02exeymm]      { grid-template-columns: 1fr; }
    .detail-label[b-lw02exeymm]   { width: 80px; }
}
/* /Pages/Identity/Users/EditUserModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   EditUserModal — World-class Form View (AI-Agent-UI-Generation-Guide §7.4)
   Mirrors CreateUserModal layout exactly.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Dialog Body & Footer chrome ───────────────────────────────────────────
   All body/footer styles (padding, border, bg, box-shadow, flex layout) live
   in global-styles.css. ::deep from this scoped file cannot reach those divs
   because their ancestor chain doesn't include this component's scope attr.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── SECTIONS ──────────────────────────────────────────────────────────────── */
.form-section[b-kvlxifyrlf] {
    padding: 24px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.form-section.last[b-kvlxifyrlf] {
    padding-bottom: 8px;
    border-bottom: none;
}

.form-section-header[b-kvlxifyrlf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.form-section-header span[b-kvlxifyrlf] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-foreground-hint);
}

.form-section-header svg[b-kvlxifyrlf] {
    fill: var(--neutral-foreground-hint) !important;
    width: 14px;
    height: 14px;
}

/* ── 2-COLUMN FORM GRID ──────────────────────────────────────────────────── */
.form-grid[b-kvlxifyrlf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}

.form-grid > *[b-kvlxifyrlf] {
    min-width: 0;
}

/* Wrapper div per field: single grid item; label stacks above input inside */
.form-grid > div[b-kvlxifyrlf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* fluent-select inside a wrapper div fills its container */
.form-grid fluent-select[b-kvlxifyrlf] {
    width: 100%;
}

.form-grid > .full-width[b-kvlxifyrlf] {
    grid-column: 1 / -1;
}

/* ── STATUS TOGGLE ROW ────────────────────────────────────────────────────── */
.status-toggle-row[b-kvlxifyrlf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.status-toggle-info[b-kvlxifyrlf] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.status-toggle-title[b-kvlxifyrlf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.status-toggle-desc[b-kvlxifyrlf] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── STANDALONE LABEL (for non-FluentTextField items: chips, toggles) ──── */
.field-label[b-kvlxifyrlf] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ── BRANCH / ROLE CHIPS — pill multi-select ──────────────────────────── */
.role-chips[b-kvlxifyrlf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
}

.role-chip[b-kvlxifyrlf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border: 1.5px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
    font-family: inherit;
    white-space: nowrap;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.role-chip:hover:not(.chip-selected)[b-kvlxifyrlf] {
    border-color: var(--neutral-stroke-strong-rest);
    background: var(--neutral-fill-hover);
    color: var(--neutral-foreground-rest);
}

.role-chip.chip-selected[b-kvlxifyrlf] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest);
    color: #ffffff;
}

.role-chip.chip-selected svg[b-kvlxifyrlf] {
    fill: #ffffff !important;
    width: 12px;
    height: 12px;
}

.role-chip:focus-visible[b-kvlxifyrlf] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 2px;
}

.role-chips-empty[b-kvlxifyrlf] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    padding: 6px 0;
}

/* Primary branch badge inside chip */
.primary-badge[b-kvlxifyrlf] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 2px;
    line-height: 1.5;
    vertical-align: middle;
}

/* Hint text below chip group */
.field-hint[b-kvlxifyrlf] {
    display: block;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 6px;
    line-height: 1.4;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .form-grid[b-kvlxifyrlf] { grid-template-columns: 1fr; }
    .status-toggle-row[b-kvlxifyrlf] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/Identity/Users/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Users list — world-class design
   Misty-calm palette · responsive · ARIA-friendly · dark-mode ready
   ═══════════════════════════════════════════════════════════ */

/* ── Entry animation ─────────────────────────────────────── */
@keyframes page-in-b-kjilyhhr2i {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page scaffold ───────────────────────────────────────── */
.page-container[b-kjilyhhr2i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    animation: page-in-b-kjilyhhr2i 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Page header ─────────────────────────────────────────── */
.page-header[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.page-header-left[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title[b-kjilyhhr2i] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    letter-spacing: -0.01em;
}

.user-count-pill[b-kjilyhhr2i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 11px;
    letter-spacing: 0.02em;
}

/* ── KPI tiles ───────────────────────────────────────────── */
.kpi-row[b-kjilyhhr2i] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.kpi-tile[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 12px;
    padding: 14px 18px;
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.kpi-tile:hover[b-kjilyhhr2i] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.kpi-value-block[b-kjilyhhr2i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 52px;
}

.kpi-number[b-kjilyhhr2i] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--neutral-foreground-rest);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kpi-number--success[b-kjilyhhr2i] { color: #059669; }
.kpi-number--accent[b-kjilyhhr2i]  { color: var(--accent-fill-rest); }
.kpi-number--warn[b-kjilyhhr2i]    { color: #D97706; }

.kpi-label[b-kjilyhhr2i] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

.kpi-divider[b-kjilyhhr2i] {
    width: 1px;
    height: 36px;
    background: var(--neutral-stroke-layer-rest);
    flex-shrink: 0;
}

.kpi-meta[b-kjilyhhr2i] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.list-toolbar[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Filter chips ────────────────────────────────────────── */
.filter-chipbar[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-chip[b-kjilyhhr2i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.filter-chip:hover[b-kjilyhhr2i] {
    background: var(--neutral-layer-3);
    border-color: var(--neutral-stroke-hover);
}

.filter-chip--active[b-kjilyhhr2i] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font-weight: 600;
}

.filter-chip--active:hover[b-kjilyhhr2i] {
    background: var(--accent-fill-hover);
    border-color: var(--accent-fill-hover);
}

.chip-count[b-kjilyhhr2i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 9px;
    font-size: 0.68rem;
    font-weight: 700;
}

.filter-chip--active .chip-count[b-kjilyhhr2i] {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Search ──────────────────────────────────────────────── */
.search-wrap[b-kjilyhhr2i] {
    flex: 1;
    min-width: 220px;
    max-width: 340px;
    margin-left: auto;
}

/* ── List card ───────────────────────────────────────────── */
[b-kjilyhhr2i] .list-container {
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid var(--neutral-stroke-layer-rest) !important;
}

/* ── State screens ───────────────────────────────────────── */
.state-container[b-kjilyhhr2i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 32px;
    text-align: center;
}

.empty-icon-wrap[b-kjilyhhr2i] {
    opacity: 0.3;
    margin-bottom: 4px;
}

.empty-heading[b-kjilyhhr2i] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.state-caption[b-kjilyhhr2i] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 320px;
}

.state-caption--error[b-kjilyhhr2i] {
    color: var(--error-foreground-rest, #ef4444);
}

/* ── Active-filter indicator bar ─────────────────────────── */
.active-filters-bar[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent-fill-rest);
    background: rgba(var(--accent-fill-rest-rgb, 79, 70, 229), 0.05);
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    font-size: 0.8rem;
}

.active-filters-label[b-kjilyhhr2i] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.active-filter-chip[b-kjilyhhr2i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 10px;
    background: var(--neutral-layer-3);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
}

.remove-filter-btn[b-kjilyhhr2i] {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    border-radius: 50%;
    transition: color 120ms;
}

.remove-filter-btn:hover[b-kjilyhhr2i] { color: var(--neutral-foreground-rest); }

.clear-all-btn[b-kjilyhhr2i] {
    background: none;
    border: none;
    padding: 2px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--accent-fill-rest);
    border-radius: 4px;
    transition: opacity 120ms;
}

.clear-all-btn:hover[b-kjilyhhr2i] { opacity: 0.75; }

.filter-match-count[b-kjilyhhr2i] {
    margin-left: auto;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Data grid ───────────────────────────────────────────── */
[b-kjilyhhr2i] table.users-grid {
    width: 100%;
    min-width: 650px;
}

/* ── Grid scroll wrapper (horizontal overflow safety net) ── */
.grid-scroll-wrapper[b-kjilyhhr2i] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-kjilyhhr2i] .users-grid thead tr {
    background: var(--neutral-layer-2);
    border-bottom: 2px solid var(--neutral-stroke-layer-rest);
}

[b-kjilyhhr2i] .users-grid thead th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
    padding: 10px 12px;
}

[b-kjilyhhr2i] .users-grid tbody tr {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background 120ms ease;
}

[b-kjilyhhr2i] .users-grid tbody tr:last-child {
    border-bottom: none;
}

[b-kjilyhhr2i] .users-grid tbody tr:hover {
    background: var(--neutral-layer-3);
}

[b-kjilyhhr2i] .users-grid tbody td {
    padding: 9px 12px;
    vertical-align: middle;
}

/* ── Row actions (hidden by default, shown in hover) ─────── */
.row-actions[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    opacity: 0;
    transition: opacity 150ms ease;
}

[b-kjilyhhr2i] .users-grid tr:hover .row-actions {
    opacity: 1;
}

.row-action-btn[b-kjilyhhr2i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    transition: background 130ms ease, color 130ms ease;
    outline: none;
    padding: 0;
}

.row-action-btn:hover[b-kjilyhhr2i] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.row-action-btn:disabled[b-kjilyhhr2i] {
    opacity: 0.3;
    cursor: not-allowed;
}

.row-action-btn--warn:hover[b-kjilyhhr2i] {
    background: rgba(217, 119, 6, 0.10);
    color: #D97706;
}

.row-action-btn--danger:hover[b-kjilyhhr2i] {
    background: rgba(220, 38, 38, 0.10);
    color: #DC2626;
}

/* ── User cell (avatar + name + email) ───────────────────── */
.user-cell[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.user-avatar[b-kjilyhhr2i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    user-select: none;
}

.user-info[b-kjilyhhr2i] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.user-fullname[b-kjilyhhr2i] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-meta[b-kjilyhhr2i] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-emp-code[b-kjilyhhr2i] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* ── Org cell ────────────────────────────────────────────── */
.org-cell[b-kjilyhhr2i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.org-branch[b-kjilyhhr2i] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-dept[b-kjilyhhr2i] {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-empty[b-kjilyhhr2i] {
    color: var(--neutral-foreground-hint);
    opacity: 0.45;
    font-size: 0.875rem;
}

/* ── Status badge ────────────────────────────────────────── */
.status-badge[b-kjilyhhr2i] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-badge--active[b-kjilyhhr2i] {
    background: rgba(5, 150, 105, 0.10);
    color: #059669;
    border-color: rgba(5, 150, 105, 0.20);
}

.status-badge--inactive[b-kjilyhhr2i] {
    background: rgba(107, 114, 128, 0.10);
    color: #6B7280;
    border-color: rgba(107, 114, 128, 0.20);
}

/* ── MFA indicator ───────────────────────────────────────── */
.mfa-on[b-kjilyhhr2i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mfa-off[b-kjilyhhr2i] {
    color: var(--neutral-foreground-hint);
    opacity: 0.4;
    font-size: 0.875rem;
}

/* ── Column filter popup ─────────────────────────────────── */
.col-filter-pop[b-kjilyhhr2i] {
    padding: 12px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.col-filter-label[b-kjilyhhr2i] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--neutral-foreground-hint);
    margin: 0 0 2px;
}

.col-filter-clear[b-kjilyhhr2i] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 2px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--accent-fill-rest);
    border-radius: 4px;
    transition: opacity 120ms;
}

.col-filter-clear:hover[b-kjilyhhr2i] { opacity: 0.75; }

/* ── Tristate filter buttons ─────────────────────────────── */
.filter-tri[b-kjilyhhr2i] {
    display: flex;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    overflow: hidden;
}

.tri-btn[b-kjilyhhr2i] {
    flex: 1;
    padding: 5px 8px;
    background: var(--neutral-layer-2);
    border: none;
    border-right: 1px solid var(--neutral-stroke-rest);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    white-space: nowrap;
}

.tri-btn:last-child[b-kjilyhhr2i] { border-right: none; }

.tri-btn:hover[b-kjilyhhr2i] {
    background: var(--neutral-layer-3);
}

.tri-btn--active[b-kjilyhhr2i] {
    background: var(--accent-fill-rest) !important;
    color: var(--foreground-on-accent-rest);
    font-weight: 700;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kpi-row[b-kjilyhhr2i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-container[b-kjilyhhr2i] {
        padding: 16px;
    }

    .kpi-row[b-kjilyhhr2i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kpi-tile[b-kjilyhhr2i] {
        padding: 12px 14px;
        gap: 12px;
    }

    .kpi-number[b-kjilyhhr2i] { font-size: 1.4rem; }

    .list-toolbar[b-kjilyhhr2i] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrap[b-kjilyhhr2i] {
        max-width: 100%;
        margin-left: 0;
    }

    .filter-chipbar[b-kjilyhhr2i] {
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .kpi-row[b-kjilyhhr2i] {
        grid-template-columns: 1fr 1fr;
    }

    .kpi-divider[b-kjilyhhr2i] { display: none; }

    .kpi-meta[b-kjilyhhr2i] { display: none; }

    .page-title[b-kjilyhhr2i] { font-size: 1.2rem; }
}
/* /Pages/Identity/Users/Users.razor.rz.scp.css */
/* ==========================================================================
   Users — List View  (Stitch-grade)
   Tokens: FluentDesignSystemProvider drives all colour values.
   No hardcoded light/dark colour values except semantic RGBA status colours.
   ========================================================================== */

/* ── PAGE SHELL ────────────────────────────────────────────────────────── */
.page-container[b-jdco1vw96z] {
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-jdco1vw96z 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes card-enter-b-jdco1vw96z {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PAGE HEADER ───────────────────────────────────────────────────────── */
.page-header[b-jdco1vw96z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-jdco1vw96z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-jdco1vw96z] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.02em;
}

.page-subtitle[b-jdco1vw96z] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-jdco1vw96z] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── METRIC CARDS ───────────────────────────────────────────────────────── */
.metrics-row[b-jdco1vw96z] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card[b-jdco1vw96z] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-jdco1vw96z] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-jdco1vw96z] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-jdco1vw96z] {
    width: 24px;
    height: 24px;
    fill: currentColor !important;
}

.metric-icon-blue[b-jdco1vw96z]   { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);                                  color: var(--accent-foreground-rest); }
.metric-icon-green[b-jdco1vw96z]  { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent);   color: var(--success-foreground-rest, #16a34a); }
.metric-icon-purple[b-jdco1vw96z] { background: color-mix(in srgb, var(--accent-fill-rest) 20%, transparent);                                  color: var(--accent-foreground-rest); }
.metric-icon-red[b-jdco1vw96z]    { background: color-mix(in srgb, var(--error-foreground-rest, #c62828) 12%, transparent);     color: var(--error-foreground-rest, #c62828); }

.metric-body[b-jdco1vw96z] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-jdco1vw96z] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-jdco1vw96z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-jdco1vw96z] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── LIST CONTAINER ────────────────────────────────────────────────────── */
.list-container[b-jdco1vw96z] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    /* overflow: hidden removed — it clips FluentSelect dropdown popups and
       creates a stacking context that traps anchored-region z-index.        */
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    position: relative;
}

/* ── TOOLBAR ───────────────────────────────────────────────────────────── */
/* Wrapping flex row: search stays left, filters right-align and wrap when
   the viewport gets too narrow. This prevents overflow past the card edge. */
.list-toolbar[b-jdco1vw96z] {
    display: flex;
    align-items: center;           /* vertically center search & filters */
    flex-wrap: wrap;               /* wrap to second row before overflowing */
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
    border-radius: 12px 12px 0 0;  /* top corners match container          */
    position: relative;
    z-index: 10;                   /* dropdowns layer above grid rows      */
}

.list-search[b-jdco1vw96z] {
    flex: 0 0 260px;               /* fixed width — keeps gap predictable  */
    max-width: 260px;
}

/* Thin vertical rule between search and filters */
.toolbar-divider[b-jdco1vw96z] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-jdco1vw96z] {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 8px;
    flex: 1;                       /* fill remaining toolbar width          */
}

/* fluent-select fills its grid cell (Style="width:100%" on element also set) */
.toolbar-filters fluent-select[b-jdco1vw96z] {
    width: 100%;
}

/* ── SKELETON LOADING ───────────────────────────────────────────────────── */
.skeleton-list[b-jdco1vw96z] {
    display: flex;
    flex-direction: column;
}

.skeleton-row[b-jdco1vw96z] {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 0.85fr 1fr 0.5fr;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: transparent;
}

.skeleton-row:last-child[b-jdco1vw96z] {
    border-bottom: none;
}

.skeleton-persona[b-jdco1vw96z] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skeleton-persona-text[b-jdco1vw96z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── STATE BOX (empty / error) ─────────────────────────────────────────── */
.state-box[b-jdco1vw96z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 32px;
    text-align: center;
    gap: 12px;
}

.state-icon[b-jdco1vw96z] {
    color: var(--neutral-foreground-hint);
    opacity: 0.4;
    margin-bottom: 8px;
}

.state-icon-error[b-jdco1vw96z] {
    color: var(--error-foreground-rest, #c62828);
    opacity: 0.8;
}

.state-title[b-jdco1vw96z] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-message[b-jdco1vw96z] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    max-width: 360px;
}

/* ── DATA GRID ─────────────────────────────────────────────────────────── */
[b-jdco1vw96z] table.users-grid {
    width: 100%;
    background: transparent;
}

/* Header cell container — transparent, no panel look.
   Anchored on .page-container (carries Users.razor scope b-attr) so ::deep
   correctly reaches <th class="column-header"> which lives inside FluentDataGrid. */
.page-container[b-jdco1vw96z]  th.column-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    padding: 10px 0;
    /* MUST be opaque: GenerateHeaderOption.Sticky makes this row position:sticky
       (see FluentDataGridRow's tr[row-type='sticky-header'] > th rule). A
       transparent background lets data rows scroll up underneath the pinned
       header, so header text and the topmost row's text overlap and both
       become unreadable. */
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    white-space: nowrap;
}

/* Sort button is <fluent-button appearance="stealth"> — a web component.
   CSS custom properties DO cascade through shadow DOM boundaries.
   Setting them on the host element (fluent-button) overrides the fill tokens
   used inside its shadow root, making it look like plain text, not a button. */
.page-container[b-jdco1vw96z]  th.column-header fluent-button {
    /* Rest & focus: fully transparent — no button background */
    --neutral-fill-stealth-rest:   transparent;
    --neutral-fill-stealth-focus:  transparent;
    --neutral-fill-stealth-active: color-mix(in srgb, #616161 8%, transparent);
    /* Hover: very subtle tint so user knows it is interactive */
    --neutral-fill-stealth-hover:  color-mix(in srgb, #616161 6%, transparent);
    /* Inherit foreground from header cell — use plain hex; var() references for
       FluentUI FAST tokens cause infinite recursion in the reactive evaluator */
    --neutral-foreground-rest: #616161;
    /* Remove min-width / height constraints */
    min-width: unset;
    width: 100%;
}

/* Grid data rows — always transparent base; hover supplied by FluentUI ShowHover */
.page-container[b-jdco1vw96z]  .users-grid-row {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background 150ms ease;
    background: transparent;
}

.page-container[b-jdco1vw96z]  .users-grid-row:last-child {
    border-bottom: none;
}

.page-container[b-jdco1vw96z]  .users-grid-row:hover {
    background: var(--neutral-fill-hover);
}

/* Sticky column must match row hover background */
.page-container[b-jdco1vw96z]  .users-grid-row:hover td.col-actions {
    background: var(--neutral-fill-hover);
}

/* Hover-reveal row actions — hidden by default, fully shown on row hover */
.row-actions[b-jdco1vw96z] {
    opacity: 0;
    display: flex;
    gap: 2px;
    transition: opacity 180ms ease;
    justify-content: flex-end;
}

.page-container[b-jdco1vw96z]  .users-grid-row:hover .row-actions,
.page-container[b-jdco1vw96z]  .users-grid-row:focus-within .row-actions {
    opacity: 1;
}

.row-action-btn[b-jdco1vw96z] {
    border: none;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
    transition: background 150ms ease, color 150ms ease;
    line-height: 0;
}

.row-action-btn:hover[b-jdco1vw96z] {
    background: var(--neutral-fill-hover);
    color: var(--neutral-foreground-rest);
}

.row-action-btn:focus-visible[b-jdco1vw96z] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.row-action-danger:hover[b-jdco1vw96z] {
    background: color-mix(in srgb, var(--error-foreground-rest, #c62828) 10%, transparent);
    color: var(--error-foreground-rest, #c62828);
}

/* ── USER PERSONA ──────────────────────────────────────────────────────── */
.user-persona[b-jdco1vw96z] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 4px; /* extra guard so avatar never touches cell edge    */
}

.user-avatar[b-jdco1vw96z] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.user-persona-text[b-jdco1vw96z] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.user-display-name[b-jdco1vw96z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-username[b-jdco1vw96z] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-jdco1vw96z] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

/* Meta row — line 3: emp code + branch/dept */
.user-meta-row[b-jdco1vw96z] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.user-meta-code[b-jdco1vw96z] {
    font-family: var(--mono-font, "Cascadia Code", "Consolas", monospace);
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}

.user-meta-branch[b-jdco1vw96z] {
    font-size: 10px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-meta-sep[b-jdco1vw96z] {
    font-size: 10px;
    color: var(--neutral-foreground-hint);
    opacity: 0.5;
}

/* ── CELL HELPERS ──────────────────────────────────────────────────────── */
.cell-mono[b-jdco1vw96z] {
    font-family: var(--mono-font, "Cascadia Code", "Consolas", monospace);
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    letter-spacing: 0.02em;
}

.cell-branch[b-jdco1vw96z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.branch-name[b-jdco1vw96z] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.dept-name[b-jdco1vw96z] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.cell-empty[b-jdco1vw96z] {
    color: var(--neutral-foreground-hint);
    opacity: 0.5;
}

/* ── STATUS PILLS ──────────────────────────────────────────────────────── */
/* Dark-mode safe: RGBA backgrounds + vivid fixed text colours */
.status-pill[b-jdco1vw96z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

.pill-active[b-jdco1vw96z]   { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
.pill-inactive[b-jdco1vw96z] { background: color-mix(in srgb, var(--neutral-foreground-hint) 12%, transparent); color: var(--neutral-foreground-hint); }
.pill-mfa-on[b-jdco1vw96z]   { background: color-mix(in srgb, var(--accent-foreground-rest) 12%, transparent); color: var(--accent-foreground-rest); }
.pill-mfa-off[b-jdco1vw96z]  { background: color-mix(in srgb, var(--neutral-foreground-hint) 10%, transparent); color: var(--neutral-foreground-hint); }

/* ── ROLE CHIPS ────────────────────────────────────────────────────────── */
.roles-list[b-jdco1vw96z] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.role-chip[b-jdco1vw96z] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--neutral-fill-rest);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-chip-more[b-jdco1vw96z] {
    background: var(--neutral-layer-3);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    cursor: default;
}

/* Single "N Roles" summary chip — replaces rendering every role name inline,
   which wrapped onto extra lines and blew out the row height for users with
   3+ roles. Full role list is available via the title tooltip on hover. */
.role-chip-count[b-jdco1vw96z] {
    background: var(--neutral-layer-3);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    max-width: none;
    cursor: default;
}

/* ── LIST FOOTER (results + paginator) ─────────────────────────────────── */
.list-footer[b-jdco1vw96z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 0 0 10px 10px;  /* bottom corners match container        */
    gap: 16px;
    flex-wrap: wrap;
}

.results-count[b-jdco1vw96z] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* ── GRID SCROLL WRAPPER ─────────────────────────────────────────────────────── */
/* Contains FluentDataGrid + footer. Scrolls horizontally on narrow        */
/* viewports so columns are never truncated. Toolbar stays outside and     */
/* remains full-width at all times.                                         */
.grid-scroll-wrapper[b-jdco1vw96z] {
    overflow: visible; /* desktop: no scroll */
}
/* ── COL WIDTHS ────────────────────────────────────────────────────────── */
/* ColumnBase.Class applies to BOTH header <th> and data <td> in FluentDataGrid. */
[b-jdco1vw96z] .col-persona { padding-left: 16px; overflow: visible; }
[b-jdco1vw96z] .col-actions { padding-right: 12px; }

/* Persona column header alignment fix.
   td.col-persona gets padding-left: 16px (set above) → avatar starts at 16px.
   th.column-header { padding: 10px 0 } overrides that left padding to 0, so
   the <fluent-button>'s internal 10px is the only indent → "Users" lands at 10px.
   Fix: add 6px left on the th so: 6 + 10 (button) = 16 → aligns with the avatar. */
.page-container[b-jdco1vw96z]  th.column-header.col-persona {
    padding-left: 6px;
}

/* ── VERTICAL ALIGNMENT ─────────────────────────────────────────────────── */
/* Root cause: MultiLine="true" adds .multiline-text to every <td>, which    */
/* sets align-content: start — overriding the default align-content: center. */
/* Fix: restore center for all data cells, keep start only for persona.       */
/* NOTE: ::deep must use a space, NOT parentheses — ::deep .foo compiles     */
/* to [scope](.foo) which is invalid CSS and matches nothing.                 */
[b-jdco1vw96z] .users-grid td.multiline-text {
    align-content: center;
}
[b-jdco1vw96z] .users-grid td.col-persona.multiline-text {
    align-content: start;   /* persona 3-line card anchors top */
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-jdco1vw96z] { padding: 24px 20px; }
    /* On touch devices, fully reveal actions (no hover available) */
    .row-actions[b-jdco1vw96z] { opacity: 1; }

    /* Metrics: keep 2-up to stay readable */
    .metrics-row[b-jdco1vw96z] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-jdco1vw96z] { padding: 16px; }
    .page-title[b-jdco1vw96z]  { font-size: 22px; }

    /* ── Page header: keep as one row, hide subtitle on narrow screens ── */
    .page-header[b-jdco1vw96z] { flex-wrap: nowrap; align-items: center; }
    .page-header-text[b-jdco1vw96z] { flex: 1 1 auto; min-width: 0; }
    /* Truncate the long subtitle rather than forcing the button to wrap */
    .page-subtitle[b-jdco1vw96z] { display: none; }
    .page-actions[b-jdco1vw96z] { flex-shrink: 0; }

    /* Summary metrics: 2 × 2 grid on mobile */
    .metrics-row[b-jdco1vw96z] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .metric-card[b-jdco1vw96z] { gap: 12px; padding: 14px; }
    .metric-value[b-jdco1vw96z] { font-size: 12px; }
    .metric-icon-wrap[b-jdco1vw96z] { width: 42px; height: 42px; border-radius: 10px; }
    .metric-icon-wrap svg[b-jdco1vw96z] { width: 20px; height: 20px; }
    .metric-desc[b-jdco1vw96z] { display: none; }

    /* On mobile, stack into 2-row layout */
    .list-toolbar[b-jdco1vw96z] {
        gap: 8px;
    }
    /* Search: full-width on its own row */
    .list-search[b-jdco1vw96z] {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .toolbar-divider[b-jdco1vw96z] { display: none; }

    /* Filters: 2-col grid on mobile */
    .toolbar-filters[b-jdco1vw96z] {
        width: 100%;
        margin-left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* On mobile: hide middle columns via named classes — reliable & row-safe */
    .grid-scroll-wrapper[b-jdco1vw96z] { overflow: visible; }
    [b-jdco1vw96z] .users-grid { min-width: 0; }

    /* Hide IsActive, MFA, Roles columns (keep persona + actions) */
    [b-jdco1vw96z] .users-grid th.col-isactive,
    [b-jdco1vw96z] .users-grid td.col-isactive,
    [b-jdco1vw96z] .users-grid th.col-mfa,
    [b-jdco1vw96z] .users-grid td.col-mfa,
    [b-jdco1vw96z] .users-grid th.col-roles,
    [b-jdco1vw96z] .users-grid td.col-roles {
        display: none;
    }

    /* Actions column: undo sticky (not needed with only 2 cols) */
    [b-jdco1vw96z] .users-grid th.col-actions,
    [b-jdco1vw96z] .users-grid td.col-actions {
        position: static;
        background: transparent;
        box-shadow: none;
    }

    .results-count[b-jdco1vw96z] { display: none; }
    .list-footer[b-jdco1vw96z] { justify-content: center; }
}
/* /Pages/Integrations/ProviderConfigs/Index.razor.rz.scp.css */
/* ── Entry animation ─────────────────────────────────────────────────────── */
@keyframes card-enter-b-iatvlr6f7n {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}
@keyframes shimmer-b-iatvlr6f7n {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-iatvlr6f7n] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 32px 40px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-iatvlr6f7n 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-iatvlr6f7n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-iatvlr6f7n] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-iatvlr6f7n]   { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-iatvlr6f7n] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Hub status grid ──────────────────────────────────────────────────────── */
.hub-grid[b-iatvlr6f7n] {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    gap: 16px;
}

.hub-card[b-iatvlr6f7n] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 200ms ease, border-color 200ms ease;
}
.hub-card:hover[b-iatvlr6f7n] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: var(--neutral-stroke-strong-rest);
}
.hub-card--skeleton[b-iatvlr6f7n] { pointer-events: none; }

.hub-card-top[b-iatvlr6f7n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Hub type avatar (rounded square with per-type accent color) */
.hub-avatar[b-iatvlr6f7n] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    flex-shrink: 0;
    background: var(--accent-fill-rest);
    text-transform: uppercase;
}
.hub-avatar[data-type="Payment"][b-iatvlr6f7n]          { background: #4F46E5; }
.hub-avatar[data-type="SMS"][b-iatvlr6f7n]              { background: #0EA5E9; }
.hub-avatar[data-type="Email"][b-iatvlr6f7n]            { background: #10B981; }
.hub-avatar[data-type="WhatsApp"][b-iatvlr6f7n]         { background: #22C55E; }
.hub-avatar[data-type="KYC"][b-iatvlr6f7n]              { background: #F59E0B; color: #1a1a1a; }
.hub-avatar[data-type="ESignature"][b-iatvlr6f7n]       { background: #8B5CF6; }
.hub-avatar[data-type="CreditBureau"][b-iatvlr6f7n]     { background: #EF4444; }
.hub-avatar[data-type="BankVerification"][b-iatvlr6f7n] { background: #3B82F6; }
.hub-avatar[data-type="OCR"][b-iatvlr6f7n]              { background: #64748B; }

.hub-card-meta[b-iatvlr6f7n] { display: flex; flex-direction: column; gap: 5px; }
.hub-type-name[b-iatvlr6f7n] { font-size: 14px; font-weight: 600; color: var(--neutral-foreground-rest); }

/* Provider status badges */
.provider-badge[b-iatvlr6f7n] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    max-width: fit-content;
}
.provider-badge--unconfigured[b-iatvlr6f7n] {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.2);
}
.provider-badge--mock[b-iatvlr6f7n] {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.provider-badge--live[b-iatvlr6f7n] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.hub-provider-row[b-iatvlr6f7n] { display: flex; flex-direction: column; gap: 3px; }
.hub-provider-label[b-iatvlr6f7n] {
    font-size: 10px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hub-provider-value[b-iatvlr6f7n] {
    font-size: 12px;
    font-family: Consolas, 'Fira Mono', monospace;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-2);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}

.hub-quick-switch[b-iatvlr6f7n] { display: flex; flex-direction: column; gap: 4px; }
.hub-switch-label[b-iatvlr6f7n] { font-size: 11px; color: var(--neutral-foreground-hint); }
.hub-switch-hint[b-iatvlr6f7n]  { font-size: 11px; color: var(--neutral-foreground-hint); font-style: italic; margin: 0; }

/* Skeleton shimmer */
.skeleton-block[b-iatvlr6f7n] {
    background: linear-gradient(90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-iatvlr6f7n 1.5s infinite;
    border-radius: 4px;
}

/* ── List container ───────────────────────────────────────────────────────── */
.list-container[b-iatvlr6f7n] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.section-header-bar[b-iatvlr6f7n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 0;
}
.section-title[b-iatvlr6f7n]   { margin: 0 0 2px; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.section-subtitle[b-iatvlr6f7n] { margin: 0; font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── Filter toolbar ───────────────────────────────────────────────────────── */
.list-toolbar[b-iatvlr6f7n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}
/* Native div wrapper ensures flex sizing lands on a scoped element */
.list-search[b-iatvlr6f7n] { flex: 1 1 200px; max-width: 320px; }

/* ── Grid scroll wrapper ──────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-iatvlr6f7n] { overflow-x: auto; }

/* Safety net: fixed-px columns + two 1fr columns mixed with no min-width
   would otherwise squish proportionally on narrow viewports instead of
   triggering the scroll wrapper above. */
[b-iatvlr6f7n] table.provider-configs-grid { min-width: 920px; }

/* ── Grid cell elements ───────────────────────────────────────────────────── */

/* Per-type colors for the avatar spans inside the data grid */
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar {
    border-radius: 6px;
    width: 34px;
    height: 34px;
    font-size: 11px;
}
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="Payment"]          { background: #4F46E5; color: #fff; }
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="SMS"]              { background: #0EA5E9; color: #fff; }
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="Email"]            { background: #10B981; color: #fff; }
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="WhatsApp"]         { background: #22C55E; color: #fff; }
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="KYC"]              { background: #F59E0B; color: #1a1a1a; }
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="ESignature"]       { background: #8B5CF6; color: #fff; }
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="CreditBureau"]     { background: #EF4444; color: #fff; }
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="BankVerification"] { background: #3B82F6; color: #fff; }
[b-iatvlr6f7n] .provider-configs-grid .grid-avatar[data-type="OCR"]              { background: #64748B; color: #fff; }

.type-label[b-iatvlr6f7n] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.fallback-cell[b-iatvlr6f7n] { display: flex; flex-direction: column; gap: 3px; }
.fallback-badge[b-iatvlr6f7n] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 1px 6px;
    max-width: fit-content;
    font-family: Consolas, monospace;
}
.fallback-none[b-iatvlr6f7n] { color: var(--neutral-foreground-hint); font-size: 12px; }

/* ── Row actions (initial hidden — tr.hover reveal is in global-styles.css) ─ */
.row-actions[b-iatvlr6f7n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 180ms ease;
}
/* Sizing only — color/border/hover states are in global-styles.css */
.row-action-btn[b-iatvlr6f7n] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── List footer ──────────────────────────────────────────────────────────── */
.list-footer[b-iatvlr6f7n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
}
.results-count[b-iatvlr6f7n] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── State boxes ──────────────────────────────────────────────────────────── */
.state-box[b-iatvlr6f7n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-box--inline[b-iatvlr6f7n] {
    flex-direction: row;
    justify-content: flex-start;
    padding: 20px;
    text-align: left;
    gap: 12px;
}
.state-icon[b-iatvlr6f7n]    { opacity: 0.35; }
.state-title[b-iatvlr6f7n]   { margin: 0; font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-iatvlr6f7n] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Dialog form (vertical stacked: label above input) ───────────────────── */
.dialog-form[b-iatvlr6f7n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}
.form-field[b-iatvlr6f7n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.form-field--switch[b-iatvlr6f7n] {
    justify-content: flex-start;
    gap: 6px;
}
.form-label[b-iatvlr6f7n] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}
.form-row-2[b-iatvlr6f7n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-hint[b-iatvlr6f7n] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin: 2px 0 0;
    line-height: 1.5;
}

.pc-disclaimer[b-iatvlr6f7n] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-radius: 6px;
}
.pc-disclaimer p[b-iatvlr6f7n] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
}
.pc-disclaimer-icon[b-iatvlr6f7n] {
    color: var(--warning);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hub-grid[b-iatvlr6f7n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-iatvlr6f7n]  { padding: 16px 12px 24px; gap: 16px; }
    .page-title[b-iatvlr6f7n]      { font-size: 20px; }
    .hub-grid[b-iatvlr6f7n]        { grid-template-columns: 1fr; }
    .list-search[b-iatvlr6f7n]     { max-width: 100%; flex-basis: 100%; }
    .form-row-2[b-iatvlr6f7n]      { grid-template-columns: 1fr; }
    /* Action buttons always visible on touch devices */
    .row-actions[b-iatvlr6f7n]     { opacity: 1; }
}
/* /Pages/ITGovernance/Artifacts.razor.rz.scp.css */
/* ==========================================================================
   Artifacts.razor.css — Scoped styles for /compliance/it-governance/artifacts
   List View archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ──────────────────────────────────────────────────────────── */
.title-section[b-u7sox3q97w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-actions[b-u7sox3q97w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── CONTENT CARD ────────────────────────────────────────────────────────── */
/* Wraps the FluentDataGrid or empty-state message */
.fluent-card[b-u7sox3q97w] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

.card-elevated[b-u7sox3q97w] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */
.badge[b-u7sox3q97w] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-success[b-u7sox3q97w] { background: color-mix(in srgb, #059669 15%, transparent); color: #047857; }
.badge-danger[b-u7sox3q97w]  { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.badge-warning[b-u7sox3q97w] { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }

/* ── DIALOG FORM LAYOUT ──────────────────────────────────────────────────── */
.dialog-form[b-u7sox3q97w] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

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

.form-row[b-u7sox3q97w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── DIALOG FORM FIELDS ──────────────────────────────────────────────────── */
.form-label[b-u7sox3q97w] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.form-control[b-u7sox3q97w],
.form-select[b-u7sox3q97w] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.form-control:focus[b-u7sox3q97w],
.form-select:focus[b-u7sox3q97w] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    outline: none;
}

input[type="date"].form-control[b-u7sox3q97w] {
    cursor: pointer;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-u7sox3q97w] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-u7sox3q97w] table.it-artifacts-grid { min-width: 1250px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-actions[b-u7sox3q97w] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/ITGovernance/BcpTestLogs.razor.rz.scp.css */
/* ==========================================================================
   BcpTestLogs.razor.css — Scoped styles for /compliance/it-governance/bcp-logs
   List View archetype per AI-Agent-UI-Generation-Guide §7.3
   ========================================================================== */

/* ── PAGE SHELL ──────────────────────────────────────────────────────────── */
.title-section[b-flz6mac829] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-actions[b-flz6mac829] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── CONTENT CARD ────────────────────────────────────────────────────────── */
.fluent-card[b-flz6mac829] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

.card-elevated[b-flz6mac829] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */
.badge[b-flz6mac829] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-success[b-flz6mac829] { background: color-mix(in srgb, #059669 15%, transparent); color: #047857; }
.badge-danger[b-flz6mac829]  { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.badge-warning[b-flz6mac829] { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }

/* ── DIALOG FORM LAYOUT ──────────────────────────────────────────────────── */
.dialog-form[b-flz6mac829] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

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

.form-row[b-flz6mac829] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── DIALOG FORM FIELDS ──────────────────────────────────────────────────── */
.form-label[b-flz6mac829] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.form-control[b-flz6mac829],
.form-select[b-flz6mac829] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.form-control:focus[b-flz6mac829],
.form-select:focus[b-flz6mac829] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    outline: none;
}

input[type="date"].form-control[b-flz6mac829],
input[type="number"].form-control[b-flz6mac829] {
    cursor: pointer;
}

textarea.form-control[b-flz6mac829] {
    height: auto;
    min-height: 96px;
    padding: 8px 10px;
    resize: vertical;
}

.char-count[b-flz6mac829] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    text-align: right;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-flz6mac829] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-flz6mac829] table.bcp-test-logs-grid { min-width: 1520px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-actions[b-flz6mac829] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/Leads/ChannelPartners/Components/BranchAssignmentEditor.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Leads › Channel Partners › Sourcing Scope tab
   BranchAssignmentEditor — territory (branch) scoping (Plan 70.2b Group 4)
   ═══════════════════════════════════════════════════════════════ */

.branch-editor[b-5cq2zs1qkj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.branch-editor-header[b-5cq2zs1qkj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.section-title[b-5cq2zs1qkj] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.01em;
}

.fluent-input[b-5cq2zs1qkj] {
    height: 34px;
    border: 1.5px solid var(--neutral-stroke-rest, rgb(214, 214, 214));
    border-radius: 6px;
    padding: 0 10px;
    background: var(--neutral-fill-input-rest, rgb(251, 251, 251));
    color: var(--neutral-foreground-rest, rgb(26, 26, 26));
    font-size: 14px;
    font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
    box-sizing: border-box;
    width: 100%;
}

.fluent-input:focus[b-5cq2zs1qkj] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.form-field[b-5cq2zs1qkj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-label[b-5cq2zs1qkj] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.state-box-sm[b-5cq2zs1qkj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-1);
    border-radius: 8px;
}

.schedule-note[b-5cq2zs1qkj] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}

.schedule-note svg[b-5cq2zs1qkj] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Branch table ─────────────────────────────────────────────────────── */
.branch-table-wrap[b-5cq2zs1qkj] {
    overflow-x: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.branch-table[b-5cq2zs1qkj] {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 13px;
}

.branch-table th[b-5cq2zs1qkj] {
    text-align: left;
    padding: 10px 12px;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    white-space: nowrap;
}

.branch-table td[b-5cq2zs1qkj] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
}

.branch-table tbody tr:last-child td[b-5cq2zs1qkj] {
    border-bottom: none;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .branch-editor-header[b-5cq2zs1qkj] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Leads/ChannelPartners/Components/CommissionRateEditor.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Leads › Channel Partners › Commercial & Rates tab
   CommissionRateEditor — as-of-date rate history viewer (Plan 70.12b)
   ═══════════════════════════════════════════════════════════════ */

.rate-editor[b-9bcx5nj6hu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rate-editor-header[b-9bcx5nj6hu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.section-title[b-9bcx5nj6hu] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.01em;
}

.rate-editor-filter[b-9bcx5nj6hu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rate-editor-filter .form-label[b-9bcx5nj6hu] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.fluent-input[b-9bcx5nj6hu] {
    height: 34px;
    border: 1.5px solid var(--neutral-stroke-rest, rgb(214, 214, 214));
    border-radius: 6px;
    padding: 0 10px;
    background: var(--neutral-fill-input-rest, rgb(251, 251, 251));
    color: var(--neutral-foreground-rest, rgb(26, 26, 26));
    font-size: 14px;
    font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
    box-sizing: border-box;
}

.fluent-input:focus[b-9bcx5nj6hu] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.form-field[b-9bcx5nj6hu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-label[b-9bcx5nj6hu] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.form-field-pair[b-9bcx5nj6hu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.state-box-sm[b-9bcx5nj6hu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-1);
    border-radius: 8px;
}

.schedule-note[b-9bcx5nj6hu] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}

.schedule-note svg[b-9bcx5nj6hu] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Rate table ───────────────────────────────────────────────────────── */
.rate-table-wrap[b-9bcx5nj6hu] {
    overflow-x: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.rate-table[b-9bcx5nj6hu] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 13px;
}

.rate-table th[b-9bcx5nj6hu] {
    text-align: left;
    padding: 10px 12px;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    white-space: nowrap;
}

.rate-table td[b-9bcx5nj6hu] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.rate-table tbody tr:last-child td[b-9bcx5nj6hu] {
    border-bottom: none;
}

.amount-cell[b-9bcx5nj6hu] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rate-badge[b-9bcx5nj6hu] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.rate-badge-active[b-9bcx5nj6hu] {
    background: rgba(16, 124, 16, 0.12);
    color: #107c10;
}

.rate-badge-scheduled[b-9bcx5nj6hu] {
    background: rgba(0, 120, 212, 0.12);
    color: #0078d4;
}

.rate-badge-superseded[b-9bcx5nj6hu] {
    background: var(--neutral-layer-3, #eee);
    color: var(--neutral-foreground-hint);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .form-field-pair[b-9bcx5nj6hu] {
        grid-template-columns: 1fr;
    }

    .rate-editor-header[b-9bcx5nj6hu] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Leads/ChannelPartners/Create.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Leads › Channel Partners › Create wizard  (Plan 70.12b)
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes card-enter-b-v5alm6m5nk {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-b-v5alm6m5nk {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Wizard page layout ──────────────────────────────────────────────────── */
.wizard-page[b-v5alm6m5nk] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--neutral-layer-2);
    animation: card-enter-b-v5alm6m5nk 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wizard header ───────────────────────────────────────────────────────── */
.wizard-header[b-v5alm6m5nk] {
    padding: 24px 32px 0;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.wizard-back-link[b-v5alm6m5nk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--accent-fill-rest);
    text-decoration: none;
    margin-bottom: 12px;
}

.wizard-back-link:hover[b-v5alm6m5nk] {
    text-decoration: underline;
}

.wizard-title[b-v5alm6m5nk] {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.wizard-subtitle[b-v5alm6m5nk] {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Step indicators ─────────────────────────────────────────────────────── */
.wizard-steps[b-v5alm6m5nk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    gap: 0;
    overflow-x: auto;
}

.step-item[b-v5alm6m5nk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 80px;
    cursor: default;
}

.step-marker[b-v5alm6m5nk] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.step-marker-pending[b-v5alm6m5nk] {
    background: var(--neutral-layer-2);
    border: 2px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
}

.step-marker-active[b-v5alm6m5nk] {
    background: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
    color: white;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.2);
}

.step-marker-completed[b-v5alm6m5nk] {
    background: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
    color: white;
}

.step-number[b-v5alm6m5nk] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.step-label[b-v5alm6m5nk] {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: var(--neutral-foreground-hint);
    max-width: 80px;
    line-height: 1.3;
    white-space: nowrap;
}

.step-active .step-label[b-v5alm6m5nk] {
    color: var(--accent-fill-rest);
    font-weight: 600;
}

.step-completed .step-label[b-v5alm6m5nk] {
    color: var(--neutral-foreground-rest);
}

.step-connector[b-v5alm6m5nk] {
    width: 60px;
    height: 2px;
    background: var(--neutral-stroke-rest);
    margin: 0 8px;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: background 200ms ease;
}

.step-connector-completed[b-v5alm6m5nk] {
    background: var(--accent-fill-rest);
}

/* ── Wizard content ──────────────────────────────────────────────────────── */
.wizard-content[b-v5alm6m5nk] {
    flex: 1;
    padding: 32px 24px;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.step-header[b-v5alm6m5nk] {
    margin-bottom: 32px;
    text-align: center;
}

.step-title[b-v5alm6m5nk] {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.step-description[b-v5alm6m5nk] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.step-body[b-v5alm6m5nk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Form field patterns ─────────────────────────────────────────────────── */
.form-field[b-v5alm6m5nk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-v5alm6m5nk] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.required-mark[b-v5alm6m5nk] {
    color: var(--error-foreground-rest, #d13438);
    margin-left: 2px;
}

.fluent-input[b-v5alm6m5nk] {
    width: 100%;
    height: 36px;
    border: 1.5px solid var(--neutral-stroke-rest, rgb(214, 214, 214));
    border-radius: 6px;
    padding: 0 10px;
    background: var(--neutral-fill-input-rest, rgb(251, 251, 251));
    color: var(--neutral-foreground-rest, rgb(26, 26, 26));
    font-size: 14px;
    font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
    appearance: auto;
    cursor: pointer;
    box-sizing: border-box;
}

.fluent-input:focus[b-v5alm6m5nk] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.form-field-pair[b-v5alm6m5nk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.form-field-row[b-v5alm6m5nk] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Error bar ───────────────────────────────────────────────────────────── */
.step-error-bar[b-v5alm6m5nk] {
    margin-bottom: 16px;
}

/* ── Inline disclaimer note ──────────────────────────────────────────────── */
.schedule-note[b-v5alm6m5nk] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}

.schedule-note svg[b-v5alm6m5nk] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Sticky wizard footer ────────────────────────────────────────────────── */
.wizard-footer[b-v5alm6m5nk] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding: 16px 0;
}

.footer-content[b-v5alm6m5nk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.footer-left[b-v5alm6m5nk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-right[b-v5alm6m5nk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wizard-page[b-v5alm6m5nk] {
        animation: none;
    }

    .step-marker[b-v5alm6m5nk],
    .step-connector[b-v5alm6m5nk] {
        transition: none;
    }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .step-connector[b-v5alm6m5nk] {
        width: 40px;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wizard-header[b-v5alm6m5nk] {
        padding: 20px 16px 0;
    }

    .wizard-steps[b-v5alm6m5nk] {
        padding: 16px;
    }

    .step-label[b-v5alm6m5nk] {
        display: none;
    }

    .step-connector[b-v5alm6m5nk] {
        margin-bottom: 0;
    }

    .wizard-content[b-v5alm6m5nk] {
        padding: 20px 16px;
    }

    .form-field-pair[b-v5alm6m5nk] {
        grid-template-columns: 1fr;
    }

    .footer-content[b-v5alm6m5nk] {
        flex-direction: column;
        gap: 12px;
        padding: 0 16px;
    }

    .footer-right[b-v5alm6m5nk] {
        order: -1;
        width: 100%;
    }

    .footer-right[b-v5alm6m5nk]  fluent-button {
        width: 100%;
    }

    .footer-left[b-v5alm6m5nk] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}
/* /Pages/Leads/ChannelPartners/Detail.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Leads › Channel Partners › Detail (Plan 70.12b)
   Combines Customers/Detail.razor.css's KPI-row/tab/section-card vocabulary
   with Leads/Detail.razor.css's dialog-body/reveal-row vocabulary, plus a
   fresh copy of Index.razor.css's status-badge block (CSS isolation means
   that file's rules never reach this component).
   ═══════════════════════════════════════════════════════════════ */

/* ── Page container ──────────────────────────────────────────────────────── */
[b-dh1fkn80l1] .page-container { max-width: 1400px; margin: 0 auto; padding: 24px; }

/* ── Header ───────────────────────────────────────────────────────────────── */
[b-dh1fkn80l1] .customer-header-row { display: flex; align-items: center; gap: 16px; }
[b-dh1fkn80l1] .header-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--accent-fill-rest); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 600; flex-shrink: 0;
}
[b-dh1fkn80l1] .page-title { margin: 0 0 4px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--neutral-foreground-rest); }
[b-dh1fkn80l1] .page-subtitle { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); display: flex; align-items: center; gap: 8px; }

/* ── Skeleton / empty / error states ─────────────────────────────────────── */
[b-dh1fkn80l1] .state-box { text-align: center; padding: 56px 24px; }
[b-dh1fkn80l1] .state-box-sm { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 24px; text-align: center; color: var(--neutral-foreground-hint); }
[b-dh1fkn80l1] .state-icon { opacity: .45; margin-bottom: 14px; }
[b-dh1fkn80l1] .state-icon-error { color: var(--error); opacity: 1; }
[b-dh1fkn80l1] .state-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
[b-dh1fkn80l1] .state-message { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0 0 18px; }

/* ══════════════════════════════════════════════════════════════════════════════
   METRIC CARDS ROW (KPI bar)
══════════════════════════════════════════════════════════════════════════════ */
[b-dh1fkn80l1] .metrics-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }

[b-dh1fkn80l1] .metric-card {
    display: flex; align-items: center; gap: 16px; padding: 20px;
    background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}

[b-dh1fkn80l1] .metric-icon-wrap { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
[b-dh1fkn80l1] .metric-icon-wrap svg { width: 24px; height: 24px; fill: currentColor !important; }

[b-dh1fkn80l1] .metric-icon-blue   { background: rgba(79, 70, 229, 0.14); color: #4338ca; }
[b-dh1fkn80l1] .metric-icon-green  { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
[b-dh1fkn80l1] .metric-icon-purple { background: rgba(99, 102, 241, 0.18); color: #5b21b6; }
[b-dh1fkn80l1] .metric-icon-amber  { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

[b-dh1fkn80l1] .metric-body { display: flex; flex-direction: column; gap: 2px; }
[b-dh1fkn80l1] .metric-value { font-size: 20px; font-weight: 700; color: var(--neutral-foreground-rest); line-height: 1.2; }
[b-dh1fkn80l1] .metric-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral-foreground-hint); }

/* ══════════════════════════════════════════════════════════════════════════════
   TAB CONTAINER
══════════════════════════════════════════════════════════════════════════════ */
[b-dh1fkn80l1] .detail-tabs-container { background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04); }
[b-dh1fkn80l1] .tab-content { padding: 24px 0 0; min-height: 200px; }

/* ══════════════════════════════════════════════════════════════════════════════
   DETAIL GRID (2-col section cards)
══════════════════════════════════════════════════════════════════════════════ */
[b-dh1fkn80l1] .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

[b-dh1fkn80l1] .section-card { background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-divider-rest); border-radius: 8px; padding: 20px; }
[b-dh1fkn80l1] .section-title { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--neutral-foreground-rest); letter-spacing: -0.01em; }

[b-dh1fkn80l1] .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--neutral-stroke-divider-rest); gap: 12px; }
[b-dh1fkn80l1] .detail-row:last-child { border-bottom: none; }
[b-dh1fkn80l1] .detail-label { font-size: 13px; color: var(--neutral-foreground-hint); flex-shrink: 0; }
[b-dh1fkn80l1] .detail-value { font-size: 13px; font-weight: 500; color: var(--neutral-foreground-rest); text-align: right; }

/* ── Grid scroll wrapper + link cell (Leads sourced tab) ─────────────────── */
[b-dh1fkn80l1] .grid-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-dh1fkn80l1] .cell-primary { font-weight: 600; color: var(--neutral-foreground-rest); }
[b-dh1fkn80l1] .partner-name-link { text-decoration: none; display: inline-block; cursor: pointer; }
[b-dh1fkn80l1] .partner-name-link:hover { text-decoration: underline; color: var(--accent-fill-rest); }

/* ══════════════════════════════════════════════════════════════════════════════
   STATUS BADGES (ChannelPartnerStatus) — duplicated from Index.razor.css;
   CSS isolation scopes that file's rules to Index.razor only.
══════════════════════════════════════════════════════════════════════════════ */
[b-dh1fkn80l1] .status-badge { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-dh1fkn80l1] .status-badge--draft               { background: #f3f4f6; color: #6b7280; }
[b-dh1fkn80l1] .status-badge--pendingduediligence { background: #fef3c7; color: #d97706; }
[b-dh1fkn80l1] .status-badge--active              { background: #dcfce7; color: #16a34a; }
[b-dh1fkn80l1] .status-badge--suspended           { background: #ffedd5; color: #c2410c; }
[b-dh1fkn80l1] .status-badge--terminated          { background: #f3f4f6; color: #6b7280; }
[b-dh1fkn80l1] .status-badge--blacklisted         { background: #fee2e2; color: #dc2626; }

/* ══════════════════════════════════════════════════════════════════════════════
   DIALOGS — reveal dialog (Leads/Detail.razor.css vocabulary) ────────────────
══════════════════════════════════════════════════════════════════════════════ */
[b-dh1fkn80l1] .dialog-body-content { padding: 4px 0; display: flex; flex-direction: column; gap: 4px; min-width: 320px; }
[b-dh1fkn80l1] .reveal-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--neutral-stroke-divider-rest); }
[b-dh1fkn80l1] .reveal-label { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-hint); width: 120px; flex-shrink: 0; }
[b-dh1fkn80l1] .reveal-value { flex: 1; font-size: 14px; color: var(--neutral-foreground-rest); font-variant-numeric: tabular-nums; }
[b-dh1fkn80l1] .row-action-btn { width: 32px; height: 32px; background: transparent; padding: 6px; cursor: pointer; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; border: none; }
[b-dh1fkn80l1] .row-action-btn:hover { background: var(--neutral-fill-stealth-hover); }

/* ── Dialogs — reason / activate / penny-drop / attestations (Guarantors.razor.css vocabulary) ── */
[b-dh1fkn80l1] .dialog-form { display: flex; flex-direction: column; gap: 16px; padding: 8px 0; min-width: 360px; }
[b-dh1fkn80l1] .form-field { display: flex; flex-direction: column; gap: 4px; }
[b-dh1fkn80l1] .form-label { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-rest); text-transform: uppercase; letter-spacing: 0.3px; }
[b-dh1fkn80l1] .fluent-input { padding: 6px 10px; border: 1px solid var(--neutral-stroke-rest); border-radius: 4px; background: var(--neutral-layer-1); color: var(--neutral-foreground-rest); font-size: 14px; width: 100%; box-sizing: border-box; font-family: inherit; }
[b-dh1fkn80l1] .fluent-input:focus { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; }
[b-dh1fkn80l1] textarea.fluent-input { resize: vertical; min-height: 72px; }

/* ── Inline disclaimer note ──────────────────────────────────────────────── */
[b-dh1fkn80l1] .schedule-note { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding: 8px 12px; background: var(--neutral-layer-2); border-radius: 6px; font-size: 12px; line-height: 1.5; color: var(--neutral-foreground-hint); }
[b-dh1fkn80l1] .schedule-note svg { flex-shrink: 0; margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    [b-dh1fkn80l1] .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    [b-dh1fkn80l1] .page-container { padding: 16px; }
    [b-dh1fkn80l1] .metrics-row { grid-template-columns: 1fr; }
    [b-dh1fkn80l1] .detail-grid { grid-template-columns: 1fr; }
    [b-dh1fkn80l1] .detail-tabs-container { padding: 16px; }
    [b-dh1fkn80l1] .dialog-form { min-width: 0; }
    [b-dh1fkn80l1] .dialog-body-content { min-width: 0; }
}
/* /Pages/Leads/ChannelPartners/Edit.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Leads › Channel Partners › Create wizard  (Plan 70.12b)
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes card-enter-b-gdf4xa7dqg {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-b-gdf4xa7dqg {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Wizard page layout ──────────────────────────────────────────────────── */
.wizard-page[b-gdf4xa7dqg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--neutral-layer-2);
    animation: card-enter-b-gdf4xa7dqg 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wizard header ───────────────────────────────────────────────────────── */
.wizard-header[b-gdf4xa7dqg] {
    padding: 24px 32px 0;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.wizard-back-link[b-gdf4xa7dqg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--accent-fill-rest);
    text-decoration: none;
    margin-bottom: 12px;
}

.wizard-back-link:hover[b-gdf4xa7dqg] {
    text-decoration: underline;
}

.wizard-title[b-gdf4xa7dqg] {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.wizard-subtitle[b-gdf4xa7dqg] {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Step indicators ─────────────────────────────────────────────────────── */
.wizard-steps[b-gdf4xa7dqg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    gap: 0;
    overflow-x: auto;
}

.step-item[b-gdf4xa7dqg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 80px;
    cursor: default;
}

.step-marker[b-gdf4xa7dqg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.step-marker-pending[b-gdf4xa7dqg] {
    background: var(--neutral-layer-2);
    border: 2px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
}

.step-marker-active[b-gdf4xa7dqg] {
    background: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
    color: white;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.2);
}

.step-marker-completed[b-gdf4xa7dqg] {
    background: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
    color: white;
}

.step-number[b-gdf4xa7dqg] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.step-label[b-gdf4xa7dqg] {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: var(--neutral-foreground-hint);
    max-width: 80px;
    line-height: 1.3;
    white-space: nowrap;
}

.step-active .step-label[b-gdf4xa7dqg] {
    color: var(--accent-fill-rest);
    font-weight: 600;
}

.step-completed .step-label[b-gdf4xa7dqg] {
    color: var(--neutral-foreground-rest);
}

.step-connector[b-gdf4xa7dqg] {
    width: 60px;
    height: 2px;
    background: var(--neutral-stroke-rest);
    margin: 0 8px;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: background 200ms ease;
}

.step-connector-completed[b-gdf4xa7dqg] {
    background: var(--accent-fill-rest);
}

/* ── Wizard content ──────────────────────────────────────────────────────── */
.wizard-content[b-gdf4xa7dqg] {
    flex: 1;
    padding: 32px 24px;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.step-header[b-gdf4xa7dqg] {
    margin-bottom: 32px;
    text-align: center;
}

.step-title[b-gdf4xa7dqg] {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.step-description[b-gdf4xa7dqg] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.step-body[b-gdf4xa7dqg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Form field patterns ─────────────────────────────────────────────────── */
.form-field[b-gdf4xa7dqg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-gdf4xa7dqg] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.required-mark[b-gdf4xa7dqg] {
    color: var(--error-foreground-rest, #d13438);
    margin-left: 2px;
}

.fluent-input[b-gdf4xa7dqg] {
    width: 100%;
    height: 36px;
    border: 1.5px solid var(--neutral-stroke-rest, rgb(214, 214, 214));
    border-radius: 6px;
    padding: 0 10px;
    background: var(--neutral-fill-input-rest, rgb(251, 251, 251));
    color: var(--neutral-foreground-rest, rgb(26, 26, 26));
    font-size: 14px;
    font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
    appearance: auto;
    cursor: pointer;
    box-sizing: border-box;
}

.fluent-input:focus[b-gdf4xa7dqg] {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.form-field-pair[b-gdf4xa7dqg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.form-field-row[b-gdf4xa7dqg] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Error bar ───────────────────────────────────────────────────────────── */
.step-error-bar[b-gdf4xa7dqg] {
    margin-bottom: 16px;
}

/* ── Inline disclaimer note ──────────────────────────────────────────────── */
.schedule-note[b-gdf4xa7dqg] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}

.schedule-note svg[b-gdf4xa7dqg] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Sticky wizard footer ────────────────────────────────────────────────── */
.wizard-footer[b-gdf4xa7dqg] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding: 16px 0;
}

.footer-content[b-gdf4xa7dqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.footer-left[b-gdf4xa7dqg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-right[b-gdf4xa7dqg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wizard-page[b-gdf4xa7dqg] {
        animation: none;
    }

    .step-marker[b-gdf4xa7dqg],
    .step-connector[b-gdf4xa7dqg] {
        transition: none;
    }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .step-connector[b-gdf4xa7dqg] {
        width: 40px;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wizard-header[b-gdf4xa7dqg] {
        padding: 20px 16px 0;
    }

    .wizard-steps[b-gdf4xa7dqg] {
        padding: 16px;
    }

    .step-label[b-gdf4xa7dqg] {
        display: none;
    }

    .step-connector[b-gdf4xa7dqg] {
        margin-bottom: 0;
    }

    .wizard-content[b-gdf4xa7dqg] {
        padding: 20px 16px;
    }

    .form-field-pair[b-gdf4xa7dqg] {
        grid-template-columns: 1fr;
    }

    .footer-content[b-gdf4xa7dqg] {
        flex-direction: column;
        gap: 12px;
        padding: 0 16px;
    }

    .footer-right[b-gdf4xa7dqg] {
        order: -1;
        width: 100%;
    }

    .footer-right[b-gdf4xa7dqg]  fluent-button {
        width: 100%;
    }

    .footer-left[b-gdf4xa7dqg] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}
/* /Pages/Leads/ChannelPartners/Index.razor.rz.scp.css */
/* ── Page container ──────────────────────────────────────────────────────── */
[b-71lqna7buf] .page-container { max-width: 1400px; margin: 0 auto; padding: 24px; }

/* ── Metric cards (KPI row; duplicated from Leads/Index.razor.css — CSS
   isolation scopes that file's rules to Leads/Index.razor only) ───────────── */
[b-71lqna7buf] .metrics-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
[b-71lqna7buf] .metric-card {
    display: flex; align-items: center; gap: 16px; padding: 20px;
    background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}
[b-71lqna7buf] .metric-card-skeleton { pointer-events: none; }
[b-71lqna7buf] .metric-icon-wrap { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
[b-71lqna7buf] .metric-icon-wrap svg { width: 24px; height: 24px; fill: currentColor !important; }
[b-71lqna7buf] .metric-icon-blue  { background: rgba(79,70,229,0.12); color: #4F46E5; }
[b-71lqna7buf] .metric-icon-green { background: rgba(22,163,74,0.12); color: #16a34a; }
[b-71lqna7buf] .metric-icon-amber { background: rgba(217,119,6,0.12); color: #d97706; }
[b-71lqna7buf] .metric-icon-red   { background: rgba(220,38,38,0.12); color: #dc2626; }
[b-71lqna7buf] .metric-body { display: flex; flex-direction: column; min-width: 0; }
[b-71lqna7buf] .metric-value { font-size: 20px; font-weight: 700; line-height: 1; color: var(--neutral-foreground-rest); font-variant-numeric: tabular-nums; }
[b-71lqna7buf] .metric-title { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-hint); margin-top: 6px; white-space: nowrap; }

[b-71lqna7buf] .truncation-banner { margin-bottom: 12px; }

/* ── List container / toolbar ────────────────────────────────────────────── */
[b-71lqna7buf] .list-container { background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[b-71lqna7buf] .list-toolbar { display: flex; align-items: center; gap: 8px 10px; padding: 12px 16px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); background: var(--neutral-layer-2); flex-wrap: wrap; position: relative; z-index: 10; }
[b-71lqna7buf] .list-search { flex: 1 1 200px; min-width: 180px; max-width: 340px; }
[b-71lqna7buf] .toolbar-divider { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }
[b-71lqna7buf] .toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Skeleton / empty / error states ─────────────────────────────────────── */
[b-71lqna7buf] .skeleton-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 18px; }
[b-71lqna7buf] .skeleton-row { display: flex; gap: 16px; align-items: center; }
[b-71lqna7buf] .state-box { text-align: center; padding: 56px 24px; }
[b-71lqna7buf] .state-icon { opacity: .45; margin-bottom: 14px; }
[b-71lqna7buf] .state-icon-error { color: var(--error); opacity: 1; }
[b-71lqna7buf] .state-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
[b-71lqna7buf] .state-message { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0 0 18px; }

/* ── Data grid ────────────────────────────────────────────────────────────── */
[b-71lqna7buf] .grid-scroll-wrapper { overflow-x: auto; }
[b-71lqna7buf] table.partners-grid { width: 100%; min-width: 900px; }
[b-71lqna7buf] .cell-stack { display: flex; flex-direction: column; gap: 2px; }
[b-71lqna7buf] .cell-primary { font-weight: 600; color: var(--neutral-foreground-rest); }
[b-71lqna7buf] .partner-name-link { text-decoration: none; display: inline-block; cursor: pointer; }
[b-71lqna7buf] .partner-name-link:hover { text-decoration: underline; color: var(--accent-fill-rest); }
[b-71lqna7buf] .cell-secondary { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── Status badges (ChannelPartnerStatus) ────────────────────────────────── */
[b-71lqna7buf] .status-badge { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-71lqna7buf] .status-badge--draft               { background: #f3f4f6; color: #6b7280; }
[b-71lqna7buf] .status-badge--pendingduediligence { background: #fef3c7; color: #d97706; }
[b-71lqna7buf] .status-badge--active              { background: #dcfce7; color: #16a34a; }
[b-71lqna7buf] .status-badge--suspended           { background: #ffedd5; color: #c2410c; }
[b-71lqna7buf] .status-badge--terminated          { background: #f3f4f6; color: #6b7280; }
[b-71lqna7buf] .status-badge--blacklisted         { background: #fee2e2; color: #dc2626; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    [b-71lqna7buf] .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    [b-71lqna7buf] .page-container { padding: 16px; }
    [b-71lqna7buf] .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
    [b-71lqna7buf] .list-search { flex: 1 1 100%; max-width: 100%; order: -1; }
    [b-71lqna7buf] .toolbar-divider { display: none; }
    [b-71lqna7buf] .toolbar-filters { width: 100%; }
    [b-71lqna7buf] .toolbar-filters > * { flex: 1 1 100% !important; width: auto !important; }
}
@media (max-width: 480px) {
    [b-71lqna7buf] .metrics-row { grid-template-columns: 1fr; }
}
/* /Pages/Leads/Detail.razor.rz.scp.css */
/* ── Page container ──────────────────────────────────────────────────────── */
[b-upjodmvdql] .page-container { max-width: 1000px; margin: 0 auto; padding: 24px; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
[b-upjodmvdql] .detail-card { background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }

/* ── Skeleton / empty / error states ─────────────────────────────────────── */
[b-upjodmvdql] .skeleton-detail { display: flex; align-items: center; gap: 16px; }
[b-upjodmvdql] .state-box { text-align: center; padding: 56px 24px; }
[b-upjodmvdql] .state-icon { opacity: .45; margin-bottom: 14px; }
[b-upjodmvdql] .state-icon-error { color: var(--error); opacity: 1; }
[b-upjodmvdql] .state-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
[b-upjodmvdql] .state-message { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0 0 18px; }

/* ── Detail header ────────────────────────────────────────────────────────── */
[b-upjodmvdql] .detail-header { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); flex-wrap: wrap; }
[b-upjodmvdql] .lead-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-fill-rest); color: #ffffff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; user-select: none; }
[b-upjodmvdql] .lead-avatar-lg { width: 56px; height: 56px; font-size: 20px; }
[b-upjodmvdql] .detail-header-info { flex: 1; min-width: 200px; }
[b-upjodmvdql] .detail-header-name { font-size: 20px; font-weight: 700; color: var(--neutral-foreground-rest); }
[b-upjodmvdql] .detail-header-badges { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* ── Badges (mirrors Leads/Index.razor.css vocabulary) ───────────────────── */
[b-upjodmvdql] .pl-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-upjodmvdql] .pl-badge--loan    { background: #dbeafe; color: #2563eb; }
[b-upjodmvdql] .pl-badge--deposit { background: #dcfce7; color: #16a34a; }
[b-upjodmvdql] .pl-badge--ncd     { background: #ede9fe; color: #7c3aed; }

[b-upjodmvdql] .status-badge { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-upjodmvdql] .status-badge--new                      { background: #dbeafe; color: #2563eb; }
[b-upjodmvdql] .status-badge--contacted                { background: #e0e7ff; color: #4f46e5; }
[b-upjodmvdql] .status-badge--followupscheduled        { background: #fef3c7; color: #d97706; }
[b-upjodmvdql] .status-badge--qualified                { background: #dcfce7; color: #16a34a; }
[b-upjodmvdql] .status-badge--documentationinprogress  { background: #ede9fe; color: #7c3aed; }
[b-upjodmvdql] .status-badge--convertedtoapplication   { background: #d1fae5; color: #059669; }
[b-upjodmvdql] .status-badge--lost                     { background: #fee2e2; color: #dc2626; }
[b-upjodmvdql] .status-badge--disqualified             { background: #f3f4f6; color: #6b7280; }
[b-upjodmvdql] .status-badge--donotcontact             { background: #fce7f3; color: #db2777; }

/* ── Consent badge — Plan 70.12 D36: advisory-only, visually distinct from the status/PL badges
   so it can never be mistaken for a gate on the reveal/call actions next to it. ─────────────── */
[b-upjodmvdql] .consent-badge { font-size: 11px; font-weight: 600; padding: 2px 8px 2px 6px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: help; }
[b-upjodmvdql] .consent-badge svg { width: 12px; height: 12px; fill: currentColor !important; }
[b-upjodmvdql] .consent-badge--ok   { background: #dcfce7; color: #16a34a; }
[b-upjodmvdql] .consent-badge--warn { background: #fef3c7; color: #d97706; }

/* ── Form / detail sections ───────────────────────────────────────────────── */
[b-upjodmvdql] .form-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--neutral-foreground-hint); margin: 22px 0 12px; }
[b-upjodmvdql] .form-section-title:first-of-type { margin-top: 4px; }
[b-upjodmvdql] .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
[b-upjodmvdql] .detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
[b-upjodmvdql] .detail-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[b-upjodmvdql] .detail-field-label { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-hint); }
[b-upjodmvdql] .detail-field-value { font-size: 14px; color: var(--neutral-foreground-rest); overflow-wrap: anywhere; }

[b-upjodmvdql] .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--neutral-stroke-divider-rest); }

/* ── Call-outcome control (Plan 70.12 D35) ───────────────────────────────── */
[b-upjodmvdql] .call-outcome-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Activity timeline ────────────────────────────────────────────────────── */
[b-upjodmvdql] .activity-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
[b-upjodmvdql] .activity-item { display: flex; gap: 12px; padding: 0 0 16px; position: relative; }
[b-upjodmvdql] .activity-item::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 1px; background: var(--neutral-stroke-divider-rest); }
[b-upjodmvdql] .activity-item:last-child::before { display: none; }
[b-upjodmvdql] .activity-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-fill-rest); flex-shrink: 0; margin-top: 4px; z-index: 1; }
[b-upjodmvdql] .activity-body { flex: 1; min-width: 0; }
[b-upjodmvdql] .activity-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
[b-upjodmvdql] .activity-type { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); }
[b-upjodmvdql] .activity-time { font-size: 12px; color: var(--neutral-foreground-hint); }
[b-upjodmvdql] .activity-outcome { font-size: 12px; color: var(--accent-fill-rest); font-weight: 500; margin-top: 2px; }
[b-upjodmvdql] .activity-notes { font-size: 13px; color: var(--neutral-foreground-hint); margin-top: 2px; }

/* ── Dialogs (native <select>/<input> per B44 — never FluentSelect in a FluentDialog) ─── */
[b-upjodmvdql] .dialog-body-content { padding: 4px 0; display: flex; flex-direction: column; gap: 4px; }
[b-upjodmvdql] .native-field-label { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-hint); margin-bottom: 4px; display: block; }
[b-upjodmvdql] .fluent-input { padding: 6px 10px; border: 1px solid var(--neutral-stroke-rest); border-radius: 4px; background: var(--neutral-layer-1); color: var(--neutral-foreground-rest); font-size: 14px; width: 100%; box-sizing: border-box; }
[b-upjodmvdql] .fluent-input:focus { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; }

[b-upjodmvdql] .reveal-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--neutral-stroke-divider-rest); }
[b-upjodmvdql] .reveal-label { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-hint); width: 70px; flex-shrink: 0; }
[b-upjodmvdql] .reveal-value { flex: 1; font-size: 14px; color: var(--accent-fill-rest); text-decoration: none; font-variant-numeric: tabular-nums; }
[b-upjodmvdql] .reveal-value:hover { text-decoration: underline; }

[b-upjodmvdql] .row-action-btn { width: 32px; height: 32px; background: transparent; padding: 6px; cursor: pointer; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; border: none; }
[b-upjodmvdql] .row-action-btn:hover { background: var(--neutral-fill-stealth-hover); }

/* ── Convert dialog summary ───────────────────────────────────────────────── */
[b-upjodmvdql] .convert-summary { background: var(--neutral-layer-2); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
[b-upjodmvdql] .convert-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
[b-upjodmvdql] .convert-summary-row span { color: var(--neutral-foreground-hint); }
[b-upjodmvdql] .convert-summary-row strong { color: var(--neutral-foreground-rest); font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    [b-upjodmvdql] .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    [b-upjodmvdql] .page-container { padding: 16px; }
    [b-upjodmvdql] .detail-card { padding: 16px; }
    [b-upjodmvdql] .form-grid { grid-template-columns: 1fr; }
    [b-upjodmvdql] .detail-grid { grid-template-columns: 1fr; }
    [b-upjodmvdql] .detail-header { gap: 12px; }
    [b-upjodmvdql] .form-actions { flex-direction: column-reverse; }
    [b-upjodmvdql] .form-actions fluent-button { width: 100%; }
    [b-upjodmvdql] .call-outcome-row { flex-direction: column; }
    [b-upjodmvdql] .call-outcome-row fluent-button { width: 100%; }
}
/* /Pages/Leads/Index.razor.rz.scp.css */
/* ── Page container ──────────────────────────────────────────────────────── */
[b-hdlpvigcpa] .page-container { max-width: 1400px; margin: 0 auto; padding: 24px; }

/* ── View toggle ─────────────────────────────────────────────────────────── */
[b-hdlpvigcpa] .view-toggle { display: flex; border: 1px solid var(--neutral-stroke-rest); border-radius: 6px; overflow: hidden; }
[b-hdlpvigcpa] .view-toggle-btn { background: none; border: none; padding: 6px 10px; cursor: pointer; color: var(--neutral-foreground-rest); display: flex; align-items: center; line-height: 1; transition: background 150ms ease; }
[b-hdlpvigcpa] .view-toggle-btn:hover { background: var(--neutral-fill-stealth-hover); }
[b-hdlpvigcpa] .view-toggle-btn--active { background: var(--accent-fill-rest); color: var(--foreground-on-accent-rest); }
[b-hdlpvigcpa] .view-toggle-btn--active svg { fill: #ffffff !important; }

/* ── Metric cards ────────────────────────────────────────────────────────── */
[b-hdlpvigcpa] .metrics-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
[b-hdlpvigcpa] .metric-card {
    display: flex; align-items: center; gap: 16px; padding: 20px;
    background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}
[b-hdlpvigcpa] .metric-card-skeleton { pointer-events: none; }
[b-hdlpvigcpa] .metric-icon-wrap { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
[b-hdlpvigcpa] .metric-icon-wrap svg { width: 24px; height: 24px; fill: currentColor !important; }
[b-hdlpvigcpa] .metric-icon-blue  { background: rgba(79,70,229,0.12); color: #4F46E5; }
[b-hdlpvigcpa] .metric-icon-green { background: rgba(22,163,74,0.12); color: #16a34a; }
[b-hdlpvigcpa] .metric-icon-amber { background: rgba(217,119,6,0.12); color: #d97706; }
[b-hdlpvigcpa] .metric-icon-red   { background: rgba(220,38,38,0.12); color: #dc2626; }
[b-hdlpvigcpa] .metric-body { display: flex; flex-direction: column; min-width: 0; }
[b-hdlpvigcpa] .metric-value { font-size: 20px; font-weight: 700; line-height: 1; color: var(--neutral-foreground-rest); font-variant-numeric: tabular-nums; }
[b-hdlpvigcpa] .metric-title { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-hint); margin-top: 6px; white-space: nowrap; }

/* ── Product-line tabs ───────────────────────────────────────────────────── */
[b-hdlpvigcpa] .product-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); flex-wrap: wrap; }
[b-hdlpvigcpa] .product-tab {
    background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px;
    font-size: 13px; font-weight: 600; color: var(--neutral-foreground-hint); cursor: pointer; transition: color 150ms ease, border-color 150ms ease;
}
[b-hdlpvigcpa] .product-tab:hover { color: var(--neutral-foreground-rest); }
[b-hdlpvigcpa] .product-tab--active { color: var(--accent-fill-rest); border-bottom-color: var(--accent-fill-rest); }

/* ── List container / toolbar ────────────────────────────────────────────── */
[b-hdlpvigcpa] .list-container { background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-rest); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[b-hdlpvigcpa] .list-toolbar { display: flex; align-items: center; gap: 8px 10px; padding: 12px 16px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); background: var(--neutral-layer-2); flex-wrap: wrap; position: relative; z-index: 10; }
[b-hdlpvigcpa] .list-search { flex: 1 1 200px; min-width: 180px; max-width: 340px; }
[b-hdlpvigcpa] .toolbar-divider { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }
[b-hdlpvigcpa] .toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Skeleton / empty / error states ─────────────────────────────────────── */
[b-hdlpvigcpa] .skeleton-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 18px; }
[b-hdlpvigcpa] .skeleton-row { display: flex; gap: 16px; align-items: center; }
[b-hdlpvigcpa] .state-box { text-align: center; padding: 56px 24px; }
[b-hdlpvigcpa] .state-icon { opacity: .45; margin-bottom: 14px; }
[b-hdlpvigcpa] .state-icon-error { color: var(--error); opacity: 1; }
[b-hdlpvigcpa] .state-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
[b-hdlpvigcpa] .state-message { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0 0 18px; }

/* ── Data grid ────────────────────────────────────────────────────────────── */
[b-hdlpvigcpa] .grid-scroll-wrapper { overflow-x: auto; }
[b-hdlpvigcpa] table.leads-grid { width: 100%; min-width: 1150px; }
[b-hdlpvigcpa] .row-actions { opacity: 0; display: flex; gap: 4px; align-items: center; justify-content: center; transition: opacity 200ms ease; }
[b-hdlpvigcpa] .lead-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-fill-rest); color: #ffffff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; user-select: none; }
[b-hdlpvigcpa] .lead-name-link { color: var(--neutral-foreground-rest); font-weight: 600; text-decoration: none; cursor: pointer; }
[b-hdlpvigcpa] .lead-name-link:hover { text-decoration: underline; color: var(--accent-fill-rest); }
[b-hdlpvigcpa] .row-action-btn { width: 32px; height: 32px; background: transparent; padding: 6px; cursor: pointer; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; border: none; }
[b-hdlpvigcpa] .row-action-btn:hover { background: var(--neutral-fill-stealth-hover); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
[b-hdlpvigcpa] .pl-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-hdlpvigcpa] .pl-badge--loan    { background: #dbeafe; color: #2563eb; }
[b-hdlpvigcpa] .pl-badge--deposit { background: #dcfce7; color: #16a34a; }
[b-hdlpvigcpa] .pl-badge--ncd     { background: #ede9fe; color: #7c3aed; }

[b-hdlpvigcpa] .status-badge { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-hdlpvigcpa] .status-badge--new                      { background: #dbeafe; color: #2563eb; }
[b-hdlpvigcpa] .status-badge--contacted                { background: #e0e7ff; color: #4f46e5; }
[b-hdlpvigcpa] .status-badge--followupscheduled        { background: #fef3c7; color: #d97706; }
[b-hdlpvigcpa] .status-badge--qualified                { background: #dcfce7; color: #16a34a; }
[b-hdlpvigcpa] .status-badge--documentationinprogress  { background: #ede9fe; color: #7c3aed; }
[b-hdlpvigcpa] .status-badge--convertedtoapplication   { background: #d1fae5; color: #059669; }
[b-hdlpvigcpa] .status-badge--lost                     { background: #fee2e2; color: #dc2626; }
[b-hdlpvigcpa] .status-badge--disqualified             { background: #f3f4f6; color: #6b7280; }
[b-hdlpvigcpa] .status-badge--donotcontact             { background: #fce7f3; color: #db2777; }

/* ── List footer ──────────────────────────────────────────────────────────── */
[b-hdlpvigcpa] .list-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--neutral-stroke-divider-rest); flex-wrap: wrap; gap: 8px; }
[b-hdlpvigcpa] .results-count { font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Kanban board ─────────────────────────────────────────────────────────── */
[b-hdlpvigcpa] .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding: 16px; min-height: 400px; }
[b-hdlpvigcpa] .kanban-column { flex: 0 0 240px; background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-layer-rest); border-radius: 8px; display: flex; flex-direction: column; min-height: 200px; }
[b-hdlpvigcpa] .kanban-column-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); position: sticky; top: 0; background: inherit; border-radius: 8px 8px 0 0; }
[b-hdlpvigcpa] .kanban-column-title { font-size: 12px; font-weight: 600; }
[b-hdlpvigcpa] .kanban-column-count { font-size: 12px; font-weight: 600; background: var(--accent-fill-rest); color: var(--foreground-on-accent-rest); border-radius: 10px; padding: 0 7px; line-height: 18px; }
[b-hdlpvigcpa] .kanban-cards { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
[b-hdlpvigcpa] .kanban-card { background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-layer-rest); border-radius: 6px; padding: 10px 12px; cursor: grab; transition: box-shadow 150ms ease; }
[b-hdlpvigcpa] .kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
[b-hdlpvigcpa] .kanban-card[draggable="true"]:active { cursor: grabbing; }
[b-hdlpvigcpa] .kanban-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
[b-hdlpvigcpa] .kanban-card-info { min-width: 0; }
[b-hdlpvigcpa] .kanban-card-name { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-hdlpvigcpa] .kanban-card-mobile { font-size: 11px; color: var(--neutral-foreground-hint); margin-top: 1px; }
[b-hdlpvigcpa] .kanban-card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 6px; }
[b-hdlpvigcpa] .kanban-card-amount { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-rest); font-variant-numeric: tabular-nums; }
[b-hdlpvigcpa] .kanban-card-footer { display: flex; flex-direction: column; gap: 6px; }
[b-hdlpvigcpa] .kanban-card-actions { display: flex; justify-content: flex-end; gap: 4px; }
[b-hdlpvigcpa] .kanban-empty { font-size: 12px; color: var(--neutral-foreground-hint); text-align: center; padding: 16px 0; }
[b-hdlpvigcpa] .kanban-more-link {
    font-size: 12px; font-weight: 600; color: var(--accent-fill-rest); background: none; border: none;
    cursor: pointer; padding: 8px 0; text-align: center; width: 100%;
}
[b-hdlpvigcpa] .kanban-more-link:hover { text-decoration: underline; }
[b-hdlpvigcpa] .truncation-banner { margin-bottom: 12px; }
[b-hdlpvigcpa] .kanban-status-select {
    width: 100%; font-size: 11px; padding: 4px 6px; border-radius: 4px;
    border: 1px solid var(--neutral-stroke-rest); background: var(--neutral-layer-1); color: var(--neutral-foreground-rest);
}

/* ── Dialogs (native <select>/<input> per B44 — never FluentSelect in a FluentDialog) ─── */
[b-hdlpvigcpa] .dialog-body-content { padding: 4px 0; display: flex; flex-direction: column; gap: 4px; }
[b-hdlpvigcpa] .native-field-label { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-hint); margin-bottom: 4px; display: block; }
[b-hdlpvigcpa] .fluent-input { padding: 6px 10px; border: 1px solid var(--neutral-stroke-rest); border-radius: 4px; background: var(--neutral-layer-1); color: var(--neutral-foreground-rest); font-size: 14px; width: 100%; box-sizing: border-box; }
[b-hdlpvigcpa] .fluent-input:focus { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; }
[b-hdlpvigcpa] .btn-danger { --accent-fill-rest: #d13438; --accent-fill-hover: #b91c1c; --accent-fill-active: #991b1b; color: white !important; }

[b-hdlpvigcpa] .reveal-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--neutral-stroke-divider-rest); }
[b-hdlpvigcpa] .reveal-label { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-hint); width: 70px; flex-shrink: 0; }
[b-hdlpvigcpa] .reveal-value { flex: 1; font-size: 14px; color: var(--accent-fill-rest); text-decoration: none; font-variant-numeric: tabular-nums; }
[b-hdlpvigcpa] .reveal-value:hover { text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    [b-hdlpvigcpa] .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    [b-hdlpvigcpa] .page-container { padding: 16px; }
    [b-hdlpvigcpa] .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
    [b-hdlpvigcpa] .metric-card { padding: 16px; gap: 12px; }
    [b-hdlpvigcpa] .metric-icon-wrap { width: 44px; height: 44px; }
    [b-hdlpvigcpa] .list-search { flex: 1 1 100%; max-width: 100%; order: -1; }
    [b-hdlpvigcpa] .toolbar-divider { display: none; }
    [b-hdlpvigcpa] .toolbar-filters { width: 100%; }
    [b-hdlpvigcpa] .toolbar-filters > * { flex: 1 1 100% !important; width: auto !important; }
    [b-hdlpvigcpa] .row-actions { opacity: 1; }
    [b-hdlpvigcpa] .list-footer { justify-content: center; }
    [b-hdlpvigcpa] .results-count { display: none; }
    [b-hdlpvigcpa] .kanban-column { flex: 0 0 82vw; }
}
@media (max-width: 480px) {
    [b-hdlpvigcpa] .metrics-row { grid-template-columns: 1fr; }
    [b-hdlpvigcpa] .header-actions { width: 100%; justify-content: flex-end; }
    [b-hdlpvigcpa] .product-tabs { overflow-x: auto; flex-wrap: nowrap; }
    [b-hdlpvigcpa] .kanban-column { flex: 0 0 88vw; }
}
/* /Pages/Licensing/Dashboard.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-gf2b0orkyh] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.header-content[b-gf2b0orkyh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.title-section[b-gf2b0orkyh]   { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-gf2b0orkyh] {
    font-size: 28px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}
.page-description[b-gf2b0orkyh] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }
.header-actions[b-gf2b0orkyh]  { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── State box ──────────────────────────────────────────────────────────── */
.state-box[b-gf2b0orkyh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 32px;
    color: var(--neutral-foreground-hint);
}
.state-icon[b-gf2b0orkyh]       { opacity: 0.35; }
.state-icon-error[b-gf2b0orkyh] { opacity: 0.7; color: #dc2626; }
.state-title[b-gf2b0orkyh]      { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-message[b-gf2b0orkyh]    { font-size: 14px; margin: 0; text-align: center; }

/* ── KPI strip ──────────────────────────────────────────────────────────── */
.kpi-strip[b-gf2b0orkyh] {
    display: flex;
    align-items: center;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}
.kpi-strip-item[b-gf2b0orkyh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 20px;
}
.kpi-strip-divider[b-gf2b0orkyh] {
    width: 1px;
    height: 40px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}
.kpi-strip-label[b-gf2b0orkyh] {
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.kpi-strip-value[b-gf2b0orkyh] {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1;
}
.kpi-strip-value--active[b-gf2b0orkyh]  { color: #15803d; }
.kpi-strip-value--trial[b-gf2b0orkyh]   { color: #0369a1; }
.kpi-strip-value--grace[b-gf2b0orkyh]   { color: #92400e; }
.kpi-strip-value--danger[b-gf2b0orkyh]  { color: #dc2626; }
.kpi-strip-value--muted[b-gf2b0orkyh]   { color: var(--neutral-foreground-hint); }

/* ── Skeleton loading ───────────────────────────────────────────────────── */
.skeleton-strip[b-gf2b0orkyh] {
    display: flex;
    align-items: center;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    min-height: 80px;
}

/* ── List container (FluentCard) ────────────────────────────────────────── */
.list-container[b-gf2b0orkyh] {
    border-radius: 10px !important;
    overflow: hidden;
    padding: 0 !important;
}

/* ── Grid scroll wrapper ────────────────────────────────────────────────── */
/* Grid was previously unwrapped; fixed-px columns mixed with the 1fr Tenant
   column and no min-width safety net would squish/clip on narrow viewports
   instead of scrolling horizontally. */
.grid-scroll-wrapper[b-gf2b0orkyh] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-gf2b0orkyh] table.licenses-grid {
    min-width: 740px;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.list-toolbar[b-gf2b0orkyh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}
.list-search[b-gf2b0orkyh]     { flex: 0 1 280px; }
.toolbar-divider[b-gf2b0orkyh] { width: 1px; height: 24px; background: var(--neutral-stroke-rest); flex-shrink: 0; }
.toolbar-filters[b-gf2b0orkyh] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.grid-avatar[b-gf2b0orkyh] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

/* ── Row actions (opacity:0 only — hover reveal in global-styles.css) ───── */
.row-actions[b-gf2b0orkyh] {
    display: flex;
    gap: 2px;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.row-action-btn[b-gf2b0orkyh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent !important;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    transition: background 0.12s, color 0.12s;
}
.row-action-btn:hover[b-gf2b0orkyh] { background: var(--neutral-fill-hover); color: var(--accent-fill-rest); }
.row-action-btn svg[b-gf2b0orkyh]   { fill: currentColor !important; }

/* ── Status badges ──────────────────────────────────────────────────────── */
.status-badge[b-gf2b0orkyh] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.status-badge--active[b-gf2b0orkyh]      { background: #dcfce7; color: #15803d; }
.status-badge--trial[b-gf2b0orkyh]       { background: #dbeafe; color: #1e40af; }
.status-badge--graceperiod[b-gf2b0orkyh] { background: #fef3c7; color: #92400e; }
.status-badge--suspended[b-gf2b0orkyh]   { background: #fee2e2; color: #dc2626; }
.status-badge--expired[b-gf2b0orkyh]     { background: #f1f5f9; color: #64748b; }
.status-badge--cancelled[b-gf2b0orkyh]   { background: #f1f5f9; color: #64748b; }

/* ── Plan badges ────────────────────────────────────────────────────────── */
.plan-badge[b-gf2b0orkyh] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
}
.plan-badge--enterprise[b-gf2b0orkyh]   { background: #f5f3ff; color: #4F46E5; border-color: #c4b5fd; }
.plan-badge--professional[b-gf2b0orkyh] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* ── Days-left indicators ───────────────────────────────────────────────── */
.days-critical[b-gf2b0orkyh] { color: #dc2626; font-weight: 600; }
.days-warning[b-gf2b0orkyh]  { color: #92400e; font-weight: 600; }
.days-expired[b-gf2b0orkyh]  { color: var(--neutral-foreground-hint); }

/* ── Dialog form ────────────────────────────────────────────────────────── */
.dialog-form[b-gf2b0orkyh]    { display: flex; flex-direction: column; gap: 14px; }
.dialog-hint[b-gf2b0orkyh]    { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }
.dialog-warning[b-gf2b0orkyh] { font-size: 14px; color: #dc2626; margin: 0; }

/* ── List footer / pagination ───────────────────────────────────────────── */
.list-footer[b-gf2b0orkyh] {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-gf2b0orkyh]  { padding: 16px; gap: 16px; }
    .header-content[b-gf2b0orkyh]  { flex-direction: column; }
    .header-actions[b-gf2b0orkyh]  { width: 100%; }
    /* 3-per-row KPI wrap */
    .kpi-strip[b-gf2b0orkyh]           { flex-wrap: wrap; align-items: stretch; }
    .kpi-strip-item[b-gf2b0orkyh]      { flex: 0 0 33.333%; padding: 12px 16px; }
    .kpi-strip-divider[b-gf2b0orkyh]   { display: none; }
    .kpi-strip-item:nth-child(n+7)[b-gf2b0orkyh] { border-top: 1px solid var(--neutral-stroke-rest); }
    /* Toolbar */
    .list-search[b-gf2b0orkyh]         { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-gf2b0orkyh]     { display: none; }
    .toolbar-filters[b-gf2b0orkyh]     { width: 100%; }
    .toolbar-filters > *[b-gf2b0orkyh] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 120px; }
    .row-actions[b-gf2b0orkyh]         { opacity: 1; }
}
@media (max-width: 480px) {
    /* 2-per-row KPI on phones */
    .kpi-strip-item[b-gf2b0orkyh]      { flex: 0 0 50%; }
    .kpi-strip-item:nth-child(n+5)[b-gf2b0orkyh] { border-top: 1px solid var(--neutral-stroke-rest); }
}
/* /Pages/Licensing/LicenseUsageDashboard.razor.rz.scp.css */
/* License Usage Dashboard — scoped styles */

.usage-section[b-4vdcr9o6cf] {
    margin-top: var(--spacingVerticalXXL);
}

.usage-section-title[b-4vdcr9o6cf] {
    font-size: var(--fontSizeBase500);
    font-weight: var(--fontWeightSemibold);
    margin-bottom: var(--spacingVerticalM);
    color: var(--colorNeutralForeground1);
}

/* Quota progress cards grid */
.usage-cards-grid[b-4vdcr9o6cf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacingHorizontalM);
}

.usage-card[b-4vdcr9o6cf] {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    padding: var(--spacingVerticalM) var(--spacingHorizontalM);
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXS);
}

.usage-card--warning[b-4vdcr9o6cf] {
    border-color: var(--colorStatusWarningBorderActive);
    background: var(--colorStatusWarningBackground2);
}

.usage-card--critical[b-4vdcr9o6cf] {
    border-color: var(--colorStatusDangerBorderActive);
    background: var(--colorStatusDangerBackground2);
}

.usage-card-label[b-4vdcr9o6cf] {
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
    font-weight: var(--fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.usage-card-value[b-4vdcr9o6cf] {
    font-size: var(--fontSizeBase500);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
}

.usage-card-pct[b-4vdcr9o6cf] {
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
    text-align: right;
}

/* Bureau metering card */
.usage-metering-card[b-4vdcr9o6cf] {
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    max-width: 480px;
}

.metering-row[b-4vdcr9o6cf] {
    display: flex;
    justify-content: space-between;
    padding: var(--spacingVerticalXS) 0;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.metering-row:last-of-type[b-4vdcr9o6cf] {
    border-bottom: none;
}

.metering-label[b-4vdcr9o6cf] {
    color: var(--colorNeutralForeground3);
}

.metering-value[b-4vdcr9o6cf] {
    font-weight: var(--fontWeightSemibold);
}

.metering-note[b-4vdcr9o6cf] {
    margin-top: var(--spacingVerticalS);
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
    font-style: italic;
}

/* Module access grid */
.module-grid[b-4vdcr9o6cf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalS);
    max-width: 480px;
}

.module-row[b-4vdcr9o6cf] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    padding: var(--spacingVerticalXS) var(--spacingHorizontalM);
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
}

.module-name[b-4vdcr9o6cf] {
    flex: 1;
    font-weight: var(--fontWeightSemibold);
}

.module-upgrade-hint[b-4vdcr9o6cf] {
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
    font-style: italic;
}

/* Snapshot note */
.usage-snapshot-note[b-4vdcr9o6cf] {
    margin-top: var(--spacingVerticalXL);
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
    text-align: center;
}
/* /Pages/Licensing/MySubscription.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-dbkktb40g2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}
.page-header[b-dbkktb40g2] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header-text[b-dbkktb40g2] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-dbkktb40g2] { font-size: 28px; font-weight: 700; color: var(--neutral-foreground-rest); margin: 0; line-height: 1.2; }
.page-subtitle[b-dbkktb40g2] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.skeleton-list[b-dbkktb40g2] { display: flex; flex-direction: column; background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-rest); border-radius: 10px; overflow: hidden; }
.skeleton-row[b-dbkktb40g2] { display: flex; gap: 24px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--neutral-stroke-rest); }
.skeleton-row:last-child[b-dbkktb40g2] { border-bottom: none; }

/* ── State box ──────────────────────────────────────────────────────────── */
.state-box[b-dbkktb40g2] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 32px; }
.state-icon[b-dbkktb40g2] { opacity: 0.35; }
.state-title[b-dbkktb40g2] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-message[b-dbkktb40g2] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; text-align: center; }

/* ── Detail grid ────────────────────────────────────────────────────────── */
.detail-grid[b-dbkktb40g2] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .detail-grid[b-dbkktb40g2] { grid-template-columns: 1fr; } }

/* ── Section cards ──────────────────────────────────────────────────────── */
.section-card[b-dbkktb40g2] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.section-title[b-dbkktb40g2] { font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.section-hint[b-dbkktb40g2] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }

/* ── Detail table ───────────────────────────────────────────────────────── */
.detail-table[b-dbkktb40g2] { display: flex; flex-direction: column; gap: 8px; }
.detail-row[b-dbkktb40g2] { display: flex; gap: 16px; }
.detail-label[b-dbkktb40g2] { width: 110px; flex-shrink: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.detail-value[b-dbkktb40g2] { font-size: 14px; color: var(--neutral-foreground-rest); }
.detail-value--bold[b-dbkktb40g2] { font-weight: 600; }
.detail-value--danger[b-dbkktb40g2] { color: #dc2626; font-weight: 600; }
.detail-value--warning[b-dbkktb40g2] { color: #92400e; font-weight: 600; }

/* ── Usage bars ─────────────────────────────────────────────────────────── */
.usage-row[b-dbkktb40g2] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.usage-header[b-dbkktb40g2] { display: flex; justify-content: space-between; font-size: 13px; }

/* ── Plans grid ─────────────────────────────────────────────────────────── */
.plans-grid[b-dbkktb40g2] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.plan-card[b-dbkktb40g2] { padding: 16px; border: 1px solid var(--neutral-stroke-rest); border-radius: 8px; background: var(--neutral-layer-1); }
.plan-card--current[b-dbkktb40g2] { border-color: var(--accent-fill-rest); border-width: 2px; }
.plan-card-header[b-dbkktb40g2] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.plan-name[b-dbkktb40g2] { font-size: 15px; font-weight: 600; }
.plan-features[b-dbkktb40g2] { margin: 0; padding-left: 18px; font-size: 13px; color: var(--neutral-foreground-hint); }
.plan-features li[b-dbkktb40g2] { margin-bottom: 4px; }

/* ── Status badges ──────────────────────────────────────────────────────── */
.status-badge[b-dbkktb40g2] { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-badge--active[b-dbkktb40g2]      { background: #dcfce7; color: #15803d; }
.status-badge--trial[b-dbkktb40g2]       { background: #dbeafe; color: #1e40af; }
.status-badge--graceperiod[b-dbkktb40g2] { background: #fef3c7; color: #92400e; }
.status-badge--suspended[b-dbkktb40g2]   { background: #fee2e2; color: #dc2626; }
.status-badge--expired[b-dbkktb40g2]     { background: #f1f5f9; color: #64748b; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) { .page-container[b-dbkktb40g2] { padding: 16px; gap: 16px; } }
/* /Pages/Licensing/TenantLicenseDetail.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-bospyz64vv] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}
.page-header[b-bospyz64vv] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header-text[b-bospyz64vv] { display: flex; flex-direction: column; gap: 6px; }
.page-title[b-bospyz64vv] { font-size: 28px; font-weight: 700; color: var(--neutral-foreground-rest); margin: 0; line-height: 1.2; }

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.skeleton-list[b-bospyz64vv] { display: flex; flex-direction: column; background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-rest); border-radius: 10px; overflow: hidden; }
.skeleton-row[b-bospyz64vv] { display: flex; gap: 24px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--neutral-stroke-rest); }
.skeleton-row:last-child[b-bospyz64vv] { border-bottom: none; }

/* ── Detail grid ────────────────────────────────────────────────────────── */
.detail-grid[b-bospyz64vv] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .detail-grid[b-bospyz64vv] { grid-template-columns: 1fr; } }

/* ── Section cards ──────────────────────────────────────────────────────── */
.section-card[b-bospyz64vv] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.section-title[b-bospyz64vv] { font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }

/* ── Detail table ───────────────────────────────────────────────────────── */
.detail-table[b-bospyz64vv] { display: flex; flex-direction: column; gap: 8px; }
.detail-row[b-bospyz64vv] { display: flex; gap: 16px; }
.detail-label[b-bospyz64vv] { width: 120px; flex-shrink: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.detail-value[b-bospyz64vv] { font-size: 14px; color: var(--neutral-foreground-rest); }
.detail-value--bold[b-bospyz64vv] { font-weight: 600; }
.detail-value--danger[b-bospyz64vv] { color: #dc2626; font-weight: 600; }

/* ── Usage bars ─────────────────────────────────────────────────────────── */
.usage-row[b-bospyz64vv] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.usage-header[b-bospyz64vv] { display: flex; justify-content: space-between; font-size: 13px; }

/* ── Dialog form ────────────────────────────────────────────────────────── */
.dialog-form[b-bospyz64vv] { display: flex; flex-direction: column; gap: 14px; }
.dialog-warning[b-bospyz64vv] { font-size: 14px; color: #dc2626; margin: 0; font-weight: 500; }

/* ── Status badges ──────────────────────────────────────────────────────── */
.status-badge[b-bospyz64vv] { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-badge--active[b-bospyz64vv]      { background: #dcfce7; color: #15803d; }
.status-badge--trial[b-bospyz64vv]       { background: #dbeafe; color: #1e40af; }
.status-badge--graceperiod[b-bospyz64vv] { background: #fef3c7; color: #92400e; }
.status-badge--suspended[b-bospyz64vv]   { background: #fee2e2; color: #dc2626; }
.status-badge--expired[b-bospyz64vv]     { background: #f1f5f9; color: #64748b; }
.status-badge--cancelled[b-bospyz64vv]   { background: #f1f5f9; color: #64748b; }

/* ── Action bar ─────────────────────────────────────────────────────────── */
.action-bar[b-bospyz64vv] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-danger[b-bospyz64vv] { color: #dc2626 !important; }

/* ── List container (audit log) ─────────────────────────────────────────── */
.list-container[b-bospyz64vv] { background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-rest); border-radius: 10px; overflow: hidden; }
.list-toolbar[b-bospyz64vv] { padding: 12px 16px; border-bottom: 1px solid var(--neutral-stroke-rest); background: var(--neutral-layer-1); }
.list-count[b-bospyz64vv] { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); }

/* Grid was previously unwrapped; fixed-px columns mixed with the trailing
   1fr Reason column and no min-width safety net would squish/clip on
   narrow viewports instead of scrolling horizontally. */
.grid-scroll-wrapper[b-bospyz64vv] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-bospyz64vv] table.license-audit-grid { min-width: 880px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) { .page-container[b-bospyz64vv] { padding: 16px; gap: 16px; } }
/* /Pages/LoanApplications/Approval.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Approval Detail — Stitch-grade CSS (Detail View archetype)
   Dark/light safe — all colours use RGBA or semantic tokens
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes page-enter-b-6b4ewynhy9 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@keyframes shimmer-b-6b4ewynhy9 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 32px 48px;
    max-width: 1100px;
    margin: 0 auto;
    animation: page-enter-b-6b4ewynhy9 280ms ease both;
}

/* ── Entity header ────────────────────────────────────────────────────────── */
.entity-header[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.entity-breadcrumb[b-6b4ewynhy9] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.entity-header-content[b-6b4ewynhy9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.entity-header-left[b-6b4ewynhy9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.back-btn[b-6b4ewynhy9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease;
    margin-top: 2px;
}

.back-btn:hover[b-6b4ewynhy9] { background: var(--neutral-fill-stealth-hover); }
.back-btn:focus-visible[b-6b4ewynhy9] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.entity-title-block[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.entity-name[b-6b4ewynhy9] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.entity-meta[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-text[b-6b4ewynhy9] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.meta-separator[b-6b4ewynhy9] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    opacity: 0.5;
    user-select: none;
}

.entity-header-actions[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Metric strip ─────────────────────────────────────────────────────────── */
.metric-strip[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    overflow: hidden;
    flex-wrap: wrap;
}

.metric-item[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px;
    flex: 1;
    min-width: 120px;
}

.metric-label[b-6b4ewynhy9] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-foreground-hint);
}

.metric-value[b-6b4ewynhy9] {
    font-size: 9px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.metric-value--accent[b-6b4ewynhy9] {
    color: var(--accent-foreground-rest);
    font-size: 10px;
}

.metric-divider[b-6b4ewynhy9] {
    width: 1px;
    align-self: stretch;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

/* ── Section card ─────────────────────────────────────────────────────────── */
.section-card[b-6b4ewynhy9] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}

.section-card--clipped[b-6b4ewynhy9] {
    overflow: hidden;
}

/* ── Section head ─────────────────────────────────────────────────────────── */
.section-head[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
}

.section-head-icon[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.10);
    color: var(--accent-fill-rest);
    flex-shrink: 0;
}

.section-head-text[b-6b4ewynhy9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.section-heading[b-6b4ewynhy9] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.1px;
}

.section-desc[b-6b4ewynhy9] {
    margin: 0;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Assignee chip ────────────────────────────────────────────────────────── */
.assignee-chip[b-6b4ewynhy9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #10B981;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Section divider ──────────────────────────────────────────────────────── */
.section-divider[b-6b4ewynhy9] {
    height: 1px;
    background: var(--neutral-stroke-rest);
}

/* ── Section body ─────────────────────────────────────────────────────────── */
.section-body[b-6b4ewynhy9] {
    padding: 16px 24px 24px;
}

/* ── Tab body (padding for tab content) ───────────────────────────────────── */
.tab-body[b-6b4ewynhy9] {
    padding: 20px 24px 24px;
}

/* ── Detail grid (Pattern 1A — Card Grid) ─────────────────────────────────── */
.detail-grid[b-6b4ewynhy9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
}

.detail-grid--3col[b-6b4ewynhy9] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-item[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
}

.detail-item--full[b-6b4ewynhy9] {
    grid-column: 1 / -1;
}

.detail-label[b-6b4ewynhy9] {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 0;
}

.detail-value[b-6b4ewynhy9] {
    font-size: 14px;
    font-weight: 400;
    color: var(--neutral-foreground-rest);
    line-height: 1.5;
    margin: 0;
}

.detail-value--bold[b-6b4ewynhy9] { font-weight: 700; }

.detail-value a[b-6b4ewynhy9],
.meta-text a[b-6b4ewynhy9] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

.detail-value a:hover[b-6b4ewynhy9],
.meta-text a:hover[b-6b4ewynhy9] {
    text-decoration: underline;
}

.product-info-btn[b-6b4ewynhy9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 4px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    vertical-align: middle;
}

.product-info-btn:hover[b-6b4ewynhy9] {
    background: var(--neutral-fill-hover, rgba(0, 0, 0, 0.06));
    color: var(--accent-fill-rest);
}

.product-info-card[b-6b4ewynhy9] {
    min-width: 220px;
    max-width: 280px;
    padding: 4px 2px;
    font-size: 12px;
}

.pic-header[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
}

.pic-name[b-6b4ewynhy9] {
    font-weight: 700;
    font-size: 13px;
}

.pic-badge[b-6b4ewynhy9] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

.pic-badge--active[b-6b4ewynhy9] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.pic-badge--inactive[b-6b4ewynhy9] { background: rgba(148, 163, 184, 0.2); color: #64748b; }

.pic-row[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.pic-label[b-6b4ewynhy9] {
    color: var(--neutral-foreground-hint);
}

.pic-value[b-6b4ewynhy9] {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.pic-empty[b-6b4ewynhy9] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.customer-info-card[b-6b4ewynhy9] {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
}

.cic-header[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
}

.cic-title[b-6b4ewynhy9] {
    font-weight: 700;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

.cic-link[b-6b4ewynhy9] {
    font-size: 12px;
    color: var(--accent-fill-rest);
    text-decoration: none;
}

.cic-link:hover[b-6b4ewynhy9] {
    text-decoration: underline;
}

.cic-empty[b-6b4ewynhy9] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.customer-info-card .detail-grid[b-6b4ewynhy9] {
    gap: 4px 24px;
}

.customer-info-card .detail-item[b-6b4ewynhy9] {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 4px 0;
    gap: 2px;
}

.detail-empty[b-6b4ewynhy9] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

/* ── Touchpoints list ─────────────────────────────────────────────────────── */
.touchpoints-list[b-6b4ewynhy9] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.touchpoints-list li + li[b-6b4ewynhy9] { margin-top: 4px; }

/* ── Assignee row ─────────────────────────────────────────────────────────── */
.assignee-row[b-6b4ewynhy9] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.assignee-select-wrap[b-6b4ewynhy9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assignee-label[b-6b4ewynhy9] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
}

/* Native <select> styled to match Fluent UI inputs */
.fluent-select-native[b-6b4ewynhy9] {
    appearance: auto;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size);
    cursor: pointer;
}
.fluent-select-native:focus[b-6b4ewynhy9] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

/* ── Submit banner ────────────────────────────────────────────────────────── */
.submit-banner[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.submit-banner-icon[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.10);
    color: var(--accent-fill-rest);
    flex-shrink: 0;
}

.submit-banner-body[b-6b4ewynhy9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.submit-banner-title[b-6b4ewynhy9] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.submit-banner-desc[b-6b4ewynhy9] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Decision sections ────────────────────────────────────────────────────── */
.decision-section[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.decision-section-title[b-6b4ewynhy9] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 8px;
}

.decision-section-title[b-6b4ewynhy9]::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.decision-section--approve  .decision-section-title[b-6b4ewynhy9]::before { background: #10B981; }
.decision-section--info     .decision-section-title[b-6b4ewynhy9]::before { background: #6366F1; }
.decision-section--escalate .decision-section-title[b-6b4ewynhy9]::before { background: #F59E0B; }

/* ── Form grid ────────────────────────────────────────────────────────────── */
.form-grid[b-6b4ewynhy9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-grid--full[b-6b4ewynhy9] {
    grid-column: 1 / -1;
}

/* ── Decision actions ─────────────────────────────────────────────────────── */
.decision-actions[b-6b4ewynhy9] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Error bar ────────────────────────────────────────────────────────────── */
.error-bar[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(239, 68, 68, 0.08);
    border-bottom: 1px solid rgba(239, 68, 68, 0.22);
    font-size: 13px;
    color: #EF4444;
}

/* ── Status badges (RGBA — dark/light safe) ───────────────────────────────── */
.status-badge[b-6b4ewynhy9] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    line-height: 1.4;
}

.status-draft[b-6b4ewynhy9]           { background: rgba(107, 114, 128, 0.12); color: var(--neutral-foreground-hint); }
.status-submitted[b-6b4ewynhy9],
.status-underreview[b-6b4ewynhy9],
.status-pendingreview[b-6b4ewynhy9]   { background: rgba(99, 102, 241, 0.12);  color: #6366F1; }
.status-approved[b-6b4ewynhy9]        { background: rgba(16, 185, 129, 0.12);  color: #10B981; }
.status-rejected[b-6b4ewynhy9]        { background: rgba(239, 68, 68, 0.12);   color: #EF4444; }
.status-moreinforequired[b-6b4ewynhy9] { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.status-escalated[b-6b4ewynhy9]       { background: rgba(249, 115, 22, 0.12);  color: #F97316; }
.status-creditassessed[b-6b4ewynhy9]  { background: rgba(99, 102, 241, 0.12);  color: #6366F1; }
.status-disbursed[b-6b4ewynhy9]       { background: rgba(6, 182, 212, 0.12);   color: #0891B2; }
.status-cancelled[b-6b4ewynhy9],
.status-withdrawn[b-6b4ewynhy9],
.status-expired[b-6b4ewynhy9]         { background: rgba(107, 114, 128, 0.12); color: #6B7280; }

/* ── State box (empty / error / completion) ───────────────────────────────── */
.state-box[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 80px 24px;
    text-align: center;
}

.state-box--compact[b-6b4ewynhy9] { padding: 32px 24px; }

.state-icon[b-6b4ewynhy9]       { opacity: 0.35; color: var(--neutral-foreground-hint); }
.state-icon--error[b-6b4ewynhy9]   { opacity: 0.8; color: #EF4444; }
.state-icon--success[b-6b4ewynhy9] { opacity: 1; color: #10B981; }

.state-title[b-6b4ewynhy9] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-message[b-6b4ewynhy9] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    max-width: 400px;
}

/* ── Empty inline (within tabs) ───────────────────────────────────────────── */
.empty-state-inline[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    gap: 8px;
    text-align: center;
}

.empty-text[b-6b4ewynhy9] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

/* ── Grid scroll wrapper ──────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-6b4ewynhy9] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Grid min-width (horizontal overflow safety net) ──────────────────────── */
[b-6b4ewynhy9] table.deviations-grid {
    min-width: 640px;
}

[b-6b4ewynhy9] table.approval-steps-grid {
    min-width: 600px;
}

[b-6b4ewynhy9] table.collateral-items-grid {
    min-width: 780px;
}

/* ── Skeleton (shimmer) ───────────────────────────────────────────────────── */
.skeleton-page[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.skeleton-header[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-title-row[b-6b4ewynhy9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.skeleton-title-block[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-meta-row[b-6b4ewynhy9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skeleton-strip[b-6b4ewynhy9] {
    display: flex;
    gap: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    background: var(--neutral-layer-2);
}

.skeleton-strip-item[b-6b4ewynhy9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px;
    border-right: 1px solid var(--neutral-stroke-rest);
}

.skeleton-strip-item:last-child[b-6b4ewynhy9] { border-right: none; }

.skeleton-card[b-6b4ewynhy9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    background: var(--neutral-layer-2);
}

.skeleton-detail-row[b-6b4ewynhy9] {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.skeleton-detail-row:last-child[b-6b4ewynhy9] { border-bottom: none; }

/* ── Focus-visible ────────────────────────────────────────────────────────── */
.section-card:focus-within[b-6b4ewynhy9] {
    outline: none;
}

.metric-item:focus-visible[b-6b4ewynhy9],
.detail-item:focus-visible[b-6b4ewynhy9] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
    border-radius: 8px;
}

/* ── Responsive: 1280px ───────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .page-container[b-6b4ewynhy9] { max-width: 980px; }
}

/* ── Responsive: 1024px ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-6b4ewynhy9] { padding: 20px 20px 36px; }
    .metric-item[b-6b4ewynhy9] { padding: 14px 16px; min-width: 100px; }
}

/* ── Responsive: 768px (tablet) ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-6b4ewynhy9] { padding: 16px 12px 28px; gap: 20px; }

    .entity-header-content[b-6b4ewynhy9] {
        flex-direction: column;
        align-items: flex-start;
    }
    .entity-header-actions[b-6b4ewynhy9] {
        width: 100%;
        justify-content: flex-start;
    }
    .entity-name[b-6b4ewynhy9] { font-size: 22px; }
    .entity-meta[b-6b4ewynhy9] { gap: 6px; }

    .metric-strip[b-6b4ewynhy9] { flex-direction: column; }
    .metric-divider[b-6b4ewynhy9] { width: 100%; height: 1px; }
    .metric-item[b-6b4ewynhy9] { min-width: auto; flex: none; width: 100%; }

    .detail-grid[b-6b4ewynhy9] { grid-template-columns: 1fr; }
    .form-grid[b-6b4ewynhy9] { grid-template-columns: 1fr; }
    .tab-body[b-6b4ewynhy9] { padding: 16px; }

    .section-head[b-6b4ewynhy9] { padding: 14px 16px; }
    .section-body[b-6b4ewynhy9] { padding: 12px 16px 16px; }
    .submit-banner[b-6b4ewynhy9] { padding: 16px; gap: 12px; flex-wrap: wrap; }
    .assignee-row[b-6b4ewynhy9] { flex-direction: column; align-items: stretch; }
    .decision-section[b-6b4ewynhy9] { padding: 16px; }
}

/* ── Responsive: 640px (large phone) ──────────────────────────────────────── */
@media (max-width: 640px) {
    .page-container[b-6b4ewynhy9] { padding: 12px 10px 24px; gap: 16px; }
    .entity-name[b-6b4ewynhy9] { font-size: 20px; }
    .entity-header-left[b-6b4ewynhy9] { gap: 8px; }
    .section-head[b-6b4ewynhy9] { gap: 10px; }
    .section-head-icon[b-6b4ewynhy9] { width: 32px; height: 32px; }
    .state-box[b-6b4ewynhy9] { padding: 48px 16px; }
}

/* ── Responsive: 375px (small phone) ──────────────────────────────────────── */
@media (max-width: 375px) {
    .page-container[b-6b4ewynhy9] { padding: 8px 8px 20px; }
    .entity-name[b-6b4ewynhy9] { font-size: 18px; }
    .metric-item[b-6b4ewynhy9] { padding: 12px; }
    .metric-label[b-6b4ewynhy9] { font-size: 10px; }
    .metric-value[b-6b4ewynhy9] { font-size: 8px; }
    .metric-value--accent[b-6b4ewynhy9] { font-size: 9px; }
    .detail-item[b-6b4ewynhy9] { padding: 10px 12px; }
    .section-head[b-6b4ewynhy9] { padding: 12px; }
    .section-body[b-6b4ewynhy9] { padding: 10px 12px 14px; }
    .tab-body[b-6b4ewynhy9] { padding: 12px; }
    .decision-section[b-6b4ewynhy9] { padding: 12px; }
    .submit-banner[b-6b4ewynhy9] { padding: 12px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .page-container[b-6b4ewynhy9] { animation: none; }
    *[b-6b4ewynhy9], *[b-6b4ewynhy9]::before, *[b-6b4ewynhy9]::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ── Collateral tab ───────────────────────────────────────────────────────── */
.collateral-summary-header[b-6b4ewynhy9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0 0.75rem;
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint, rgba(0,0,0,0.6));
    border-bottom: 1px solid var(--neutral-stroke-layer-rest, rgba(0,0,0,0.08));
    margin-bottom: 0.75rem;
}

.collateral-total[b-6b4ewynhy9] {
    font-weight: 600;
    color: var(--accent-foreground-rest, #0078d4);
}
/* /Pages/LoanApplications/Create.razor.rz.scp.css */
/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes card-enter-b-f8h3vjzjr9 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes step-pulse-b-f8h3vjzjr9 {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--accent-fill-rest-rgb, 0 120 212) / .22); }
    50%      { box-shadow: 0 0 0 7px rgba(var(--accent-fill-rest-rgb, 0 120 212) / .10); }
}

@keyframes shimmer-b-f8h3vjzjr9 {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0;  }
}

/* ── Wizard shell ─────────────────────────────────────────────────────────── */
.wizard-shell[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 32px 48px;
    max-width: 800px;
    margin: 0 auto;
    animation: card-enter-b-f8h3vjzjr9 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ── Wizard header ────────────────────────────────────────────────────────── */
.wizard-header[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wizard-title[b-f8h3vjzjr9] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.wizard-subtitle[b-f8h3vjzjr9] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

/* ── Step indicator ───────────────────────────────────────────────────────── */
.wizard-steps[b-f8h3vjzjr9] {
    display: flex;
    align-items: flex-start;
    padding: 20px 16px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);
    overflow-x: auto;
}

.step-item[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 72px;
    position: relative;
    cursor: default;
}

.step-connector[b-f8h3vjzjr9] {
    position: absolute;
    top: 16px;
    right: calc(50% + 18px);
    left: calc(-50% + 18px);
    height: 2px;
    background: var(--neutral-stroke-rest);
    z-index: 0;
    transition: background 300ms ease;
}

.step-connector--done[b-f8h3vjzjr9] {
    background: var(--accent-fill-rest);
}

.step-marker[b-f8h3vjzjr9] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    z-index: 1;
    position: relative;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    user-select: none;
}

.step-marker--active[b-f8h3vjzjr9] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: #ffffff;
    animation: step-pulse-b-f8h3vjzjr9 2.4s ease-in-out infinite;
}

.step-marker--done[b-f8h3vjzjr9] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: #ffffff;
}

.step-number[b-f8h3vjzjr9] {
    line-height: 1;
}

.step-label[b-f8h3vjzjr9] {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    transition: color 200ms ease;
}

.step-item--active .step-label[b-f8h3vjzjr9] {
    color: var(--accent-foreground-rest);
    font-size: 12px;
    font-weight: 700;
}

.step-item--done .step-label[b-f8h3vjzjr9] {
    color: var(--neutral-foreground-rest);
}

/* ── Wizard content card ──────────────────────────────────────────────────── */
.wizard-content[b-f8h3vjzjr9] {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);
}

/* ── Step body ────────────────────────────────────────────────────────────── */
.step-body[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 32px 80px;
}

/* ── Form section ─────────────────────────────────────────────────────────── */
.form-section[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-section-title[b-f8h3vjzjr9] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    letter-spacing: -0.01em;
}

/* ── Form grid (2-col default) ────────────────────────────────────────────── */
.form-grid[b-f8h3vjzjr9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid--single[b-f8h3vjzjr9] {
    grid-template-columns: 1fr;
    gap: 20px;
}

.form-col-full[b-f8h3vjzjr9] {
    grid-column: 1 / -1;
}

/* ── Form labels ──────────────────────────────────────────────────────────── */
.form-label[b-f8h3vjzjr9] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.required-star[b-f8h3vjzjr9] { color: var(--error-foreground-rest, #c62828); }

/* ── Customer confirmation card ───────────────────────────────────────────── */
.customer-confirm-card[b-f8h3vjzjr9] {
    border: 1px solid var(--accent-fill-rest);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-fill-rest) 6%, var(--neutral-layer-1));
    animation: card-enter-b-f8h3vjzjr9 200ms cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}

.ccc-header[b-f8h3vjzjr9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-fill-rest) 20%, transparent);
}

.ccc-avatar[b-f8h3vjzjr9] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ccc-identity[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ccc-name[b-f8h3vjzjr9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccc-code[b-f8h3vjzjr9] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

.ccc-clear-btn[b-f8h3vjzjr9] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    transition: background 150ms ease, color 150ms ease;
    flex-shrink: 0;
}

.ccc-clear-btn:hover[b-f8h3vjzjr9] {
    background: rgba(198, 40, 40, .1);
    color: #c62828;
}

.ccc-body[b-f8h3vjzjr9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.ccc-row[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent);
}

.ccc-row:nth-last-child(-n+2)[b-f8h3vjzjr9] {
    border-bottom: none;
}

.ccc-label[b-f8h3vjzjr9] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--neutral-foreground-hint);
}

.ccc-value[b-f8h3vjzjr9] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.ccc-kyc[b-f8h3vjzjr9] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
}

.ccc-kyc--verified[b-f8h3vjzjr9]  { background: rgba(22, 163, 74, .12);  color: #16a34a; }
.ccc-kyc--pending[b-f8h3vjzjr9]   { background: rgba(245, 158, 11, .12); color: #d97706; }
.ccc-kyc--rejected[b-f8h3vjzjr9]  { background: rgba(198, 40, 40, .12);  color: #c62828; }
.ccc-kyc--notstarted[b-f8h3vjzjr9] { background: rgba(107, 114, 128, .12); color: #6b7280; }

.hint-text[b-f8h3vjzjr9] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 4px 0 0;
}

/* ── Info / warning bar ───────────────────────────────────────────────────── */
.info-bar[b-f8h3vjzjr9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 25%, transparent);
    border-left: 3px solid var(--accent-fill-rest);
    border-radius: 8px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    line-height: 1.5;
}

.info-bar--warning[b-f8h3vjzjr9] {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .25);
    border-left-color: #D97706;
}

.info-bar--range[b-f8h3vjzjr9] {
    background: rgba(34, 197, 94, .08);
    border-color: rgba(34, 197, 94, .25);
    border-left-color: #16a34a;
}

/* ── Error bar ────────────────────────────────────────────────────────────── */
.error-bar[b-f8h3vjzjr9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 32px 20px;
    padding: 12px 16px;
    background: rgba(198, 40, 40, .08);
    border: 1px solid rgba(198, 40, 40, .25);
    border-left: 3px solid #c62828;
    border-radius: 8px;
    font-size: 13px;
    color: #b91c1c;
    line-height: 1.5;
}

/* ── Review grid ──────────────────────────────────────────────────────────── */
.review-grid[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-section[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

.review-section-title[b-f8h3vjzjr9] {
    margin: 0;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-2);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.review-row[b-f8h3vjzjr9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.review-row:last-child[b-f8h3vjzjr9] { border-bottom: none; }

.review-label[b-f8h3vjzjr9] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
    min-width: 160px;
}

.review-value[b-f8h3vjzjr9] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    text-align: right;
}

.amount-cell[b-f8h3vjzjr9] {
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.skeleton-list[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 32px;
}

.skeleton-field[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton[b-f8h3vjzjr9] {
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--neutral-layer-2) 25%,
        var(--neutral-stroke-rest) 50%,
        var(--neutral-layer-2) 75%
    );
    background-size: 800px 100%;
    animation: shimmer-b-f8h3vjzjr9 1.6s ease-in-out infinite;
}

.skeleton-label[b-f8h3vjzjr9] {
    width: 30%;
    height: 13px;
}

.skeleton-input[b-f8h3vjzjr9] {
    width: 100%;
    height: 36px;
}

/* ── Sticky wizard footer ─────────────────────────────────────────────────── */
.wizard-footer[b-f8h3vjzjr9] {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    background: var(--neutral-layer-2);
    border-top: 1px solid var(--neutral-stroke-rest);
    border-radius: 0 0 12px 12px;
    z-index: 10;
}

.wizard-footer-left[b-f8h3vjzjr9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-footer-right[b-f8h3vjzjr9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wizard-shell[b-f8h3vjzjr9] { animation: none; }
    .step-marker--active[b-f8h3vjzjr9] { animation: none; }
    .skeleton[b-f8h3vjzjr9] { animation: none; }
}

/* ── Responsive: tablet ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .wizard-shell[b-f8h3vjzjr9] { padding: 20px 20px 32px; }
}

/* ── Responsive: small tablet ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wizard-shell[b-f8h3vjzjr9] { padding: 16px 12px 24px; gap: 16px; }
    .wizard-steps[b-f8h3vjzjr9] { padding: 16px 12px; }
    .step-label[b-f8h3vjzjr9] { display: none; }
    .form-grid[b-f8h3vjzjr9] { grid-template-columns: 1fr; gap: 16px; }
    .step-body[b-f8h3vjzjr9] { padding: 20px 20px 80px; }
    .wizard-footer[b-f8h3vjzjr9] { padding: 14px 20px; }
    .review-label[b-f8h3vjzjr9] { min-width: 120px; }
}

/* ── Responsive: phone ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wizard-shell[b-f8h3vjzjr9] { padding: 12px 8px 16px; gap: 12px; }
    .step-body[b-f8h3vjzjr9] { padding: 16px 12px 72px; }
    .wizard-footer[b-f8h3vjzjr9] { padding: 12px 16px; }
    .review-row[b-f8h3vjzjr9] { flex-direction: column; gap: 4px; }
    .review-value[b-f8h3vjzjr9] { text-align: left; }
}

/* ── Collateral step ────────────────────────────────────────────────────────── */
.collateral-list[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.collateral-list-item[b-f8h3vjzjr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
}

.cli-info[b-f8h3vjzjr9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cli-desc[b-f8h3vjzjr9] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cli-meta[b-f8h3vjzjr9] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.collateral-form-fieldset[b-f8h3vjzjr9] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0;
}

.collateral-form-fieldset legend[b-f8h3vjzjr9] {
    font-size: 13px;
    font-weight: 600;
    padding: 0 6px;
    color: var(--neutral-foreground-hint);
}

.form-grid--sub[b-f8h3vjzjr9] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-subtle);
}

.form-check-row[b-f8h3vjzjr9] {
    display: flex;
    align-items: center;
    padding-top: 20px;
}

.collateral-add-row[b-f8h3vjzjr9] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.review-row--total[b-f8h3vjzjr9] {
    border-top: 1px solid var(--neutral-stroke-rest);
    margin-top: 4px;
    padding-top: 4px;
}

.native-select[b-f8h3vjzjr9] {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    outline: none;
}

.native-select:focus[b-f8h3vjzjr9] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}
/* /Pages/LoanApplications/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Loan Applications — Stitch-grade scoped CSS
   Archetype: List View (§7.3)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-ms89j6rrkb {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-b-ms89j6rrkb {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    *[b-ms89j6rrkb], *[b-ms89j6rrkb]::before, *[b-ms89j6rrkb]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-ms89j6rrkb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 32px 40px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-ms89j6rrkb 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-ms89j6rrkb] { margin-bottom: 0; }

.header-content[b-ms89j6rrkb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-ms89j6rrkb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.page-title[b-ms89j6rrkb] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--neutral-foreground-rest);
}

.page-description[b-ms89j6rrkb] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.header-actions[b-ms89j6rrkb] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Metric cards row ────────────────────────────────────────────────────── */
.metrics-row[b-ms89j6rrkb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-ms89j6rrkb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-ms89j6rrkb] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-ms89j6rrkb] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-ms89j6rrkb]   { background: rgba(79, 70, 229, 0.12); color: #4F46E5; }
.metric-icon-green[b-ms89j6rrkb]  { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.metric-icon-purple[b-ms89j6rrkb] { background: rgba(99, 102, 241, 0.14); color: #6366F1; }
.metric-icon-amber[b-ms89j6rrkb]  { background: rgba(217, 119, 6, 0.12);  color: #D97706; }

.metric-body[b-ms89j6rrkb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-ms89j6rrkb] {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-ms89j6rrkb] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-ms89j6rrkb] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container ──────────────────────────────────────────────────────── */
.list-container[b-ms89j6rrkb] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-ms89j6rrkb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.list-search[b-ms89j6rrkb] {
    flex: 0 0 260px;
    max-width: 260px;
}

.toolbar-divider[b-ms89j6rrkb] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-ms89j6rrkb] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* ── Skeleton shimmer ────────────────────────────────────────────────────── */
.skeleton-list[b-ms89j6rrkb] {
    display: flex;
    flex-direction: column;
}

.skeleton-row[b-ms89j6rrkb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.skeleton-row:last-child[b-ms89j6rrkb] { border-bottom: none; }

.skeleton-cell[b-ms89j6rrkb] {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-ms89j6rrkb 1.5s infinite;
}

.skeleton-cell.skeleton-avatar[b-ms89j6rrkb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-cell.wide[b-ms89j6rrkb]    { width: 25%; }
.skeleton-cell.medium[b-ms89j6rrkb]  { width: 18%; }
.skeleton-cell.short[b-ms89j6rrkb]   { width: 10%; }
.skeleton-cell.actions[b-ms89j6rrkb] { width: 90px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state[b-ms89j6rrkb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
}

.empty-heading[b-ms89j6rrkb] {
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.empty-description[b-ms89j6rrkb] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 400px;
}

/* ── Error bar ───────────────────────────────────────────────────────────── */
.list-error-bar[b-ms89j6rrkb] { margin: 16px; }

/* ── Status badges (RGBA for dark-mode safety) ───────────────────────────── */
.status-badge[b-ms89j6rrkb] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.status-draft[b-ms89j6rrkb]         { background: rgba(217, 119, 6, 0.12);  color: #D97706; }
.status-submitted[b-ms89j6rrkb]     { background: rgba(99, 102, 241, 0.12); color: #6366F1; }
.status-underreview[b-ms89j6rrkb]   { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.status-inforequested[b-ms89j6rrkb] { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.status-escalated[b-ms89j6rrkb]     { background: rgba(239, 68, 68, 0.12);  color: #EF4444; }
.status-approved[b-ms89j6rrkb]      { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.status-rejected[b-ms89j6rrkb]      { background: rgba(239, 68, 68, 0.14);  color: #9F1239; }
.status-disbursed[b-ms89j6rrkb]     { background: rgba(6, 182, 212, 0.12);  color: #0891B2; }
.status-cancelled[b-ms89j6rrkb],
.status-withdrawn[b-ms89j6rrkb],
.status-expired[b-ms89j6rrkb]       { background: rgba(107, 114, 128, 0.12); color: #6B7280; }

/* ── Grid helper cells ───────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-ms89j6rrkb] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-ms89j6rrkb] table.loan-app-grid {
    min-width: 1020px;
}

.amount-cell[b-ms89j6rrkb] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.assigned-cell[b-ms89j6rrkb] {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unassigned-cell[b-ms89j6rrkb] {
    color: var(--neutral-foreground-hint);
}

/* ── Row actions (initial hidden — hover-reveal in global-styles.css) ───── */
.row-actions[b-ms89j6rrkb] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    transition: opacity 200ms ease;
}

.row-action-btn[b-ms89j6rrkb] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border, color, hover → global-styles.css */
}

/* ── List footer ─────────────────────────────────────────────────────────── */
.list-footer[b-ms89j6rrkb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-ms89j6rrkb] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive breakpoints
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1024px ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-ms89j6rrkb] { padding: 20px 20px 32px; }
    .metrics-row[b-ms89j6rrkb] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 768px ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-ms89j6rrkb] { padding: 16px 12px 24px; gap: 16px; }
    .page-title[b-ms89j6rrkb] { font-size: 22px; }
    .header-content[b-ms89j6rrkb] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-ms89j6rrkb] { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .metrics-row[b-ms89j6rrkb] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-card[b-ms89j6rrkb] { padding: 14px; gap: 12px; }
    .metric-value[b-ms89j6rrkb] { font-size: 9px; }
    .metric-icon-wrap[b-ms89j6rrkb] { width: 40px; height: 40px; }
    .list-search[b-ms89j6rrkb] { flex: 1 1 100%; max-width: 100%; }
    .toolbar-filters[b-ms89j6rrkb] { width: 100%; }
    .row-actions[b-ms89j6rrkb] { opacity: 1; } /* always visible on touch */
}

/* ── 480px ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .page-container[b-ms89j6rrkb] { padding: 12px 8px 20px; }
    .page-title[b-ms89j6rrkb] { font-size: 20px; }
    .metrics-row[b-ms89j6rrkb] { grid-template-columns: 1fr; }
    .metric-desc[b-ms89j6rrkb] { display: none; }
    /* Allow action buttons to wrap to a second line instead of overflowing */
    .header-actions[b-ms89j6rrkb] { flex-wrap: wrap; overflow-x: visible; }
}
/* /Pages/LoanApplications/MyDashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   MyDashboard.razor.css — Loan Officer Dashboard
   Archetype: Dashboard (KPIs + List)
   Design: Stitch-grade · Soft Misty · Dark/Light safe
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes fade-up-b-i2kgmltoty {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-i2kgmltoty], *[b-i2kgmltoty]::before, *[b-i2kgmltoty]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-i2kgmltoty] {
    padding: 32px 40px;
    max-width: 1440px;
    margin: 0 auto;
    animation: fade-up-b-i2kgmltoty 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-i2kgmltoty] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-i2kgmltoty] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.page-title[b-i2kgmltoty] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.025em;
}

.page-subtitle[b-i2kgmltoty] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    line-height: 1.5;
}

.page-actions[b-i2kgmltoty] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── KPI Metric Cards ─────────────────────────────────────────────────────── */
.metrics-row[b-i2kgmltoty] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-i2kgmltoty] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
    transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1),
                transform 200ms cubic-bezier(0.4,0,0.2,1);
    cursor: default;
    min-width: 0;
}

.metric-card:hover[b-i2kgmltoty],
.metric-card:focus-visible[b-i2kgmltoty] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}

.metric-card:focus-visible[b-i2kgmltoty] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.metric-card-wide[b-i2kgmltoty] {
    grid-column: span 1;
}

.metric-card-skeleton[b-i2kgmltoty] {
    min-height: 88px;
}

.metric-icon-wrap[b-i2kgmltoty] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-i2kgmltoty] { width: 24px; height: 24px; fill: currentColor !important; }

/* Misty, soft icon backgrounds — dark/light safe */
.metric-icon-blue[b-i2kgmltoty]   { background: rgba(79,70,229,0.10);  color: #4F46E5; }
.metric-icon-green[b-i2kgmltoty]  { background: rgba(16,185,129,0.10);  color: #10B981; }
.metric-icon-amber[b-i2kgmltoty]  { background: rgba(245,158,11,0.10);  color: #D97706; }
.metric-icon-red[b-i2kgmltoty]    { background: rgba(239,68,68,0.10);   color: #EF4444; }
.metric-icon-purple[b-i2kgmltoty] { background: rgba(139,92,246,0.10);  color: #8B5CF6; }
.metric-icon-teal[b-i2kgmltoty]   { background: rgba(20,184,166,0.10);  color: #14B8A6; }

.metric-body[b-i2kgmltoty] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-i2kgmltoty] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.metric-value-currency[b-i2kgmltoty] {
    font-size: 12px;
}

.metric-label[b-i2kgmltoty] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.metric-desc[b-i2kgmltoty] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    opacity: 0.75;
    line-height: 1.3;
}

/* ── List section ─────────────────────────────────────────────────────────── */
.list-section[b-i2kgmltoty] {
    display: flex;
    flex-direction: column;
}

.list-container[b-i2kgmltoty] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-i2kgmltoty] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
    background: var(--neutral-layer-1);
}

.list-search[b-i2kgmltoty] {
    flex: 1 1 220px;
    min-width: 180px;
}

.toolbar-divider[b-i2kgmltoty] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-i2kgmltoty] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Data Grid ────────────────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-i2kgmltoty] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-i2kgmltoty] table.dashboard-grid {
    min-width: 960px;
}

.grid-avatar[b-i2kgmltoty] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.grid-avatar-sm[b-i2kgmltoty] {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.app-cell[b-i2kgmltoty] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-number[b-i2kgmltoty] {
    font-weight: 600;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-customer[b-i2kgmltoty] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purpose-cell[b-i2kgmltoty] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.amount-cell[b-i2kgmltoty] {
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

.dti-cell[b-i2kgmltoty] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

.dti-na[b-i2kgmltoty] {
    color: var(--neutral-foreground-hint);
}

/* ── Risk & Status badges (dark/light safe with RGBA) ─────────────────────── */
.risk-badge[b-i2kgmltoty],
.status-badge[b-i2kgmltoty] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

/* Risk badges — using RGBA for dark mode safe backgrounds */
.risk-a[b-i2kgmltoty]  { background: rgba(16,185,129,0.12); color: #059669; }
.risk-b[b-i2kgmltoty]  { background: rgba(59,130,246,0.12); color: #2563EB; }
.risk-c[b-i2kgmltoty]  { background: rgba(245,158,11,0.12); color: #B45309; }
.risk-d[b-i2kgmltoty]  { background: rgba(249,115,22,0.12); color: #C2410C; }
.risk-e[b-i2kgmltoty]  { background: rgba(239,68,68,0.12);  color: #DC2626; }
.risk-na[b-i2kgmltoty] { background: rgba(107,114,128,0.10); color: var(--neutral-foreground-hint); }

/* Status badges — RGBA for dark mode safe backgrounds */
.status-draft[b-i2kgmltoty]         { background: rgba(107,114,128,0.10); color: var(--neutral-foreground-hint); }
.status-submitted[b-i2kgmltoty]     { background: rgba(59,130,246,0.12);  color: #2563EB; }
.status-underreview[b-i2kgmltoty]   { background: rgba(99,102,241,0.12);  color: #4F46E5; }
.status-inforequested[b-i2kgmltoty] { background: rgba(245,158,11,0.12);  color: #B45309; }
.status-escalated[b-i2kgmltoty]     { background: rgba(236,72,153,0.12);  color: #BE185D; }
.status-approved[b-i2kgmltoty]      { background: rgba(16,185,129,0.12);  color: #059669; }
.status-rejected[b-i2kgmltoty]      { background: rgba(239,68,68,0.12);   color: #DC2626; }

/* ── Row actions ──────────────────────────────────────────────────────────── */
.col-actions[b-i2kgmltoty] { overflow: visible !important; }

.row-actions[b-i2kgmltoty] {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 150ms ease;
}

/* Show on row hover (desktop) */
[b-i2kgmltoty] tr:hover .row-actions,
[b-i2kgmltoty] tr:focus-within .row-actions,
.row-actions:focus-within[b-i2kgmltoty] {
    opacity: 1;
}

.row-action-btn[b-i2kgmltoty] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.row-action-btn:hover[b-i2kgmltoty] {
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
}

.row-action-btn:focus-visible[b-i2kgmltoty] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.row-action-accent:hover[b-i2kgmltoty] {
    background: rgba(79,70,229,0.12);
    color: #4F46E5;
}

/* ── Mobile card list ─────────────────────────────────────────────────────── */
.card-list-mobile[b-i2kgmltoty] {
    display: none;
}

.mobile-card[b-i2kgmltoty] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    cursor: pointer;
    transition: background 150ms ease;
}

.mobile-card:hover[b-i2kgmltoty] {
    background: var(--neutral-layer-2);
}

.mobile-card:last-child[b-i2kgmltoty] {
    border-bottom: none;
}

.mobile-card-top[b-i2kgmltoty] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-card-info[b-i2kgmltoty] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mobile-card-details[b-i2kgmltoty] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-left: 44px;
}

.mobile-detail[b-i2kgmltoty] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-detail-full[b-i2kgmltoty] {
    flex-basis: 100%;
}

.mobile-detail-label[b-i2kgmltoty] {
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-detail-value[b-i2kgmltoty] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.mobile-card-actions[b-i2kgmltoty] {
    display: flex;
    gap: 8px;
    padding-left: 44px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.list-footer[b-i2kgmltoty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-rest);
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-i2kgmltoty] {
    font-variant-numeric: tabular-nums;
}

/* ── State boxes (loading / error / empty) ────────────────────────────────── */
.state-box[b-i2kgmltoty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    text-align: center;
    gap: 12px;
}

.state-icon[b-i2kgmltoty] { color: var(--neutral-foreground-hint); opacity: 0.6; }
.state-icon-error[b-i2kgmltoty] { color: var(--error-foreground-rest, #DC2626); opacity: 1; }

.state-title[b-i2kgmltoty] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.state-message[b-i2kgmltoty] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 420px;
    line-height: 1.5;
}

/* ── Skeletons ────────────────────────────────────────────────────────────── */
.skeleton-list[b-i2kgmltoty] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-row[b-i2kgmltoty] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.skeleton-col[b-i2kgmltoty] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Button label visibility (collapse text on small screens) ─────────────── */
.btn-label-desktop[b-i2kgmltoty] {
    display: inline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet landscape -------------------------------------------------------- */
@media (max-width: 1280px) {
    .metrics-row[b-i2kgmltoty] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .metric-card-wide[b-i2kgmltoty] {
        grid-column: span 1;
    }
}

/* Tablet portrait --------------------------------------------------------- */
@media (max-width: 1024px) {
    .page-container[b-i2kgmltoty] {
        padding: 24px;
    }
    .metrics-row[b-i2kgmltoty] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .metric-card-wide[b-i2kgmltoty] {
        grid-column: span 2;
    }
}

/* Small tablet / large phone ---------------------------------------------- */
@media (max-width: 768px) {
    .page-container[b-i2kgmltoty] {
        padding: 20px 16px;
        gap: 20px;
    }

    .page-title[b-i2kgmltoty] {
        font-size: 24px;
    }

    .metrics-row[b-i2kgmltoty] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .metric-card[b-i2kgmltoty] {
        padding: 16px;
        gap: 12px;
    }

    .metric-icon-wrap[b-i2kgmltoty] {
        width: 40px;
        height: 40px;
    }

    .metric-value[b-i2kgmltoty] {
        font-size: 11px;
    }

    .metric-value-currency[b-i2kgmltoty] {
        font-size: 9px;
    }

    /* Actions always visible on mobile */
    .row-actions[b-i2kgmltoty] {
        opacity: 1;
    }

    .btn-label-desktop[b-i2kgmltoty] {
        display: none;
    }
}

/* Mobile phone ------------------------------------------------------------ */
@media (max-width: 640px) {
    .page-container[b-i2kgmltoty] {
        padding: 16px 12px;
        gap: 16px;
    }

    .page-header[b-i2kgmltoty] {
        flex-direction: column;
        gap: 12px;
    }

    .page-actions[b-i2kgmltoty] {
        width: 100%;
        justify-content: flex-end;
    }

    .page-title[b-i2kgmltoty] {
        font-size: 22px;
    }

    .metrics-row[b-i2kgmltoty] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .metric-card-wide[b-i2kgmltoty] {
        grid-column: span 2;
    }

    .metric-card[b-i2kgmltoty] {
        padding: 14px;
        gap: 10px;
    }

    .metric-icon-wrap[b-i2kgmltoty] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .metric-icon-wrap svg[b-i2kgmltoty] {
        width: 18px;
        height: 18px;
    }

    .metric-value[b-i2kgmltoty] {
        font-size: 10px;
    }

    .metric-value-currency[b-i2kgmltoty] {
        font-size: 8px;
    }

    .metric-label[b-i2kgmltoty] {
        font-size: 11px;
    }

    .metric-desc[b-i2kgmltoty] {
        display: none;
    }

    /* Toolbar stacks vertically */
    .list-toolbar[b-i2kgmltoty] {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 10px;
    }

    .list-search[b-i2kgmltoty] {
        min-width: unset;
    }

    .toolbar-divider[b-i2kgmltoty] {
        display: none;
    }

    .toolbar-filters[b-i2kgmltoty] {
        flex-direction: row;
        gap: 8px;
    }

    /* Hide desktop grid, show card list */
    .grid-desktop[b-i2kgmltoty] {
        display: none;
    }

    .card-list-mobile[b-i2kgmltoty] {
        display: block;
    }

    .list-footer[b-i2kgmltoty] {
        padding: 10px 16px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .state-box[b-i2kgmltoty] {
        padding: 40px 16px;
    }
}

/* Very small phone -------------------------------------------------------- */
@media (max-width: 375px) {
    .page-container[b-i2kgmltoty] {
        padding: 12px 10px;
    }

    .metrics-row[b-i2kgmltoty] {
        grid-template-columns: 1fr;
    }

    .metric-card-wide[b-i2kgmltoty] {
        grid-column: span 1;
    }

    .mobile-card-details[b-i2kgmltoty] {
        padding-left: 0;
    }

    .mobile-card-actions[b-i2kgmltoty] {
        padding-left: 0;
    }
}
/* /Pages/LoanApplications/Underwriting.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Loan Applications › Underwriting Queue  (Stitch-grade)
   ═══════════════════════════════════════════════════════════════ */

/* ── Entry animation ──────────────────────────────────────────── */
@keyframes fadeInUp-b-esdcd93fnk {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    *[b-esdcd93fnk] { animation-duration: 0s !important; }
}

/* ── Page container ───────────────────────────────────────────── */
.page-container[b-esdcd93fnk] {
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeInUp-b-esdcd93fnk 350ms ease both;
}

/* ── Page header ──────────────────────────────────────────────── */
.page-header[b-esdcd93fnk] { margin-bottom: 4px; }

.header-content[b-esdcd93fnk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-esdcd93fnk] { flex: 1; }

.page-title[b-esdcd93fnk] {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
}

.page-description[b-esdcd93fnk] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Metric cards row ─────────────────────────────────────────── */
.metrics-row[b-esdcd93fnk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 4px;
}

.metric-card[b-esdcd93fnk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-esdcd93fnk] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-esdcd93fnk] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-esdcd93fnk] { width: 24px; height: 24px; fill: currentColor !important; }

.metric-icon-blue[b-esdcd93fnk] {
    background: rgba(59,130,246,0.12);
    color: #2563eb;
}
.metric-icon-green[b-esdcd93fnk] {
    background: rgba(22,163,74,0.12);
    color: #16a34a;
}
.metric-icon-red[b-esdcd93fnk] {
    background: rgba(220,38,38,0.10);
    color: #dc2626;
}

.metric-body[b-esdcd93fnk] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-esdcd93fnk] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-esdcd93fnk] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-esdcd93fnk] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Filter toolbar ───────────────────────────────────────────── */
.list-toolbar[b-esdcd93fnk] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
}

.toolbar-divider[b-esdcd93fnk] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-rest);
    flex-shrink: 0;
}

/* ── List container ───────────────────────────────────────────── */
.list-container[b-esdcd93fnk] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    background: var(--neutral-layer-2);
}

/* ── Skeleton loading ─────────────────────────────────────────── */
.skeleton-list[b-esdcd93fnk] { padding: 0; }

.skeleton-row[b-esdcd93fnk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-esdcd93fnk] { border-bottom: none; }

.skeleton-cell[b-esdcd93fnk] {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--neutral-fill-rest) 25%,
        var(--neutral-fill-hover) 50%,
        var(--neutral-fill-rest) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-esdcd93fnk 1.5s infinite;
}

.skeleton-avatar[b-esdcd93fnk] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-cell.wide[b-esdcd93fnk]    { width: 25%; }
.skeleton-cell.medium[b-esdcd93fnk]  { width: 18%; }
.skeleton-cell.short[b-esdcd93fnk]   { width: 10%; }
.skeleton-cell.actions[b-esdcd93fnk] { width: 90px; }

@keyframes shimmer-b-esdcd93fnk {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── State box (error / empty) ────────────────────────────────── */
.state-box[b-esdcd93fnk] {
    padding: 64px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.state-icon[b-esdcd93fnk] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--neutral-fill-rest);
    border: 1px solid var(--neutral-stroke-rest);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.state-icon svg[b-esdcd93fnk] { opacity: 0.5; }

.state-icon-error[b-esdcd93fnk] {
    background: rgba(220,38,38,0.08);
    border-color: rgba(220,38,38,0.2);
}

.state-icon-error svg[b-esdcd93fnk] { opacity: 0.8; color: #dc2626; }

.state-title[b-esdcd93fnk] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-message[b-esdcd93fnk] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    max-width: 400px;
    line-height: 1.5;
}

/* ── Grid scroll wrapper ──────────────────────────────────────── */
.grid-scroll-wrapper[b-esdcd93fnk] {
    overflow-x: auto;
    overflow-y: hidden;
}

[b-esdcd93fnk] table.underwriting-grid {
    min-width: 900px;
}

/* ── Grid helper cells ────────────────────────────────────────── */
.grid-entity-name[b-esdcd93fnk] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.amount-cell[b-esdcd93fnk] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

/* ── Risk badges ──────────────────────────────────────────────── */
.risk-badge[b-esdcd93fnk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.risk-badge.risk-a[b-esdcd93fnk] { background: rgba(22,163,74,0.12);  color: #16a34a; }
.risk-badge.risk-b[b-esdcd93fnk] { background: rgba(59,130,246,0.12);  color: #2563eb; }
.risk-badge.risk-c[b-esdcd93fnk] { background: rgba(217,119,6,0.12);  color: #d97706; }
.risk-badge.risk-d[b-esdcd93fnk] { background: rgba(239,68,68,0.12);  color: #ef4444; }
.risk-badge.risk-e[b-esdcd93fnk] { background: rgba(220,38,38,0.14);  color: #dc2626; }

/* ── Status badges (RGBA – dark-mode safe) ────────────────────── */
.status-badge[b-esdcd93fnk] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

.status-badge.status-draft[b-esdcd93fnk]        { background: rgba(156,163,175,0.14); color: #6b7280; }
.status-badge.status-submitted[b-esdcd93fnk]    { background: rgba(99,102,241,0.12);  color: #6366f1; }
.status-badge.status-underreview[b-esdcd93fnk]  { background: rgba(59,130,246,0.12);  color: #2563eb; }
.status-badge.status-inforequested[b-esdcd93fnk] { background: rgba(217,119,6,0.12);  color: #d97706; }
.status-badge.status-escalated[b-esdcd93fnk]    { background: rgba(239,68,68,0.10);   color: #ef4444; }
.status-badge.status-approved[b-esdcd93fnk]     { background: rgba(22,163,74,0.12);   color: #16a34a; }
.status-badge.status-rejected[b-esdcd93fnk]     { background: rgba(220,38,38,0.12);   color: #dc2626; }

/* ── Row actions (hover reveal – initial hidden state) ─────────── */
.row-actions[b-esdcd93fnk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity 200ms ease;
}

.row-action-btn[b-esdcd93fnk] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── List footer ──────────────────────────────────────────────── */
.list-footer[b-esdcd93fnk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    gap: 12px;
    flex-wrap: wrap;
}

.results-count[b-esdcd93fnk] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive breakpoints
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .page-container[b-esdcd93fnk] { padding: 24px; }
}

@media (max-width: 768px) {
    .page-container[b-esdcd93fnk] {
        padding: 16px;
        gap: 14px;
    }

    .page-title[b-esdcd93fnk] { font-size: 22px; }

    .metrics-row[b-esdcd93fnk] { grid-template-columns: 1fr 1fr; }

    .list-toolbar[b-esdcd93fnk] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-divider[b-esdcd93fnk] { display: none; }

    .row-actions[b-esdcd93fnk] { opacity: 1; }
}

@media (max-width: 640px) {
    .metric-desc[b-esdcd93fnk] { display: none; }
}

@media (max-width: 480px) {
    .metrics-row[b-esdcd93fnk] { grid-template-columns: 1fr; }
}

/* /Pages/LoanOrigination/CersaiFiling.razor.rz.scp.css */
/* C-6 · NEW-10: CERSAI Security Interest Registration page */

.stats-row[b-u6a8yum25m] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-card[b-u6a8yum25m] {
    flex: 1;
    min-width: 160px;
    padding: 1rem 1.5rem;
    text-align: center;
}

.stat-number[b-u6a8yum25m] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-label[b-u6a8yum25m] {
    display: block;
    font-size: 0.875rem;
    color: var(--neutral-fill-strong-rest);
}

.stat-card-danger .stat-number[b-u6a8yum25m]  { color: var(--error); }
.stat-card-warning .stat-number[b-u6a8yum25m] { color: var(--warning); }
.stat-card-info .stat-number[b-u6a8yum25m]    { color: var(--accent-fill-rest); }

.text-danger[b-u6a8yum25m] { color: var(--error); }

.dialog-form[b-u6a8yum25m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
    min-width: 380px;
}

.form-field[b-u6a8yum25m] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fluent-label[b-u6a8yum25m] {
    font-size: 0.875rem;
    font-weight: 600;
}

.fluent-input[b-u6a8yum25m] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    font-size: 0.875rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRID MIN-WIDTH (horizontal overflow safety net; scroll wrapper is global)
══════════════════════════════════════════════════════════════════════════════ */
[b-u6a8yum25m] table.cersai-overdue-grid {
    min-width: 1080px;
}

[b-u6a8yum25m] table.cersai-pending-grid {
    min-width: 1080px;
}
/* /Pages/LoanOrigination/Guarantors.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Guarantors / Co-Borrowers panel — Plan 47
   Embedded (non-routed) component: Approval.razor tab + LoanClosure.razor card.
   ═══════════════════════════════════════════════════════════ */

.guarantors-panel[b-3ahhsxnw6y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Panel header ─────────────────────────────────────────── */
.panel-header[b-3ahhsxnw6y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.panel-title-section[b-3ahhsxnw6y] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.panel-title[b-3ahhsxnw6y] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.panel-count[b-3ahhsxnw6y] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.panel-actions[b-3ahhsxnw6y] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Grid ────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-3ahhsxnw6y] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    overflow-x: auto;
}

[b-3ahhsxnw6y] table.guarantors-grid {
    width: 100%;
    min-width: 1230px;
}

.grid-footer[b-3ahhsxnw6y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-2);
}

.results-count[b-3ahhsxnw6y] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge[b-3ahhsxnw6y] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-green[b-3ahhsxnw6y]  { background: #e6f4ea; color: #1e8e3e; }
.badge-orange[b-3ahhsxnw6y] { background: #fff3e0; color: #e65100; }
.badge-red[b-3ahhsxnw6y]    { background: #fce8e6; color: #c5221f; }
.badge-blue[b-3ahhsxnw6y]   { background: #e8f0fe; color: #1967d2; }
.badge-purple[b-3ahhsxnw6y] { background: #f3e8fd; color: #8430ce; }

/* ── Action row ──────────────────────────────────────────── */
.action-row[b-3ahhsxnw6y] {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Empty / loading state ───────────────────────────────── */
.state-box[b-3ahhsxnw6y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    gap: 8px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
}

.state-icon[b-3ahhsxnw6y] { margin-bottom: 8px; opacity: 0.5; }
.state-title[b-3ahhsxnw6y] { font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-3ahhsxnw6y] { font-size: 13px; color: var(--neutral-foreground-hint); max-width: 400px; }

.loading-wrap[b-3ahhsxnw6y] {
    display: flex;
    justify-content: center;
    padding: 32px;
}

/* ── Dialog form ─────────────────────────────────────────── */
.dialog-form[b-3ahhsxnw6y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
    min-width: 360px;
}

.form-field[b-3ahhsxnw6y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-3ahhsxnw6y] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.field-hint[b-3ahhsxnw6y] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.fluent-input[b-3ahhsxnw6y] {
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.fluent-input:focus[b-3ahhsxnw6y] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.field-error[b-3ahhsxnw6y] {
    font-size: 11px;
    color: #c5221f;
    margin-top: 2px;
}

/* ── Linked customer chip (Add dialog) ───────────────────── */
.linked-customer-chip[b-3ahhsxnw6y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-2);
    font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .panel-header[b-3ahhsxnw6y] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/LoanOrigination/KeyFactStatements.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.page-container[b-4gqphqnr0u] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header[b-4gqphqnr0u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-4gqphqnr0u] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-4gqphqnr0u] { font-size: 28px; font-weight: 700; color: var(--neutral-foreground-rest); margin: 0; line-height: 1.2; }
.page-subtitle[b-4gqphqnr0u] { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; }
.page-actions[b-4gqphqnr0u] { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Metrics row ─────────────────────────────────────────────────────────── */
.metrics-row[b-4gqphqnr0u] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-4gqphqnr0u] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
}

.metric-icon-wrap[b-4gqphqnr0u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
}

.metric-icon-amber[b-4gqphqnr0u] { background: rgba(245, 158, 11, 0.12); color: rgb(146, 64, 14); }
.metric-icon-blue[b-4gqphqnr0u]  { background: rgba(59, 130, 246, 0.12); color: rgb(37, 99, 235); }
.metric-icon-green[b-4gqphqnr0u] { background: rgba(34, 197, 94,  0.12); color: rgb(21, 128, 61); }

.metric-body[b-4gqphqnr0u] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.metric-value[b-4gqphqnr0u] { font-size: 14px; font-weight: 700; color: var(--neutral-foreground-rest); line-height: 1.1; }
.metric-title[b-4gqphqnr0u] { font-size: 14px; font-weight: 600; color: var(--neutral-foreground-rest); }
.metric-desc[b-4gqphqnr0u]  { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── List container ─────────────────────────────────────────────────────── */
.list-container[b-4gqphqnr0u] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
.loading-wrap[b-4gqphqnr0u] {
    display: flex;
    justify-content: center;
    padding: 48px;
}

/* ── Status badges ─────────────────────────────────────────────────────── */
.kfs-status[b-4gqphqnr0u] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.kfs-status--notgenerated[b-4gqphqnr0u]           { background: rgba(245,158,11,0.12);  color: #92400E; }
.kfs-status--generated[b-4gqphqnr0u]              { background: rgba(79,70,229,0.12);   color: #3730A3; }
.kfs-status--senttocustomer[b-4gqphqnr0u]         { background: rgba(79,70,229,0.12);   color: #3730A3; }
.kfs-status--acknowledgedbycustomer[b-4gqphqnr0u] { background: rgba(16,185,129,0.12);  color: #065F46; }
.kfs-status--expired[b-4gqphqnr0u]                { background: rgba(239,68,68,0.12);   color: #991B1B; }

/* ── Row actions (hidden initially; reveal rule lives in global-styles.css) */
.row-actions[b-4gqphqnr0u] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    transition: opacity 200ms ease;
}

/* ── Row action buttons — structural sizing only ─────────────────────────── */
.row-action-btn[b-4gqphqnr0u] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.row-action-btn:disabled[b-4gqphqnr0u] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Accent colour for Generate and Acknowledge at Branch */
.row-action-accent[b-4gqphqnr0u]       { color: var(--accent-fill-rest); }
.row-action-accent:hover[b-4gqphqnr0u] { background: rgba(79,70,229,0.10); color: #4338CA; }

/* ── Cell typography ────────────────────────────────────────────────────── */
.amount-cell[b-4gqphqnr0u] { font-weight: 600; font-variant-numeric: tabular-nums; }
.date-cell[b-4gqphqnr0u]   { font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── KFS preview dialog ─────────────────────────────────────────────────── */
.preview-loading[b-4gqphqnr0u] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
}

.kfs-preview-wrap[b-4gqphqnr0u] {
    padding: 4px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

.kfs-preview-frame[b-4gqphqnr0u] {
    display: block;
    width: 100%;
    height: 65vh;
    border: none;
}

/* ── Acknowledge at Branch dialog ───────────────────────────────────────── */
.ack-dialog-subtitle[b-4gqphqnr0u] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 16px;
}

.form-field[b-4gqphqnr0u] { margin-bottom: 12px; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-4gqphqnr0u] { padding: 16px; gap: 16px; }
    .metrics-row[b-4gqphqnr0u] { grid-template-columns: 1fr; gap: 10px; }
    .metric-card[b-4gqphqnr0u] { padding: 14px 16px; }
    .metric-value[b-4gqphqnr0u] { font-size: 11px; }
    .row-actions[b-4gqphqnr0u] { opacity: 1; }
}
/* /Pages/LoanServicing/ChargeRegistration.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-dd9tpajs8c {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-dd9tpajs8c] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 860px;
    margin: 0 auto;
    animation: card-enter-b-dd9tpajs8c 280ms ease;
}

/* ── Section card ────────────────────────────────────────────────────────── */
.section-card[b-dd9tpajs8c] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}

/* ── Form section header (icon + uppercase label) ─────────────────────────── */
.form-section-header[b-dd9tpajs8c] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-header span[b-dd9tpajs8c] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--neutral-foreground-hint);
}

/* ── 2-column form grid ──────────────────────────────────────────────────── */
.form-grid[b-dd9tpajs8c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}
.form-grid p[b-dd9tpajs8c] {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}

/* ── Form actions bar ────────────────────────────────────────────────────── */
.form-actions[b-dd9tpajs8c] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}

/* ── Results header (title + status badge) ───────────────────────────────── */
.results-header[b-dd9tpajs8c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Metric label ─────────────────────────────────────────────────────────── */
.metric-title[b-dd9tpajs8c] { font-size: 12px; font-weight: 500; color: var(--neutral-foreground-hint); }

/* ── Status badge ─────────────────────────────────────────────────────────── */
.status-badge[b-dd9tpajs8c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.status-registered[b-dd9tpajs8c] {
    background: rgba(22, 163, 74, 0.12);
    color: #15803D;
}
.status-pending[b-dd9tpajs8c] {
    background: rgba(234, 179, 8, 0.15);
    color: #B45309;
}
.status-rejected[b-dd9tpajs8c],
.status-expired[b-dd9tpajs8c] {
    background: rgba(239, 68, 68, 0.12);
    color: #DC2626;
}
.status-discharged[b-dd9tpajs8c] {
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-hint);
}

/* ── Skeleton (loading state) ─────────────────────────────────────────────── */
@keyframes shimmer-b-dd9tpajs8c {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-body[b-dd9tpajs8c] { display: flex; flex-direction: column; gap: 8px; }
.skeleton-line[b-dd9tpajs8c] {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-layer-3) 25%, var(--neutral-layer-4) 50%, var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-dd9tpajs8c 1.5s infinite;
}
.skeleton-line--sm[b-dd9tpajs8c] { height: 12px; width: 55%; }
.skeleton-line--lg[b-dd9tpajs8c] { height: 20px; width: 80%; }

/* ── Empty / ready state ─────────────────────────────────────────────────── */
.state-box[b-dd9tpajs8c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
    background: var(--neutral-layer-1);
    border: 1.5px dashed var(--neutral-stroke-rest);
    border-radius: 10px;
}
.state-icon-wrap[b-dd9tpajs8c] { opacity: 0.3; color: var(--accent-fill-rest); }
.state-title[b-dd9tpajs8c]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-dd9tpajs8c] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); max-width: 380px; line-height: 1.6; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-dd9tpajs8c] { padding: 16px 14px 32px; gap: 16px; }
    .form-grid[b-dd9tpajs8c]      { grid-template-columns: 1fr; }
    .form-grid > [style*="grid-column"][b-dd9tpajs8c] { grid-column: 1 !important; }
}
/* /Pages/LoanServicing/Charges.razor.rz.scp.css */
/* ── KPI METRICS ROW ─────────────────────────────────────────────────────── */
/* This page has 4 metric cards; the shared global-styles.css .metrics-row grid
   is hardcoded to 3 columns, which wraps the 4th card onto its own near-empty row. */
.metrics-row[b-w0nau4e6og] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .metrics-row[b-w0nau4e6og] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .metrics-row[b-w0nau4e6og] {
        grid-template-columns: 1fr;
    }
}

/* ── ROW ACTIONS ──────────────────────────────────────────────────────────── */
/* This page also had no .razor.css file at all, so .row-actions/.row-action-btn
   had zero layout rules — buttons defaulted to block flow and wrapped vertically
   in the narrow actions column instead of laying out in a horizontal row. */
.row-actions[b-w0nau4e6og] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.row-action-btn[b-w0nau4e6og] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/LoanServicing/ClosureOperationsQueue.razor.rz.scp.css */
/* ── KPI METRICS ROW ─────────────────────────────────────────────────────── */
.metrics-row[b-awk8d1mxfs] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* Narrower 4-up cards can't fit the global 3-up card's nowrap title/value */
.metric-title[b-awk8d1mxfs] {
    white-space: normal;
    line-height: 1.3;
}

.metric-value[b-awk8d1mxfs] {
    white-space: normal;
    word-break: break-word;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-awk8d1mxfs] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-awk8d1mxfs] table.closure-overdue-grid { min-width: 900px; }
[b-awk8d1mxfs] table.closure-refunds-grid { min-width: 720px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .metrics-row[b-awk8d1mxfs] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .metrics-row[b-awk8d1mxfs] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/LoanServicing/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Loan Servicing Dashboard — Stitch-grade scoped CSS
   Archetype: List View (§7.3)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-ahaywxj7dt {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-b-ahaywxj7dt {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    *[b-ahaywxj7dt], *[b-ahaywxj7dt]::before, *[b-ahaywxj7dt]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-ahaywxj7dt] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px 32px 40px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-ahaywxj7dt 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-ahaywxj7dt] { margin-bottom: 0; }

.header-content[b-ahaywxj7dt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-ahaywxj7dt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.page-title[b-ahaywxj7dt] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--neutral-foreground-rest);
}

.page-description[b-ahaywxj7dt] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.header-actions[b-ahaywxj7dt] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Metric cards row ────────────────────────────────────────────────────── */
.metrics-row[b-ahaywxj7dt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-ahaywxj7dt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-ahaywxj7dt] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-ahaywxj7dt] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-blue[b-ahaywxj7dt]   { background: rgba(79, 70, 229, 0.12); color: #4F46E5; }
.metric-icon-green[b-ahaywxj7dt]  { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.metric-icon-purple[b-ahaywxj7dt] { background: rgba(99, 102, 241, 0.14); color: #6366F1; }
.metric-icon-red[b-ahaywxj7dt]    { background: rgba(239, 68, 68, 0.12);  color: #EF4444; }
.metric-icon-amber[b-ahaywxj7dt]  { background: rgba(217, 119, 6, 0.12);  color: #D97706; }

.metric-body[b-ahaywxj7dt] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-ahaywxj7dt] {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-ahaywxj7dt] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-ahaywxj7dt] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container ──────────────────────────────────────────────────────── */
.list-container[b-ahaywxj7dt] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

/* ── Toolbar (primary + secondary) ──────────────────────────────────────── */
.list-toolbar[b-ahaywxj7dt] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
}

.list-toolbar--filters[b-ahaywxj7dt] {
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toolbar-divider[b-ahaywxj7dt] {
    height: 1px;
    background: var(--neutral-stroke-rest);
    width: 100%;
}

.toolbar-filters[b-ahaywxj7dt] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    padding-top: 8px;
}

.list-search[b-ahaywxj7dt] {
    flex: 1;
    min-width: 200px;
    max-width: 380px;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-ahaywxj7dt] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.skeleton-row[b-ahaywxj7dt] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row :deep(fluent-skeleton)[b-ahaywxj7dt] {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.06) 25%,
        rgba(0,0,0,0.10) 50%,
        rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-ahaywxj7dt 1.5s infinite;
    border-radius: 4px;
}

/* ── Empty / error state box ─────────────────────────────────────────────── */
.state-box[b-ahaywxj7dt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}

.state-icon[b-ahaywxj7dt] { opacity: .30; }
.state-icon--success[b-ahaywxj7dt] { opacity: .40; }

.state-title[b-ahaywxj7dt] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-message[b-ahaywxj7dt] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    max-width: 400px;
    line-height: 1.5;
}

/* ── Status badges (RGBA for dark-mode safety) ───────────────────────────── */
.status-badge[b-ahaywxj7dt] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.status-badge--active[b-ahaywxj7dt],
.status-badge--paid[b-ahaywxj7dt]       { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.status-badge--pending[b-ahaywxj7dt],
.status-badge--due[b-ahaywxj7dt]        { background: rgba(99, 102, 241, 0.12); color: #6366F1; }
.status-badge--overdue[b-ahaywxj7dt]    { background: rgba(239, 68, 68, 0.12);  color: #EF4444; }
.status-badge--partpaid[b-ahaywxj7dt]   { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.status-badge--delinquent[b-ahaywxj7dt] { background: rgba(217, 119, 6, 0.12);  color: #92400E; }
.status-badge--restructured[b-ahaywxj7dt] { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.status-badge--foreclosed[b-ahaywxj7dt] { background: rgba(99, 102, 241, 0.12); color: #4338CA; }
.status-badge--npa[b-ahaywxj7dt]        { background: rgba(239, 68, 68, 0.14);  color: #9F1239; }
.status-badge--closed[b-ahaywxj7dt]     { background: rgba(107, 114, 128, 0.12); color: #6B7280; }

/* ── Grid helper cells ───────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-ahaywxj7dt] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-ahaywxj7dt] table.loan-svc-grid {
    min-width: 980px;
}

.grid-customer-name[b-ahaywxj7dt] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amount-cell[b-ahaywxj7dt] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dpd-cell[b-ahaywxj7dt] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dpd-cell--overdue[b-ahaywxj7dt] {
    color: #EF4444;
}

/* ── Row actions (initial hidden — hover-reveal in global-styles.css) ───── */
.row-actions[b-ahaywxj7dt] {
    opacity: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

.row-action-btn[b-ahaywxj7dt] {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border, color, hover → global-styles.css */
}

/* ── List footer ─────────────────────────────────────────────────────────── */
.list-footer[b-ahaywxj7dt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-ahaywxj7dt] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive breakpoints
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1280px ────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .metrics-row[b-ahaywxj7dt] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 1024px ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-ahaywxj7dt] { padding: 20px 20px 32px; }
    .metrics-row[b-ahaywxj7dt] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 768px ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-ahaywxj7dt] { padding: 16px 12px 24px; gap: 16px; }
    .page-title[b-ahaywxj7dt] { font-size: 22px; }
    .header-content[b-ahaywxj7dt] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-ahaywxj7dt] { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .metrics-row[b-ahaywxj7dt] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric-card[b-ahaywxj7dt] { padding: 16px; gap: 12px; }
    .metric-value[b-ahaywxj7dt] { font-size: 11px; }
    .metric-icon-wrap[b-ahaywxj7dt] { width: 40px; height: 40px; }
    .list-search[b-ahaywxj7dt] { max-width: 100%; }
    .toolbar-filters[b-ahaywxj7dt] { width: 100%; }
    .row-actions[b-ahaywxj7dt] { opacity: 1; } /* always visible on touch */
}

/* ── 640px ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .page-container[b-ahaywxj7dt] { padding: 12px 8px 20px; }
    .metrics-row[b-ahaywxj7dt] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .metric-desc[b-ahaywxj7dt] { display: none; }
}

/* ── 375px ─────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
    .page-title[b-ahaywxj7dt] { font-size: 20px; }
    .metrics-row[b-ahaywxj7dt] { grid-template-columns: 1fr; }
    .metric-card[b-ahaywxj7dt] { padding: 14px; }
}
/* /Pages/LoanServicing/LoanClosure.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-abbo9wja91 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-abbo9wja91] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 920px;
    margin: 0 auto;
    animation: card-enter-b-abbo9wja91 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-abbo9wja91] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-abbo9wja91] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-abbo9wja91]    { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-abbo9wja91] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); line-height: 1.5; }

/* ── Section card ────────────────────────────────────────────────────────── */
.section-card[b-abbo9wja91] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}

/* ── Form section header (icon + uppercase label) ─────────────────────────── */
.form-section-header[b-abbo9wja91] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.form-section-header span[b-abbo9wja91] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--neutral-foreground-hint);
}

/* ── 2-column form grid ──────────────────────────────────────────────────── */
.form-grid[b-abbo9wja91] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}

/* ── Form actions bar ────────────────────────────────────────────────────── */
.form-actions[b-abbo9wja91] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Results section header (title + print button) ─────────────────────────── */
.results-header[b-abbo9wja91] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── 2×2 metric card grid ────────────────────────────────────────────────── */
.results-grid[b-abbo9wja91] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* ── Individual metric card ──────────────────────────────────────────────── */
.metric-card[b-abbo9wja91] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.metric-card:hover[b-abbo9wja91] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.metric-card--accent[b-abbo9wja91] {
    border-color: rgba(79, 70, 229, 0.25);
    background: rgba(79, 70, 229, 0.04);
}

/* ── Metric icon badge ────────────────────────────────────────────────────── */
.metric-icon-wrap[b-abbo9wja91] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metric-icon-blue[b-abbo9wja91]  { background: rgba(79, 70, 229, 0.12); color: var(--accent-fill-rest); }
.metric-icon-amber[b-abbo9wja91] { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.metric-icon-red[b-abbo9wja91]   { background: rgba(239, 68, 68, 0.12);  color: #DC2626; }
.metric-icon-green[b-abbo9wja91] { background: rgba(16, 185, 129, 0.12); color: #059669; }

/* ── Metric text stack ────────────────────────────────────────────────────── */
.metric-body[b-abbo9wja91]  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metric-value[b-abbo9wja91] {
    font-size: 10px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.metric-value--accent[b-abbo9wja91] { color: var(--accent-fill-rest); }
.metric-title[b-abbo9wja91] { font-size: 12px; font-weight: 500; color: var(--neutral-foreground-hint); }
.metric-desc[b-abbo9wja91]  { font-size: 11px; color: var(--neutral-foreground-disabled); }

/* ── Closure quote breakdown (complete-closure dialog) ───────────────────── */
.quote-breakdown[b-abbo9wja91] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
}
.quote-line[b-abbo9wja91] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}
.quote-line--total[b-abbo9wja91] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--neutral-stroke-rest);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── Skeleton (loading state) ─────────────────────────────────────────────── */
@keyframes shimmer-b-abbo9wja91 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.metric-skeleton[b-abbo9wja91] { pointer-events: none; }
.skeleton-icon-block[b-abbo9wja91] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--neutral-layer-3) 25%, var(--neutral-layer-4) 50%, var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-abbo9wja91 1.5s infinite;
}
.skeleton-body[b-abbo9wja91] { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.skeleton-line[b-abbo9wja91] {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-layer-3) 25%, var(--neutral-layer-4) 50%, var(--neutral-layer-3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-abbo9wja91 1.5s infinite;
}
.skeleton-line--sm[b-abbo9wja91] { height: 12px; width: 55%; }
.skeleton-line--lg[b-abbo9wja91] { height: 20px; width: 80%; }

/* ── Empty / ready state ─────────────────────────────────────────────────── */
.state-box[b-abbo9wja91] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
    background: var(--neutral-layer-1);
    border: 1.5px dashed var(--neutral-stroke-rest);
    border-radius: 10px;
}
.state-icon-wrap[b-abbo9wja91] { opacity: 0.3; color: var(--accent-fill-rest); }
.state-title[b-abbo9wja91]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-abbo9wja91] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); max-width: 380px; line-height: 1.6; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-abbo9wja91] { padding: 16px 14px 32px; gap: 16px; }
    .form-grid[b-abbo9wja91]      { grid-template-columns: 1fr; }
    .results-grid[b-abbo9wja91]   { grid-template-columns: 1fr; }
    .metric-value[b-abbo9wja91]   { font-size: 9px; }
}

/* /Pages/LoanServicing/Pdc/BounceTracker.razor.rz.scp.css */
/* Plan 69 / 69.8 — PDC Bounce Tracker page. Most layout classes (.page-container,
   .list-container, .metrics-row, .status-badge, .row-actions*, .skeleton-*, .state-*) are
   already global (wwwroot/global-styles.css); only the classes below have no global definition
   and would otherwise render unstyled. Mirrors the pattern established in
   Pages/LoanServicing/Pdc/PresentationQueue.razor.css and
   Components/Approvals/PenaltyWaiverQueueBase.razor.css. */

/* This page renders 4 KPI cards — override the global .metrics-row default (3 columns) so all
   four sit on one row, same reasoning as PenaltyWaiverQueueBase.razor.css. */
.metrics-row[b-lhzpeom2a8] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .metrics-row[b-lhzpeom2a8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .metrics-row[b-lhzpeom2a8] {
        grid-template-columns: 1fr;
    }
}

.metric-skeleton[b-lhzpeom2a8] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sk-icon-block[b-lhzpeom2a8] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--neutral-fill-stealth-hover);
    flex-shrink: 0;
}

.sk-bar[b-lhzpeom2a8] {
    height: 12px;
    border-radius: 4px;
    background: var(--neutral-fill-stealth-hover);
}

.sk-value-bar[b-lhzpeom2a8] { width: 60px; height: 18px; margin-bottom: 6px; }
.sk-title-bar[b-lhzpeom2a8] { width: 110px; }

.record-main-cell[b-lhzpeom2a8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.record-title[b-lhzpeom2a8] {
    font-size: 14px;
    font-weight: 500;
}

.record-subtitle[b-lhzpeom2a8] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.dialog-form[b-lhzpeom2a8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialog-info-grid[b-lhzpeom2a8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
}

.dialog-info-row[b-lhzpeom2a8] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.dialog-info-label[b-lhzpeom2a8] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    min-width: 160px;
    flex-shrink: 0;
}

.dialog-info-value[b-lhzpeom2a8] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.grid-scroll-wrapper[b-lhzpeom2a8] { overflow-x: auto; }

[b-lhzpeom2a8] table.pdc-bounce-grid { min-width: 900px; width: 100%; }
/* /Pages/LoanServicing/Pdc/PresentationQueue.razor.rz.scp.css */
/* Plan 69 / 69.8 — PDC Presentation Queue page. Most layout classes (.page-container,
   .list-container, .metrics-row, .status-badge, .row-actions*, .skeleton-*, .state-*) are
   already global (wwwroot/global-styles.css); only the classes below have no global definition. */

/* This page renders 3 KPI cards — the global .metrics-row default (repeat(3,1fr)) already
   matches, so no override is needed here (contrast Components/Approvals/PenaltyWaiverQueueBase
   .razor.css, which overrides to 4 columns for its 4-card layout). */

.metric-skeleton[b-gexi2bbpjr] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sk-icon-block[b-gexi2bbpjr] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--neutral-fill-stealth-hover);
    flex-shrink: 0;
}

.sk-bar[b-gexi2bbpjr] {
    height: 12px;
    border-radius: 4px;
    background: var(--neutral-fill-stealth-hover);
}

.sk-value-bar[b-gexi2bbpjr] { width: 60px; height: 18px; margin-bottom: 6px; }
.sk-title-bar[b-gexi2bbpjr] { width: 110px; }

.toolbar-actions[b-gexi2bbpjr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.record-main-cell[b-gexi2bbpjr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.record-title[b-gexi2bbpjr] {
    font-size: 14px;
    font-weight: 500;
}

.record-subtitle[b-gexi2bbpjr] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.dialog-form[b-gexi2bbpjr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialog-info-row[b-gexi2bbpjr] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.dialog-info-label[b-gexi2bbpjr] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    min-width: 140px;
    flex-shrink: 0;
}

.dialog-info-value[b-gexi2bbpjr] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.grid-scroll-wrapper[b-gexi2bbpjr] { overflow-x: auto; }

[b-gexi2bbpjr] table.pdc-presentation-grid { min-width: 860px; width: 100%; }
/* /Pages/LoanServicing/Pdc/Register.razor.rz.scp.css */
/* Plan 69 / 69.8 — PDC Register page. Most layout classes (.page-container, .list-container,
   .metrics-row, .status-badge, .row-actions*, .skeleton-*, .state-*) are already global
   (wwwroot/global-styles.css); only the classes below have no global definition and would
   otherwise render unstyled, mirroring the pattern in Pages/LoanServicing/Schedule.razor.css. */

.state-message[b-z0qn30kwtr] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    max-width: 420px;
}

/* ── KPI strip (scoped — not part of global-styles.css, see Schedule.razor.css) ─────────── */
.kpi-strip[b-z0qn30kwtr] {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    gap: 20px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-wrap: wrap;
}

.kpi-strip-item[b-z0qn30kwtr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-strip-label[b-z0qn30kwtr] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.kpi-strip-value[b-z0qn30kwtr] {
    font-size: 20px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.kpi-strip-divider[b-z0qn30kwtr] {
    width: 1px;
    align-self: stretch;
    background: var(--neutral-stroke-divider-rest);
}

/* ── Record cell (bank name + branch, in the grid) ───────────────────────────────────────── */
.record-main-cell[b-z0qn30kwtr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.record-title[b-z0qn30kwtr] {
    font-size: 14px;
    font-weight: 500;
}

.record-subtitle[b-z0qn30kwtr] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Dialog form layout ───────────────────────────────────────────────────────────────────── */
.dialog-form[b-z0qn30kwtr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Grid min-width so fr columns scroll rather than squish ──────────────────────────────── */
.grid-scroll-wrapper[b-z0qn30kwtr] { overflow-x: auto; }

[b-z0qn30kwtr] table.pdc-register-grid { min-width: 900px; width: 100%; }
/* /Pages/LoanServicing/Repayments.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-fnq7jmixny {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-fnq7jmixny] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 900px;
    margin: 0 auto;
    animation: card-enter-b-fnq7jmixny 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-fnq7jmixny] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.header-content[b-fnq7jmixny]   { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; }
.title-section[b-fnq7jmixny]    { display: flex; flex-direction: column; gap: 2px; }
.page-title[b-fnq7jmixny]       { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-description[b-fnq7jmixny] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.header-actions[b-fnq7jmixny]   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Section cards ───────────────────────────────────────────────────────── */
.section-card[b-fnq7jmixny] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.section-card--success[b-fnq7jmixny] { border-color: #15803d; }
.section-title[b-fnq7jmixny] { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); }

/* -- Account lookup row --------------------------------------------------- */
.form-lookup-row[b-fnq7jmixny] { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }

/* -- Form grid (2-column stacked) ----------------------------------------- */
.form-grid[b-fnq7jmixny] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}
.form-field[b-fnq7jmixny] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-field--wide[b-fnq7jmixny] { grid-column: span 2; }
.form-actions[b-fnq7jmixny] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Detail table ────────────────────────────────────────────────────────── */
.detail-table[b-fnq7jmixny] { display: flex; flex-direction: column; gap: 8px; }
.detail-row[b-fnq7jmixny]   { display: flex; align-items: baseline; gap: 12px; }
.detail-label[b-fnq7jmixny] {
    width: 160px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.detail-value[b-fnq7jmixny]       { font-size: 14px; color: var(--neutral-foreground-rest); }
.detail-value--bold[b-fnq7jmixny] { font-weight: 700; }

/* ── Detail grid (2‑col for allocation preview) ──────────────────────────── */
.detail-grid[b-fnq7jmixny] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-fnq7jmixny] { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.skeleton-row[b-fnq7jmixny]  { display: flex; gap: 12px; align-items: center; }

/* ── Empty / error state box ─────────────────────────────────────────────── */
.state-box[b-fnq7jmixny] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-icon[b-fnq7jmixny]    { opacity: .35; }
.state-title[b-fnq7jmixny]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-fnq7jmixny] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* -- Receipt voucher card -------------------------------------------------- */
.receipt-header[b-fnq7jmixny] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.receipt-actions[b-fnq7jmixny] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.receipt-voucher[b-fnq7jmixny] { display: flex; flex-direction: column; gap: 12px; }
.voucher-row--number[b-fnq7jmixny] { display: flex; align-items: baseline; gap: 12px; }
.voucher-divider[b-fnq7jmixny] { height: 1px; background: var(--neutral-stroke-divider-rest); }
.voucher-grid[b-fnq7jmixny] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
}
.voucher-item[b-fnq7jmixny] { display: flex; flex-direction: column; gap: 2px; }
.voucher-label[b-fnq7jmixny] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.voucher-value[b-fnq7jmixny]          { font-size: 14px; color: var(--neutral-foreground-rest); }
.voucher-value--accent[b-fnq7jmixny]  { font-size: 18px; font-weight: 700; color: #15803d; }
.voucher-value--large[b-fnq7jmixny]   { font-size: 20px; font-weight: 700; }

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-fnq7jmixny] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-fnq7jmixny] table.repayment-history-grid { min-width: 800px; }

/* -- Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
    .page-container[b-fnq7jmixny]   { padding: 16px 12px 24px; }
    .header-content[b-fnq7jmixny]   { flex-direction: column; align-items: flex-start; }
    .header-actions[b-fnq7jmixny]   { width: 100%; }
    .form-grid[b-fnq7jmixny]        { grid-template-columns: 1fr; }
    .form-field--wide[b-fnq7jmixny] { grid-column: span 1; }
    .detail-label[b-fnq7jmixny]     { width: 120px; }
    .voucher-grid[b-fnq7jmixny]     { grid-template-columns: 1fr 1fr; }
}
/* /Pages/LoanServicing/Restructuring.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-zeqcpy5l9m {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-zeqcpy5l9m] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 48px;
    max-width: 860px;
    margin: 0 auto;
    animation: card-enter-b-zeqcpy5l9m 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-zeqcpy5l9m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-zeqcpy5l9m] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-zeqcpy5l9m]    { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-zeqcpy5l9m] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); line-height: 1.5; }

/* ── Section card ────────────────────────────────────────────────────────── */
.section-card[b-zeqcpy5l9m] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
}

/* ── Form section header (icon + uppercase label) ─────────────────────────── */
.form-section-header[b-zeqcpy5l9m] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-header span[b-zeqcpy5l9m] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--neutral-foreground-hint);
}

/* ── Section divider ─────────────────────────────────────────────────────── */
.form-divider[b-zeqcpy5l9m] {
    height: 1px;
    background: var(--neutral-stroke-divider-rest);
    margin: 4px 0;
}

/* ── 2-column form grid ──────────────────────────────────────────────────── */
.form-grid[b-zeqcpy5l9m] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}

/* ── Confirmation card (selected loan details) ───────────────────────────── */
.confirmation-card[b-zeqcpy5l9m] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--accent-fill-rest);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: card-enter-b-zeqcpy5l9m 200ms ease;
}

.confirmation-card--loading[b-zeqcpy5l9m] {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

.confirmation-card-header[b-zeqcpy5l9m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-fill-rest);
}

.confirmation-card-icon[b-zeqcpy5l9m] { color: var(--accent-fill-rest); }

.detail-grid[b-zeqcpy5l9m] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 24px;
}

.detail-row[b-zeqcpy5l9m]   { display: flex; flex-direction: column; gap: 2px; }
.detail-label[b-zeqcpy5l9m] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.detail-value[b-zeqcpy5l9m]       { font-size: 14px; color: var(--neutral-foreground-rest); }
.detail-value--bold[b-zeqcpy5l9m] { font-weight: 700; }

/* ── Form actions bar ────────────────────────────────────────────────────── */
.form-actions[b-zeqcpy5l9m] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-zeqcpy5l9m] { padding: 16px 14px 32px; gap: 16px; }
    .form-grid[b-zeqcpy5l9m]      { grid-template-columns: 1fr; }
    .form-grid > [style*="grid-column"][b-zeqcpy5l9m] { grid-column: 1 !important; }
    .detail-grid[b-zeqcpy5l9m]    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* /Pages/LoanServicing/RestructuringHistory.razor.rz.scp.css */
/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-uzgp9j0ruz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.page-header-text[b-uzgp9j0ruz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.page-header-actions[b-uzgp9j0ruz] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb[b-uzgp9j0ruz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 4px;
}

.breadcrumb-link[b-uzgp9j0ruz] {
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

.breadcrumb-link:hover[b-uzgp9j0ruz] {
    text-decoration: underline;
}

.breadcrumb-sep[b-uzgp9j0ruz] {
    color: var(--neutral-foreground-hint);
}

/* ── Filter toolbar ───────────────────────────────────────────────────────── */
.filters-row[b-uzgp9j0ruz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: flex-end;
}

.list-search[b-uzgp9j0ruz] {
    flex: 1 1 260px;
    max-width: 420px;
}

.toolbar-action[b-uzgp9j0ruz] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

/* ── State boxes ──────────────────────────────────────────────────────────── */
.state-box[b-uzgp9j0ruz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    color: var(--neutral-foreground-hint);
    text-align: center;
    pointer-events: none;
}

.state-title[b-uzgp9j0ruz] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
}

/* ── Skeleton loader ──────────────────────────────────────────────────────── */
.skeleton-list[b-uzgp9j0ruz] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    overflow: hidden;
}

.skeleton-row[b-uzgp9j0ruz] {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-uzgp9j0ruz] {
    border-bottom: none;
}

/* ── Grid wrapper: allow horizontal scroll on narrow viewports ────────────── */
.list-container[b-uzgp9j0ruz] {
    overflow-x: auto;
}

/* ── List footer (paginator) ──────────────────────────────────────────────── */
.list-footer[b-uzgp9j0ruz] {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ── Row actions (hover-reveal; opacity:1 reveal lives in global-styles.css) */
.row-actions[b-uzgp9j0ruz] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 200ms ease;
}

/* ── Status badge ─────────────────────────────────────────────────────────── */
.status-badge[b-uzgp9j0ruz] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.status-approved[b-uzgp9j0ruz],
.status-completed[b-uzgp9j0ruz] {
    background: rgba(22, 163, 74, 0.12);
    color: #15803D;
}

.status-pending[b-uzgp9j0ruz],
.status-initiated[b-uzgp9j0ruz] {
    background: rgba(234, 179, 8, 0.15);
    color: #B45309;
}

.status-rejected[b-uzgp9j0ruz],
.status-cancelled[b-uzgp9j0ruz] {
    background: rgba(239, 68, 68, 0.12);
    color: #DC2626;
}

/* ── EMI change coloring ──────────────────────────────────────────────────── */
.amount-up[b-uzgp9j0ruz] {
    color: #b45309;
    font-weight: 600;
}

.amount-down[b-uzgp9j0ruz] {
    color: #15803d;
    font-weight: 600;
}

/* ── Detail cell ─────────────────────────────────────────────────────────── */
.detail-cell[b-uzgp9j0ruz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Mobile-only top row: date + status badge (hidden on desktop) */
.mobile-header-row[b-uzgp9j0ruz] {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 1px;
}

.mobile-date[b-uzgp9j0ruz] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    flex-shrink: 0;
}

.detail-type[b-uzgp9j0ruz] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-meta[b-uzgp9j0ruz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    min-width: 0;
}

.detail-meta-row[b-uzgp9j0ruz] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-label[b-uzgp9j0ruz] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
    opacity: 0.7;
    min-width: 32px;
    flex-shrink: 0;
}

.detail-sep[b-uzgp9j0ruz] {
    color: var(--neutral-stroke-rest);
    font-size: 10px;
    line-height: 1;
}

/* ── Responsive: mobile ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .page-header[b-uzgp9j0ruz] {
        flex-direction: column;
        gap: 12px;
    }

    .page-header-actions[b-uzgp9j0ruz] {
        width: 100%;
        justify-content: flex-start;
    }

    .list-search[b-uzgp9j0ruz] {
        max-width: 100%;
        flex: 0 0 auto;
    }

    .filters-row[b-uzgp9j0ruz] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-action[b-uzgp9j0ruz] {
        width: 100%;
    }

    /* ── 2-column mobile grid: detail cell absorbs date + status ── */
    .mobile-header-row[b-uzgp9j0ruz] {
        display: flex;
    }

    .detail-meta[b-uzgp9j0ruz] {
        gap: 3px;
    }

    .detail-meta-row[b-uzgp9j0ruz] {
        white-space: normal;   /* allow wrapping within the row on very narrow screens */
    }
}
/* /Pages/LoanServicing/Schedule.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-0uiid58g1i {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-0uiid58g1i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 32px 40px;
    max-width: 1200px;
    margin: 0 auto;
    animation: card-enter-b-0uiid58g1i 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-0uiid58g1i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.header-content[b-0uiid58g1i]   { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; }
.title-section[b-0uiid58g1i]    { display: flex; flex-direction: column; gap: 2px; }
.page-title[b-0uiid58g1i]       { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-description[b-0uiid58g1i] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.header-actions[b-0uiid58g1i]   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* -- List container (FluentCard) ------------------------------------------ */
.list-container[b-0uiid58g1i] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.list-toolbar[b-0uiid58g1i] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; }
.list-search[b-0uiid58g1i]  { flex: 1; min-width: 200px; max-width: 360px; }

/* ── KPI strip ───────────────────────────────────────────────────────────── */
.kpi-strip[b-0uiid58g1i] {
    display: flex;
    align-items: stretch;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
}
.kpi-strip-item[b-0uiid58g1i]   { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 20px; flex: 1; gap: 2px; min-width: 0; }
.kpi-strip-label[b-0uiid58g1i]  { font-size: 11px; color: var(--neutral-foreground-hint); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.kpi-strip-value[b-0uiid58g1i]  { font-size: 20px; font-weight: 700; color: var(--neutral-foreground-rest); }
.kpi-strip-value--accent[b-0uiid58g1i] { color: var(--accent-fill-rest); }
.kpi-strip-divider[b-0uiid58g1i] { width: 1px; background: var(--neutral-stroke-rest); flex-shrink: 0; }

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-0uiid58g1i] { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.skeleton-row[b-0uiid58g1i]  { display: flex; gap: 12px; align-items: center; }

/* ── Empty / error state box ─────────────────────────────────────────────── */
.state-box[b-0uiid58g1i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-icon[b-0uiid58g1i]    { opacity: .35; }
.state-title[b-0uiid58g1i]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-0uiid58g1i] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-badge[b-0uiid58g1i] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
}
.status-badge--paid[b-0uiid58g1i]     { background: #dcfce7; color: #15803d; }
.status-badge--overdue[b-0uiid58g1i]  { background: #fee2e2; color: #dc2626; }
.status-badge--partpaid[b-0uiid58g1i] { background: #fef3c7; color: #92400e; }
.status-badge--pending[b-0uiid58g1i]  { background: #f1f5f9; color: #64748b; }
.status-badge--due[b-0uiid58g1i]      { background: #dbeafe; color: #1e40af; }
.status-badge--waived[b-0uiid58g1i]   { background: #f1f0ff; color: #4338ca; }
.status-badge--advance[b-0uiid58g1i]  { background: #ede9fe; color: #6d28d9; margin-left: 4px; }

/* ── Explanatory note ─────────────────────────────────────────────────────── */
.schedule-note[b-0uiid58g1i] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 16px 12px;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}
.schedule-note svg[b-0uiid58g1i] { flex-shrink: 0; margin-top: 1px; }

/* ── Scroll wrapper ───────────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-0uiid58g1i] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.fluent-data-grid.schedule-grid[b-0uiid58g1i] { min-width: 1100px; }

/* ── Row actions — INITIAL STATE (opacity hidden in scoped CSS)
     The *reveal* rule (tr.hover) lives in wwwroot/global-styles.css only —
     FluentDataGrid's JS-injected ".hover" class has no [b-xxxx] scope attribute. */
.row-actions[b-0uiid58g1i] {
    opacity: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}
.row-action-btn[b-0uiid58g1i] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-rest);
    transition: background 150ms ease, color 150ms ease;
}
.row-action-btn:hover[b-0uiid58g1i] { background: var(--neutral-fill-hover); }
.row-action-btn:disabled[b-0uiid58g1i] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Recalculation history panel ─────────────────────────────────────────── */
.history-panel[b-0uiid58g1i] { margin: 12px 16px 16px; border-top: 1px solid var(--neutral-stroke-rest); padding-top: 12px; }
.history-toggle[b-0uiid58g1i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}
.history-toggle:hover[b-0uiid58g1i] { color: var(--accent-fill-rest); }

@media (max-width: 767px) {
    table.fluent-data-grid.schedule-grid .row-actions[b-0uiid58g1i] { opacity: 1; }
}

/* -- List footer ---------------------------------------------------------- */
.list-footer[b-0uiid58g1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
    gap: 8px;
}
.results-count[b-0uiid58g1i] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* -- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) { .page-container[b-0uiid58g1i] { padding: 20px 20px 32px; } }
@media (max-width: 768px) {
    .page-container[b-0uiid58g1i] { padding: 16px 12px 24px; }
    .page-header[b-0uiid58g1i]    { flex-direction: column; align-items: flex-start; }
    .header-content[b-0uiid58g1i] { flex-direction: column; align-items: flex-start; }
    .header-actions[b-0uiid58g1i] { width: 100%; }
    .list-search[b-0uiid58g1i]    { max-width: 100%; }
    .kpi-strip[b-0uiid58g1i]      { flex-wrap: wrap; }
    .kpi-strip-item[b-0uiid58g1i] { min-width: 40%; }
}
/* /Pages/Marketing/Analytics.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Marketing Analytics — Dashboard Archetype
   Google Stitch-Grade Design System
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────── */
[b-75qyp8m0g6] .analytics-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Page header ────────────────────────────────────────────────────────── */
[b-75qyp8m0g6] .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
[b-75qyp8m0g6] .page-header-text { flex: 1 1 0; }
[b-75qyp8m0g6] .page-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
}
[b-75qyp8m0g6] .page-subtitle {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}
[b-75qyp8m0g6] .page-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Skeleton / state ───────────────────────────────────────────────────── */
[b-75qyp8m0g6] .state-box {
    text-align: center;
    padding: 64px 24px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
}
[b-75qyp8m0g6] .state-icon       { opacity: .45; margin-bottom: 12px; display: block; }
[b-75qyp8m0g6] .state-icon-error { color: var(--error-foreground-rest); opacity: 1; }
[b-75qyp8m0g6] .state-title   { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
[b-75qyp8m0g6] .state-message { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0 0 20px; }

/* ── KPI cards grid ─────────────────────────────────────────────────────── */
[b-75qyp8m0g6] .kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}
[b-75qyp8m0g6] .kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 18px 20px;
    transition: box-shadow 200ms ease, transform 200ms ease;
}
[b-75qyp8m0g6] .kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
[b-75qyp8m0g6] .kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[b-75qyp8m0g6] .kpi-icon-blue   { background: rgba(37,99,235,.12);  color: #2563eb; }
[b-75qyp8m0g6] .kpi-icon-green  { background: rgba(22,163,74,.12);  color: #16a34a; }
[b-75qyp8m0g6] .kpi-icon-amber  { background: rgba(217,119,6,.12);  color: #d97706; }
[b-75qyp8m0g6] .kpi-icon-purple { background: rgba(124,58,237,.12); color: #7c3aed; }
[b-75qyp8m0g6] .kpi-icon-red    { background: rgba(220,38,38,.12);  color: #dc2626; }
[b-75qyp8m0g6] .kpi-icon-indigo { background: rgba(79,70,229,.12);  color: #4f46e5; }
[b-75qyp8m0g6] .kpi-body { display: flex; flex-direction: column; min-width: 0; }
[b-75qyp8m0g6] .kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--neutral-foreground-rest);
}
[b-75qyp8m0g6] .kpi-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[b-75qyp8m0g6] .kpi-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
[b-75qyp8m0g6] .kpi-skeleton-card {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 18px 20px;
}

/* ── Analytics 2-col grid ───────────────────────────────────────────────── */
[b-75qyp8m0g6] .analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
[b-75qyp8m0g6] .analytics-card {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
[b-75qyp8m0g6] .analytics-card--wide { grid-column: 1 / -1; }
[b-75qyp8m0g6] .analytics-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}
[b-75qyp8m0g6] .analytics-no-data {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    text-align: center;
    padding: 24px 0;
}

/* ── Source breakdown ───────────────────────────────────────────────────── */
[b-75qyp8m0g6] .breakdown-list { display: flex; flex-direction: column; gap: 10px; }
[b-75qyp8m0g6] .breakdown-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    align-items: center;
    gap: 12px;
}
[b-75qyp8m0g6] .breakdown-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[b-75qyp8m0g6] .breakdown-bar-track {
    height: 8px;
    background: var(--neutral-stroke-rest);
    border-radius: 9999px;
    overflow: hidden;
}
[b-75qyp8m0g6] .breakdown-bar {
    height: 100%;
    background: var(--accent-fill-rest);
    border-radius: 9999px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 4px;
}
[b-75qyp8m0g6] .breakdown-count {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    text-align: right;
    white-space: nowrap;
}

/* ── Conversion funnel ──────────────────────────────────────────────────── */
[b-75qyp8m0g6] .funnel-list { display: flex; flex-direction: column; gap: 10px; }
[b-75qyp8m0g6] .funnel-row {
    display: grid;
    grid-template-columns: 130px 1fr 80px;
    align-items: center;
    gap: 12px;
}
[b-75qyp8m0g6] .funnel-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}
[b-75qyp8m0g6] .funnel-bar { height: 100%; border-radius: 9999px; min-width: 4px; transition: width 600ms ease; }
[b-75qyp8m0g6] .funnel-bar-blue   { background: rgba(37,99,235,.65); }
[b-75qyp8m0g6] .funnel-bar-green  { background: rgba(22,163,74,.65); }
[b-75qyp8m0g6] .funnel-bar-amber  { background: rgba(217,119,6,.65); }
[b-75qyp8m0g6] .funnel-bar-purple { background: rgba(124,58,237,.65); }
[b-75qyp8m0g6] .funnel-bar-red    { background: rgba(220,38,38,.65); }

/* ── Monthly bar chart ──────────────────────────────────────────────────── */
[b-75qyp8m0g6] .bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 160px;
    padding: 0 4px 0;
    overflow-x: auto;
}
[b-75qyp8m0g6] .bar-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 36px;
    min-width: 36px;
}
[b-75qyp8m0g6] .bar-chart-bar {
    width: 100%;
    background: var(--accent-fill-rest);
    border-radius: 4px 4px 0 0;
    transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms;
    min-height: 4px;
    cursor: default;
    opacity: .85;
}
[b-75qyp8m0g6] .bar-chart-bar:hover { opacity: 1; }
[b-75qyp8m0g6] .bar-chart-label {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-align: center;
    white-space: nowrap;
}
[b-75qyp8m0g6] .bar-chart-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    text-align: center;
}

/* ── Campaign grid ──────────────────────────────────────────────────────── */
[b-75qyp8m0g6] .campaign-grid-wrap { overflow-x: auto; }

/* Safety net: 1fr Campaign column + 2 fixed 120px columns (Leads/Won) would
   otherwise squish proportionally on narrow viewports instead of triggering
   .campaign-grid-wrap's horizontal scroll. */
[b-75qyp8m0g6] table.marketing-analytics-grid {
    min-width: 480px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    [b-75qyp8m0g6] .analytics-grid {
        grid-template-columns: 1fr;
    }
    [b-75qyp8m0g6] .analytics-card--wide { grid-column: 1; }
}
@media (max-width: 768px) {
    [b-75qyp8m0g6] .analytics-page { padding: 16px 12px 40px; gap: 20px; }
    [b-75qyp8m0g6] .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    [b-75qyp8m0g6] .kpi-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    [b-75qyp8m0g6] .analytics-grid { grid-template-columns: 1fr; }
    [b-75qyp8m0g6] .kpi-value { font-size: 22px; }
    [b-75qyp8m0g6] .breakdown-row { grid-template-columns: 90px 1fr 60px; }
    [b-75qyp8m0g6] .funnel-row    { grid-template-columns: 100px 1fr 60px; }
    [b-75qyp8m0g6] .bar-chart { height: 120px; }
    [b-75qyp8m0g6] .page-title { font-size: 20px; }
    [b-75qyp8m0g6] .analytics-card { padding: 16px; }
}
@media (max-width: 480px) {
    [b-75qyp8m0g6] .kpi-grid { grid-template-columns: 1fr 1fr; }
    [b-75qyp8m0g6] .kpi-card { padding: 14px; gap: 10px; }
    [b-75qyp8m0g6] .kpi-icon { width: 36px; height: 36px; }
    [b-75qyp8m0g6] .kpi-value { font-size: 20px; }
}
/* /Pages/Marketing/Leads/Detail.razor.rz.scp.css */
[b-vlmzvndgpd] .page-container { max-width: 1200px; margin: 0 auto; padding: 24px; }

[b-vlmzvndgpd] .loading-state { display: flex; justify-content: center; padding: 48px; }

/* ── State boxes ──────────────────────────────────────────────────────────── */
[b-vlmzvndgpd] .state-box { text-align: center; padding: 56px 24px; }
[b-vlmzvndgpd] .state-icon { opacity: .45; margin-bottom: 14px; }
[b-vlmzvndgpd] .state-icon-error { color: var(--error); opacity: 1; }
[b-vlmzvndgpd] .state-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
[b-vlmzvndgpd] .state-message { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0 0 18px; }

/* ── Breadcrumb nav ───────────────────────────────────────────────────────── */
[b-vlmzvndgpd] .breadcrumb-nav { margin-bottom: 16px; }

/* ── Page header ─────────────────────────────────────────────────────────── */
[b-vlmzvndgpd] .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
[b-vlmzvndgpd] .header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
[b-vlmzvndgpd] .header-identity { min-width: 0; }
[b-vlmzvndgpd] .page-title { font-size: 26px; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-vlmzvndgpd] .page-subtitle { font-size: 14px; color: var(--neutral-foreground-hint); margin: 4px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
[b-vlmzvndgpd] .subtitle-sep { opacity: .5; }
[b-vlmzvndgpd] .converted-badge { font-size: 11px; font-weight: 600; background: #d1fae5; color: #059669; padding: 1px 8px; border-radius: 10px; }
[b-vlmzvndgpd] .header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }

/* ── Lead avatar (large, in header) ─────────────────────────────────────── */
[b-vlmzvndgpd] .lead-avatar-lg {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* ── Detail sections grid ───────────────────────────────────────────────── */
[b-vlmzvndgpd] .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
[b-vlmzvndgpd] .detail-section {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[b-vlmzvndgpd] .detail-section-utm { grid-column: 1 / -1; }
[b-vlmzvndgpd] .section-title { font-size: 15px; font-weight: 600; margin: 0 0 16px; color: var(--neutral-foreground-rest); }

/* ── Info grid ───────────────────────────────────────────────────────────── */
[b-vlmzvndgpd] .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
[b-vlmzvndgpd] .info-item { display: flex; flex-direction: column; gap: 3px; }
[b-vlmzvndgpd] .info-item-full { grid-column: 1 / -1; }
[b-vlmzvndgpd] .info-label { font-size: 11px; font-weight: 600; color: var(--neutral-foreground-hint); text-transform: uppercase; letter-spacing: 0.6px; }
[b-vlmzvndgpd] .info-value { font-size: 14px; color: var(--neutral-foreground-rest); word-break: break-word; }
[b-vlmzvndgpd] .info-value-message { white-space: pre-wrap; }
[b-vlmzvndgpd] .info-link { color: var(--accent-foreground-rest); text-decoration: none; }
[b-vlmzvndgpd] .info-link:hover { text-decoration: underline; }
[b-vlmzvndgpd] .converted { color: #059669; font-weight: 600; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
[b-vlmzvndgpd] .score-badge { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 10px; display: inline-block; }
[b-vlmzvndgpd] .score-hot  { background: #fee2e2; color: #dc2626; }
[b-vlmzvndgpd] .score-warm { background: #fef3c7; color: #d97706; }
[b-vlmzvndgpd] .score-cold { background: #dbeafe; color: #2563eb; }

[b-vlmzvndgpd] .status-badge { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-vlmzvndgpd] .status-badge--new           { background: #dbeafe; color: #2563eb; }
[b-vlmzvndgpd] .status-badge--contacted     { background: #e0e7ff; color: #4f46e5; }
[b-vlmzvndgpd] .status-badge--qualified     { background: #dcfce7; color: #16a34a; }
[b-vlmzvndgpd] .status-badge--demoscheduled { background: #fef3c7; color: #d97706; }
[b-vlmzvndgpd] .status-badge--proposal      { background: #ede9fe; color: #7c3aed; }
[b-vlmzvndgpd] .status-badge--negotiation   { background: #fce7f3; color: #db2777; }
[b-vlmzvndgpd] .status-badge--won           { background: #d1fae5; color: #059669; }
[b-vlmzvndgpd] .status-badge--lost          { background: #fee2e2; color: #dc2626; }
[b-vlmzvndgpd] .status-badge--disqualified  { background: #f3f4f6; color: #6b7280; }

/* ── Activity timeline ───────────────────────────────────────────────────── */
[b-vlmzvndgpd] .timeline-section { grid-column: 1 / -1; }

[b-vlmzvndgpd] .timeline { display: flex; flex-direction: column; position: relative; padding-left: 20px; }
[b-vlmzvndgpd] .timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--neutral-stroke-divider-rest); }
[b-vlmzvndgpd] .timeline-item { display: flex; gap: 12px; padding: 8px 0; position: relative; }
[b-vlmzvndgpd] .timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fill-rest); flex-shrink: 0; margin-top: 4px; position: relative; z-index: 1; }
[b-vlmzvndgpd] .timeline-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[b-vlmzvndgpd] .timeline-type { font-size: 12px; font-weight: 600; color: var(--accent-foreground-rest); text-transform: uppercase; letter-spacing: 0.5px; }
[b-vlmzvndgpd] .timeline-desc { font-size: 14px; word-break: break-word; }
[b-vlmzvndgpd] .timeline-time { font-size: 12px; color: var(--neutral-foreground-hint); }
[b-vlmzvndgpd] .no-activities { font-size: 14px; color: var(--neutral-foreground-hint); font-style: italic; margin: 0; }

/* ── Dialog forms (stacked label-on-top layout) ──────────────────────────── */
[b-vlmzvndgpd] .dialog-form { display: flex; flex-direction: column; gap: 18px; min-width: min(360px, 90vw); }
[b-vlmzvndgpd] .form-field { display: flex; flex-direction: column; gap: 6px; }
[b-vlmzvndgpd] .form-label { font-size: 12px; font-weight: 600; color: var(--neutral-foreground-rest); }
[b-vlmzvndgpd] .dialog-error { font-size: 13px; color: var(--error-foreground-rest, #dc2626); margin: 8px 0 0; }

/* Scrollable dialog body */
[b-vlmzvndgpd] fluent-dialog-body { max-height: 65vh; overflow-y: auto; }
[b-vlmzvndgpd] fluent-dialog-footer { position: sticky; bottom: 0; background: var(--neutral-layer-1); border-top: 1px solid var(--neutral-stroke-divider-rest); z-index: 2; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    [b-vlmzvndgpd] .detail-grid { grid-template-columns: 1fr; }
    [b-vlmzvndgpd] .detail-section-utm { grid-column: auto; }
    [b-vlmzvndgpd] .timeline-section { grid-column: auto; }
}
@media (max-width: 768px) {
    [b-vlmzvndgpd] .page-container { padding: 16px; }
    [b-vlmzvndgpd] .page-title { font-size: 20px; }
    [b-vlmzvndgpd] .lead-avatar-lg { width: 40px; height: 40px; font-size: 15px; }
    [b-vlmzvndgpd] .header-left { gap: 10px; }
    [b-vlmzvndgpd] .info-grid { grid-template-columns: 1fr; }
    [b-vlmzvndgpd] .detail-section { padding: 16px; }
    [b-vlmzvndgpd] .header-actions { width: 100%; justify-content: flex-end; }
}
/* /Pages/Marketing/Leads/Index.razor.rz.scp.css */
/* ── Page container ──────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .page-container { max-width: 1400px; margin: 0 auto; padding: 24px; }

/* ── Page header ─────────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .page-header { margin-bottom: 24px; }
[b-3xr19s3jj9] .header-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
[b-3xr19s3jj9] .title-section { flex: 1; min-width: 0; }
[b-3xr19s3jj9] .page-title { font-size: 28px; font-weight: 600; margin: 0 0 4px; color: var(--neutral-foreground-rest); }
[b-3xr19s3jj9] .page-subtitle { font-size: 13px; color: var(--neutral-foreground-hint); margin: 0; }
[b-3xr19s3jj9] .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── View toggle ─────────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .view-toggle { display: flex; border: 1px solid var(--neutral-stroke-rest); border-radius: 6px; overflow: hidden; }
[b-3xr19s3jj9] .view-toggle-btn { background: none; border: none; padding: 6px 10px; cursor: pointer; color: var(--neutral-foreground-rest); display: flex; align-items: center; line-height: 1; transition: background 150ms ease; }
[b-3xr19s3jj9] .view-toggle-btn:hover { background: var(--neutral-fill-stealth-hover); }
[b-3xr19s3jj9] .view-toggle-btn--active { background: var(--accent-fill-rest); color: var(--foreground-on-accent-rest); }
[b-3xr19s3jj9] .view-toggle-btn--active svg { fill: #ffffff !important; }

/* ── Metric cards ────────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
[b-3xr19s3jj9] .metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}
[b-3xr19s3jj9] .metric-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10); transform: translateY(-2px); }
[b-3xr19s3jj9] .metric-card-skeleton { pointer-events: none; }

[b-3xr19s3jj9] .metric-icon-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
[b-3xr19s3jj9] .metric-icon-wrap svg { width: 24px; height: 24px; fill: currentColor !important; }

[b-3xr19s3jj9] .metric-icon-blue   { background: rgba(79,70,229,0.12); color: #4F46E5; }
[b-3xr19s3jj9] .metric-icon-green  { background: rgba(22,163,74,0.12); color: #16a34a; }
[b-3xr19s3jj9] .metric-icon-amber  { background: rgba(217,119,6,0.12); color: #d97706; }
[b-3xr19s3jj9] .metric-icon-purple { background: rgba(124,58,237,0.12); color: #7c3aed; }
[b-3xr19s3jj9] .metric-icon-red    { background: rgba(220,38,38,0.12); color: #dc2626; }

[b-3xr19s3jj9] .metric-body { display: flex; flex-direction: column; min-width: 0; }
[b-3xr19s3jj9] .metric-value { font-size: 15px; font-weight: 700; line-height: 1; color: var(--neutral-foreground-rest); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
[b-3xr19s3jj9] .metric-title { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); margin-top: 6px; white-space: nowrap; }
[b-3xr19s3jj9] .metric-desc  { font-size: 11px; color: var(--neutral-foreground-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* ── List container ──────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .list-container {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .list-toolbar {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}
[b-3xr19s3jj9] .list-search { flex: 1 1 200px; min-width: 180px; max-width: 340px; }
[b-3xr19s3jj9] .toolbar-divider { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }
[b-3xr19s3jj9] .toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Score range filter ──────────────────────────────────────────────────── */
[b-3xr19s3jj9] .score-range { display: flex; align-items: center; gap: 4px; }
[b-3xr19s3jj9] .score-range-input {
    width: 84px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 13px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    outline: none;
    transition: border-color 150ms ease;
}
[b-3xr19s3jj9] .score-range-input:focus { border-color: var(--accent-fill-rest); }
[b-3xr19s3jj9] .score-range-sep { color: var(--neutral-foreground-hint); font-size: 12px; }

/* ── Skeleton states ─────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .skeleton-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 18px; }
[b-3xr19s3jj9] .skeleton-row { display: flex; gap: 16px; align-items: center; }

/* ── Empty / error states ────────────────────────────────────────────────── */
[b-3xr19s3jj9] .state-box { text-align: center; padding: 56px 24px; }
[b-3xr19s3jj9] .state-icon { opacity: .45; margin-bottom: 14px; }
[b-3xr19s3jj9] .state-icon-error { color: var(--error); opacity: 1; }
[b-3xr19s3jj9] .state-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
[b-3xr19s3jj9] .state-message { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0 0 18px; }

/* ── Data grid wrapper ───────────────────────────────────────────────────── */
[b-3xr19s3jj9] .grid-scroll-wrapper { overflow-x: auto; }
[b-3xr19s3jj9] table.leads-grid { width: 100%; }

/* Hover-reveal row actions (initial hidden state) */
[b-3xr19s3jj9] .row-actions { opacity: 0; display: flex; gap: 4px; align-items: center; justify-content: center; transition: opacity 200ms ease; }

/* Avatar column */
[b-3xr19s3jj9] .lead-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

/* ── Row action buttons (structural only — ghost border + colors in global-styles.css) */
[b-3xr19s3jj9] .row-action-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .score-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-3xr19s3jj9] .score-hot  { background: #fee2e2; color: #dc2626; }
[b-3xr19s3jj9] .score-warm { background: #fef3c7; color: #d97706; }
[b-3xr19s3jj9] .score-cold { background: #dbeafe; color: #2563eb; }

[b-3xr19s3jj9] .status-badge { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 10px; display: inline-block; white-space: nowrap; }
[b-3xr19s3jj9] .status-badge--new           { background: #dbeafe; color: #2563eb; }
[b-3xr19s3jj9] .status-badge--contacted     { background: #e0e7ff; color: #4f46e5; }
[b-3xr19s3jj9] .status-badge--qualified     { background: #dcfce7; color: #16a34a; }
[b-3xr19s3jj9] .status-badge--demoscheduled { background: #fef3c7; color: #d97706; }
[b-3xr19s3jj9] .status-badge--proposal      { background: #ede9fe; color: #7c3aed; }
[b-3xr19s3jj9] .status-badge--negotiation   { background: #fce7f3; color: #db2777; }
[b-3xr19s3jj9] .status-badge--won           { background: #d1fae5; color: #059669; }
[b-3xr19s3jj9] .status-badge--lost          { background: #fee2e2; color: #dc2626; }
[b-3xr19s3jj9] .status-badge--disqualified  { background: #f3f4f6; color: #6b7280; }

/* ── List footer ─────────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    gap: 8px;
}
[b-3xr19s3jj9] .results-count { font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Delete dialog ───────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .dialog-body-content { padding: 4px 0; }
[b-3xr19s3jj9] .dialog-confirm-name { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
[b-3xr19s3jj9] .dialog-confirm-warn { font-size: 13px; color: var(--error-foreground-rest, #dc2626); margin: 0; }
[b-3xr19s3jj9] .btn-danger {
    --accent-fill-rest:   #d13438;
    --accent-fill-hover:  #b91c1c;
    --accent-fill-active: #991b1b;
    color: white !important;
}

/* ── Kanban board ────────────────────────────────────────────────────────── */
[b-3xr19s3jj9] .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding: 16px; min-height: 400px; }
[b-3xr19s3jj9] .kanban-column { flex: 0 0 220px; background: var(--neutral-layer-2); border: 1px solid var(--neutral-stroke-layer-rest); border-radius: 8px; display: flex; flex-direction: column; min-height: 200px; }
[b-3xr19s3jj9] .kanban-column-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); position: sticky; top: 0; background: inherit; border-radius: 8px 8px 0 0; }
[b-3xr19s3jj9] .kanban-column-title { font-size: 13px; font-weight: 600; }
[b-3xr19s3jj9] .kanban-column-count { font-size: 12px; font-weight: 600; background: var(--accent-fill-rest); color: var(--foreground-on-accent-rest); border-radius: 10px; padding: 0 7px; line-height: 18px; }
[b-3xr19s3jj9] .kanban-cards { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
[b-3xr19s3jj9] .kanban-card { background: var(--neutral-layer-1); border: 1px solid var(--neutral-stroke-layer-rest); border-radius: 6px; padding: 10px 12px; cursor: grab; transition: box-shadow 150ms ease; }
[b-3xr19s3jj9] .kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
[b-3xr19s3jj9] .kanban-card[draggable="true"]:active { cursor: grabbing; }
[b-3xr19s3jj9] .kanban-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
[b-3xr19s3jj9] .kanban-card-info { min-width: 0; }
[b-3xr19s3jj9] .kanban-card-name { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-3xr19s3jj9] .kanban-card-company { font-size: 12px; color: var(--neutral-foreground-hint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-3xr19s3jj9] .kanban-card-footer { display: flex; justify-content: space-between; align-items: center; }
[b-3xr19s3jj9] .kanban-empty { font-size: 12px; color: var(--neutral-foreground-hint); text-align: center; padding: 16px 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    [b-3xr19s3jj9] .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    [b-3xr19s3jj9] .page-container { padding: 16px; }
    [b-3xr19s3jj9] .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
    [b-3xr19s3jj9] .metric-card { padding: 16px; gap: 12px; }
    [b-3xr19s3jj9] .metric-value { font-size: 12px; }
    [b-3xr19s3jj9] .metric-icon-wrap { width: 44px; height: 44px; }
    [b-3xr19s3jj9] .list-search { flex: 1 1 100%; max-width: 100%; order: -1; }
    [b-3xr19s3jj9] .toolbar-divider { display: none; }
    [b-3xr19s3jj9] .toolbar-filters { width: 100%; }
    [b-3xr19s3jj9] .toolbar-filters > * { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 100px; }
    [b-3xr19s3jj9] .row-actions { opacity: 1; }         /* Always visible on touch */
    [b-3xr19s3jj9] .list-footer { justify-content: center; }
    [b-3xr19s3jj9] .results-count { display: none; }
}
@media (max-width: 480px) {
    [b-3xr19s3jj9] .metrics-row { grid-template-columns: 1fr; }
    [b-3xr19s3jj9] .header-actions { width: 100%; justify-content: flex-end; }
    [b-3xr19s3jj9] .toolbar-filters > * { flex: 1 1 100% !important; }
    [b-3xr19s3jj9] .score-range { width: 100%; justify-content: flex-start; }
    [b-3xr19s3jj9] .score-range-input { flex: 1 1 auto; max-width: 120px; }
}
/* /Pages/MultiTenant/Tenants/Create.razor.rz.scp.css */
/* ── Entry animation ─────────────────────────────────────────────────────── */
@keyframes card-enter-b-b19u37kik1 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-b19u37kik1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 900px;
    margin: 0 auto;
    animation: card-enter-b-b19u37kik1 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-b19u37kik1]   { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-title[b-b19u37kik1]    { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-b19u37kik1] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Section card ────────────────────────────────────────────────────────── */
.section-card[b-b19u37kik1] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-b19u37kik1] { display: flex; flex-direction: column; gap: 8px; }
.skeleton-row[b-b19u37kik1]  { display: flex; gap: 12px; align-items: center; }

/* ── State box ───────────────────────────────────────────────────────────── */
.state-box[b-b19u37kik1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-icon[b-b19u37kik1]    { opacity: .35; }
.state-title[b-b19u37kik1]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-b19u37kik1] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-b19u37kik1] { padding: 16px 12px 24px; }
}
/* /Pages/MultiTenant/Tenants/Edit.razor.rz.scp.css */
/* ── Entry animation ─────────────────────────────────────────────────────── */
@keyframes card-enter-b-rwo4na1w07 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-rwo4na1w07] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 900px;
    margin: 0 auto;
    animation: card-enter-b-rwo4na1w07 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-rwo4na1w07]   { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-title[b-rwo4na1w07]    { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-rwo4na1w07] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Section card ────────────────────────────────────────────────────────── */
.section-card[b-rwo4na1w07] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-list[b-rwo4na1w07] { display: flex; flex-direction: column; gap: 8px; }
.skeleton-row[b-rwo4na1w07]  { display: flex; gap: 12px; align-items: center; }

/* ── State box ───────────────────────────────────────────────────────────── */
.state-box[b-rwo4na1w07] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-icon[b-rwo4na1w07]    { opacity: .35; }
.state-title[b-rwo4na1w07]   { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-rwo4na1w07] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-rwo4na1w07] { padding: 16px 12px 24px; }
}
/* /Pages/MultiTenant/Tenants/Index.razor.rz.scp.css */
/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-5hlwz4z57w {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.page-container[b-5hlwz4z57w] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-5hlwz4z57w 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-5hlwz4z57w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header-text[b-5hlwz4z57w] { display: flex; flex-direction: column; gap: 4px; }
.page-title[b-5hlwz4z57w]       { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-5hlwz4z57w]    { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.page-actions[b-5hlwz4z57w]     { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   KPI SUMMARY STRIP
══════════════════════════════════════════════════════════════════════════════ */
.summary-strip[b-5hlwz4z57w] { display: flex; flex-wrap: wrap; gap: 10px; }
.summary-chip[b-5hlwz4z57w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 32px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    font-size: 13px;
    white-space: nowrap;
}
.summary-chip-icon[b-5hlwz4z57w]  { flex-shrink: 0; opacity: .75; }
.summary-chip-value[b-5hlwz4z57w] { font-size: 15px; font-weight: 700; color: var(--neutral-foreground-rest); }
.summary-chip-label[b-5hlwz4z57w] { color: var(--neutral-foreground-hint); }

.summary-chip-success .summary-chip-icon[b-5hlwz4z57w]  { color: #10B981; }
.summary-chip-success .summary-chip-value[b-5hlwz4z57w] { color: #059669; }
.summary-chip-warning .summary-chip-icon[b-5hlwz4z57w]  { color: #F59E0B; }
.summary-chip-warning .summary-chip-value[b-5hlwz4z57w] { color: #D97706; }
.summary-chip-danger .summary-chip-icon[b-5hlwz4z57w]   { color: #EF4444; }
.summary-chip-danger .summary-chip-value[b-5hlwz4z57w]  { color: #DC2626; }

/* ══════════════════════════════════════════════════════════════════════════════
   DATA CARD
══════════════════════════════════════════════════════════════════════════════ */
.list-container[b-5hlwz4z57w] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
}
.list-toolbar[b-5hlwz4z57w] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    background: var(--neutral-layer-1);
    border-radius: 10px 10px 0 0;
    z-index: 10;
}
.list-search[b-5hlwz4z57w]     { flex: 1; min-width: 200px; }
.toolbar-divider[b-5hlwz4z57w] { width: 1px; height: 24px; background: var(--neutral-stroke-divider-rest); flex-shrink: 0; }
.toolbar-filters[b-5hlwz4z57w] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.skeleton-list[b-5hlwz4z57w] { display: flex; flex-direction: column; }
.skeleton-row[b-5hlwz4z57w] {
    display: grid;
    grid-template-columns: 120px 1.5fr 120px 120px 130px 96px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}
.skeleton-row:last-child[b-5hlwz4z57w] { border-bottom: none; }

.state-box[b-5hlwz4z57w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}
.state-icon[b-5hlwz4z57w]       { opacity: .3; }
.state-icon-error[b-5hlwz4z57w] { opacity: 1; color: var(--error-foreground-rest, #DC2626); }
.state-title[b-5hlwz4z57w]      { margin: 0; font-size: 17px; font-weight: 700; color: var(--neutral-foreground-rest); }
.state-message[b-5hlwz4z57w]    { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); max-width: 380px; }

.grid-scroll-wrapper[b-5hlwz4z57w] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Safety net: fixed-px columns + 1.5fr Name column mixed with no min-width
   would otherwise squish proportionally on narrow viewports instead of
   triggering the scroll wrapper above. */
[b-5hlwz4z57w] table.tenants-grid { min-width: 880px; }

.list-footer[b-5hlwz4z57w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
    gap: 8px;
}
.results-count[b-5hlwz4z57w] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ══════════════════════════════════════════════════════════════════════════════
   TENANT-SPECIFIC BADGES
══════════════════════════════════════════════════════════════════════════════ */
/* Plan badges */
.plan-badge[b-5hlwz4z57w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.plan-badge--starter[b-5hlwz4z57w]      { background: rgba(107,114,128,.12); color: #6B7280; }
.plan-badge--professional[b-5hlwz4z57w] { background: rgba(59,130,246,.12);  color: #2563EB; }
.plan-badge--enterprise[b-5hlwz4z57w]   { background: rgba(139,92,246,.12);  color: #7C3AED; }

/* Status badges */
.status-badge[b-5hlwz4z57w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.status-badge--trial[b-5hlwz4z57w]     { background: rgba(245,158,11,.12);  color: #D97706; }
.status-badge--active[b-5hlwz4z57w]    { background: rgba(16,185,129,.12);  color: #059669; }
.status-badge--suspended[b-5hlwz4z57w] { background: rgba(239,68,68,.12);   color: #DC2626; }
.status-badge--cancelled[b-5hlwz4z57w] { background: rgba(107,114,128,.12); color: #6B7280; }
.status-badge--expired[b-5hlwz4z57w]   { background: rgba(107,114,128,.12); color: #6B7280; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) { .page-container[b-5hlwz4z57w] { padding: 20px 20px 32px; } }
@media (max-width: 768px) {
    .page-container[b-5hlwz4z57w]  { padding: 16px 12px 24px; }
    .page-header[b-5hlwz4z57w]     { flex-direction: column; align-items: flex-start; }
    .page-actions[b-5hlwz4z57w]    { width: 100%; }
    .summary-strip[b-5hlwz4z57w]   { display: grid; grid-template-columns: 1fr 1fr; }
    .list-toolbar[b-5hlwz4z57w]    { flex-direction: column; align-items: stretch; }
    .toolbar-divider[b-5hlwz4z57w] { display: none; }
    .list-search[b-5hlwz4z57w]     { min-width: 0; }
}
/* /Pages/Organization/BranchAuth.razor.rz.scp.css */
/* ==========================================================================
   BranchAuth — Eligibility Check + History (Hybrid Form + List)
   ========================================================================== */

@keyframes card-enter-b-7j9g90gdih {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PAGE SHELL ─────────────────────────────────────────────────────────── */
.page-container[b-7j9g90gdih] {
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: card-enter-b-7j9g90gdih 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── PAGE HEADER ────────────────────────────────────────────────────────── */
.page-header[b-7j9g90gdih] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-7j9g90gdih] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-7j9g90gdih] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.02em;
}

.page-subtitle[b-7j9g90gdih] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-7j9g90gdih] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── MESSAGE BAR SPACING ────────────────────────────────────────────────── */
.mb-bar[b-7j9g90gdih] {
    border-radius: 8px;
}

/* ── ELIGIBILITY CHECK PANEL ────────────────────────────────────────────── */
.panel[b-7j9g90gdih] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.panel-header[b-7j9g90gdih] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.panel-header-icon[b-7j9g90gdih] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    color: var(--accent-fill-rest);
}

.panel-title[b-7j9g90gdih] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.panel-desc[b-7j9g90gdih] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
    line-height: 1.5;
}

/* ── CHECK FIELDS GRID ──────────────────────────────────────────────────── */
/* 2-field form: use form-grid pattern with labels stacked ABOVE inputs    */
.check-fields[b-7j9g90gdih] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;  /* 20px row / 24px column per breathing space standard */
    align-items: start;
    margin-bottom: 20px;
}

.check-action[b-7j9g90gdih] {
    grid-column: 1 / -1;  /* span both columns */
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

/* ── ELIGIBILITY RESULT ─────────────────────────────────────────────────── */
.result-section[b-7j9g90gdih] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.criteria-badges[b-7j9g90gdih] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.criteria-badge[b-7j9g90gdih] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    line-height: 1.3;
}

.criteria-pass[b-7j9g90gdih] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.criteria-fail[b-7j9g90gdih] {
    background: rgba(239, 68, 68, 0.08);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

/* ── LIST CONTAINER ─────────────────────────────────────────────────────── */
.list-container[b-7j9g90gdih] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
}

/* ── LIST TOOLBAR ───────────────────────────────────────────────────────── */
.list-toolbar[b-7j9g90gdih] {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-1);
}

.list-toolbar-title[b-7j9g90gdih] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── DATA GRID ──────────────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-7j9g90gdih] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-7j9g90gdih] table.history-grid {
    width: 100%;
    min-width: 950px;
}

[b-7j9g90gdih] .history-grid .fluent-data-grid-cell {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    padding: 10px 12px;
}

[b-7j9g90gdih] .history-grid .fluent-data-grid-header-cell {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
    padding: 10px 12px;
    background: var(--neutral-layer-2);
}

/* ── OUTCOME BADGES ─────────────────────────────────────────────────────── */
.outcome-badge[b-7j9g90gdih] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.outcome-approved[b-7j9g90gdih] {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.outcome-rejected[b-7j9g90gdih] {
    background: rgba(107, 114, 128, 0.1);
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
}

/* ── EMPTY / LOADING STATE ──────────────────────────────────────────────── */
.state-box[b-7j9g90gdih] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
    gap: 12px;
}

.state-icon[b-7j9g90gdih] {
    color: var(--neutral-foreground-hint);
    opacity: 0.35;
    margin-bottom: 4px;
}

.state-title[b-7j9g90gdih] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-message[b-7j9g90gdih] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    max-width: 360px;
    line-height: 1.6;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-7j9g90gdih] {
        padding: 16px;
        gap: 16px;
    }

    .page-title[b-7j9g90gdih] {
        font-size: 22px;
    }

    .check-fields[b-7j9g90gdih] {
        grid-template-columns: 1fr;
    }

    .check-action[b-7j9g90gdih] {
        padding-bottom: 0;
    }

    .criteria-badges[b-7j9g90gdih] {
        flex-direction: column;
    }
}
/* /Pages/Organization/Branches/Branches.razor.rz.scp.css */
/* ==========================================================================
   Branches — List View  (Users-model pattern)
   ========================================================================== */

@keyframes card-enter-b-cktgin93xs {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PAGE SHELL ─────────────────────────────────────────────────────────── */
.page-container[b-cktgin93xs] {
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-cktgin93xs 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── PAGE HEADER ────────────────────────────────────────────────────────── */
.page-header[b-cktgin93xs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-text[b-cktgin93xs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-cktgin93xs] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--neutral-foreground-rest);
    letter-spacing: -0.02em;
}

.page-subtitle[b-cktgin93xs] {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.page-actions[b-cktgin93xs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── METRIC CARDS ───────────────────────────────────────────────────────── */
.metrics-row[b-cktgin93xs] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card[b-cktgin93xs] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-cktgin93xs] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-cktgin93xs] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-cktgin93xs] {
    width: 24px;
    height: 24px;
    fill: currentColor !important;
}

.metric-icon-blue[b-cktgin93xs]  { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);                                color: var(--accent-foreground-rest); }
.metric-icon-green[b-cktgin93xs] { background: color-mix(in srgb, var(--success-foreground-rest, #16a34a) 12%, transparent); color: var(--success-foreground-rest, #16a34a); }
.metric-icon-red[b-cktgin93xs]   { background: color-mix(in srgb, var(--error-foreground-rest, #c62828) 12%, transparent);  color: var(--error-foreground-rest, #c62828); }

.metric-body[b-cktgin93xs] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-cktgin93xs] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-cktgin93xs] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-cktgin93xs] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── LIST CONTAINER ─────────────────────────────────────────────────────── */
.list-container[b-cktgin93xs] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* ── TOOLBAR ────────────────────────────────────────────────────────────── */
.list-toolbar[b-cktgin93xs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

.list-search[b-cktgin93xs] {
    flex: 0 0 260px;
    max-width: 260px;
}

/* ── SKELETON ───────────────────────────────────────────────────────────── */
.skeleton-list[b-cktgin93xs] {
    display: flex;
    flex-direction: column;
}

.skeleton-row[b-cktgin93xs] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 80px;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
}

.skeleton-row:last-child[b-cktgin93xs] { border-bottom: none; }

/* ── STATE BOX ──────────────────────────────────────────────────────────── */
.state-box[b-cktgin93xs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 32px;
    text-align: center;
    gap: 12px;
}

.state-icon[b-cktgin93xs] { color: var(--neutral-foreground-hint); opacity: 0.4; margin-bottom: 8px; }
.state-icon-error[b-cktgin93xs] { color: #EF4444; opacity: 0.7; }
.state-title[b-cktgin93xs] { margin: 0; font-size: 18px; font-weight: 600; color: var(--neutral-foreground-rest); }
.state-message[b-cktgin93xs] { margin: 0; font-size: 14px; color: var(--neutral-foreground-hint); max-width: 360px; }

/* ── DATA GRID ──────────────────────────────────────────────────────────── */
[b-cktgin93xs] table.branches-grid { width: 100%; min-width: 880px; }

[b-cktgin93xs] .branches-grid-row {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background 150ms ease;
}

[b-cktgin93xs] .branches-grid-row:last-child { border-bottom: none; }

/* ── ROW ACTIONS ────────────────────────────────────────────────────────── */
/* opacity:0 here; reveal rule is in global-styles.css via tr.hover selector */
/* (FluentDataGrid uses display:contents on <tr> — :hover never fires;       */
/*  FluentDataGrid JS adds the .hover class instead)                         */
.row-actions[b-cktgin93xs] {
    opacity: 0;
    display: flex;
    gap: 2px;
    transition: opacity 180ms ease;
    justify-content: flex-end;
}

.row-action-btn[b-cktgin93xs] {
    border: none;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
    transition: background 150ms ease, color 150ms ease;
    line-height: 0;
    outline: none;
}

.row-action-btn:hover[b-cktgin93xs] {
    background: var(--neutral-fill-hover);
    color: var(--neutral-foreground-rest);
}

.row-action-btn:focus-visible[b-cktgin93xs] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.row-action-danger:hover[b-cktgin93xs] {
    background: rgba(239, 68, 68, 0.10);
    color: #EF4444;
}

[b-cktgin93xs] .col-actions { padding-right: 12px; }

/* ── LIST FOOTER ────────────────────────────────────────────────────────── */
.list-footer[b-cktgin93xs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-2);
    border-radius: 0 0 10px 10px;
    gap: 16px;
    flex-wrap: wrap;
}

.results-count[b-cktgin93xs] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.grid-scroll-wrapper[b-cktgin93xs] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-cktgin93xs] { padding: 24px 20px; }
    .row-actions[b-cktgin93xs] { opacity: 1; }
}

@media (max-width: 768px) {
    .page-container[b-cktgin93xs] { padding: 16px; }
    .page-title[b-cktgin93xs] { font-size: 22px; }
    .page-subtitle[b-cktgin93xs] { display: none; }
    .page-header[b-cktgin93xs] { flex-wrap: nowrap; align-items: center; }
    .page-header-text[b-cktgin93xs] { flex: 1 1 auto; min-width: 0; }
    .page-actions[b-cktgin93xs] { flex-shrink: 0; }
    .metrics-row[b-cktgin93xs] { grid-template-columns: 1fr 1fr; }
    .metric-card[b-cktgin93xs] { padding: 16px; }
    .list-search[b-cktgin93xs] { flex: 1 1 100%; max-width: 100%; }
    .results-count[b-cktgin93xs] { display: none; }
    .list-footer[b-cktgin93xs] { justify-content: center; }
}

@media (max-width: 480px) {
    .metrics-row[b-cktgin93xs] { grid-template-columns: 1fr; }
}
/* /Pages/Organization/Branches/CreateUpdateBranchModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CreateUpdateBranchModal — Form View (AI-Agent-UI-Generation-Guide §7.4)
   11 fields → 2-column layout → dialog width clamp(640px, 58vw, 840px).
   Outlined inputs handled globally in global-styles.css.
   This file covers dialog-specific layout, sections, and the status toggle.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Dialog Body & Footer chrome ───────────────────────────────────────────
   IMPORTANT: FluentDialogBody/Footer render as plain <div class="fluent-dialog-*">
   whose ancestor chain never includes this component's Blazor CSS scope.
   ::deep rules from THIS file cannot reach them (proven by DOM inspection).
   All body/footer padding, border, background, and box-shadow are set
   GLOBALLY in global-styles.css — see the FLUENT DIALOG section there.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── SECTIONS — horizontal rhythm with bottom-border dividers ────────────── */
/* 24px vertical padding (vs 20px default) gives comfortable section rhythm  */
.form-section[b-1pmvd8rsib] {
    padding: 24px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.form-section.last[b-1pmvd8rsib] {
    padding-bottom: 8px;
    border-bottom: none;
}

/* Section header: FluentIcon (14px) + small-caps uppercase label */
.form-section-header[b-1pmvd8rsib] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.form-section-header span[b-1pmvd8rsib] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-foreground-hint);
}

/* Section header icon — muted, constrained */
.form-section-header svg[b-1pmvd8rsib] {
    fill: var(--neutral-foreground-hint) !important;
    width: 14px;
    height: 14px;
}

/* ── 2-COLUMN FORM GRID ──────────────────────────────────────────────────── */
/* Row gap 20px (comfortable vertical breathing between fields)               */
/* Col gap 24px (generous gutter between columns — prevents crowding)        */
/* minmax(0,1fr): prevents web-component min-width from blowing out columns  */
.form-grid[b-1pmvd8rsib] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}

/* ── Field wrapper divs (CRITICAL — grid item grouping) ─────────────────── */
/* The Blazor FluentTextField component renders TWO sibling elements in the  */
/* light DOM: (1) <label class="fluent-input-label"> and (2) <fluent-text-   */
/* field>. Without a wrapper, these become TWO separate grid items:          */
/*   grid col 1: <label>Name</label>          ← label on the LEFT            */
/*   grid col 2: <fluent-text-field>...</>    ← input on the RIGHT           */
/* This prevents the intended 2-field-per-row layout and breaks stacking.    */
/*                                                                            */
/* FIX: wrap each FluentTextField in a plain <div>. The div becomes the      */
/* single grid item; the label + input stack naturally inside it (block flow).*/
.form-grid > div[b-1pmvd8rsib] {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* grid item must not overflow its column track */
}

/* Full-width span: covers both columns */
.form-grid > .full-width[b-1pmvd8rsib] {
    grid-column: 1 / -1;
}

/* Web components fill wrapper (::deep: no Blazor scope attr on target) */
[b-1pmvd8rsib] fluent-text-field,
[b-1pmvd8rsib] fluent-text-area,
[b-1pmvd8rsib] fluent-number-field,
[b-1pmvd8rsib] fluent-select {
    width: 100%;
}

/* ── STATUS TOGGLE ROW ───────────────────────────────────────────────────── */
.status-toggle-row[b-1pmvd8rsib] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.status-toggle-info[b-1pmvd8rsib] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.status-toggle-title[b-1pmvd8rsib] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.status-toggle-desc[b-1pmvd8rsib] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .form-grid[b-1pmvd8rsib] { grid-template-columns: 1fr; }
    .status-toggle-row[b-1pmvd8rsib] { flex-direction: column; align-items: flex-start; }
}

/* /Pages/Organization/Departments/CreateUpdateDepartmentModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CreateUpdateDepartmentModal — Form View (AI-Agent-UI-Generation-Guide §7.4)
   4 fields → 1-column stacked layout, dialog width clamp(440px,46vw,580px).
   Vertical label-above-input layout enforced globally in global-styles.css.
   Dialog body/footer padding/shadow managed in global-styles.css.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
.form-section[b-uci9jo3rjt] {
    padding: 24px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.form-section.last[b-uci9jo3rjt] {
    padding-bottom: 8px;
    border-bottom: none;
}

.form-section-header[b-uci9jo3rjt] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.form-section-header span[b-uci9jo3rjt] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-foreground-hint);
}

.form-section-header svg[b-uci9jo3rjt] {
    fill: var(--neutral-foreground-hint) !important;
    width: 14px;
    height: 14px;
}

/* ── 1-COLUMN STACKED FIELDS (4 fields → 1-col per guide §7.4.0) ─────────── */
.form-fields[b-uci9jo3rjt] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── STATUS TOGGLE ROW ───────────────────────────────────────────────────── */
.status-toggle-row[b-uci9jo3rjt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.status-toggle-info[b-uci9jo3rjt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.status-toggle-title[b-uci9jo3rjt] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.status-toggle-desc[b-uci9jo3rjt] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .status-toggle-row[b-uci9jo3rjt] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/Organization/Departments/Departments.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Departments — List View Archetype  (AI-Agent-UI-Generation-Guide §7.3)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Entry animation ──────────────────────────────────────────────────────── */
@keyframes card-enter-b-relzvva645 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-relzvva645] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-relzvva645 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-relzvva645] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.page-header-text[b-relzvva645] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-relzvva645] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.page-subtitle[b-relzvva645] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.page-actions[b-relzvva645] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Metric cards row  (§7.3.3) ──────────────────────────────────────────── */
.metrics-row[b-relzvva645] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-relzvva645] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}

.metric-card:hover[b-relzvva645] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-icon-wrap[b-relzvva645] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-wrap svg[b-relzvva645] {
    width: 24px;
    height: 24px;
    fill: currentColor !important;
}

.metric-icon-blue[b-relzvva645] {
    background: color-mix(in srgb, #0078d4 14%, transparent);
    color: #0078d4;
}

.metric-icon-green[b-relzvva645] {
    background: color-mix(in srgb, #16a34a 12%, transparent);
    color: #16a34a;
}

.metric-icon-red[b-relzvva645] {
    background: color-mix(in srgb, #dc2626 12%, transparent);
    color: #dc2626;
}

.metric-body[b-relzvva645] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-value[b-relzvva645] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.metric-title[b-relzvva645] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 6px;
    white-space: nowrap;
}

.metric-desc[b-relzvva645] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List container (card) ────────────────────────────────────────────────── */
.list-container[b-relzvva645] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    /* overflow: hidden removed — it clips FluentSelect dropdown popups and
       creates a stacking context that traps anchored-region z-index.        */
    overflow: visible;
    background: var(--neutral-layer-1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-relzvva645] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

/* Native div wrapper — scope attr lands here, enabling flex sizing */
.list-search[b-relzvva645] {
    flex: 1 1 200px;
    max-width: 300px;
}

.toolbar-divider[b-relzvva645] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-relzvva645] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton loader ──────────────────────────────────────────────────────── */
.skeleton-list[b-relzvva645] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.skeleton-row[b-relzvva645] {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr 90px 80px;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    animation: card-enter-b-relzvva645 400ms ease;
}

.skeleton-row:last-child[b-relzvva645] {
    border-bottom: none;
}

/* ── State boxes (error / empty) ──────────────────────────────────────────── */
.state-box[b-relzvva645] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}

.state-icon[b-relzvva645] {
    opacity: 0.35;
    color: var(--neutral-foreground-hint);
}

.state-icon-error[b-relzvva645] {
    opacity: 0.8;
    color: var(--error-foreground-rest, #c62828);
}

.state-title[b-relzvva645] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-message[b-relzvva645] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    max-width: 380px;
}

/* ── Scroll wrapper ───────────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-relzvva645] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Data grid ────────────────────────────────────────────────────────────── */
[b-relzvva645] table.departments-grid {
    width: 100%;
    min-width: 560px;
}

[b-relzvva645] .departments-grid-row {
    transition: background-color 120ms ease;
}

[b-relzvva645] .departments-grid-row:hover {
    background-color: var(--neutral-fill-stealth-hover);
}

/* ── Row actions — initial hidden state ──────────────────────────────────────
   ⚠️ Only opacity:0 lives here. The reveal rule (tr.hover → opacity:1) MUST
   be in global-styles.css — Blazor [b-xxxx] scoping silently drops selectors
   whose ancestor is a non-scoped element (like <tr>). §7.3.4 critical note.
   ──────────────────────────────────────────────────────────────────────────── */
.row-actions[b-relzvva645] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 150ms ease;
}

/* ── Row action button — structural & sizing only ────────────────────────────
   border, color, hover states → global-styles.css to avoid scoping issues
   ──────────────────────────────────────────────────────────────────────────── */
.row-action-btn[b-relzvva645] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
}

/* ── Actions column ───────────────────────────────────────────────────────── */
[b-relzvva645] .col-actions {
    overflow: visible !important;
    text-align: right;
}

/* ── List footer ──────────────────────────────────────────────────────────── */
.list-footer[b-relzvva645] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    flex-wrap: wrap;
    gap: 8px;
}

.results-count[b-relzvva645] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-relzvva645] {
        padding: 24px;
    }
}

@media (max-width: 900px) {
    /* Collapse 3-col metric cards to 2-col */
    .metrics-row[b-relzvva645] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-container[b-relzvva645] {
        padding: 16px;
        gap: 16px;
    }

    .page-header[b-relzvva645] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
    }

    .page-actions[b-relzvva645] {
        width: 100%;
    }

    .list-search[b-relzvva645] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .toolbar-divider[b-relzvva645] { display: none; }

    .toolbar-filters[b-relzvva645] {
        width: 100%;
    }

    .toolbar-filters > *[b-relzvva645] {
        flex: 1 1 calc(50% - 4px) !important;
        width: auto !important;
        min-width: 120px;
    }

    .list-footer[b-relzvva645] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    /* Collapse to single-column metric cards on small phones */
    .metrics-row[b-relzvva645] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-relzvva645] {
        padding: 16px;
    }
}
/* /Pages/Outsourcing/LspRegistries.razor.rz.scp.css */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  LSP Registry (outsourcing register)  –  scoped component CSS ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Page shell ─────────────────────────────────────────────────── */
.page-container[b-dinuhqqytd] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1500px;
    margin: 0 auto;
}

.info-bar[b-dinuhqqytd], .error-bar[b-dinuhqqytd] { border-radius: 6px; }

/* ── Metrics row ─────────────────────────────────────────────────── */
.metrics-row[b-dinuhqqytd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-dinuhqqytd] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    transition: box-shadow 0.15s ease;
}

.metric-card:hover[b-dinuhqqytd] { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Draws the eye only when the register actually has something wrong in it. */
.metric-card-alert[b-dinuhqqytd] { border-color: rgba(220,38,38,.45); }

.icon-wrap[b-dinuhqqytd] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-blue[b-dinuhqqytd]   { background: rgba(0,120,212,.12);  color: #0078d4; }
.icon-green[b-dinuhqqytd]  { background: rgba(0,128,0,.12);    color: #007a00; }
.icon-purple[b-dinuhqqytd] { background: rgba(100,0,200,.12);  color: #6400c8; }
.icon-red[b-dinuhqqytd]    { background: rgba(220,38,38,.12);  color: #dc2626; }

.metric-body[b-dinuhqqytd] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.metric-value[b-dinuhqqytd] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--neutral-foreground-rest);
}

.metric-label[b-dinuhqqytd] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

.metric-hint[b-dinuhqqytd] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    opacity: .75;
    line-height: 1.35;
}

/* ── List container ──────────────────────────────────────────────── */
.list-container[b-dinuhqqytd] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 8px;
    overflow: hidden;
}

.list-toolbar[b-dinuhqqytd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-wrap: wrap;
}

.toolbar-search[b-dinuhqqytd] { min-width: 240px; flex: 1 1 240px; }

.record-count[b-dinuhqqytd] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    margin-left: auto;
}

/* ── Skeleton loading ────────────────────────────────────────────── */
.skeleton-list[b-dinuhqqytd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 0;
}

.skeleton-row[b-dinuhqqytd] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
}

/* ── Empty / no-match state box ──────────────────────────────────── */
.state-box[b-dinuhqqytd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 32px;
    text-align: center;
}

.state-icon[b-dinuhqqytd] { color: var(--neutral-foreground-hint); opacity: .6; }

.state-title[b-dinuhqqytd] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.state-hint[b-dinuhqqytd] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    max-width: 460px;
}

/* ── Data grid ───────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-dinuhqqytd] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Without an explicit min-width the `fr` columns squish instead of scrolling. */
[b-dinuhqqytd] table.lsp-grid { width: 100%; min-width: 1180px; }

.cell-stack[b-dinuhqqytd] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cell-primary[b-dinuhqqytd] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.cell-secondary[b-dinuhqqytd] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.flag-text[b-dinuhqqytd] {
    font-size: 11px;
    font-weight: 600;
    color: #dc2626;
}

.row-actions[b-dinuhqqytd] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.row-actions-mobile[b-dinuhqqytd] {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.status-badge[b-dinuhqqytd] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    width: fit-content;
}

.badge-success[b-dinuhqqytd] { background: rgba(0,128,0,.12);     color: #007a00; }
.badge-warning[b-dinuhqqytd] { background: rgba(217,119,6,.12);   color: #d97706; }
.badge-danger[b-dinuhqqytd]  { background: rgba(220,38,38,.12);   color: #dc2626; }
.badge-neutral[b-dinuhqqytd] { background: rgba(150,150,150,.14); color: #666; }

/* ── Dialog form ─────────────────────────────────────────────────── */
.dialog-form[b-dinuhqqytd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 2px;
}

.form-row[b-dinuhqqytd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

.form-label[b-dinuhqqytd] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.form-control[b-dinuhqqytd] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.form-control:focus[b-dinuhqqytd] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    outline: none;
}

input[type="date"].form-control[b-dinuhqqytd] { cursor: pointer; }

.check-stack[b-dinuhqqytd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field-hint[b-dinuhqqytd] {
    font-size: 11px;
    line-height: 1.4;
    color: var(--neutral-foreground-hint);
    margin-left: 26px;
}

/* Inline warning shown while the entry still violates an activation guard —
   the operator can save the draft, but Activate will refuse until it is cleared. */
.field-hint-warn[b-dinuhqqytd] { color: #d97706; }

/* ── Mobile cards ────────────────────────────────────────────────── */
.entity-list-mobile[b-dinuhqqytd] { display: none; }

.entity-card[b-dinuhqqytd] {
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    padding: 14px 16px;
}

.entity-card:last-child[b-dinuhqqytd] { border-bottom: none; }

.entity-card-header[b-dinuhqqytd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-card-title[b-dinuhqqytd] { display: flex; flex-direction: column; gap: 2px; }

.entity-card-name[b-dinuhqqytd] { font-size: 14px; font-weight: 600; }

.entity-card-fields[b-dinuhqqytd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-dinuhqqytd] { display: flex; flex-direction: column; gap: 2px; }

.field-label[b-dinuhqqytd] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.field-value[b-dinuhqqytd] { font-size: 13px; color: var(--neutral-foreground-rest); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .metrics-row[b-dinuhqqytd] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .grid-scroll-wrapper[b-dinuhqqytd] { display: none; }
    .entity-list-mobile[b-dinuhqqytd]  { display: block; }
    .record-count[b-dinuhqqytd]        { margin-left: 0; }
    .form-row[b-dinuhqqytd]            { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .page-container[b-dinuhqqytd] { padding: 16px; gap: 16px; }
    .metrics-row[b-dinuhqqytd] { grid-template-columns: 1fr; }
    .entity-card-fields[b-dinuhqqytd] { grid-template-columns: 1fr; }
}
/* /Pages/Products/Create.razor.rz.scp.css */
/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes card-enter-b-diikwbfyr5 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-b-diikwbfyr5 {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Wizard page layout ──────────────────────────────────────────────────── */
.wizard-page[b-diikwbfyr5] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--neutral-layer-2);
    animation: card-enter-b-diikwbfyr5 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wizard header ───────────────────────────────────────────────────────── */
.wizard-header[b-diikwbfyr5] {
    padding: 24px 32px 0;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.wizard-back-link[b-diikwbfyr5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--accent-fill-rest);
    text-decoration: none;
    margin-bottom: 12px;
}

.wizard-back-link:hover[b-diikwbfyr5] {
    text-decoration: underline;
}

.wizard-title[b-diikwbfyr5] {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.wizard-subtitle[b-diikwbfyr5] {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Step indicators ─────────────────────────────────────────────────────── */
.wizard-steps[b-diikwbfyr5] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    gap: 0;
    overflow-x: auto;
}

.step-item[b-diikwbfyr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 80px;
    cursor: default;
}

.step-marker[b-diikwbfyr5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.step-marker-pending[b-diikwbfyr5] {
    background: var(--neutral-layer-2);
    border: 2px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
}

.step-marker-active[b-diikwbfyr5] {
    background: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
    color: white;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.2);
}

.step-marker-completed[b-diikwbfyr5] {
    background: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
    color: white;
}

.step-number[b-diikwbfyr5] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.step-label[b-diikwbfyr5] {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: var(--neutral-foreground-hint);
    max-width: 80px;
    line-height: 1.3;
    white-space: nowrap;
}

.step-active .step-label[b-diikwbfyr5] {
    color: var(--accent-fill-rest);
    font-weight: 600;
}

.step-completed .step-label[b-diikwbfyr5] {
    color: var(--neutral-foreground-rest);
}

.step-connector[b-diikwbfyr5] {
    width: 60px;
    height: 2px;
    background: var(--neutral-stroke-rest);
    margin: 0 8px;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: background 200ms ease;
}

.step-connector-completed[b-diikwbfyr5] {
    background: var(--accent-fill-rest);
}

/* ── Wizard content ──────────────────────────────────────────────────────── */
.wizard-content[b-diikwbfyr5] {
    flex: 1;
    padding: 32px 24px;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.step-header[b-diikwbfyr5] {
    margin-bottom: 32px;
    text-align: center;
}

.step-title[b-diikwbfyr5] {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.step-description[b-diikwbfyr5] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.step-body[b-diikwbfyr5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Form field patterns ─────────────────────────────────────────────────── */
.form-field[b-diikwbfyr5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-diikwbfyr5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.required-mark[b-diikwbfyr5] {
    color: var(--error-foreground-rest, #d13438);
    margin-left: 2px;
}

.wizard-page[b-diikwbfyr5]  .form-select {
    width: 100%;
    height: 36px;
    border: 1.5px solid var(--neutral-stroke-rest, rgb(214, 214, 214));
    border-radius: 6px;
    padding: 0 10px;
    background: var(--neutral-fill-input-rest, rgb(251, 251, 251));
    color: var(--neutral-foreground-rest, rgb(26, 26, 26));
    font-size: 14px;
    font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
    appearance: auto;
    cursor: pointer;
    box-sizing: border-box;
}

.wizard-page[b-diikwbfyr5]  .form-select:focus {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.form-field-pair[b-diikwbfyr5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.form-field-row[b-diikwbfyr5] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Fee cards ───────────────────────────────────────────────────────────── */
.fee-card[b-diikwbfyr5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.fee-card-header[b-diikwbfyr5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fee-card-title[b-diikwbfyr5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.fee-remove-btn[b-diikwbfyr5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    font-size: 12px;
    color: var(--error-foreground-rest, #d13438);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.fee-remove-btn:hover[b-diikwbfyr5] {
    background: rgba(209, 52, 56, 0.08);
    border-color: var(--error-foreground-rest, #d13438);
}

/* ── Skeleton shimmer ────────────────────────────────────────────────────── */
.skeleton-field[b-diikwbfyr5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton[b-diikwbfyr5] {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-layer-3, #f0f0f0) 25%, var(--neutral-layer-4, #e0e0e0) 50%, var(--neutral-layer-3, #f0f0f0) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-diikwbfyr5 1.5s ease-in-out infinite;
}

.skeleton-label[b-diikwbfyr5] {
    width: 30%;
    height: 12px;
}

.skeleton-input[b-diikwbfyr5] {
    width: 100%;
    height: 36px;
}

/* ── Error bar ───────────────────────────────────────────────────────────── */
.step-error-bar[b-diikwbfyr5] {
    margin-bottom: 16px;
}

/* ── Inline disclaimer note (mirrors LoanServicing/Schedule.razor.css .schedule-note) ── */
.schedule-note[b-diikwbfyr5] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}

.schedule-note svg[b-diikwbfyr5] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Sticky wizard footer ────────────────────────────────────────────────── */
.wizard-footer[b-diikwbfyr5] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding: 16px 0;
}

.footer-content[b-diikwbfyr5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.footer-left[b-diikwbfyr5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-right[b-diikwbfyr5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wizard-page[b-diikwbfyr5],
    .skeleton[b-diikwbfyr5] {
        animation: none;
    }

    .step-marker[b-diikwbfyr5],
    .step-connector[b-diikwbfyr5],
    .fee-remove-btn[b-diikwbfyr5] {
        transition: none;
    }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .step-connector[b-diikwbfyr5] {
        width: 40px;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wizard-header[b-diikwbfyr5] {
        padding: 20px 16px 0;
    }

    .wizard-steps[b-diikwbfyr5] {
        padding: 16px;
    }

    .step-label[b-diikwbfyr5] {
        display: none;
    }

    .step-connector[b-diikwbfyr5] {
        margin-bottom: 0;
    }

    .wizard-content[b-diikwbfyr5] {
        padding: 20px 16px;
    }

    .form-field-pair[b-diikwbfyr5] {
        grid-template-columns: 1fr;
    }

    .footer-content[b-diikwbfyr5] {
        flex-direction: column;
        gap: 12px;
        padding: 0 16px;
    }

    .footer-right[b-diikwbfyr5] {
        order: -1;
        width: 100%;
    }

    .footer-right[b-diikwbfyr5]  fluent-button {
        width: 100%;
    }

    .footer-left[b-diikwbfyr5] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Products/Edit.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Products › Edit Loan Product  (Wizard §7.6)
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes card-enter-b-yvzayt6ipn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-b-yvzayt6ipn {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Wizard page layout ──────────────────────────────────────── */
.wizard-page[b-yvzayt6ipn] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--neutral-layer-2);
    animation: card-enter-b-yvzayt6ipn 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wizard header ───────────────────────────────────────────── */
.wizard-header[b-yvzayt6ipn] {
    padding: 24px 32px 0;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.wizard-back-link[b-yvzayt6ipn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--accent-fill-rest);
    text-decoration: none;
    margin-bottom: 12px;
}

.wizard-back-link:hover[b-yvzayt6ipn] {
    text-decoration: underline;
}

.wizard-title[b-yvzayt6ipn] {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.wizard-subtitle[b-yvzayt6ipn] {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Step indicators ─────────────────────────────────────────── */
.wizard-steps[b-yvzayt6ipn] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    gap: 0;
    overflow-x: auto;
}

.step-item[b-yvzayt6ipn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 80px;
    cursor: default;
}

.step-marker[b-yvzayt6ipn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.step-marker-pending[b-yvzayt6ipn] {
    background: var(--neutral-layer-2);
    border: 2px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
}

.step-marker-active[b-yvzayt6ipn] {
    background: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
    color: white;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.2);
}

.step-marker-completed[b-yvzayt6ipn] {
    background: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
    color: white;
}

.step-number[b-yvzayt6ipn] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.step-label[b-yvzayt6ipn] {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: var(--neutral-foreground-hint);
    max-width: 80px;
    line-height: 1.3;
    white-space: nowrap;
}

.step-active .step-label[b-yvzayt6ipn] {
    color: var(--accent-fill-rest);
    font-weight: 600;
}

.step-completed .step-label[b-yvzayt6ipn] {
    color: var(--neutral-foreground-rest);
}

.step-connector[b-yvzayt6ipn] {
    width: 60px;
    height: 2px;
    background: var(--neutral-stroke-rest);
    margin: 0 8px;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: background 200ms ease;
}

.step-connector-completed[b-yvzayt6ipn] {
    background: var(--accent-fill-rest);
}

/* ── Wizard content ──────────────────────────────────────────── */
.wizard-content[b-yvzayt6ipn] {
    flex: 1;
    padding: 32px 24px;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.step-header[b-yvzayt6ipn] {
    margin-bottom: 32px;
    text-align: center;
}

.step-title[b-yvzayt6ipn] {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.step-description[b-yvzayt6ipn] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.step-body[b-yvzayt6ipn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Error bar ────────────────────────────────────────────────── */
.step-error-bar[b-yvzayt6ipn] {
    margin-bottom: 16px;
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state[b-yvzayt6ipn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    gap: 12px;
}

.empty-state[b-yvzayt6ipn]  svg { opacity: 0.45; }

.empty-heading[b-yvzayt6ipn] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── Form field patterns ─────────────────────────────────────── */
.form-field[b-yvzayt6ipn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field-pair[b-yvzayt6ipn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.form-field-row[b-yvzayt6ipn] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Fee cards ───────────────────────────────────────────────── */
.fee-card[b-yvzayt6ipn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
}

.fee-card-header[b-yvzayt6ipn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fee-card-title[b-yvzayt6ipn] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.fee-remove-btn[b-yvzayt6ipn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    font-size: 12px;
    color: var(--error-foreground-rest, #d13438);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.fee-remove-btn:hover[b-yvzayt6ipn] {
    background: rgba(209, 52, 56, 0.08);
    border-color: var(--error-foreground-rest, #d13438);
}

/* ── Skeleton fields (CSS shimmer) ───────────────────────────── */
.skeleton-field[b-yvzayt6ipn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton[b-yvzayt6ipn] {
    background: linear-gradient(90deg, var(--neutral-fill-rest) 25%, var(--neutral-fill-hover) 50%, var(--neutral-fill-rest) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-yvzayt6ipn 1.5s infinite;
    border-radius: 4px;
}

.skeleton-label[b-yvzayt6ipn] {
    height: 13px;
    width: 120px;
}

.skeleton-input[b-yvzayt6ipn] {
    height: 36px;
    width: 100%;
    border-radius: 4px;
}

/* ── Inline disclaimer note (mirrors LoanServicing/Schedule.razor.css .schedule-note) ── */
.schedule-note[b-yvzayt6ipn] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
}

.schedule-note svg[b-yvzayt6ipn] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Sticky wizard footer ────────────────────────────────────── */
.wizard-footer[b-yvzayt6ipn] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding: 16px 0;
}

.footer-content[b-yvzayt6ipn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.footer-left[b-yvzayt6ipn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-right[b-yvzayt6ipn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wizard-page[b-yvzayt6ipn]    { animation: none; }
    .skeleton[b-yvzayt6ipn]       { animation: none; }
    .step-marker[b-yvzayt6ipn]    { transition: none; }
    .step-connector[b-yvzayt6ipn] { transition: none; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .step-connector[b-yvzayt6ipn] {
        width: 40px;
    }
}

@media (max-width: 768px) {
    .wizard-header[b-yvzayt6ipn] {
        padding: 20px 16px 0;
    }

    .wizard-steps[b-yvzayt6ipn] {
        padding: 16px;
    }

    .step-label[b-yvzayt6ipn] {
        display: none;
    }

    .step-connector[b-yvzayt6ipn] {
        margin-bottom: 0;
    }

    .wizard-content[b-yvzayt6ipn] {
        padding: 24px 16px;
        max-width: 100%;
    }

    .form-field-pair[b-yvzayt6ipn] {
        grid-template-columns: 1fr;
    }

    .footer-content[b-yvzayt6ipn] {
        flex-direction: column;
        gap: 12px;
        padding: 0 16px;
    }

    .footer-right[b-yvzayt6ipn] {
        order: -1;
        width: 100%;
    }

    .footer-left[b-yvzayt6ipn] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* /Pages/Products/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Loan Products — List View Archetype  (AI-Agent-UI-Generation-Guide §7.3)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes card-enter-b-1wy7rnbbsl {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@keyframes shimmer-b-1wy7rnbbsl {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-1wy7rnbbsl] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
    animation: card-enter-b-1wy7rnbbsl 280ms ease;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-1wy7rnbbsl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.page-header-text[b-1wy7rnbbsl] { display: flex; flex-direction: column; gap: 4px; }

.page-title[b-1wy7rnbbsl] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.page-subtitle[b-1wy7rnbbsl] { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.page-actions[b-1wy7rnbbsl]  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Metric cards row  (§7.3.3) ──────────────────────────────────────────── */
.metrics-row[b-1wy7rnbbsl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-1wy7rnbbsl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
    cursor: default;
}
.metric-card:hover[b-1wy7rnbbsl] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.09), 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.metric-icon-wrap[b-1wy7rnbbsl] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.metric-icon-blue[b-1wy7rnbbsl]  { background: rgba(59, 130, 246, 0.14); color: #2563EB; }
.metric-icon-green[b-1wy7rnbbsl] { background: rgba(16, 185, 129, 0.14); color: #059669; }
.metric-icon-red[b-1wy7rnbbsl]   { background: rgba(239, 68, 68, 0.14);  color: #DC2626; }

.metric-body[b-1wy7rnbbsl]  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metric-value[b-1wy7rnbbsl] { font-size: 15px; font-weight: 700; line-height: 1; color: var(--neutral-foreground-rest); letter-spacing: -0.5px; }
.metric-title[b-1wy7rnbbsl] { font-size: 13px; font-weight: 600; color: var(--neutral-foreground-rest); }
.metric-desc[b-1wy7rnbbsl]  { font-size: 11px; color: var(--neutral-foreground-hint); }

/* ── Data card ────────────────────────────────────────────────────────────── */
.list-container[b-1wy7rnbbsl] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    /* overflow: visible — prevents FluentSelect dropdown clipping            */
    overflow: visible;
    background: var(--neutral-layer-1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.list-toolbar[b-1wy7rnbbsl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    flex-wrap: wrap;
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 10;
}

/* Native div wrapper — scope attr lands here, enabling flex sizing */
.list-search[b-1wy7rnbbsl] {
    flex: 1 1 200px;
    max-width: 300px;
}

.toolbar-divider[b-1wy7rnbbsl] {
    width: 1px;
    height: 24px;
    background: var(--neutral-stroke-divider-rest);
    flex-shrink: 0;
}

.toolbar-filters[b-1wy7rnbbsl] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.skeleton-list[b-1wy7rnbbsl] { display: flex; flex-direction: column; }

.skeleton-row[b-1wy7rnbbsl] {
    display: grid;
    grid-template-columns: 90px 1.5fr 130px 90px 110px 110px 90px;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.skeleton-row:last-child[b-1wy7rnbbsl] { border-bottom: none; }

.skeleton[b-1wy7rnbbsl] {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--neutral-layer-3, #f0f0f0) 25%, var(--neutral-layer-4, #e0e0e0) 50%, var(--neutral-layer-3, #f0f0f0) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-1wy7rnbbsl 1.5s ease-in-out infinite;
}

.skeleton-code[b-1wy7rnbbsl]   { width: 70px;  height: 13px; }
.skeleton-name[b-1wy7rnbbsl]   { width: 160px; height: 13px; }
.skeleton-badge[b-1wy7rnbbsl]  { width: 100px; height: 22px; border-radius: 10px; }
.skeleton-status[b-1wy7rnbbsl] { width: 68px;  height: 22px; border-radius: 20px; }
.skeleton-amount[b-1wy7rnbbsl] { width: 80px;  height: 13px; }
.skeleton-action[b-1wy7rnbbsl] { width: 60px;  height: 28px; border-radius: 4px; }

/* ── Error bar ────────────────────────────────────────────────────────────── */
.list-error-bar[b-1wy7rnbbsl] {
    padding: 16px;
}

.error-action[b-1wy7rnbbsl] {
    text-align: center;
    padding-top: 12px;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state[b-1wy7rnbbsl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.empty-heading[b-1wy7rnbbsl] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.empty-message[b-1wy7rnbbsl] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    max-width: 380px;
}

/* ── Scroll wrapper ───────────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-1wy7rnbbsl] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Data grid ────────────────────────────────────────────────────────────── */
[b-1wy7rnbbsl] table.products-grid { width: 100%; min-width: 1050px; }

/* ── Row actions — initial hidden state ──────────────────────────────────────
   ⚠️ Only opacity:0 here. The reveal (tr.hover → opacity:1) lives in
   global-styles.css — Blazor [b-xxxx] scoping silently breaks <tr> ancestor
   selectors.  §7.3.4 critical note.
   ──────────────────────────────────────────────────────────────────────────── */
.row-actions[b-1wy7rnbbsl] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 150ms ease;
}

/* ── Row action button — structural only (border/hover → global) ─────────── */
.row-action-btn[b-1wy7rnbbsl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
}

/* ── Actions column ───────────────────────────────────────────────────────── */
[b-1wy7rnbbsl] .col-actions { overflow: visible !important; text-align: right; }

/* ── Product type badge ───────────────────────────────────────────────────── */
.product-type-badge[b-1wy7rnbbsl] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
    white-space: nowrap;
}

/* ── Amount cell ──────────────────────────────────────────────────────────── */
.amount-cell[b-1wy7rnbbsl] {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

/* ── List footer ──────────────────────────────────────────────────────────── */
.list-footer[b-1wy7rnbbsl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
    flex-wrap: wrap;
    gap: 8px;
}
.results-count[b-1wy7rnbbsl] { font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .page-container[b-1wy7rnbbsl],
    .skeleton[b-1wy7rnbbsl] {
        animation: none;
    }

    .metric-card[b-1wy7rnbbsl],
    .row-actions[b-1wy7rnbbsl] {
        transition: none;
    }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-container[b-1wy7rnbbsl] { padding: 24px; }
}

@media (max-width: 900px) {
    .metrics-row[b-1wy7rnbbsl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-1wy7rnbbsl] { padding: 16px; gap: 16px; }

    .page-header[b-1wy7rnbbsl] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
    }
    .page-actions[b-1wy7rnbbsl] { width: 100%; }

    .list-search[b-1wy7rnbbsl]     { flex: 1 1 100%; max-width: 100%; }
    .toolbar-divider[b-1wy7rnbbsl] { display: none; }

    .toolbar-filters[b-1wy7rnbbsl] { width: 100%; }
    .toolbar-filters > *[b-1wy7rnbbsl] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 120px; }

    .list-footer[b-1wy7rnbbsl] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .metrics-row[b-1wy7rnbbsl] { grid-template-columns: 1fr; }
    .metric-card[b-1wy7rnbbsl] { padding: 16px; }
}
/* /Pages/Products/Versions.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Products › Version History  (List View §7.3)
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes card-enter-b-u3iqou91h8 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-b-u3iqou91h8 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Page container ───────────────────────────────────────────── */
.page-container[b-u3iqou91h8] {
    padding: 32px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Page header ──────────────────────────────────────────────── */
.page-header[b-u3iqou91h8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-content[b-u3iqou91h8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-u3iqou91h8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-title[b-u3iqou91h8] {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--neutral-foreground-rest);
}

.page-description[b-u3iqou91h8] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

.header-actions[b-u3iqou91h8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── List container (FluentCard) ──────────────────────────────── */
.list-container[b-u3iqou91h8] {
    overflow: hidden;
    animation: card-enter-b-u3iqou91h8 0.25s ease-out;
}

/* ── Skeleton loading ─────────────────────────────────────────── */
.skeleton-list[b-u3iqou91h8] {
    padding: 8px 0;
}

.skeleton-row[b-u3iqou91h8] {
    display: grid;
    grid-template-columns: 90px 1fr 100px 200px 160px 96px;
    padding: 10px 16px;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.skeleton-row:last-child[b-u3iqou91h8] { border-bottom: none; }

.skeleton-cell[b-u3iqou91h8] {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--neutral-fill-rest) 25%, var(--neutral-fill-hover) 50%, var(--neutral-fill-rest) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-u3iqou91h8 1.5s infinite;
}

.skeleton-cell.short[b-u3iqou91h8]  { max-width: 60px; }
.skeleton-cell.wide[b-u3iqou91h8]   { max-width: 100%; }
.skeleton-cell.medium[b-u3iqou91h8] { max-width: 120px; }
.skeleton-cell.actions[b-u3iqou91h8] { max-width: 48px; }

/* ── Error bar ────────────────────────────────────────────────── */
.list-error-bar[b-u3iqou91h8] {
    margin: 16px;
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state[b-u3iqou91h8] {
    padding: 64px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.empty-state[b-u3iqou91h8]  svg { opacity: 0.45; }

.empty-heading[b-u3iqou91h8] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.empty-description[b-u3iqou91h8] {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    max-width: 360px;
    line-height: 1.5;
}

/* ── Grid scroll wrapper ──────────────────────────────────────── */
.grid-scroll-wrapper[b-u3iqou91h8] {
    overflow-x: auto;
    overflow-y: hidden;
}

[b-u3iqou91h8] table.versions-grid { min-width: 950px; }

/* ── Status badges ────────────────────────────────────────────── */
.status-badge[b-u3iqou91h8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.status-badge--active[b-u3iqou91h8] {
    background: rgba(16, 124, 16, 0.08);
    color: #0e7a0d;
}

.status-badge--draft[b-u3iqou91h8] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--neutral-foreground-hint);
}

/* ── List footer ──────────────────────────────────────────────── */
.list-footer[b-u3iqou91h8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
    gap: 12px;
    flex-wrap: wrap;
}

.results-count[b-u3iqou91h8] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .list-container[b-u3iqou91h8]  { animation: none; }
    .skeleton-cell[b-u3iqou91h8]   { animation: none; }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-u3iqou91h8] {
        padding: 16px;
        gap: 12px;
    }

    .header-content[b-u3iqou91h8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title[b-u3iqou91h8] { font-size: 22px; }
}

.empty-state[b-u3iqou91h8] {
    padding: 64px 24px;
    text-align: center;
}

.empty-title[b-u3iqou91h8] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .page-container[b-u3iqou91h8] {
        padding: 16px;
    }

    .page-header[b-u3iqou91h8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title[b-u3iqou91h8] {
        font-size: 22px;
    }
}

/* ===== Page entry animation ===== */
@keyframes card-enter-b-u3iqou91h8 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.page-container[b-u3iqou91h8] {
    animation: card-enter-b-u3iqou91h8 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* /Pages/Settings/Company/Index.razor.rz.scp.css */
/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-u0etqsoi3w] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 720px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-u0etqsoi3w]      { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header-text[b-u0etqsoi3w] { display: flex; flex-direction: column; gap: 2px; }
.page-title[b-u0etqsoi3w]       { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-u0etqsoi3w]    { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Settings card ────────────────────────────────────────────────────────── */
.settings-card[b-u0etqsoi3w] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-u0etqsoi3w] { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); }

/* Used on this page since well before Plan 76 but never defined anywhere that reaches it — the two
   definitions that exist are scoped to other components, so their [b-xxxx] never matches here. The
   subtitles were therefore rendering at full body size and body colour, louder than the 15px
   headings above them (Plan 76 review, 2026-09-03). */
.section-subtitle[b-u0etqsoi3w] { margin: 0; font-size: 12px; line-height: 1.5; color: var(--neutral-foreground-hint); }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.form-grid[b-u0etqsoi3w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.form-field[b-u0etqsoi3w]          { display: flex; flex-direction: column; gap: 4px; }
.form-field--wide[b-u0etqsoi3w]    { grid-column: span 2; }
.form-actions[b-u0etqsoi3w]        { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 8px; }

/* ── Per-fee-type GST rates (Plan 76.3) ───────────────────────────────────── */
.fee-gst-grid[b-u0etqsoi3w] {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 10px 24px;
    align-items: center;
    max-width: 520px;
}
.fee-gst-head[b-u0etqsoi3w]  { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--neutral-foreground-hint); }
.fee-gst-label[b-u0etqsoi3w] { font-size: 13px; color: var(--neutral-foreground-rest); }

/* Native <select>/<input> styled to match Fluent control height, used where a Fluent control would
   sit inside a @foreach — see CLAUDE.md gotcha 9. */
.fluent-input[b-u0etqsoi3w] {
    appearance: none;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
select.fluent-input[b-u0etqsoi3w] {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}
.fluent-input:focus[b-u0etqsoi3w] {
    outline: none;
    border-color: var(--accent-stroke-control-rest);
    box-shadow: 0 0 0 1px var(--accent-stroke-control-rest);
}

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton-list[b-u0etqsoi3w] { display: flex; flex-direction: column; gap: 16px; padding: 8px 0; }
.skeleton-row[b-u0etqsoi3w]  { display: flex; flex-direction: column; gap: 8px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .page-container[b-u0etqsoi3w] { padding: 16px 12px 24px; }
    .form-grid[b-u0etqsoi3w]      { grid-template-columns: 1fr; }
    .fee-gst-grid[b-u0etqsoi3w]   { grid-template-columns: 1fr; gap: 4px 0; }
    .fee-gst-head[b-u0etqsoi3w]   { display: none; }
    .form-field--wide[b-u0etqsoi3w] { grid-column: span 1; }
}
/* /Pages/Settings/IntegrationSimulation/Index.razor.rz.scp.css */
.simulation-alert[b-46hyz3td7s] {
    margin-bottom: var(--spacingVerticalM);
}

.toggle-row[b-46hyz3td7s] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalM);
    padding: var(--spacingVerticalM) 0;
}

.section-title--top-gap[b-46hyz3td7s] {
    margin-top: var(--spacingVerticalXL);
}

.integration-grid[b-46hyz3td7s] {
    margin-top: var(--spacingVerticalS);
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-46hyz3td7s] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-46hyz3td7s] table.integration-grid { min-width: 720px; }

.status-badge--amber[b-46hyz3td7s] {
    background-color: var(--colorStatusWarningBackground3);
    color: var(--colorStatusWarningForeground3);
    padding: 2px 8px;
    border-radius: var(--borderRadiusMedium);
    font-size: 12px;
    font-weight: 600;
}

.status-badge--green[b-46hyz3td7s] {
    background-color: var(--colorStatusSuccessBackground3);
    color: var(--colorStatusSuccessForeground3);
    padding: 2px 8px;
    border-radius: var(--borderRadiusMedium);
    font-size: 12px;
    font-weight: 600;
}
/* /Pages/Settings/LoanPolicy/Index.razor.rz.scp.css */
/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-ya04rnxywh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 860px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-ya04rnxywh]      { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header-text[b-ya04rnxywh] { display: flex; flex-direction: column; gap: 2px; }
.page-title[b-ya04rnxywh]       { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-ya04rnxywh]    { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }

/* ── Settings card ────────────────────────────────────────────────────────── */
.settings-card[b-ya04rnxywh] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-ya04rnxywh] { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--neutral-foreground-rest); }
.section-hint[b-ya04rnxywh]  { margin: -12px 0 4px; font-size: 12px; color: var(--neutral-foreground-hint); }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.form-grid[b-ya04rnxywh] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px 24px;
}
.form-field[b-ya04rnxywh]       { display: flex; flex-direction: column; gap: 4px; }
.field-hint[b-ya04rnxywh]       { font-size: 11px; color: var(--neutral-foreground-hint); }
.form-actions[b-ya04rnxywh]     { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton-list[b-ya04rnxywh] { display: flex; flex-direction: column; gap: 16px; padding: 8px 0; }
.skeleton-row[b-ya04rnxywh]  { display: flex; flex-direction: column; gap: 8px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .form-grid[b-ya04rnxywh] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .page-container[b-ya04rnxywh] { padding: 16px 12px 24px; }
    .form-grid[b-ya04rnxywh]      { grid-template-columns: 1fr; }
}
/* /Pages/Settings/PrintTemplates/Index.razor.rz.scp.css */
/* ── Page shell ───────────────────────────────────────────────────────────── */
.page-container[b-fn12uady5b] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 32px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header[b-fn12uady5b]         { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header-text[b-fn12uady5b]    { display: flex; flex-direction: column; gap: 2px; }
.page-title[b-fn12uady5b]          { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--neutral-foreground-rest); }
.page-subtitle[b-fn12uady5b]       { margin: 0; font-size: 13px; color: var(--neutral-foreground-hint); }
.page-actions[b-fn12uady5b]        { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── List container ───────────────────────────────────────────────────────── */
.list-container[b-fn12uady5b] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

/* ── Toolbar / search ─────────────────────────────────────────────────────── */
.list-toolbar[b-fn12uady5b]    { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--neutral-stroke-rest); flex-wrap: wrap; }
.list-search[b-fn12uady5b]     { flex: 1; min-width: 180px; }
.toolbar-divider[b-fn12uady5b] { width: 1px; height: 28px; background: var(--neutral-stroke-rest); flex-shrink: 0; }
.toolbar-filters[b-fn12uady5b] { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton-list[b-fn12uady5b] { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.skeleton-row[b-fn12uady5b]  { display: flex; gap: 16px; align-items: center; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.state-box[b-fn12uady5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}
.state-icon[b-fn12uady5b]  { opacity: .35; }
.state-title[b-fn12uady5b] { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); }

/* ── Grid ─────────────────────────────────────────────────────────────────── */
[b-fn12uady5b] table.list-grid { width: 100%; }
.row-actions[b-fn12uady5b] { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }

/* ── Editor dialog layout ─────────────────────────────────────────────────── */
.editor-layout[b-fn12uady5b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    min-height: 500px;
}

.editor-form[b-fn12uady5b] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.editor-preview[b-fn12uady5b] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.preview-label[b-fn12uady5b] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.preview-frame[b-fn12uady5b] {
    flex: 1;
    width: 100%;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: #fff;
    min-height: 400px;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */
.form-field[b-fn12uady5b] { display: flex; flex-direction: column; gap: 4px; }
.fluent-label[b-fn12uady5b] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 2px;
}
.editor-field[b-fn12uady5b] { flex: 1; }

.html-editor[b-fn12uady5b] {
    width: 100%;
    height: 100%;
    min-height: 280px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 8px;
    resize: vertical;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    box-sizing: border-box;
}
.html-editor:focus[b-fn12uady5b] {
    outline: none;
    border-color: var(--accent-fill-rest);
}

/* ── Editor toolbar (label + load-default button) ────────────────────────── */
.editor-toolbar[b-fn12uady5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.load-default-btn[b-fn12uady5b] {
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.6;
}
.load-default-btn:hover[b-fn12uady5b] { background: var(--neutral-layer-3); color: var(--neutral-foreground-rest); }

/* ── Token reference chips ────────────────────────────────────────────────── */
.token-reference[b-fn12uady5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}
.token-ref-label[b-fn12uady5b] {
    font-size: 10px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: .3px;
    flex-shrink: 0;
    margin-right: 2px;
    width: 100%;
}
.token-chip[b-fn12uady5b] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    padding: 2px 7px;
    background: var(--accent-fill-rest);
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: opacity .15s;
}
.token-chip:hover[b-fn12uady5b]  { opacity: .8; }
.token-chip:active[b-fn12uady5b] { opacity: .6; }

/* ── Merge hint ───────────────────────────────────────────────────────────── */
.merge-hint[b-fn12uady5b] {
    font-size: 11px;
    background: var(--neutral-layer-2);
    border-left: 3px solid var(--accent-fill-rest);
    padding: 6px 8px;
    border-radius: 0 4px 4px 0;
    color: var(--neutral-foreground-hint);
}

/* ── Audit log ────────────────────────────────────────────────────────────── */
.audit-panel[b-fn12uady5b] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
}
.audit-panel summary[b-fn12uady5b] {
    cursor: pointer;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    user-select: none;
}
.audit-list[b-fn12uady5b] { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.audit-entry[b-fn12uady5b] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 11px;
    padding: 4px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}
.audit-time[b-fn12uady5b]   { color: var(--neutral-foreground-hint); white-space: nowrap; }
.audit-actor[b-fn12uady5b]  { font-weight: 600; color: var(--neutral-foreground-rest); }
.audit-action[b-fn12uady5b] { background: var(--accent-fill-rest); color: #fff; padding: 1px 6px; border-radius: 10px; }
.audit-summary[b-fn12uady5b] { color: var(--neutral-foreground-hint); font-style: italic; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container[b-fn12uady5b]  { padding: 16px 12px 24px; }
    .editor-layout[b-fn12uady5b]   { grid-template-columns: 1fr; }
    .editor-preview[b-fn12uady5b]  { display: none; }
}
/* /Pages/ShareLoan/ShareLoanLtv.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   SHARE-BACKED LOAN LTV MONITOR — Dashboard Archetype (scoped styles)
   Archetype: Dashboard + List View
   NOTE: Row-action hover reveal rule MUST stay in global-styles.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page container ─────────────────────────────────────────────────── */
.page-container[b-ec808b31zz] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────── */
.header-content[b-ec808b31zz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-ec808b31zz] { flex: 1; }

.page-title[b-ec808b31zz] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-ec808b31zz] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-ec808b31zz] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── KPI metric cards ───────────────────────────────────────────────── */
.metrics-row[b-ec808b31zz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-ec808b31zz] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-ec808b31zz] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-card--alert[b-ec808b31zz] {
    border-left: 3px solid #DC2626;
}

.metric-icon-wrap[b-ec808b31zz] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-skeleton[b-ec808b31zz] { background: var(--neutral-layer-2); }
.metric-icon-wrap[b-ec808b31zz]  svg { fill: currentColor !important; }

.metric-icon-blue[b-ec808b31zz]   { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-ec808b31zz]  { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-amber[b-ec808b31zz]  { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-icon-red[b-ec808b31zz]    { background: rgba(239,68,68,0.12);  color: #DC2626; }
.metric-icon-orange[b-ec808b31zz] { background: rgba(249,115,22,0.12); color: #EA580C; }

.metric-body[b-ec808b31zz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-ec808b31zz] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.metric-value--sm[b-ec808b31zz]     { font-size: 10px; letter-spacing: -0.02em; }
.metric-value--danger[b-ec808b31zz] { color: #DC2626; }

.metric-title[b-ec808b31zz] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-desc[b-ec808b31zz] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tabs card wrapper ──────────────────────────────────────────────── */
.tabs-card[b-ec808b31zz] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Search / filter toolbar ────────────────────────────────────────── */
.toolbar[b-ec808b31zz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}

.toolbar-search[b-ec808b31zz] { flex: 1; min-width: 0; }

.toolbar-right[b-ec808b31zz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.section-title[b-ec808b31zz] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.record-count[b-ec808b31zz] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Grid scroll wrapper ────────────────────────────────────────────── */
.grid-scroll-wrapper[b-ec808b31zz] { overflow-x: auto; }

[b-ec808b31zz] table.data-grid { width: 100%; }

/* ── Skeleton table ─────────────────────────────────────────────────── */
.skeleton-table[b-ec808b31zz] {
    padding: 16px 20px;
}

/* ── Empty / state box ──────────────────────────────────────────────── */
.state-box[b-ec808b31zz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-ec808b31zz]  { color: var(--neutral-foreground-hint); opacity: 0.4; margin-bottom: 4px; }
.state-title[b-ec808b31zz] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-hint[b-ec808b31zz]  { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; max-width: 380px; }

/* ── Grid cell types ────────────────────────────────────────────────── */
.ltv-cell[b-ec808b31zz] {
    display: flex;
    align-items: center;
}

.amount-cell[b-ec808b31zz] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.date-cell[b-ec808b31zz] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge[b-ec808b31zz] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--breached[b-ec808b31zz]  { background: rgba(239,68,68,0.12);  color: #DC2626; }
.status-badge--compliant[b-ec808b31zz] { background: rgba(16,185,129,0.12); color: #059669; }
.status-badge--warning[b-ec808b31zz]   { background: rgba(245,158,11,0.12); color: #D97706; }

/* ── Pagination bar ─────────────────────────────────────────────────── */
.pagination-bar[b-ec808b31zz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    gap: 12px;
}

.pagination-info[b-ec808b31zz] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.pagination-controls[b-ec808b31zz] {
    display: flex;
    gap: 4px;
}

/* ── Price Feed panel ───────────────────────────────────────────────── */
.price-feed-panel[b-ec808b31zz] {
    display: flex;
    flex-direction: column;
}

.price-card[b-ec808b31zz] {
    margin: 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    max-width: 460px;
}

.price-card-inner[b-ec808b31zz] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
}

.price-icon-wrap[b-ec808b31zz] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79,70,229,0.12);
    color: #4F46E5;
}

.price-icon-wrap[b-ec808b31zz]  svg { fill: currentColor !important; }

.price-details[b-ec808b31zz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-row[b-ec808b31zz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label[b-ec808b31zz] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.detail-value[b-ec808b31zz] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.detail-value--accent[b-ec808b31zz] {
    font-size: 18px;
    color: #4F46E5;
}

.price-note[b-ec808b31zz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-1);
}

.price-note[b-ec808b31zz]  svg { fill: currentColor !important; color: var(--neutral-foreground-hint); flex-shrink: 0; }

/* ── Top-up guidance footnote card ───────────────────────────────────── */
.footnote-card[b-ec808b31zz] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 20px 20px;
    padding: 16px 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid #D97706;
    border-radius: 10px;
}

.footnote-icon[b-ec808b31zz] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

.footnote-icon[b-ec808b31zz]  svg { fill: currentColor !important; }

.footnote-body[b-ec808b31zz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.footnote-title[b-ec808b31zz] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.footnote-steps[b-ec808b31zz] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
}

.footnote-steps li + li[b-ec808b31zz] { margin-top: 2px; }

.footnote-link[b-ec808b31zz] {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #4F46E5;
    text-decoration: none;
}

.footnote-link:hover[b-ec808b31zz] { text-decoration: underline; }

/* ── Form styles (stacked: label on top, input below) ───────────────── */
.form-stack[b-ec808b31zz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.form-field[b-ec808b31zz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-ec808b31zz] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.form-required[b-ec808b31zz] {
    color: #DC2626;
    margin-left: 2px;
}

.form-hint[b-ec808b31zz] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

/* ── Row actions (mobile always visible) ────────────────────────────── */
.row-actions[b-ec808b31zz] {
    opacity: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .metrics-row[b-ec808b31zz] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-ec808b31zz] { padding: 16px; gap: 16px; }
    .header-content[b-ec808b31zz] { flex-direction: column; align-items: stretch; }
    .header-actions[b-ec808b31zz] { justify-content: flex-end; flex-wrap: wrap; width: 100%; }
    .metrics-row[b-ec808b31zz]    { grid-template-columns: 1fr 1fr; gap: 12px; }
    .metric-value[b-ec808b31zz]   { font-size: 11px; }
    .metric-value--sm[b-ec808b31zz] { font-size: 8px; }
    .toolbar[b-ec808b31zz]        { flex-direction: column; align-items: stretch; }
    .toolbar-right[b-ec808b31zz]  { justify-content: flex-end; }
    .toolbar-search[b-ec808b31zz] { max-width: 100% !important; }
    /* ⚠ MOBILE: row actions always visible — touch screens have no hover */
    .row-actions[b-ec808b31zz]    { opacity: 1; }
    .price-card[b-ec808b31zz]     { margin: 12px; max-width: 100%; }
}

@media (max-width: 480px) {
    .metrics-row[b-ec808b31zz]    { grid-template-columns: 1fr; }
    .page-title[b-ec808b31zz]     { font-size: 22px; }
    .metric-card[b-ec808b31zz]    { padding: 14px; }
    .state-box[b-ec808b31zz]      { padding: 48px 16px; }
    .pagination-bar[b-ec808b31zz] { flex-direction: column; gap: 8px; align-items: center; }
}
/* /Pages/SilverLoan/SilverLoanLtv.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   SILVER LOAN LTV MONITOR — Dashboard Archetype (scoped styles)
   Archetype: Dashboard + List View
   NOTE: Row-action hover reveal rule MUST stay in global-styles.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page container ─────────────────────────────────────────────────── */
.page-container[b-4utpyc1ocs] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────── */
.header-content[b-4utpyc1ocs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-4utpyc1ocs] { flex: 1; }

.page-title[b-4utpyc1ocs] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-4utpyc1ocs] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-4utpyc1ocs] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── KPI metric cards ───────────────────────────────────────────────── */
.metrics-row[b-4utpyc1ocs] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card[b-4utpyc1ocs] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    transition: box-shadow 170ms ease, transform 170ms ease;
}

.metric-card:hover[b-4utpyc1ocs] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.metric-card--alert[b-4utpyc1ocs] {
    border-left: 3px solid #DC2626;
}

.metric-icon-wrap[b-4utpyc1ocs] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon-skeleton[b-4utpyc1ocs] { background: var(--neutral-layer-2); }
.metric-icon-wrap[b-4utpyc1ocs]  svg { fill: currentColor !important; }

.metric-icon-blue[b-4utpyc1ocs]   { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.metric-icon-green[b-4utpyc1ocs]  { background: rgba(16,185,129,0.12); color: #059669; }
.metric-icon-amber[b-4utpyc1ocs]  { background: rgba(217,119,6,0.12);  color: #D97706; }
.metric-icon-red[b-4utpyc1ocs]    { background: rgba(239,68,68,0.12);  color: #DC2626; }
.metric-icon-orange[b-4utpyc1ocs] { background: rgba(249,115,22,0.12); color: #EA580C; }

.metric-body[b-4utpyc1ocs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.metric-value[b-4utpyc1ocs] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.metric-value--sm[b-4utpyc1ocs]     { font-size: 10px; letter-spacing: -0.02em; }
.metric-value--danger[b-4utpyc1ocs] { color: #DC2626; }

.metric-title[b-4utpyc1ocs] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-desc[b-4utpyc1ocs] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tabs card wrapper ──────────────────────────────────────────────── */
.tabs-card[b-4utpyc1ocs] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Search / filter toolbar ────────────────────────────────────────── */
.toolbar[b-4utpyc1ocs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}

.toolbar-search[b-4utpyc1ocs] { flex: 1; min-width: 0; }

.toolbar-right[b-4utpyc1ocs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.section-title[b-4utpyc1ocs] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.record-count[b-4utpyc1ocs] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── Grid scroll wrapper ────────────────────────────────────────────── */
.grid-scroll-wrapper[b-4utpyc1ocs] { overflow-x: auto; }

[b-4utpyc1ocs] table.data-grid { width: 100%; }

/* ── Skeleton table ─────────────────────────────────────────────────── */
.skeleton-table[b-4utpyc1ocs] {
    padding: 16px 20px;
}

/* ── Empty / state box ──────────────────────────────────────────────── */
.state-box[b-4utpyc1ocs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 32px;
    text-align: center;
}

.state-icon[b-4utpyc1ocs]  { color: var(--neutral-foreground-hint); opacity: 0.4; margin-bottom: 4px; }
.state-title[b-4utpyc1ocs] { font-size: 16px; font-weight: 600; color: var(--neutral-foreground-rest); margin: 0; }
.state-hint[b-4utpyc1ocs]  { font-size: 14px; color: var(--neutral-foreground-hint); margin: 0; max-width: 380px; }

/* ── Grid cell types ────────────────────────────────────────────────── */
.ltv-cell[b-4utpyc1ocs] {
    display: flex;
    align-items: center;
}

.amount-cell[b-4utpyc1ocs] {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.date-cell[b-4utpyc1ocs] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge[b-4utpyc1ocs] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge--breached[b-4utpyc1ocs]  { background: rgba(239,68,68,0.12);  color: #DC2626; }
.status-badge--compliant[b-4utpyc1ocs] { background: rgba(16,185,129,0.12); color: #059669; }
.status-badge--warning[b-4utpyc1ocs]   { background: rgba(245,158,11,0.12); color: #D97706; }

/* ── Pagination bar ─────────────────────────────────────────────────── */
.pagination-bar[b-4utpyc1ocs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    gap: 12px;
}

.pagination-info[b-4utpyc1ocs] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

.pagination-controls[b-4utpyc1ocs] {
    display: flex;
    gap: 4px;
}

/* ── Price Feed panel ───────────────────────────────────────────────── */
.price-feed-panel[b-4utpyc1ocs] {
    display: flex;
    flex-direction: column;
}

.price-card[b-4utpyc1ocs] {
    margin: 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    overflow: hidden;
    max-width: 460px;
}

.price-card-inner[b-4utpyc1ocs] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
}

.price-icon-wrap[b-4utpyc1ocs] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79,70,229,0.12);
    color: #4F46E5;
}

.price-icon-wrap[b-4utpyc1ocs]  svg { fill: currentColor !important; }

.price-details[b-4utpyc1ocs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-row[b-4utpyc1ocs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label[b-4utpyc1ocs] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint);
}

.detail-value[b-4utpyc1ocs] {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.detail-value--accent[b-4utpyc1ocs] {
    font-size: 18px;
    color: #4F46E5;
}

.price-note[b-4utpyc1ocs] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-1);
}

.price-note[b-4utpyc1ocs]  svg { fill: currentColor !important; color: var(--neutral-foreground-hint); flex-shrink: 0; }

/* ── Top-up guidance footnote card ───────────────────────────────────── */
.footnote-card[b-4utpyc1ocs] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 20px 20px;
    padding: 16px 20px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid #D97706;
    border-radius: 10px;
}

.footnote-icon[b-4utpyc1ocs] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

.footnote-icon[b-4utpyc1ocs]  svg { fill: currentColor !important; }

.footnote-body[b-4utpyc1ocs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.footnote-title[b-4utpyc1ocs] {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.footnote-steps[b-4utpyc1ocs] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
}

.footnote-steps li + li[b-4utpyc1ocs] { margin-top: 2px; }

.footnote-link[b-4utpyc1ocs] {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #4F46E5;
    text-decoration: none;
}

.footnote-link:hover[b-4utpyc1ocs] { text-decoration: underline; }

/* ── Form styles (stacked: label on top, input below) ───────────────── */
.form-stack[b-4utpyc1ocs] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.form-field[b-4utpyc1ocs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-4utpyc1ocs] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.form-required[b-4utpyc1ocs] {
    color: #DC2626;
    margin-left: 2px;
}

.form-hint[b-4utpyc1ocs] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

/* ── Row actions (mobile always visible) ────────────────────────────── */
.row-actions[b-4utpyc1ocs] {
    opacity: 0;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .metrics-row[b-4utpyc1ocs] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-container[b-4utpyc1ocs] { padding: 16px; gap: 16px; }
    .header-content[b-4utpyc1ocs] { flex-direction: column; align-items: stretch; }
    .header-actions[b-4utpyc1ocs] { justify-content: flex-end; flex-wrap: wrap; width: 100%; }
    .metrics-row[b-4utpyc1ocs]    { grid-template-columns: 1fr 1fr; gap: 12px; }
    .metric-value[b-4utpyc1ocs]   { font-size: 11px; }
    .metric-value--sm[b-4utpyc1ocs] { font-size: 8px; }
    .toolbar[b-4utpyc1ocs]        { flex-direction: column; align-items: stretch; }
    .toolbar-right[b-4utpyc1ocs]  { justify-content: flex-end; }
    .toolbar-search[b-4utpyc1ocs] { max-width: 100% !important; }
    /* ⚠ MOBILE: row actions always visible — touch screens have no hover */
    .row-actions[b-4utpyc1ocs]    { opacity: 1; }
    .price-card[b-4utpyc1ocs]     { margin: 12px; max-width: 100%; }
}

@media (max-width: 480px) {
    .metrics-row[b-4utpyc1ocs]    { grid-template-columns: 1fr; }
    .page-title[b-4utpyc1ocs]     { font-size: 22px; }
    .metric-card[b-4utpyc1ocs]    { padding: 14px; }
    .state-box[b-4utpyc1ocs]      { padding: 48px 16px; }
    .pagination-bar[b-4utpyc1ocs] { flex-direction: column; gap: 8px; align-items: center; }
}
/* /Pages/StressedAssets/Calamity/Detail.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Calamity/Detail.razor.css — Detail View archetype per
   AI-Agent-UI-Generation-Guide §7.5. This page previously had NO scoped
   stylesheet at all, so entity-name/detail-sections/details-grid/etc. all
   rendered unstyled — the actual cause of the "broken rendering" report.
══════════════════════════════════════════════════════════════════════════════ */

/* ── ENTITY HEADER (rendered inside <PageHeader><TitleContent>) ─────────────── */
.entity-name[b-hp7tagdbj4] {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
    margin: 0;
    line-height: 1.2;
}

.entity-meta[b-hp7tagdbj4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.meta-text[b-hp7tagdbj4] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

/* ── SKELETON LOADING STATE ───────────────────────────────────────────────── */
.entity-skeleton[b-hp7tagdbj4] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.skeleton-header-block[b-hp7tagdbj4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-name-bar[b-hp7tagdbj4] {
    height: 32px;
    width: 45%;
    border-radius: 6px;
}

.skeleton-meta-row[b-hp7tagdbj4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skeleton-badge-bar[b-hp7tagdbj4] {
    height: 22px;
    width: 80px;
    border-radius: 12px;
}

.skeleton-meta-bar[b-hp7tagdbj4] {
    height: 14px;
    width: 100px;
    border-radius: 4px;
}

.skeleton-name-bar[b-hp7tagdbj4],
.skeleton-badge-bar[b-hp7tagdbj4],
.skeleton-meta-bar[b-hp7tagdbj4] {
    background: linear-gradient(
        90deg,
        var(--neutral-layer-3) 25%,
        var(--neutral-layer-4) 50%,
        var(--neutral-layer-3) 75%
    );
    background-size: 200% 100%;
    animation: calamity-shimmer-b-hp7tagdbj4 1.5s ease-in-out infinite;
}

@keyframes calamity-shimmer-b-hp7tagdbj4 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── NOT-FOUND / ERROR STATE ──────────────────────────────────────────────── */
.error-state[b-hp7tagdbj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
}

.error-heading[b-hp7tagdbj4] {
    font-size: 20px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* ── TAB CONTENT ──────────────────────────────────────────────────────────── */
.tab-content[b-hp7tagdbj4] {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── DETAIL SECTIONS (Overview tab) ──────────────────────────────────────── */
.detail-sections[b-hp7tagdbj4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* FluentCard doesn't forward the page's CSS-isolation scope attribute onto
   its rendered element, so a bare `.detail-section { }` rule never matches —
   ::deep drops the scope requirement past this point (same fix pattern as
   Calamity/Index.razor.css's `::deep .col-actions` and Users.razor.css). */
.tab-content[b-hp7tagdbj4]  .detail-section {
    padding: 20px;
}

.tab-content[b-hp7tagdbj4]  .inline-form-card {
    padding: 20px;
}

.section-heading[b-hp7tagdbj4] {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
}

/* ── DETAILS GRID (label / value pairs — Pattern 1A) ─────────────────────── */
.details-grid[b-hp7tagdbj4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.detail-item[b-hp7tagdbj4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.detail-item.full-width[b-hp7tagdbj4] {
    grid-column: 1 / -1;
}

.detail-label[b-hp7tagdbj4] {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 0;
}

.detail-value[b-hp7tagdbj4] {
    font-size: 14px;
    font-weight: 400;
    color: var(--neutral-foreground-rest);
    line-height: 1.5;
    margin: 0;
}

/* ── AFFECTED DISTRICTS CHIP LIST ─────────────────────────────────────────── */
.chip-list[b-hp7tagdbj4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.chip[b-hp7tagdbj4] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--neutral-layer-3);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
}

/* ── RESOLUTION PLANS / PROVISIONING GRIDS ───────────────────────────────── */
.toolbar-row[b-hp7tagdbj4] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

[b-hp7tagdbj4] .col-actions {
    overflow: visible !important;
    text-align: right;
}

/* Always-visible row actions — same decision as BreachIncidents.razor.css:
   the global hover-reveal (.row-actions { opacity: 0 } + tr.hover reveal)
   could not be reliably verified and risks a zero-access action column. */
.row-actions[b-hp7tagdbj4] {
    opacity: 1;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}

/* ── STATE BOXES (empty resolution plans / provisioning data) ────────────── */
.state-hint[b-hp7tagdbj4] {
    max-width: 360px;
}

/* ── Grid min-width safety net (mixed fr + fixed-px columns) ─────────────── */
[b-hp7tagdbj4] table.resolution-plan-grid { min-width: 1030px; }
[b-hp7tagdbj4] table.provisioning-grid    { min-width: 830px; }

/* ── INLINE ADD-PLAN FORM ─────────────────────────────────────────────────── */
/* Same FluentCard scope-forwarding gap as .detail-section above — ::deep required. */
.tab-content[b-hp7tagdbj4]  .inline-form-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inline-form-body[b-hp7tagdbj4] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding-bottom: 4px;
}

.inline-form-actions-bar[b-hp7tagdbj4] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-rest);
    flex-shrink: 0;
}

.da-label[b-hp7tagdbj4] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
    margin-bottom: 5px;
}

.da-required[b-hp7tagdbj4] {
    color: var(--error-foreground-rest, #dc2626);
    margin-left: 2px;
}

.da-field-full[b-hp7tagdbj4] {
    grid-column: 1 / -1;
}

.field-error[b-hp7tagdbj4] {
    font-size: 12px;
    color: var(--error-foreground-rest, #dc2626);
    margin-top: 4px;
}

.error-bar[b-hp7tagdbj4] {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
}

/* ── DIALOG FORMS (Complete / Cancel plan) ────────────────────────────────── */
.dialog-form[b-hp7tagdbj4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.char-count[b-hp7tagdbj4] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
    display: block;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .entity-name[b-hp7tagdbj4] { font-size: 22px; }

    .details-grid[b-hp7tagdbj4] { grid-template-columns: 1fr; }

    .tab-content[b-hp7tagdbj4] { padding-top: 8px; }

    .tab-content[b-hp7tagdbj4]  .inline-form-card { max-height: 80vh; }

    .inline-form-actions-bar[b-hp7tagdbj4] {
        flex-direction: column-reverse;
    }

    .inline-form-actions-bar fluent-button[b-hp7tagdbj4],
    .inline-form-actions-bar > fluent-button[b-hp7tagdbj4] {
        width: 100%;
    }

    .toolbar-row[b-hp7tagdbj4] { justify-content: stretch; }
    .toolbar-row fluent-button[b-hp7tagdbj4] { width: 100%; }
}
/* /Pages/StressedAssets/Calamity/Index.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Calamity Declarations — scoped styles
   Base list/grid/metrics chrome comes from global-styles.css; this file only
   supplies the mobile-card variant and grid-cell details specific to this page.
══════════════════════════════════════════════════════════════════════════════ */

[b-zp1ti0q8ea] .truncate-cell {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-zp1ti0q8ea] .col-actions {
    overflow: visible !important;
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE CARDS — hidden on desktop, shown below 768px (see media query)
══════════════════════════════════════════════════════════════════════════════ */
.entity-list-mobile[b-zp1ti0q8ea] {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 12px;
}

.entity-card[b-zp1ti0q8ea] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 12px 14px;
}

.entity-card-header[b-zp1ti0q8ea] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.entity-card-title[b-zp1ti0q8ea] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.entity-card-name[b-zp1ti0q8ea] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    line-height: 1.3;
}

.entity-card-sub[b-zp1ti0q8ea] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

.entity-card-fields[b-zp1ti0q8ea] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.entity-card-field[b-zp1ti0q8ea] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-label[b-zp1ti0q8ea] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

.field-value[b-zp1ti0q8ea] {
    font-size: 13px;
    color: var(--neutral-foreground-rest);
}

.mobile-actions[b-zp1ti0q8ea] {
    opacity: 1 !important;
    flex-shrink: 0;
}

[b-zp1ti0q8ea] table.calamity-grid {
    min-width: 1080px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .grid-scroll-wrapper[b-zp1ti0q8ea] { display: none; }
    .entity-list-mobile[b-zp1ti0q8ea]  { display: flex; }
    .row-actions[b-zp1ti0q8ea]          { opacity: 1; }
}
/* /Pages/Support/Index.razor.rz.scp.css */
.page-container[b-zu711pdzf2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

.page-header[b-zu711pdzf2] { margin-bottom: 0; }

.header-content[b-zu711pdzf2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.title-section[b-zu711pdzf2] { flex: 1; }

.page-title[b-zu711pdzf2] {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-description[b-zu711pdzf2] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.header-actions[b-zu711pdzf2] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
.grid-scroll-wrapper[b-zu711pdzf2] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[b-zu711pdzf2] table.support-tickets-grid { min-width: 1050px; }
/* /Pages/SystemMonitor/Health.razor.rz.scp.css */
/* ── Grid scroll wrapper ─────────────────────────────────────────────────── */
[b-og130webkm] table.worker-health-grid { min-width: 1200px; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-actions[b-og130webkm] { max-width: 100%; flex-wrap: wrap; }
    .last-updated[b-og130webkm] { width: 100%; }
}

@media (max-width: 480px) {
    .page-title[b-og130webkm] { font-size: 22px; }
    .page-subtitle[b-og130webkm] { display: none; }
}
/* /Pages/TenantAdmin/Detail.razor.rz.scp.css */
.page-container[b-bys7dyhvya] {
    padding: 1.5rem;
}

.page-title[b-bys7dyhvya] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.5rem 0 0;
}

.tenant-header[b-bys7dyhvya] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.tenant-avatar[b-bys7dyhvya] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tenant-meta[b-bys7dyhvya] {
    color: var(--neutral-foreground-hint-rest);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

.detail-grid[b-bys7dyhvya] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .detail-grid[b-bys7dyhvya] { grid-template-columns: 1fr; }
}

.section-card[b-bys7dyhvya] {
    padding: 1rem;
}

.section-title[b-bys7dyhvya] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.detail-table[b-bys7dyhvya] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.detail-row[b-bys7dyhvya] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.detail-label[b-bys7dyhvya] {
    color: var(--neutral-foreground-hint-rest);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.detail-value[b-bys7dyhvya] {
    font-size: 0.875rem;
}

.card-actions[b-bys7dyhvya] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.text-danger[b-bys7dyhvya] { color: var(--error); }

.badge[b-bys7dyhvya] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge--plan.badge--trial[b-bys7dyhvya]        { background: var(--accent-fill-rest); color: white; }
.badge--plan.badge--starter[b-bys7dyhvya]      { background: var(--success);           color: white; }
.badge--plan.badge--professional[b-bys7dyhvya] { background: var(--warning);           color: white; }
.badge--plan.badge--enterprise[b-bys7dyhvya]   { background: #6B21A8;                  color: white; }

.badge--status.badge--trial[b-bys7dyhvya]       { background: var(--accent-fill-rest);  color: white; }
.badge--status.badge--active[b-bys7dyhvya]      { background: var(--success);           color: white; }
.badge--status.badge--graceperiod[b-bys7dyhvya] { background: var(--warning);           color: white; }
.badge--status.badge--suspended[b-bys7dyhvya]   { background: var(--error);             color: white; }
.badge--status.badge--expired[b-bys7dyhvya]     { background: var(--neutral-fill-rest); color: var(--neutral-foreground-rest); }

.usage-list[b-bys7dyhvya] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.usage-row[b-bys7dyhvya] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.usage-row-label[b-bys7dyhvya] {
    min-width: 64px;
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint-rest);
}

.usage-bar[b-bys7dyhvya] {
    flex: 1;
    height: 8px;
    background: var(--neutral-fill-rest);
    border-radius: 4px;
    overflow: hidden;
}

.usage-bar-fill[b-bys7dyhvya] {
    height: 100%;
    border-radius: 4px;
}

.usage-bar-fill--ok[b-bys7dyhvya]      { background: var(--success); }
.usage-bar-fill--warning[b-bys7dyhvya] { background: var(--warning); }
.usage-bar-fill--danger[b-bys7dyhvya]  { background: var(--error); }

.usage-row-value[b-bys7dyhvya] {
    min-width: 90px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint-rest);
    text-align: right;
}

.skeleton-list[b-bys7dyhvya] { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; }
.skeleton-row[b-bys7dyhvya]  { display: flex; gap: 1.5rem; align-items: center; padding: 0.5rem; }

/* ── Dialog form ──────────────────────────────────────────────────────── */
.dialog-form[b-bys7dyhvya] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field[b-bys7dyhvya] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.field label[b-bys7dyhvya] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.native-input[b-bys7dyhvya] {
    width: 100%;
    padding: 0.45rem 0.625rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-input-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.1s;
}

.native-input:focus[b-bys7dyhvya] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.field-error[b-bys7dyhvya] {
    font-size: 0.8rem;
    color: var(--error);
    margin: 0;
}

.dialog-footer-bar[b-bys7dyhvya] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
}

.section-heading[b-bys7dyhvya] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRID MIN-WIDTH (horizontal overflow safety net; scroll wrapper is global)
══════════════════════════════════════════════════════════════════════════════ */
[b-bys7dyhvya] table.tenant-detail-grid {
    min-width: 700px;
}
/* /Pages/TenantAdmin/Index.razor.rz.scp.css */
.page-container[b-2fkth26di3] {
    padding: 1.5rem;
}

.page-header[b-2fkth26di3] {
    margin-bottom: 1rem;
}

.header-content[b-2fkth26di3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.title-section[b-2fkth26di3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.page-title[b-2fkth26di3] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.page-description[b-2fkth26di3] {
    color: var(--neutral-foreground-hint-rest);
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

.list-toolbar[b-2fkth26di3] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.filters-row[b-2fkth26di3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.list-container[b-2fkth26di3] {
    padding: 0;
}

.skeleton-list[b-2fkth26di3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.skeleton-row[b-2fkth26di3] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 0.5rem;
}

.state-box[b-2fkth26di3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.state-icon[b-2fkth26di3] {
    opacity: 0.4;
}

.state-title[b-2fkth26di3] {
    color: var(--neutral-foreground-hint-rest);
    font-size: 0.9rem;
}

/* Badge styles */
.badge[b-2fkth26di3] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge--plan.badge--trial[b-2fkth26di3]     { background: var(--accent-fill-rest);   color: white; }
.badge--plan.badge--starter[b-2fkth26di3]   { background: var(--success);             color: white; }
.badge--plan.badge--professional[b-2fkth26di3] { background: var(--warning);          color: white; }
.badge--plan.badge--enterprise[b-2fkth26di3] { background: #6B21A8;                   color: white; }

.badge--status.badge--trial[b-2fkth26di3]     { background: var(--accent-fill-rest);  color: white; }
.badge--status.badge--active[b-2fkth26di3]    { background: var(--success);            color: white; }
.badge--status.badge--graceperiod[b-2fkth26di3] { background: var(--warning);         color: white; }
.badge--status.badge--suspended[b-2fkth26di3] { background: var(--error);             color: white; }
.badge--status.badge--expired[b-2fkth26di3]   { background: var(--neutral-fill-rest); color: var(--neutral-foreground-rest); }
.badge--muted[b-2fkth26di3]                   { background: var(--neutral-fill-rest); color: var(--neutral-foreground-hint-rest); }

/* Usage bar */
.usage-bar-container[b-2fkth26di3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 100px;
}

.usage-bar[b-2fkth26di3] {
    flex: 1;
    height: 6px;
    background: var(--neutral-fill-rest);
    border-radius: 3px;
    overflow: hidden;
}

.usage-bar-fill[b-2fkth26di3] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.usage-bar-fill--ok[b-2fkth26di3]      { background: var(--success); }
.usage-bar-fill--warning[b-2fkth26di3] { background: var(--warning); }
.usage-bar-fill--danger[b-2fkth26di3]  { background: var(--error); }

.usage-label[b-2fkth26di3] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint-rest);
    min-width: 2.5rem;
    text-align: right;
}

.action-buttons[b-2fkth26di3] {
    display: flex;
    gap: 0.25rem;
}

.text-danger[b-2fkth26di3] {
    color: var(--error);
}

/* Wizard */
.wizard-step-indicator[b-2fkth26di3] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint-rest);
    margin-left: 0.5rem;
}

.wizard-step[b-2fkth26di3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

.wizard-step-title[b-2fkth26di3] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.field-error[b-2fkth26di3] {
    color: var(--error);
    font-size: 0.75rem;
    margin: -0.5rem 0 0;
}

.field-hint[b-2fkth26di3] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint-rest);
    margin: -0.5rem 0 0;
}

.field-hint--success[b-2fkth26di3] { color: var(--success); }
.field-hint--error[b-2fkth26di3]   { color: var(--error); }

.plan-options[b-2fkth26di3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-option[b-2fkth26di3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
}

.plan-option--selected[b-2fkth26di3] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-stealth-hover);
}

.plan-desc[b-2fkth26di3] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint-rest);
    margin: 0;
}

.date-fields[b-2fkth26di3] {
    display: flex;
    gap: 1rem;
}

.wizard-confirm .confirm-summary[b-2fkth26di3] {
    background: var(--neutral-fill-layer-rest);
    border-radius: 6px;
    padding: 1rem;
}

.confirm-row[b-2fkth26di3] {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    gap: 1rem;
}

.confirm-checklist[b-2fkth26di3] {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--neutral-foreground-hint-rest);
    font-size: 0.875rem;
}

.confirm-checklist li[b-2fkth26di3] {
    padding: 0.2rem 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRID MIN-WIDTH (horizontal overflow safety net; scroll wrapper is global)
══════════════════════════════════════════════════════════════════════════════ */
[b-2fkth26di3] table.tenant-list-grid {
    min-width: 1050px;
}
/* /Shared/PageHeader.razor.rz.scp.css */
/* ==========================================================================
   PageHeader component — scoped styles
   Overrides global .page-header (flex-row) to flex-column so the breadcrumb
   nav stacks tightly above the title row.  Old pages using the raw
   .page-header div are unaffected (their elements lack this scope attribute).
   ========================================================================== */

/* ── Outer block: breadcrumb + title row stacked vertically ─────────────── */
/* align-items: stretch overrides the global .page-header rule (flex-start)  */
/* so that .page-header-inner fills the full width of the header container.  */
.page-header[b-k8srnioo3b] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* ── Breadcrumb nav ──────────────────────────────────────────────────────── */
.page-breadcrumb[b-k8srnioo3b] {
    margin-bottom: 8px;
}

.breadcrumb-list[b-k8srnioo3b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.breadcrumb-item[b-k8srnioo3b] {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
}

/* Home icon link */
.breadcrumb-home[b-k8srnioo3b] {
    display: inline-flex;
    align-items: center;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    transition: color 120ms ease;
}

.breadcrumb-home:hover[b-k8srnioo3b],
.breadcrumb-home:focus-visible[b-k8srnioo3b] {
    color: var(--accent-foreground-rest);
}

/* Scale the 16px FluentIcon SVG down to 12px so it sits on the breadcrumb baseline */
.breadcrumb-home[b-k8srnioo3b]  svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Ancestor segment links */
.breadcrumb-link[b-k8srnioo3b] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
    transition: color 120ms ease;
}

.breadcrumb-link:hover[b-k8srnioo3b],
.breadcrumb-link:focus-visible[b-k8srnioo3b] {
    color: var(--accent-foreground-rest);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Current page segment — not a link */
.breadcrumb-current[b-k8srnioo3b] {
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    font-weight: 500;
}

/* › separator character */
.breadcrumb-sep[b-k8srnioo3b] {
    padding: 0 5px;
    color: var(--neutral-stroke-strong-rest);
    font-size: 10px;
    user-select: none;
    display: flex;
    align-items: center;
}

/* ── Title row (inner flex: title-group | actions) ───────────────────────── */
.page-header-inner[b-k8srnioo3b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Title group: accent bar | title text ────────────────────────────────── */
.page-title-group[b-k8srnioo3b] {
    display: flex;
    align-items: stretch;   /* accent bar stretches to full height of title-text */
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* 3px solid accent bar — spans h1 + subtitle height via align-self:stretch */
.title-accent-bar[b-k8srnioo3b] {
    width: 3px;
    border-radius: 3px;
    background: var(--accent-fill-rest);
    flex-shrink: 0;
    align-self: stretch;
    min-height: 22px;  /* visible even when no subtitle is present */
}

.title-text[b-k8srnioo3b] {
    flex: 1;
    min-width: 0;
}

.page-title[b-k8srnioo3b] {
    margin: 0 0 2px 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--neutral-foreground-rest);
    line-height: 1.2;
}

.page-subtitle[b-k8srnioo3b] {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* ── Action buttons (right side) ─────────────────────────────────────────── */
.page-header-actions[b-k8srnioo3b] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    margin-left: auto;
}

/* ── Dark mode: stronger accent bar contrast ─────────────────────────────── */
.app-shell.theme-dark .title-accent-bar[b-k8srnioo3b] {
    background: var(--accent-fill-rest);
    opacity: 0.9;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .page-title[b-k8srnioo3b] { font-size: 22px; }
    .page-header-inner[b-k8srnioo3b] { align-items: flex-start; }
    .page-header-actions[b-k8srnioo3b] {
        width: 100%;
        justify-content: flex-start;
    }
    .page-breadcrumb[b-k8srnioo3b] { margin-bottom: 6px; }
}