@import '_content/Majorsoft.Blazor.Components.Common.JsInterop/Majorsoft.Blazor.Components.Common.JsInterop.bundle.scp.css';
@import '_content/Majorsoft.Blazor.Components.Modal/Majorsoft.Blazor.Components.Modal.bundle.scp.css';

/* /Components/BulkGrid/BulkEditDataGrid.razor.rz.scp.css */
/* Scoped styles for BulkEditDataGrid.
   Radzen sets cells to white-space: nowrap by default, so wide content (like
   the comma-list of active product service names) gets clipped at the column
   edge with no overflow visible. We allow wrap + word-break so the row grows
   vertically instead — far more usable on a virtualized grid where a true
   "auto-fit column width" isn't supported. ::deep is required for scoped CSS
   to reach Radzen's internal table elements. */

[b-yn4ek404tg] .rz-data-cell {
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
    line-height: 1.35;
}

/* Header cells stay on a single line — wrapped headers look noisy and the
   horizontal drag-pan handles narrow columns just fine. */
[b-yn4ek404tg] .rz-grid-table thead th {
    white-space: nowrap;
}
/* /Components/BulkGrid/Filters/BoolTriStateFilter.razor.rz.scp.css */
/* Match the height + font of the FK multi-select filter so all column-filter
   inputs read as one row. Trim the right caret gutter so narrow boolean
   columns (Active, Is Client) don't clip — but keep the height/font in line
   with the (any) text inputs and FK dropdowns next to them. */

/* Match the rendered height of RadzenDropDown next to it. The Radzen control
   ends up ~34px tall in this theme even when given min-height:28px, because
   Radzen wraps the control in its own border + padding shell. Mirror that here
   so the boolean filter doesn't look squat next to FK multi-selects. */
.bool-tri-state-filter[b-y3pyccyflv] {
    width: 100%;
    height: 34px;
    padding: 0.3rem 1.3rem 0.3rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1.2;
    background-position: right 0.4rem center;
    background-size: 10px 8px;
}
/* /Components/BulkGrid/ViewSwitcher.razor.rz.scp.css */
/* Scoped styles for ViewSwitcher.
   Without these the buttons rendered taller than wide because the icon+label
   pair wrapped under the default Bootstrap btn-sm padding. text-nowrap +
   matched padding gives a consistent, compact horizontal row. */

.view-select[b-p24n4cvc70] {
    width: auto;
    min-width: 220px;
    max-width: 320px;
}

.view-btn[b-p24n4cvc70] {
    white-space: nowrap;
    padding: 0.25rem 0.65rem;
    line-height: 1.2;
    font-size: 0.85rem;
}

.view-btn i[b-p24n4cvc70] {
    font-size: 0.85em;
}
/* /Components/CensusFileViewer.razor.rz.scp.css */

.table-header[b-vee38sj96p] {
    background-color: #FCFCFD;
    color: #98A2B3;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    position: sticky;
    top: 0;
}

.table-row[b-vee38sj96p] {
    background-color: white;
    color: #475467;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
}
/* /Components/ColumnMapper.razor.rz.scp.css */

.table-header[b-glgsf45zhj] {
    background-color: #FCFCFD;
    color: #98A2B3;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    position: sticky;
    top: 0;
}

.select-map[b-glgsf45zhj] {
    font-size: 14px;
    width: 180px;
}
/* /Components/Datagrids/ParticipantNoticeRequirementsDataGrid.razor.rz.scp.css */

/* /Pages/Escalations/EscalationLanding.razor.rz.scp.css */
.escalation-landing[b-erjuh9fr3m] {
    padding: 20px;
}

.escalation-header[b-erjuh9fr3m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.escalation-header h3[b-erjuh9fr3m] {
    font-weight: 700;
    color: #1d1d1f;
}

/* Tabs — gray bar with rounded top corners */
.escalation-tabs[b-erjuh9fr3m] {
    display: flex;
    gap: 0;
    background-color: #f0f0f2;
    border-radius: 12px 12px 0 0;
    border: 1px solid #e5e5e7;
    border-bottom: none;
    overflow: hidden;
}

.escalation-tab[b-erjuh9fr3m] {
    padding: 14px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #9a9aa0;
    background-color: #f0f0f2;
    border-top: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.escalation-tab:first-child[b-erjuh9fr3m] {
    border-radius: 12px 0 0 0;
}

.escalation-tab:hover[b-erjuh9fr3m] {
    color: #7c5cdb;
    background-color: #e8e8eb;
}

.escalation-tab.active[b-erjuh9fr3m] {
    color: #7c5cdb;
    background-color: #ffffff;
    border-top-color: #7c5cdb;
}

.tab-icon[b-erjuh9fr3m] {
    font-size: 14px;
    opacity: 0.7;
}

.escalation-tab.active .tab-icon[b-erjuh9fr3m] {
    opacity: 1;
}

.tab-count[b-erjuh9fr3m] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #e8e8eb;
    color: #9a9aa0;
    line-height: 1;
}

.escalation-tab.active .tab-count[b-erjuh9fr3m] {
    background-color: #f0ebff;
    color: #7c5cdb;
}

/* Tab content — white area connected to tabs */
.tab-content-area[b-erjuh9fr3m] {
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 24px;
}

/* Action Cards — 3 column grid */
.escalation-cards[b-erjuh9fr3m] {
    display: flex;
    gap: 16px;
}

.escalation-card[b-erjuh9fr3m] {
    flex: 1;
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.escalation-card:hover[b-erjuh9fr3m] {
    border-color: #7c5cdb;
    background: #faf8ff;
    box-shadow: 0 4px 12px rgba(124, 92, 219, 0.12);
}

.escalation-card-icon[b-erjuh9fr3m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    font-size: 18px;
}

.icon-purple[b-erjuh9fr3m] {
    background: #f0ebff;
    color: #7c5cdb;
}

.icon-blue[b-erjuh9fr3m] {
    background: #e8f0fe;
    color: #4a6cf7;
}

.icon-green[b-erjuh9fr3m] {
    background: #e6f7ee;
    color: #1a8a4a;
}

.escalation-card-title[b-erjuh9fr3m] {
    font-weight: 600;
    font-size: 15px;
    color: #1d1d1f;
}

.escalation-card-desc[b-erjuh9fr3m] {
    font-size: 13px;
    color: #86868b;
    line-height: 1.5;
}

/* Reports tab content */
.escalation-reports-content[b-erjuh9fr3m] {
    padding: 0;
}

/* Reports toolbar */
.reports-toolbar[b-erjuh9fr3m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 12px 0;
}

.reports-title[b-erjuh9fr3m] {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}

.reports-count[b-erjuh9fr3m] {
    color: #7c5cdb;
    font-weight: 700;
}

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

.reports-search[b-erjuh9fr3m] {
    position: relative;
    display: flex;
    align-items: center;
}

.reports-search-icon[b-erjuh9fr3m] {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: #9a9aa0;
    pointer-events: none;
}

.reports-search-input[b-erjuh9fr3m] {
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 10px 14px 10px 38px;
    font-size: 14px;
    width: 300px;
    height: 42px;
    outline: none;
    transition: border-color 0.15s ease;
    background: #fff;
    color: #1d1d1f;
}

.reports-search-input[b-erjuh9fr3m]::placeholder {
    color: #9a9aa0;
}

.reports-search-input:focus[b-erjuh9fr3m] {
    border-color: #7c5cdb;
}

.reports-filter-btn[b-erjuh9fr3m] {
    background: transparent;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #86868b;
    font-size: 16px;
    transition: all 0.15s ease;
}

.reports-filter-btn:hover[b-erjuh9fr3m] {
    border-color: #7c5cdb;
    color: #7c5cdb;
    background: #faf8ff;
}

.reports-filter-btn.active[b-erjuh9fr3m] {
    border-color: #7c5cdb;
    color: #7c5cdb;
    background: #f0ebff;
}

/* Type badges */
.report-type-badge[b-erjuh9fr3m] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.report-type-export[b-erjuh9fr3m] {
    background-color: #dbeafe;
    color: #1e40af;
}

.report-type-import[b-erjuh9fr3m] {
    background-color: #dcfce7;
    color: #166534;
}

/* Status badges */
.report-status-badge[b-erjuh9fr3m] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.report-status-ready[b-erjuh9fr3m] {
    background-color: #dcfce7;
    color: #166534;
}

.report-status-processing[b-erjuh9fr3m] {
    background-color: #dbeafe;
    color: #1e40af;
}

.report-status-skipped[b-erjuh9fr3m] {
    background-color: #fef3c7;
    color: #92400e;
    cursor: help;
}

.report-status-failed[b-erjuh9fr3m] {
    background-color: #fee2e2;
    color: #991b1b;
    cursor: help;
}

/* Download button */
.report-download-btn[b-erjuh9fr3m] {
    background: transparent;
    border: 1px solid #e5e5e7;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #86868b;
    font-size: 13px;
    transition: all 0.15s ease;
}

.report-download-btn:hover[b-erjuh9fr3m] {
    border-color: #7c5cdb;
    color: #7c5cdb;
    background: #faf8ff;
}

/* Report filter popup */
.report-filter-overlay[b-erjuh9fr3m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    animation: esc-overlay-fadein-b-erjuh9fr3m 0.2s ease-out;
}

.report-filter-popup[b-erjuh9fr3m] {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 540px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: esc-popup-slidein-b-erjuh9fr3m 0.2s ease-out;
}

/* Radio buttons in filter */
.report-radio-label[b-erjuh9fr3m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #1d1d1f;
    cursor: pointer;
}

.report-radio-label input[type="radio"][b-erjuh9fr3m] {
    accent-color: #7c5cdb;
}

/* Reports table */
.reports-table[b-erjuh9fr3m] {
    border-top: 1px solid #e5e5e7;
}

@media (max-width: 992px) {
    .escalation-cards[b-erjuh9fr3m] {
        flex-direction: column;
    }
}

/* ── Escalation Modal ── */

.esc-close-btn[b-erjuh9fr3m] {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #86868b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.esc-close-btn:hover[b-erjuh9fr3m] {
    color: #1d1d1f;
    background-color: #f0f0f2;
}

/* Purple primary button */
.esc-btn-primary[b-erjuh9fr3m] {
    background-color: #7c5cdb !important;
    border-color: #7c5cdb !important;
    color: #fff !important;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.esc-btn-primary:hover:not(:disabled)[b-erjuh9fr3m] {
    background-color: #6a4bc9 !important;
    border-color: #6a4bc9 !important;
}

.esc-btn-primary:disabled[b-erjuh9fr3m] {
    background-color: #7c5cdb !important;
    border-color: #7c5cdb !important;
    opacity: 0.5;
}

/* ── Filter Panel ── */

.escalation-filter-panel[b-erjuh9fr3m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.filter-label[b-erjuh9fr3m] {
    font-weight: 700;
    font-size: 13px;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filter-sublabel[b-erjuh9fr3m] {
    font-size: 12px;
    color: #86868b;
    margin-bottom: 4px;
}

/* ── Conflict Overlay — sits above an open ModalDialog ── */

.esc-conflict-overlay[b-erjuh9fr3m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    animation: esc-overlay-fadein-b-erjuh9fr3m 0.2s ease-out;
}

.esc-conflict-popup[b-erjuh9fr3m] {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    width: 500px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: esc-popup-slidein-b-erjuh9fr3m 0.2s ease-out;
}

@keyframes esc-overlay-fadein-b-erjuh9fr3m {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes esc-popup-slidein-b-erjuh9fr3m {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Conflict Modal Export Button ── */

.esc-btn-export[b-erjuh9fr3m] {
    background-color: #7c5cdb;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.esc-btn-export:hover[b-erjuh9fr3m] {
    background-color: #6a4bc9;
    color: #fff;
}

/* ── Import File Upload ── */

.import-file-dropzone[b-erjuh9fr3m] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d1d1d6;
    border-radius: 12px;
    padding: 36px 24px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fafafa;
}

.import-file-dropzone:hover[b-erjuh9fr3m] {
    border-color: #7c5cdb;
    background: #faf8ff;
}

.import-file-placeholder[b-erjuh9fr3m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.import-file-placeholder-text[b-erjuh9fr3m] {
    font-size: 14px;
    color: #86868b;
}

.import-file-placeholder-or[b-erjuh9fr3m] {
    font-size: 12px;
    color: #9a9aa0;
}

.import-browse-btn[b-erjuh9fr3m] {
    display: inline-block;
    background-color: #7c5cdb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 8px;
    margin-top: 4px;
    transition: background-color 0.15s ease;
}

.import-file-dropzone:hover .import-browse-btn[b-erjuh9fr3m] {
    background-color: #6a4bc9;
}

.import-file-selected[b-erjuh9fr3m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 16px;
}

.import-validation-errors[b-erjuh9fr3m] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
}

.import-info-banner[b-erjuh9fr3m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
}
/* /Pages/Plans/Plan.razor.rz.scp.css */
.card[b-2mztoqvt8t] {
    color: rgb(118, 115, 115) !important;
}
/* /Pages/Plans/PlanCensusPullLogs.razor.rz.scp.css */
[b-3c0p6gpml3] .btn-link {
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

    [b-3c0p6gpml3] .btn-link:hover {
        color: darkblue;
    }
/* /Pages/Rollouts/Components/BucketMoveModal.razor.rz.scp.css */
/* From → To transition row: two unboxed tokens with a colored dot and the
   canonical bucket label, separated by an arrow. Mockup uses plain text
   tokens rather than full pills so the move direction reads clearly. */
.move-transition[b-gtr4tjlx8w] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 13px;
    color: #1d1d1f;
}

.bucket-token[b-gtr4tjlx8w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.bucket-dot[b-gtr4tjlx8w] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #86868b;
    display: inline-block;
}

.bucket-token.rollout       .bucket-dot[b-gtr4tjlx8w] { background: #6d4dcb; }
.bucket-token.cashout       .bucket-dot[b-gtr4tjlx8w] { background: #3a5fa8; }
.bucket-token.feeout        .bucket-dot[b-gtr4tjlx8w] { background: #a07020; }
.bucket-token.rmd           .bucket-dot[b-gtr4tjlx8w] { background: #0f6b46; }
.bucket-token.overthreshold .bucket-dot[b-gtr4tjlx8w] { background: #d24d61; }
.bucket-token.active        .bucket-dot[b-gtr4tjlx8w] { background: #1f9d6a; }
.bucket-token.removed       .bucket-dot[b-gtr4tjlx8w] { background: #86868b; }

.move-arrow[b-gtr4tjlx8w] {
    color: #86868b;
    font-size: 14px;
}

.move-label[b-gtr4tjlx8w] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #6e6e73;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.move-label .req[b-gtr4tjlx8w] {
    color: #86868b;
    font-weight: 600;
    font-size: 11px;
    margin-left: 4px;
}

textarea[b-gtr4tjlx8w] {
    width: 100%;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    color: #1d1d1f;
    resize: vertical;
}

textarea:focus[b-gtr4tjlx8w] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

.move-error[b-gtr4tjlx8w] {
    color: #d24d61;
    font-size: 12px;
    margin: 6px 0 0;
}

.rrl-btn[b-gtr4tjlx8w] {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.rrl-btn-secondary[b-gtr4tjlx8w] { background: #f5f5f7; color: #1d1d1f; }
.rrl-btn-secondary:hover[b-gtr4tjlx8w] { background: #ebebef; }

.rrl-btn-primary[b-gtr4tjlx8w] { background: #7c5cdb; color: #ffffff; }
.rrl-btn-primary:hover:not(:disabled)[b-gtr4tjlx8w] { background: #6d4dcb; }
.rrl-btn-primary:disabled[b-gtr4tjlx8w] { background: #c4b8e5; cursor: not-allowed; }
/* /Pages/Rollouts/Components/CancelRunModal.razor.rz.scp.css */
/* Mockup .alert-error (03_Notices_Generated.html lines 1196-1203 / same
   block on 02_buckets.html): background = --color-error-bg (#f8dde2),
   text = --color-error (#d24d61), padding 10px 14px, border-radius
   --r-md (8px), 13px. SVG inherits via currentColor — no separate tint. */
.cancel-warning[b-h9kezcp73h] {
    display: flex;
    gap: 10px;
    background: #f8dde2;
    color: #d24d61;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
}

/* Optional secondary line between the warning block and the reason field.
   Mockup (03_Notices_Generated.html line 2985) uses muted body text colour
   for this row, sitting above the Reason label. */
.cancel-subtext[b-h9kezcp73h] {
    margin: 0 0 14px;
    color: #6e6e73;
    font-size: 13px;
    line-height: 1.5;
}

/* Mockup .alert-error svg: 17px, stroke-width 2, margin-top 1px, inherits
   currentColor from the parent — flex-shrink keeps it from squashing. */
.cancel-warning svg[b-h9kezcp73h] {
    width: 17px;
    height: 17px;
    stroke-width: 2;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Mockup .form-row label (03_Notices_Generated.html line 1831 / same block
   on 02_buckets.html): 11px / weight 600 / 0.5px letter-spacing / muted
   #86868b / 5px gap, inherited Inter — NOT a mono font. Mono at semi-bold
   reads visually heavier than Inter at the same weight, which is why the
   earlier styling looked bold in the screenshot. */
.cancel-label[b-h9kezcp73h] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #86868b;
    margin-bottom: 5px;
}

/* Multiline reason field — mirrors the Start-new-run modal's .snr-reason-input
   box (padding, radius, line-height, resize, min-height) so the two modals
   match; focus keeps the danger colour token as this lives in the Cancel modal. */
.rrl-reason-input[b-h9kezcp73h] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #1d1d1f;
    background: white;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    resize: vertical;
    min-height: 72px;
}

.rrl-reason-input[b-h9kezcp73h]::placeholder {
    color: #86868b;
}

.rrl-reason-input:focus[b-h9kezcp73h] {
    outline: none;
    border-color: #d24d61;
    box-shadow: 0 0 0 3px rgba(210, 77, 97, 0.18);
}

/* Buttons match the mockup .btn-outline-secondary / .btn-danger tokens
   (03_Notices_Generated.html lines 994-1008 + 1207-1230 / same block on
   02_buckets.html): outlined secondary keeps focus on the destructive CTA,
   which uses the red gradient + inset highlight + drop shadow combo. */
.rrl-btn[b-h9kezcp73h] {
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}

.rrl-btn-secondary[b-h9kezcp73h] {
    background: white;
    color: #6e6e73;
    border: 1px solid #d2d2d7;
    font-weight: 500;
}
.rrl-btn-secondary:hover:not(:disabled)[b-h9kezcp73h] {
    color: #1d1d1f;
    background: #f5f5f7;
    border-color: #c7c7c7;
}

.rrl-btn-danger[b-h9kezcp73h] {
    color: white;
    background: linear-gradient(180deg, #e16579 0%, #c43d52 100%) padding-box,
                linear-gradient(180deg, #d24d61 0%, #862333 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
        0 4px 10px -2px rgba(180, 40, 60, 0.35);
    font-weight: 600;
}
.rrl-btn-danger:hover:not(:disabled)[b-h9kezcp73h] {
    color: white;
    background: linear-gradient(180deg, #e87687 0%, #cf4961 100%) padding-box,
                linear-gradient(180deg, #d24d61 0%, #732030 100%) border-box;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -2px rgba(180, 40, 60, 0.45);
}
.rrl-btn-danger:disabled[b-h9kezcp73h] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Pages/Rollouts/Components/Followup/FollowupApprovalBanner.razor.rz.scp.css */
/* Wiki 990 ticket 8077 / mockup id #approvalBanner — awaiting-approval banner.
   Palette mirrors the mockup HTML's deep-orange family (C2410C / 7C2D12 /
   FFF3EB / FDE3D1) rather than the amber tones used elsewhere in the app:
   the banner is a warning the operator must act on, so it reads louder than
   the soft amber meta-strip pills. */

.approval-banner[b-qx11k8d0s0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #FFF3EB;
    border: 1px solid #F4C9A6;
    border-left: 3px solid #C2410C;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 15, 25, 0.04);
    margin-bottom: 16px;
}

.ab-icon[b-qx11k8d0s0] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #FDE3D1;
    color: #C2410C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ab-icon svg[b-qx11k8d0s0] {
    width: 20px;
    height: 20px;
}

.ab-body[b-qx11k8d0s0] {
    flex: 1;
    min-width: 0;
}

.ab-title[b-qx11k8d0s0] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: #7C2D12;
    line-height: 1.25;
}

.ab-pills[b-qx11k8d0s0] {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.ab-pill[b-qx11k8d0s0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid rgba(194, 65, 12, 0.20);
    color: #C2410C;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.ab-pill-dot[b-qx11k8d0s0] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    display: inline-block;
}

.ab-pill-check[b-qx11k8d0s0] {
    display: none;
    width: 12px;
    height: 12px;
    color: #0f6b46;
    flex-shrink: 0;
}

.ab-pill-check svg[b-qx11k8d0s0] {
    width: 100%;
    height: 100%;
}

.ab-pill-state[b-qx11k8d0s0] {
    color: #86868b;
    font-weight: 500;
}

/* Approved variant — green outline, check glyph instead of dot. */
.ab-pill.is-approved[b-qx11k8d0s0] {
    border-color: rgba(15, 107, 70, 0.22);
    color: #0f6b46;
}

.ab-pill.is-approved .ab-pill-dot[b-qx11k8d0s0] {
    display: none;
}

.ab-pill.is-approved .ab-pill-check[b-qx11k8d0s0] {
    display: inline-flex;
}

.ab-actions[b-qx11k8d0s0] {
    flex-shrink: 0;
}

.ab-cta[b-qx11k8d0s0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #C2410C;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.ab-cta:hover[b-qx11k8d0s0] {
    background: #9A330A;
}

.ab-cta svg[b-qx11k8d0s0] {
    width: 14px;
    height: 14px;
}
/* /Pages/Rollouts/Components/Followup/FollowupDeadlineBar.razor.rz.scp.css */
/* Wiki 990 ticket 8077 / style guide §2.16 — deadline countdown bar.
   Calm-blue palette matching the mockup: #e2eaf7 background, #3a5fa8
   accent + dark-blue left border. Tier modifiers escalate the palette
   (blue → amber → red) per FR-1.5. */

.deadline-bar[b-jsqc2hc84l] {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 18px;
    background: #e2eaf7;
    border: 1px solid rgba(74, 114, 198, 0.22);
    border-left: 3px solid #3a5fa8;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 15, 25, 0.04);
    margin-bottom: 16px;
    transition: border-color 0.2s, background 0.2s;
}

/* LEFT block — "Enter vesting %" progress. Inline single-line layout per
   the mockup: label + count + bar + percent all on one horizontal row. */
.db-progress[b-jsqc2hc84l] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.db-progress-title[b-jsqc2hc84l] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #1d1d1f;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: help;
}

.db-progress-icon[b-jsqc2hc84l] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(74, 114, 198, 0.18);
    color: #3a5fa8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-progress-text[b-jsqc2hc84l] {
    font-size: 13px;
    color: #6e6e73;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.db-progress-text strong[b-jsqc2hc84l] {
    color: #1d1d1f;
    font-weight: 600;
}

.db-progress-bar[b-jsqc2hc84l] {
    width: 140px;
    height: 6px;
    background: rgba(74, 114, 198, 0.16);
    border-radius: 999px;
    overflow: hidden;
}

.db-progress-fill[b-jsqc2hc84l] {
    height: 100%;
    background: linear-gradient(90deg, #6f9ad4, #3a5fa8);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.db-progress-pct[b-jsqc2hc84l] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #3a5fa8;
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Done-check alt state (replaces .db-progress) */
.db-done-check[b-jsqc2hc84l] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    flex: 0 0 auto;
}

.db-done-icon[b-jsqc2hc84l] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d6ecdf;
    color: #0f6b46;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-done-title[b-jsqc2hc84l] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    color: #1d1d1f;
    font-size: 14px;
}

.db-done-sub[b-jsqc2hc84l] {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 2px;
}

.db-divider[b-jsqc2hc84l] {
    width: 1px;
    background: rgba(74, 114, 198, 0.22);
    align-self: stretch;
    flex-shrink: 0;
}

/* RIGHT block — stacked countdown rows */
.db-stack[b-jsqc2hc84l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.db-row[b-jsqc2hc84l] {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

.db-summary[b-jsqc2hc84l] {
    flex: 0 0 auto;
    min-width: 0;
}

/* Mockup §split-mode (L611-L615) — pin the summary column to a fixed 240px
   width when the bar is in split mode so the two 45-day timelines below
   stay vertically aligned. Without this both rows compute their own
   summary widths from intrinsic content and the timelines drift apart. */
.deadline-bar.split .db-row > .db-summary[b-jsqc2hc84l],
.deadline-bar.has-180 .db-row > .db-summary[b-jsqc2hc84l] {
    flex: 0 0 240px;
    width: 240px;
}

/* Mockup §split-mode tier propagation (L575-L592) — when one row in split
   layout escalates to warning / urgent / overdue, retint the shared left
   "Enter vesting %" progress block so the operator's eye picks up the
   escalation from either side of the bar. Only the .db-progress region
   gets the tint; the per-row coloring further down handles the timeline. */
.deadline-bar.has-warning-row .db-progress-icon[b-jsqc2hc84l] { background: rgba(160, 112, 32, 0.18); color: #a07020; }
.deadline-bar.has-warning-row .db-progress-bar[b-jsqc2hc84l] { background: rgba(160, 112, 32, 0.18); }
.deadline-bar.has-warning-row .db-progress-fill[b-jsqc2hc84l] { background: linear-gradient(90deg, #e0b878 0%, #a07020 100%); }
.deadline-bar.has-warning-row .db-progress-pct[b-jsqc2hc84l],
.deadline-bar.has-warning-row .db-progress-text[b-jsqc2hc84l],
.deadline-bar.has-warning-row .db-progress-text strong[b-jsqc2hc84l],
.deadline-bar.has-warning-row .db-progress-title[b-jsqc2hc84l] { color: #a07020; }

.deadline-bar.has-urgent-row .db-progress-icon[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.18); color: #d24d61; }
.deadline-bar.has-urgent-row .db-progress-bar[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.18); }
.deadline-bar.has-urgent-row .db-progress-fill[b-jsqc2hc84l] { background: linear-gradient(90deg, #e88b9a 0%, #d24d61 100%); }
.deadline-bar.has-urgent-row .db-progress-pct[b-jsqc2hc84l],
.deadline-bar.has-urgent-row .db-progress-text[b-jsqc2hc84l],
.deadline-bar.has-urgent-row .db-progress-text strong[b-jsqc2hc84l],
.deadline-bar.has-urgent-row .db-progress-title[b-jsqc2hc84l] { color: #d24d61; }

.db-row-label[b-jsqc2hc84l] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    color: #86868b;
    margin-bottom: 3px;
    width: max-content;
}

/* Mockup behavior: hide the row label in single-notice and combined-mode
   layouts. The label only adds value in split mode, where it distinguishes
   "Rollout · 45d" from "Cash Out · 45d" between the two rows. */
.deadline-bar:not(.split) .db-row-label[b-jsqc2hc84l] { display: none; }

/* Per-bucket tint so the operator can scan Rollout vs Cash Out quickly. */
.db-row-label.is-rollout[b-jsqc2hc84l] {
    background: rgba(54, 110, 189, 0.12);
    color: #366ebd;
}
.db-row-label.is-cashout[b-jsqc2hc84l] {
    background: #d6ecdf;
    color: #0f6b46;
}

.db-headline[b-jsqc2hc84l] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: #3a5fa8;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.db-headline .db-n[b-jsqc2hc84l] {
    font-size: 13px;
    font-weight: 800;
    margin-right: 2px;
}

.db-sublede[b-jsqc2hc84l] {
    font-size: 11px;
    color: #86868b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-top: 2px;
}

.db-timeline[b-jsqc2hc84l] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.db-anchors[b-jsqc2hc84l] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
}

.db-anchors strong[b-jsqc2hc84l] {
    color: #1d1d1f;
    font-weight: 700;
}

.db-track[b-jsqc2hc84l] {
    position: relative;
    height: 8px;
    background: rgba(74, 114, 198, 0.16);
    border-radius: 999px;
    overflow: visible;
}

.db-fill[b-jsqc2hc84l] {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #6f9ad4 0%, #3a5fa8 100%);
    border-radius: 999px;
    transition: width 0.45s ease;
}

.db-edge-node[b-jsqc2hc84l] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #3a5fa8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

.db-deadline-flag[b-jsqc2hc84l] {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 16px;
    background: #d24d61;
    opacity: 0;
    transition: opacity 0.2s;
}

.db-today[b-jsqc2hc84l] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #3a5fa8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

/* Mockup-spec "TODAY" pin label — small mono caps sits below the Today
   dot so the operator can see "you are here" on the timeline. Tier
   modifiers below re-tint to amber / red / etc. */
.db-today[b-jsqc2hc84l]::after {
    content: 'Today';
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3a5fa8;
    white-space: nowrap;
    transition: color 0.3s;
}

/* Per-row "Done" swap — when a row's own 45-day window has ended, the pin
   label flips from "Today" to "Done". Right-anchored (left:auto + right:50%)
   so the label doesn't clip past the track's right edge when the pin sits
   at the 100% position. Color override handled by the tier rules below
   (.deadline-bar.done etc.) so the green-tier "done" pill stays blue. */
.db-today.is-done[b-jsqc2hc84l]::after {
    content: 'Done';
    left: auto;
    right: 50%;
    transform: none;
}

/* ── Tier modifiers ─────────────────────────────────────────────────── */

/* WARNING — 8-10 days remaining. Entire bar shifts to amber. */
.deadline-bar.warning[b-jsqc2hc84l] {
    background: #f8eaca;
    border-color: rgba(209, 138, 44, 0.45);
    border-left-color: #d18a2c;
}
.deadline-bar.warning .db-divider[b-jsqc2hc84l] { background: rgba(160, 112, 32, 0.25); }
.deadline-bar.warning .db-progress-icon[b-jsqc2hc84l] { background: rgba(160, 112, 32, 0.18); color: #a07020; }
.deadline-bar.warning .db-progress-bar[b-jsqc2hc84l] { background: rgba(160, 112, 32, 0.18); }
.deadline-bar.warning .db-progress-fill[b-jsqc2hc84l] { background: linear-gradient(90deg, #d18a2c 0%, #8b5e1a 100%); }
.deadline-bar.warning .db-progress-pct[b-jsqc2hc84l] { color: #a07020; }
.deadline-bar.warning .db-headline[b-jsqc2hc84l] { color: #a07020; }
.deadline-bar.warning .db-headline .db-n[b-jsqc2hc84l] { color: #a07020; }
.deadline-bar.warning .db-fill[b-jsqc2hc84l] { background: linear-gradient(90deg, #d18a2c 0%, #8b5e1a 100%); }
.deadline-bar.warning .db-track[b-jsqc2hc84l] { background: rgba(160, 112, 32, 0.18); }
.deadline-bar.warning .db-today[b-jsqc2hc84l] { border-color: #a07020; }
.deadline-bar.warning .db-today[b-jsqc2hc84l]::after { color: #a07020; }
.deadline-bar.warning .db-edge-node[b-jsqc2hc84l] { border-color: #a07020; }

/* URGENT — 1-3 days remaining. Red palette across the entire bar. */
.deadline-bar.urgent[b-jsqc2hc84l] {
    background: #f8dde2;
    border-color: rgba(210, 77, 97, 0.35);
    border-left-color: #d24d61;
}
.deadline-bar.urgent .db-divider[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.28); }
.deadline-bar.urgent .db-progress-icon[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.18); color: #d24d61; }
.deadline-bar.urgent .db-progress-bar[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.18); }
.deadline-bar.urgent .db-progress-fill[b-jsqc2hc84l] { background: linear-gradient(90deg, #e88b9a 0%, #d24d61 100%); }
.deadline-bar.urgent .db-progress-pct[b-jsqc2hc84l] { color: #d24d61; }
.deadline-bar.urgent .db-headline[b-jsqc2hc84l] { color: #d24d61; }
.deadline-bar.urgent .db-headline .db-n[b-jsqc2hc84l] { color: #d24d61; }
.deadline-bar.urgent .db-fill[b-jsqc2hc84l] { background: linear-gradient(90deg, #e88b9a 0%, #d24d61 100%); }
.deadline-bar.urgent .db-track[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.18); }
.deadline-bar.urgent .db-today[b-jsqc2hc84l] {
    border-color: #d24d61;
    animation: pulseToday-b-jsqc2hc84l 1.2s ease-in-out infinite;
}
.deadline-bar.urgent .db-today[b-jsqc2hc84l]::after { color: #d24d61; }
.deadline-bar.urgent .db-edge-node[b-jsqc2hc84l] { border-color: #d24d61; }

/* OVERDUE — past deadline + vesting incomplete. Red palette + animated
   striped fill + pulsing deadline edge node + "Past due" pin label. */
.deadline-bar.overdue[b-jsqc2hc84l] {
    background: #f8dde2;
    border-color: rgba(210, 77, 97, 0.45);
    border-left-color: #d24d61;
}
.deadline-bar.overdue .db-divider[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.30); }
.deadline-bar.overdue .db-progress-icon[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.18); color: #d24d61; }
.deadline-bar.overdue .db-progress-bar[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.18); }
.deadline-bar.overdue .db-progress-fill[b-jsqc2hc84l] { background: linear-gradient(90deg, #e88b9a 0%, #d24d61 100%); }
.deadline-bar.overdue .db-progress-pct[b-jsqc2hc84l] { color: #d24d61; }
.deadline-bar.overdue .db-progress-text[b-jsqc2hc84l],
.deadline-bar.overdue .db-progress-text strong[b-jsqc2hc84l],
.deadline-bar.overdue .db-progress-title[b-jsqc2hc84l] { color: #d24d61; }
.deadline-bar.overdue .db-headline[b-jsqc2hc84l] { color: #d24d61; }
.deadline-bar.overdue .db-headline .db-n[b-jsqc2hc84l] { color: #d24d61; }
.deadline-bar.overdue .db-track[b-jsqc2hc84l] { background: rgba(210, 77, 97, 0.18); }

/* The fill becomes a flowing diagonal-striped band — "you are past due,
   here is the angry-stripe warning". Width forced to 100% so it spans the
   whole track regardless of the daysRemaining value. */
.deadline-bar.overdue .db-fill[b-jsqc2hc84l] {
    width: 100% !important;
    background:
        repeating-linear-gradient(135deg,
            #d24d61 0,
            #d24d61 6px,
            #b03c52 6px,
            #b03c52 12px);
    animation: dbStripeSlide-b-jsqc2hc84l 1.6s linear infinite;
}
@keyframes dbStripeSlide-b-jsqc2hc84l {
    from { background-position: 0 0; }
    to   { background-position: 24px 0; }
}

.deadline-bar.overdue .db-today[b-jsqc2hc84l] { border-color: #d24d61; }
/* OVERDUE pin label — when the dot sits at left:100% (forced by the
   overdue tier), a default centered ::after would extend ~50% of its own
   width past the track and clip against the deadline-bar's right border.
   Anchor the label's right edge to the dot's CENTER (right: 50%, which is
   half of the dot's 14px width). That puts the visible right edge of the
   text exactly at the track's 100% mark so the label sits fully inside
   the track, extending leftward from the dot. */
.deadline-bar.overdue .db-today[b-jsqc2hc84l]::after {
    content: 'Past due';
    color: #d24d61;
    font-weight: 700;
    left: auto;
    right: 50%;
    transform: none;
}
.deadline-bar.overdue .db-row:not(.is-180) .db-deadline-flag[b-jsqc2hc84l] { opacity: 1; }

/* Deadline edge node (right end of timeline at 100%) — red border + pulse
   glow so the operator can clearly see "this is where the deadline was". */
.deadline-bar.overdue .db-edge-node[b-jsqc2hc84l] { border-color: #d24d61; }
.deadline-bar.overdue .db-row:not(.is-180) .db-edge-node:last-of-type[b-jsqc2hc84l] {
    border-color: #d24d61;
    box-shadow: 0 0 0 0 rgba(210, 77, 97, 0.55);
    animation: dbEdgeNodePulse-b-jsqc2hc84l 1.4s ease-in-out infinite;
}
@keyframes dbEdgeNodePulse-b-jsqc2hc84l {
    0%, 100% { box-shadow: 0 0 0 0 rgba(210, 77, 97, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(210, 77, 97, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .deadline-bar.overdue .db-fill[b-jsqc2hc84l] { animation: none; }
    .deadline-bar.overdue .db-row:not(.is-180) .db-edge-node:last-of-type[b-jsqc2hc84l] { animation: none; }
}

/* DONE / VESTED — past deadline + vesting complete. Calm blue palette
   matching the normal/calm tier so the operator reads it as "successfully
   landed" rather than as a new colour scheme. */
.deadline-bar.done[b-jsqc2hc84l] {
    background: #e2eaf7;
    border-color: rgba(74, 114, 198, 0.22);
    border-left-color: #4d72c6;
}
.deadline-bar.done .db-divider[b-jsqc2hc84l] { background: rgba(74, 114, 198, 0.22); }
/* Headline/today-label override — royal blue for the "complete" copy. */
.deadline-bar.done .db-headline[b-jsqc2hc84l] { color: #1d4ed8; }
.deadline-bar.done .db-headline .db-n[b-jsqc2hc84l] { color: #1d4ed8; }
.deadline-bar.done .db-today[b-jsqc2hc84l]::after { color: #1d4ed8; }
.deadline-bar.done .db-headline[b-jsqc2hc84l] { color: #4d72c6; }
.deadline-bar.done .db-headline .db-n[b-jsqc2hc84l] { color: #4d72c6; }
.deadline-bar.done .db-track[b-jsqc2hc84l] { background: rgba(74, 114, 198, 0.16); }
.deadline-bar.done .db-fill[b-jsqc2hc84l] { background: linear-gradient(90deg, #6f9ad4 0%, #4d72c6 100%); }
.deadline-bar.done .db-today[b-jsqc2hc84l] { border-color: #4d72c6; }
/* Mockup parity — DONE tier keeps the literal "Today" string (only tints
   color blue); the previous variant rewrote content to "Done", which the
   style review flagged as off-mockup. Right-anchor preserved for the same
   reason as overdue: dot snaps to left:100% so a centered label would
   clip past the track. */
.deadline-bar.done .db-today[b-jsqc2hc84l]::after {
    color: #4d72c6;
    left: auto;
    right: 50%;
    transform: none;
}
.deadline-bar.done .db-edge-node[b-jsqc2hc84l] { border-color: #4d72c6; }
/* Single-mode done tier — the bar-level state already implies primaryDone,
   so swap "Today" → "Done" on the primary pin even if the Razor flag
   somehow didn't apply (defense-in-depth for the single-bar happy path). */
.deadline-bar.done .db-today[b-jsqc2hc84l]::after { content: 'Done'; }

@keyframes pulseToday-b-jsqc2hc84l {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .deadline-bar.urgent .db-today[b-jsqc2hc84l] { animation: none; }
    .db-progress-fill[b-jsqc2hc84l], .db-fill[b-jsqc2hc84l] { transition: none; }
}

/* ── Refresh-Census row ─────────────────────────────────────────────── */

/* Mockup parity (lines 1073-1077) — right-align the button, tuck it against
   the deadline-bar via a small negative top-margin. No background card or
   hint text; the button stands alone. */
.refresh-census-row[b-jsqc2hc84l] {
    display: flex;
    justify-content: flex-end;
    margin-top: -8px;
    margin-bottom: 16px;
}

.refresh-census-btn[b-jsqc2hc84l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #1f9d6a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s;
}

.refresh-census-btn:hover[b-jsqc2hc84l] {
    background: #0f6b46;
}

.refresh-census-btn svg[b-jsqc2hc84l] {
    width: 14px;
    height: 14px;
}
/* /Pages/Rollouts/Components/Followup/FollowupHandoffStage.razor.rz.scp.css */
.p2h-stage[b-tl1uzm6cp7] {
    display: flex;
    flex-direction: column;
    animation: p2hFadeIn-b-tl1uzm6cp7 0.55s 0.16s ease-out both;
}

@keyframes p2hFadeIn-b-tl1uzm6cp7 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .p2h-stage[b-tl1uzm6cp7] { animation: none; }
}

.p2h-banner[b-tl1uzm6cp7] {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(31, 157, 106, 0.25);
    background: linear-gradient(180deg, #effaf3 0%, #ffffff 60%);
    border-radius: 12px;
    margin-bottom: 16px;
    /* Mockup .p2-banner — icon aligns with the title baseline when the lede
       is present, not centered against the whole banner block. */
    align-items: flex-start;
}

/* Mockup .p2-banner .p2b-icon — 36x36 with --r-md (8px) corners; the 44x44 +
   12px variant we shipped first was ~22% larger than spec. */
.p2h-icon[b-tl1uzm6cp7] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #d6ecdf;
    color: #0f6b46;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p2h-body[b-tl1uzm6cp7] { flex: 1; }

/* Banner title is dark text — the green palette is reserved for the icon
   and icon-pill; the title itself stays primary text color regardless of
   variant (matches mockup .p2-banner .p2b-title). */
.p2h-title[b-tl1uzm6cp7] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
}

.p2h-lede[b-tl1uzm6cp7] { font-size: 13px; color: #6e6e73; margin-top: 4px; line-height: 1.55; }

/* Phase 3 (document mapper) isn't wired yet — the CTA is rendered disabled.
   Muted gray styling + not-allowed cursor signals "locked / coming soon"
   without removing the affordance from the post-handoff layout. */
.p2h-cta[b-tl1uzm6cp7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    background: #e5e5e7;
    color: #6e6e73;
    border: 1px solid #d2d2d7;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
}

.p2h-cta[disabled][b-tl1uzm6cp7] { opacity: 0.85; }

/* Card-chain top — same treatment as Vesting / Waiting / Re-eval so the
   active indicator sits ABOVE the label instead of below, and the tab
   strip flows visually into the table beneath. */
.p2h-bucket-tabs[b-tl1uzm6cp7] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    background: #f5f5f7;
    border-radius: 12px 12px 0 0;
    border: 1px solid #e5e5e7;
    border-bottom: none;
    overflow-x: auto;
    margin-bottom: 0;
}

/* Mockup .is-muted (single rule applied uniformly across muted elements):
   opacity 0.55, saturate 0.6, pointer-events: none. Previous variant left
   the tabs MORE saturated than the table beneath them AND clickable in a
   "locked" state. */
.p2h-bucket-tabs.is-muted[b-tl1uzm6cp7] {
    opacity: 0.55;
    filter: saturate(0.6);
    pointer-events: none;
}

.p2h-bucket-tab[b-tl1uzm6cp7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: transparent;
    color: #6e6e73;
    border: none;
    border-top: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.p2h-bucket-tab:hover[b-tl1uzm6cp7] { color: #1d1d1f; }
.p2h-bucket-tab.active[b-tl1uzm6cp7] {
    color: #7c5cdb;
    background: white;
    border-top-color: #7c5cdb;
    font-weight: 600;
}
.p2h-bucket-tab:first-child[b-tl1uzm6cp7] { border-radius: 12px 0 0 0; }

.bucket-dot[b-tl1uzm6cp7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.bucket-dot.rollout[b-tl1uzm6cp7] { background: #3a5fa8; }
.bucket-dot.cashout[b-tl1uzm6cp7] { background: #1f9d6a; }
.bucket-dot.feeout[b-tl1uzm6cp7]  { background: #d18a2c; }
.bucket-dot.removed[b-tl1uzm6cp7] { background: #d24d61; }
.bucket-dot.withdrew[b-tl1uzm6cp7] { background: #86868b; }

.tab-count[b-tl1uzm6cp7] {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f5f5f7;
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
}

/* Stats row continues the chain — white bg + side borders that flow into
   the table-wrap below. */
.p2h-stats[b-tl1uzm6cp7] {
    padding: 12px 16px;
    font-size: 13px;
    color: #6e6e73;
    background: white;
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
    border-bottom: 1px solid #f5f5f7;
}

.p2h-stats strong[b-tl1uzm6cp7] { color: #1d1d1f; font-weight: 600; }

/* Table closes the card-chain — no top border, rounded bottom. */
.p2h-table-wrap[b-tl1uzm6cp7] {
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
    border-bottom: 1px solid #e5e5e7;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #ffffff;
    overflow-x: auto;
}

.p2h-table-wrap.is-muted[b-tl1uzm6cp7] {
    opacity: 0.55;
    filter: saturate(0.6);
    pointer-events: none;
}

.p2h-table-wrap.is-readonly[b-tl1uzm6cp7] { pointer-events: none; }

.p2h-data-table[b-tl1uzm6cp7] {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.p2h-data-table thead th[b-tl1uzm6cp7] {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f2;
}

.p2h-data-table thead th.right[b-tl1uzm6cp7] { text-align: right; }

.p2h-data-table tbody td[b-tl1uzm6cp7] {
    padding: 12px 14px;
    border-bottom: 1px solid #f5f5f7;
    font-size: 13px;
    vertical-align: middle;
}

.p2h-data-table tbody td.right[b-tl1uzm6cp7] { text-align: right; }

.name-cell .name[b-tl1uzm6cp7] { font-weight: 600; color: #1d1d1f; }
.name-cell .meta[b-tl1uzm6cp7] { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6e6e73; margin-top: 2px; }

.vest-cell[b-tl1uzm6cp7] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.vest-input[b-tl1uzm6cp7] {
    width: 64px;
    padding: 4px 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 12px;
    text-align: right;
    background: #f5f5f7;
    color: #86868b;
}

.vest-suffix[b-tl1uzm6cp7] { font-size: 11px; color: #6e6e73; }

.p2h-empty[b-tl1uzm6cp7] {
    text-align: center;
    padding: 32px 0;
    color: #86868b;
    font-size: 13px;
}
/* /Pages/Rollouts/Components/Followup/FollowupListStage.razor.rz.scp.css */
/* Wiki 990 — Followup List Stage. Single CSS file replacing the prior
   FollowupVestingStage.razor.css + FollowupWaitingStage.razor.css. Uses the
   card-chain visual treatment from the Vesting mockup (tab strip rounded on
   top, side borders flow down through the bulk-bar and stats line into the
   table footer) for both editable + read-only modes — the read-only treatment
   adds the slim blue banner above the deadline bar and swaps the inline-chip
   bulk-move bar for a dropdown trigger.

   All scoped via Blazor CSS isolation; selectors are intentionally local to
   this file. */

.p2l-stage[b-1ifhjeclvv] {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: p2lFadeIn-b-1ifhjeclvv 0.55s 0.16s ease-out both;
}

@keyframes p2lFadeIn-b-1ifhjeclvv {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .p2l-stage[b-1ifhjeclvv] { animation: none; }
}

/* ── Slim blue banner (read-only modes only) ──────────────────── */
/* Mockup §waiting-mode — slim white strip that sits between the deadline
   bar and the bucket card. Single-line "Waiting period · {mode} · read-only"
   label; the explanatory lede is gone since ops already knows the meaning
   of the read-only state by the time they reach this screen. */
.p2l-waiting-strip[b-1ifhjeclvv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    margin-bottom: 14px;
}

.p2l-waiting-strip-title[b-1ifhjeclvv] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.1px;
}

.p2l-waiting-strip-meta[b-1ifhjeclvv] {
    font-size: 12px;
    color: #6e6e73;
}

/* ── Bucket tabs (card-chain top) ──────────────────────────────── */
.p2l-bucket-tabs[b-1ifhjeclvv] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    background: #f5f5f7;
    border-radius: 12px 12px 0 0;
    border: 1px solid #e5e5e7;
    border-bottom: none;
    overflow-x: auto;
    margin-bottom: 0;
}

.p2l-bucket-tab[b-1ifhjeclvv] {
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #6e6e73;
    cursor: pointer;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    transition: all 0.18s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    flex-shrink: 0;
}

.p2l-bucket-tab:hover[b-1ifhjeclvv] {
    color: #7c5cdb;
    background: rgba(124, 92, 219, 0.04);
}

.p2l-bucket-tab.active[b-1ifhjeclvv] {
    color: #7c5cdb;
    background: white;
    border-top-color: #7c5cdb;
    font-weight: 600;
}

.p2l-bucket-tab:first-child[b-1ifhjeclvv] { border-radius: 12px 0 0 0; }

.bucket-dot[b-1ifhjeclvv] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: #94a3b8;
}

.bucket-dot.rollout[b-1ifhjeclvv]  { background: #3a5fa8; }
.bucket-dot.cashout[b-1ifhjeclvv]  { background: #1f9d6a; }
.bucket-dot.feeout[b-1ifhjeclvv]   { background: #d18a2c; }
.bucket-dot.removed[b-1ifhjeclvv]  { background: #d24d61; }
.bucket-dot.withdrew[b-1ifhjeclvv] { background: #86868b; }

.tab-count[b-1ifhjeclvv] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
    font-variant-numeric: tabular-nums;
}

.p2l-bucket-tab.active .tab-count[b-1ifhjeclvv] {
    background: #f3f0ff;
    color: #7c5cdb;
}

/* ── Bulk-action bar (continues the card-chain) ─────────────── */
.p2l-bulk-bar[b-1ifhjeclvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #faf8ff;
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
    border-bottom: 1px solid #f5f5f7;
    margin-bottom: 0;
}

.p2l-bulk-left[b-1ifhjeclvv] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.p2l-selected-count[b-1ifhjeclvv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c5cdb;
    font-size: 13px;
    font-weight: 500;
}

.p2l-move-inline-label[b-1ifhjeclvv] {
    font-size: 12px;
    color: #6e6e73;
    cursor: help;
    margin-left: 4px;
}

.p2l-move-chip[b-1ifhjeclvv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.p2l-move-chip:hover[b-1ifhjeclvv] {
    background: #f5f5f7;
    border-color: #c7c7c7;
}

.p2l-clear-btn[b-1ifhjeclvv] {
    background: transparent;
    border: none;
    font-size: 12px;
    color: #6e6e73;
    cursor: pointer;
    padding: 4px 8px;
}

.p2l-clear-btn:hover[b-1ifhjeclvv] {
    color: #1d1d1f;
    text-decoration: underline;
}

/* ── Bulk-move dropdown (read-only variant) ──────────────────── */
.p2l-move-dropdown[b-1ifhjeclvv] { position: relative; }

.p2l-move-trigger[b-1ifhjeclvv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.p2l-move-trigger:hover[b-1ifhjeclvv] {
    background: #f5f5f7;
    border-color: #c7c7c7;
}

.p2l-caret[b-1ifhjeclvv] { color: #86868b; }

.p2l-dropdown-overlay[b-1ifhjeclvv] {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.p2l-move-menu[b-1ifhjeclvv] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 101;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #f0f0f2;
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12);
    padding: 6px 0;
}

.p2l-move-label[b-1ifhjeclvv] {
    padding: 8px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.p2l-move-menu button[b-1ifhjeclvv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
}

.p2l-move-menu button:hover[b-1ifhjeclvv] { background: #f5f5f7; }

/* ── Stats line ───────────────────────────────────────────────── */
.p2l-bucket-line[b-1ifhjeclvv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
    border-bottom: 1px solid #f5f5f7;
    font-size: 13px;
    color: #6e6e73;
}

.p2l-stat strong[b-1ifhjeclvv] {
    color: #1d1d1f;
    font-weight: 600;
}

.p2l-stat-warn[b-1ifhjeclvv] { color: #a07020; }

.p2l-rule[b-1ifhjeclvv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #86868b;
    padding: 2px 8px;
    background: #f5f5f7;
    border-radius: 4px;
}

.p2l-balance-range[b-1ifhjeclvv] {
    margin-left: 8px;
    padding: 1px 10px;
    line-height: 1.4;
    background: #f5f5f7;
    border: 1px solid #e8e8ec;
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
    color: #6e6e73;
    font-size: 13px;
}

.p2l-search-box[b-1ifhjeclvv] {
    padding: 6px 12px;
    border: 1px solid #e8e8ec;
    border-radius: 6px;
    font-size: 13px;
    width: 200px;
    font-family: inherit;
}

.p2l-search-box:focus[b-1ifhjeclvv] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 2px rgba(124, 92, 219, 0.1);
}

/* ── Data table ───────────────────────────────────────────────── */
.p2l-table-wrap[b-1ifhjeclvv] {
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
    border-bottom: 1px solid #e5e5e7;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #ffffff;
    /* Was `overflow-x: auto` — but `auto` on either axis silently turns the
       other axis into a clipping context too (CSS spec), which chopped the
       per-row kebab popover off at the table edge. Keep both visible; the
       table has min-width: 960px so on narrow viewports the page (not the
       card) scrolls. */
    overflow: visible;
}

.p2l-table-wrap.is-readonly .vest-cell[b-1ifhjeclvv],
.p2l-table-wrap.is-readonly input[type="number"][b-1ifhjeclvv] {
    pointer-events: none;
}

.p2l-data-table[b-1ifhjeclvv] {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.p2l-data-table thead th[b-1ifhjeclvv] {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%), #fbfbfd;
    border-bottom: 1px solid #e5e5e7;
    white-space: nowrap;
}

.p2l-data-table thead th.right[b-1ifhjeclvv] { text-align: right; }
.p2l-data-table thead th.checkbox-cell[b-1ifhjeclvv] { width: 36px; }
.p2l-data-table thead th.kebab-col[b-1ifhjeclvv] { width: 40px; }

.p2l-data-table tbody td[b-1ifhjeclvv] {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f7;
    font-size: 14px;
    color: #1d1d1f;
    vertical-align: middle;
    transition: background 0.18s;
}

.p2l-data-table tbody td.right[b-1ifhjeclvv] { text-align: right; }
.p2l-data-table tbody td.checkbox-cell[b-1ifhjeclvv] { width: 36px; }
.p2l-data-table tbody td.kebab-col[b-1ifhjeclvv] { width: 40px; text-align: center; }

.p2l-data-table tbody tr:nth-of-type(even) td[b-1ifhjeclvv] { background: rgba(15, 15, 25, 0.018); }
.p2l-data-table tbody tr:hover td[b-1ifhjeclvv] { background: rgba(15, 15, 25, 0.025); }
.p2l-data-table tbody tr.selected td[b-1ifhjeclvv] { background: #faf8ff; }
.p2l-data-table tbody tr.selected td:first-child[b-1ifhjeclvv] { box-shadow: inset 3px 0 0 #7c5cdb; }

.p2l-data-table input[type="checkbox"][b-1ifhjeclvv] { accent-color: #7c5cdb; }

.name-cell .name[b-1ifhjeclvv] {
    font-weight: 600;
    color: #1d1d1f;
}

.name-cell .meta[b-1ifhjeclvv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #6e6e73;
    margin-top: 2px;
}

/* Matches the List Review .vest-cell / .vesting-input pattern
   (ParticipantTable.razor.css) — JetBrains Mono digits, amber warm-fill for
   empty cells, purple focus ring, muted disabled state. */
.vest-cell[b-1ifhjeclvv] {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.vest-input[b-1ifhjeclvv] {
    width: 56px;
    padding: 3px 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    text-align: right;
    color: #1d1d1f;
    background: white;
    font-variant-numeric: tabular-nums;
    transition: all 0.15s;
}

.vest-input:hover[b-1ifhjeclvv] { border-color: #c7c7c7; }

.vest-input:focus[b-1ifhjeclvv] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

.vest-input.is-empty[b-1ifhjeclvv] {
    background: #f8eed5;
    border-color: rgba(209, 138, 44, 0.35);
    color: #a07020;
}

.vest-input.is-empty[b-1ifhjeclvv]::placeholder {
    color: #d18a2c;
    opacity: 1;
}

.vest-input.is-empty:hover[b-1ifhjeclvv] {
    border-color: rgba(209, 138, 44, 0.55);
}

.vest-input[disabled][b-1ifhjeclvv],
.vest-input:disabled[b-1ifhjeclvv] {
    background: #f5f5f7;
    border-color: #e5e5e7;
    color: #c7c7cc;
    cursor: not-allowed;
    pointer-events: none;
}

.vest-input[disabled][b-1ifhjeclvv]::placeholder,
.vest-input:disabled[b-1ifhjeclvv]::placeholder {
    color: #c7c7cc;
    opacity: 1;
}

.vest-suffix[b-1ifhjeclvv] {
    color: #86868b;
    font-size: 11px;
    margin-left: 3px;
}

.p2l-empty[b-1ifhjeclvv] {
    text-align: center;
    padding: 32px 0;
    color: #86868b;
    font-size: 13px;
}

/* Wiki 990 #8079 AC-5 — bucket emptied by the approval-gap soft-delete.
   Reads as a calm info banner inside the empty grid: title in dark text,
   muted explanation underneath. Centred to match the generic empty state. */
.p2l-empty-softdelete[b-1ifhjeclvv] {
    padding: 44px 32px;
    text-align: left;
    background: linear-gradient(180deg, #faf8ff 0%, #ffffff 100%);
    border-top: 1px solid #ede9fe;
}

.p2l-empty-softdelete .p2l-empty-title[b-1ifhjeclvv] {
    color: #1d1d1f;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.p2l-empty-softdelete .p2l-empty-sub[b-1ifhjeclvv] {
    color: #6e6e73;
    font-size: 13px;
    line-height: 1.55;
    max-width: 640px;
}

/* ── Row kebab ────────────────────────────────────────────────── */
.row-kebab-wrap[b-1ifhjeclvv] { position: relative; display: inline-block; }

/* Wiki 995 — terminal run (Expired / Canceled): hide the per-row move kebab so
   the bucket list is review-only. Checkboxes + vesting inputs are disabled in
   markup; bucket tabs / search / pagination stay live for browsing. */
.p2l-stage.is-locked .row-kebab-wrap[b-1ifhjeclvv] { display: none; }

.row-kebab[b-1ifhjeclvv] {
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 4px;
    color: #6e6e73;
    cursor: pointer;
    transition: all 0.15s;
}

.row-kebab:hover[b-1ifhjeclvv] {
    background: #f5f5f7;
    color: #1d1d1f;
}

.row-popover-overlay[b-1ifhjeclvv] {
    position: fixed;
    inset: 0;
    z-index: 950;
}

/* Sits above neighbouring rows + the table's gradient header. The table-wrap's
   overflow was switched to visible (see §.p2l-table-wrap) so the menu also
   escapes the card frame. */
.row-kebab-menu[b-1ifhjeclvv] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 960;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);
    padding: 4px 0;
}

.row-kebab-menu button[b-1ifhjeclvv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
}

.row-kebab-menu button:hover[b-1ifhjeclvv] { background: #f5f5f7; }
/* /Pages/Rollouts/Components/Followup/FollowupReEvaluationStage.razor.rz.scp.css */
.p2r-stage[b-pss2hdfi3l] {
    display: flex;
    flex-direction: column;
    animation: p2rFadeIn-b-pss2hdfi3l 0.55s 0.16s ease-out both;
}

@keyframes p2rFadeIn-b-pss2hdfi3l {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .p2r-stage[b-pss2hdfi3l] { animation: none; }
}

/* ── reeval-scope strip ───────────────────────────────────────── */
/* Mockup meta-card — neutral white card so the Proceed CTA stands out
   on its own. Purple tint is reserved for the selection-active bulk-bar
   only; the previous purple-tint here made the scope strip and bulk-bar
   look interchangeable. */
.p2r-reeval-scope[b-pss2hdfi3l] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 15, 25, 0.04);
    margin-bottom: 14px;
}

.p2r-reeval-scope-info[b-pss2hdfi3l] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    font-size: 13px;
    color: #6e6e73;
}

.p2r-reeval-scope-info strong[b-pss2hdfi3l] { color: #1d1d1f; font-weight: 600; }
.p2r-reeval-scope-info .dot[b-pss2hdfi3l] { color: #94a3b8; }

.p2r-reeval-scope-actions[b-pss2hdfi3l] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.p2r-scope-kebab[b-pss2hdfi3l] { position: relative; }

.p2r-kebab-btn[b-pss2hdfi3l] {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: 6px;
    color: #6e6e73;
    cursor: pointer;
}

.p2r-kebab-btn:hover[b-pss2hdfi3l] { background: #ffffff; border-color: #d2d2d7; }

.p2r-kebab-menu[b-pss2hdfi3l] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 101;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #f0f0f2;
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12);
    padding: 4px 0;
}

.p2r-kebab-menu button[b-pss2hdfi3l] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
}

.p2r-kebab-menu button:hover[b-pss2hdfi3l] { background: #f5f5f7; }

/* Mockup .btn.btn-primary.btn-sm — vertical light → deep gradient with a
   darker border gradient layered via padding-box / border-box, plus a
   subtle lift on hover. The previous diagonal light-to-light gradient
   read flat next to the dimensional mockup button. */
.p2r-proceed-btn[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #8b6ce8 0%, #5b3fc7 100%) padding-box,
        linear-gradient(180deg, #6d4dcb 0%, #3d1d9c 100%) border-box;
    color: #ffffff;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
}

.p2r-proceed-btn:hover[b-pss2hdfi3l] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -2px rgba(94, 68, 200, 0.45);
}

.p2r-proceed-btn[disabled][b-pss2hdfi3l] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Bucket tabs with delta indicators ────────────────────────── */
/* Card-chain top — rounded-top gray strip that flows visually into the
   bulk-bar / bucket-summary / table-wrap below. Active indicator sits on
   TOP of the chip so the operator's eye lands above the label (matching
   Vesting / Waiting stages — previously the indicator was on the bottom
   and the chain was broken). */
.p2r-bucket-tabs[b-pss2hdfi3l] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    background: #f5f5f7;
    border-radius: 12px 12px 0 0;
    border: 1px solid #e5e5e7;
    border-bottom: none;
    overflow-x: auto;
    margin-bottom: 0;
}

.p2r-bucket-tab[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: transparent;
    color: #6e6e73;
    border: none;
    border-top: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.p2r-bucket-tab:hover[b-pss2hdfi3l] { color: #7c5cdb; background: rgba(124, 92, 219, 0.04); }
.p2r-bucket-tab.active[b-pss2hdfi3l] {
    color: #7c5cdb;
    background: white;
    border-top-color: #7c5cdb;
    font-weight: 600;
}
.p2r-bucket-tab:first-child[b-pss2hdfi3l] { border-radius: 12px 0 0 0; }

.bucket-dot[b-pss2hdfi3l] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #94a3b8;
}

.bucket-dot.rollout[b-pss2hdfi3l] { background: #3a5fa8; }
.bucket-dot.cashout[b-pss2hdfi3l] { background: #1f9d6a; }
.bucket-dot.feeout[b-pss2hdfi3l]  { background: #d18a2c; }
.bucket-dot.removed[b-pss2hdfi3l] { background: #d24d61; }
.bucket-dot.withdrew[b-pss2hdfi3l] { background: #86868b; }

.tab-count[b-pss2hdfi3l] {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f5f5f7;
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
    font-variant-numeric: tabular-nums;
}

.p2r-bucket-tab.active .tab-count[b-pss2hdfi3l] {
    background: #f3f0ff;
    color: #7c5cdb;
}

/* Delta pill — sits beside the bucket count. Negative deltas ("-N left")
   use a visible neutral tone with a hairline border so they read as a pill
   against the white page bg (the mockup's bare #f5f5f7 fill disappears).
   Positive deltas ("+N new") get the louder pink fill since gain is the
   notable signal. Inline-flex keeps both variants vertically centered with
   the bucket name + count regardless of label length. */
.tab-changes[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #6e6e73;
    background: #ececf0;
    border: 1px solid #d8d8de;
    white-space: nowrap;
}

.tab-changes.new[b-pss2hdfi3l] {
    color: #d24d61;
    background: #f8dde2;
    border-color: #f1c7ce;
}

.p2r-bucket-tab.active .tab-changes[b-pss2hdfi3l] {
    background: #f3f0ff;
    color: #7c5cdb;
    border-color: #ddd2ff;
}

.p2r-bucket-tab.active .tab-changes.new[b-pss2hdfi3l] {
    background: #f8dde2;
    color: #d24d61;
    border-color: #f1c7ce;
}

/* ── Bulk-action bar (continues the card-chain) ─────────────── */
/* Side borders extend the chain down from the tab strip. Light purple
   tint is kept for the selection-active affordance but the standalone
   border + border-radius are dropped — the bar is now flush with the
   chain instead of a floating capsule. */
.p2r-bulk-bar[b-pss2hdfi3l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #faf8ff;
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
    border-bottom: 1px solid #f5f5f7;
    margin-bottom: 0;
}

.p2r-bulk-left[b-pss2hdfi3l] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.p2r-selected-count[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7c5cdb;
    font-size: 13px;
    font-weight: 500;
}

.p2r-move-inline-label[b-pss2hdfi3l] {
    font-size: 12px;
    color: #6e6e73;
    margin: 0 4px 0 6px;
}

.p2r-move-chip[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.p2r-move-chip:hover[b-pss2hdfi3l] { background: #f5f5f7; border-color: #c7c7c7; }

.p2r-clear-btn[b-pss2hdfi3l] {
    background: transparent;
    border: none;
    font-size: 12px;
    color: #6e6e73;
    cursor: pointer;
    padding: 4px 8px;
}

.p2r-clear-btn:hover[b-pss2hdfi3l] { color: #1d1d1f; text-decoration: underline; }

/* ── Bucket summary chip (continues the card-chain) ───────────── */
.p2r-bucket-summary[b-pss2hdfi3l] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: white;
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
    border-bottom: 1px solid #f5f5f7;
    margin-bottom: 0;
}

.bs-now[b-pss2hdfi3l] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    color: #1d1d1f;
}

.bs-now strong[b-pss2hdfi3l] { font-weight: 700; }

.bs-delta[b-pss2hdfi3l] {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.bs-delta.up[b-pss2hdfi3l] { color: #0f6b46; background: #d6ecdf; }
.bs-delta.down[b-pss2hdfi3l] { color: #d24d61; background: #f8dde2; }
.bs-delta.flat[b-pss2hdfi3l] { color: #86868b; background: #f5f5f7; }

.bs-rule[b-pss2hdfi3l] {
    font-size: 12px;
    color: #6e6e73;
    margin-left: auto;
}

/* ── Data table (closes the card-chain) ───────────────────────── */
.p2r-table-wrap[b-pss2hdfi3l] {
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
    border-bottom: 1px solid #e5e5e7;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #ffffff;
    overflow-x: auto;
    overflow-y: visible;
    max-height: 520px;
}

.p2r-data-table[b-pss2hdfi3l] {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.p2r-data-table thead[b-pss2hdfi3l] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fafafa;
}

.p2r-data-table thead th[b-pss2hdfi3l] {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #f0f0f2;
    background: #fafafa;
}

.p2r-data-table thead th.right[b-pss2hdfi3l] { text-align: right; }
.p2r-data-table thead th.checkbox-cell[b-pss2hdfi3l] { width: 36px; }
.p2r-data-table thead th.kebab-col[b-pss2hdfi3l] { width: 40px; }

.p2r-data-table tbody td[b-pss2hdfi3l] {
    padding: 12px 14px;
    border-bottom: 1px solid #f5f5f7;
    font-size: 13px;
    color: #1d1d1f;
    vertical-align: middle;
}

.p2r-data-table tbody td.right[b-pss2hdfi3l] { text-align: right; }
.p2r-data-table tbody td.checkbox-cell[b-pss2hdfi3l] { width: 36px; }
.p2r-data-table tbody td.kebab-col[b-pss2hdfi3l] { width: 40px; text-align: center; }

.p2r-data-table tbody tr:hover td[b-pss2hdfi3l] { background: #f7f7f7; }
/* Selection — match Phase 1: tinted background everywhere, purple bar only
   on the first cell via inset box-shadow so column widths don't shift. */
.p2r-data-table tbody tr.selected td[b-pss2hdfi3l] { background: #faf8ff; }
.p2r-data-table tbody tr.selected td:first-child[b-pss2hdfi3l] { box-shadow: inset 3px 0 0 #7c5cdb; }
/* Mockup §change-in (L2001) — moved-in rows get a GREEN inset bar on the
   first cell only, no row-wide tint. Previous purple wash collided
   visually with the selected-row purple wash above and didn't match the
   spec's "what moved in here" affordance. */
.p2r-data-table tbody tr.change-in td:first-child[b-pss2hdfi3l] { box-shadow: inset 3px 0 0 #1f9d6a; }

.p2r-data-table input[type="checkbox"][b-pss2hdfi3l] { accent-color: #7c5cdb; }

.name-cell .name[b-pss2hdfi3l] { font-weight: 600; color: #1d1d1f; display: flex; align-items: center; gap: 6px; }
.name-cell .meta[b-pss2hdfi3l] { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6e6e73; margin-top: 2px; }

/* Ticket 8084 / Molly DECISION-990-Y — Phase 1 manual override honored. */
.name-cell .p1-override-icon[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    color: #b45309;
    cursor: help;
}
.name-cell .p1-override-icon:hover[b-pss2hdfi3l] { color: #92400e; }

.muted[b-pss2hdfi3l] { color: #94a3b8; }

/* ── Change cell (arrived-from) ───────────────────────────────── */
.change-cell[b-pss2hdfi3l] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

.change-dir[b-pss2hdfi3l] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6e6e73;
    font-weight: 600;
}

.bucket-badge[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
}

.bucket-badge .bd[b-pss2hdfi3l] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
}

.bucket-badge .bd.rollout[b-pss2hdfi3l]  { background: #3a5fa8; }
.bucket-badge .bd.cashout[b-pss2hdfi3l]  { background: #1f9d6a; }
.bucket-badge .bd.feeout[b-pss2hdfi3l]   { background: #d18a2c; }
.bucket-badge .bd.removed[b-pss2hdfi3l]  { background: #d24d61; }
.bucket-badge .bd.withdrew[b-pss2hdfi3l] { background: #86868b; }

.bucket-badge.changed[b-pss2hdfi3l] { background: #f3f0ff; color: #7c5cdb; }

/* ── Fund badges (Roth / After-Tax) ───────────────────────────── */
.fund-badge[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
    cursor: help;
    vertical-align: middle;
    margin-right: 6px;
}

.fund-badge.roth[b-pss2hdfi3l]     { background: #dde6f5; color: #3a5fa8; }
.fund-badge.aftertax[b-pss2hdfi3l] { background: #f3f0ff; color: #7c5cdb; }

/* ── Vest cells (DISABLED on re-eval stage) ───────────────────── */
.vest-cell[b-pss2hdfi3l] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.vest-input[b-pss2hdfi3l] {
    width: 64px;
    padding: 4px 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: #f5f5f7;
    color: #86868b;
    cursor: not-allowed;
}

.vest-suffix[b-pss2hdfi3l] { font-size: 11px; color: #6e6e73; }

.p2r-empty[b-pss2hdfi3l] {
    text-align: center;
    padding: 32px 0;
    color: #86868b;
    font-size: 13px;
}

/* ── Row kebab ────────────────────────────────────────────────── */
.row-kebab-wrap[b-pss2hdfi3l] { position: relative; display: inline-block; }

/* Wiki 995 — terminal run (Expired / Canceled): hide the per-row move/recalculate
   kebab so the re-eval view is review-only. Selection checkboxes are already
   disabled; Proceed is disabled in markup. */
.p2r-stage.is-locked .row-kebab-wrap[b-pss2hdfi3l] { display: none; }

.row-kebab[b-pss2hdfi3l] {
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 4px;
    color: #6e6e73;
    cursor: pointer;
}

.row-kebab:hover[b-pss2hdfi3l] { background: #f5f5f7; color: #1d1d1f; }

.row-popover-overlay[b-pss2hdfi3l] { position: fixed; inset: 0; z-index: 100; }

.row-kebab-menu[b-pss2hdfi3l] {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 101;
    min-width: 200px;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #f0f0f2;
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12);
    padding: 4px 0;
}

.row-kebab-menu button[b-pss2hdfi3l] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
}

.row-kebab-menu button:hover[b-pss2hdfi3l] { background: #f5f5f7; }
/* /Pages/Rollouts/Components/Followup/FollowupStaleStage.razor.rz.scp.css */
.p2s-stage[b-zhatza3jm3] {
    display: flex;
    flex-direction: column;
    animation: p2sFadeIn-b-zhatza3jm3 0.55s 0.16s ease-out both;
}

@keyframes p2sFadeIn-b-zhatza3jm3 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .p2s-stage[b-zhatza3jm3] { animation: none; }
}

.p2s-banner[b-zhatza3jm3] {
    display: flex;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(210, 77, 97, 0.35);
    border-left: 3px solid #d24d61;
    background: linear-gradient(180deg, #fcecef 0%, #ffffff 60%);
    border-radius: 12px;
    margin-bottom: 16px;
    align-items: center;
}

.p2s-icon[b-zhatza3jm3] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f8dde2;
    color: #d24d61;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p2s-body[b-zhatza3jm3] { flex: 1; }

.p2s-title[b-zhatza3jm3] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #d24d61;
}

.p2s-lede[b-zhatza3jm3] { font-size: 13px; color: #6e6e73; margin-top: 2px; }
.p2s-lede strong[b-zhatza3jm3] { color: #1d1d1f; }

.p2s-cta[b-zhatza3jm3] {
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: #d24d61;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
}

.p2s-cta:hover[b-zhatza3jm3] { background: #b03950; }

.p2s-tabs[b-zhatza3jm3] {
    display: flex;
    border-bottom: 1px solid #e5e5e7;
    margin-bottom: 12px;
}

.p2s-tab[b-zhatza3jm3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    color: #6e6e73;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.p2s-tab:hover[b-zhatza3jm3] { color: #7c5cdb; background: rgba(124, 92, 219, 0.04); }
.p2s-tab.active[b-zhatza3jm3] { color: #7c5cdb; border-bottom-color: #7c5cdb; font-weight: 600; }

.bucket-dot[b-zhatza3jm3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.bucket-dot.changed[b-zhatza3jm3] { background: #7c5cdb; }

.tab-count[b-zhatza3jm3] {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f5f5f7;
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
}

.p2s-tab.active .tab-count[b-zhatza3jm3] {
    background: #f3f0ff;
    color: #7c5cdb;
}

.p2s-stats[b-zhatza3jm3] {
    padding: 10px 0;
    font-size: 13px;
    color: #d24d61;
}

.p2s-stats strong[b-zhatza3jm3] { color: #1d1d1f; font-weight: 600; }

.p2s-table-wrap[b-zhatza3jm3] {
    border: 1px solid #f0f0f2;
    border-radius: 10px;
    background: #ffffff;
    overflow-x: auto;
}

.p2s-table-wrap.is-muted[b-zhatza3jm3] {
    opacity: 0.55;
    filter: saturate(0.6);
}

.p2s-table-wrap.is-readonly[b-zhatza3jm3] { pointer-events: none; }

.p2s-data-table[b-zhatza3jm3] {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.p2s-data-table thead th[b-zhatza3jm3] {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f2;
}

.p2s-data-table thead th.right[b-zhatza3jm3] { text-align: right; }
.p2s-data-table thead th.checkbox-cell[b-zhatza3jm3] { width: 36px; }

.p2s-data-table tbody td[b-zhatza3jm3] {
    padding: 12px 14px;
    border-bottom: 1px solid #f5f5f7;
    font-size: 13px;
    vertical-align: middle;
}

.p2s-data-table tbody td.right[b-zhatza3jm3] { text-align: right; }
.p2s-data-table tbody td.checkbox-cell[b-zhatza3jm3] { width: 36px; }

.name-cell .name[b-zhatza3jm3] { font-weight: 600; color: #1d1d1f; }
.name-cell .meta[b-zhatza3jm3] { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6e6e73; margin-top: 2px; }
.muted[b-zhatza3jm3] { color: #94a3b8; }

.bucket-badge[b-zhatza3jm3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #f3f0ff;
    color: #7c5cdb;
    cursor: help;
}

.bucket-badge .bd[b-zhatza3jm3] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7c5cdb;
}

.vest-cell[b-zhatza3jm3] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.vest-input[b-zhatza3jm3] {
    width: 64px;
    padding: 4px 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 12px;
    text-align: right;
    background: #f5f5f7;
    color: #86868b;
}

.vest-suffix[b-zhatza3jm3] { font-size: 11px; color: #6e6e73; }

.p2s-empty[b-zhatza3jm3] {
    text-align: center;
    padding: 32px 0;
    color: #86868b;
    font-size: 13px;
}
/* /Pages/Rollouts/Components/Followup/HandoffConfirmModal.razor.rz.scp.css */
.hcm-body[b-ooxvf1i9k4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}

.hcm-lede[b-ooxvf1i9k4] {
    font-size: 13px;
    color: #1d1d1f;
    line-height: 1.55;
    margin: 0;
}

.hcm-warning[b-ooxvf1i9k4] {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(209, 138, 44, 0.30);
    background: #fff8e9;
    border-radius: 10px;
}

.hcm-warning-icon[b-ooxvf1i9k4] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8eed5;
    color: #a07020;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hcm-warning-body[b-ooxvf1i9k4] {
    flex: 1;
}

.hcm-warning-title[b-ooxvf1i9k4] {
    font-size: 14px;
    font-weight: 700;
    color: #a07020;
    margin-bottom: 6px;
}

.hcm-warning-list[b-ooxvf1i9k4] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #1d1d1f;
    line-height: 1.55;
}

.hcm-warning-list li[b-ooxvf1i9k4] {
    margin-bottom: 2px;
}

.hcm-warning-foot[b-ooxvf1i9k4] {
    margin-top: 8px;
    font-size: 12px;
    color: #6e6e73;
    font-style: italic;
}

.hcm-blocked[b-ooxvf1i9k4] {
    padding: 10px 14px;
    background: #f8dde2;
    border: 1px solid rgba(210, 77, 97, 0.35);
    border-left: 3px solid #d24d61;
    border-radius: 8px;
    font-size: 13px;
    color: #1d1d1f;
}

.rrl-btn[b-ooxvf1i9k4] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s;
}

.rrl-btn[disabled][b-ooxvf1i9k4] {
    opacity: 0.55;
    cursor: not-allowed;
}

.rrl-btn-secondary[b-ooxvf1i9k4] {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #d2d2d7;
}

.rrl-btn-secondary:hover:not([disabled])[b-ooxvf1i9k4] {
    background: #f5f5f7;
}

.rrl-btn-primary[b-ooxvf1i9k4] {
    background: linear-gradient(135deg, #7c5cdb 0%, #8b6ce8 100%);
    color: #ffffff;
}

.rrl-btn-primary:hover:not([disabled])[b-ooxvf1i9k4] {
    background: linear-gradient(135deg, #6d4dcb 0%, #7a5cdb 100%);
}
/* /Pages/Rollouts/Components/Followup/RefreshCensusModal.razor.rz.scp.css */
.rcm-body[b-23duhe9sxn] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 8px 0;
}

.rcm-icon[b-23duhe9sxn] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f8eed5;
    color: #a07020;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rcm-message[b-23duhe9sxn] {
    flex: 1;
    font-size: 14px;
    color: #1d1d1f;
    line-height: 1.55;
    margin: 0;
}

.rrl-btn[b-23duhe9sxn] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s;
}

.rrl-btn-secondary[b-23duhe9sxn] {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #d2d2d7;
}

.rrl-btn-secondary:hover[b-23duhe9sxn] {
    background: #f5f5f7;
}

.rrl-btn-primary[b-23duhe9sxn] {
    background: linear-gradient(135deg, #7c5cdb 0%, #8b6ce8 100%);
    color: #ffffff;
}

.rrl-btn-primary:hover[b-23duhe9sxn] {
    background: linear-gradient(135deg, #6d4dcb 0%, #7a5cdb 100%);
}
/* /Pages/Rollouts/Components/Followup/RegenerateNoticeModal.razor.rz.scp.css */
.rgn-body[b-04r9qhcyym] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

/* Mockup §re-generate — checked row gets a purple outline + faint purple
   tint so the operator can see at a glance which type(s) are selected. */
.rgn-row[b-04r9qhcyym] {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    cursor: pointer;
    align-items: flex-start;
    transition: border-color 0.18s, background 0.18s;
}

.rgn-row:hover[b-04r9qhcyym] {
    border-color: #b8a4f0;
    background: #faf8ff;
}

.rgn-row.is-checked[b-04r9qhcyym] {
    border-color: #7c5cdb;
    background: #faf8ff;
}

.rgn-row input[type="checkbox"][b-04r9qhcyym] {
    margin-top: 2px;
    accent-color: #7c5cdb;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rgn-row-body[b-04r9qhcyym] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rgn-row-title[b-04r9qhcyym] {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rgn-row-count[b-04r9qhcyym] {
    font-weight: 500;
    color: #6e6e73;
}

.rgn-row-sub[b-04r9qhcyym] {
    font-size: 12px;
    color: #6e6e73;
}

/* Bucket dot inside the row title — same swatches used by the bucket-tab
   strip on the List Review page. */
.bucket-dot[b-04r9qhcyym] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: #94a3b8;
}

.bucket-dot.rollout[b-04r9qhcyym] { background: #3a5fa8; }
.bucket-dot.cashout[b-04r9qhcyym] { background: #1f9d6a; }

.rrl-btn[b-04r9qhcyym] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s;
}

.rrl-btn[disabled][b-04r9qhcyym] {
    opacity: 0.55;
    cursor: not-allowed;
}

.rrl-btn-secondary[b-04r9qhcyym] {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #d2d2d7;
}

.rrl-btn-secondary:hover:not([disabled])[b-04r9qhcyym] {
    background: #f5f5f7;
}

.rrl-btn-primary[b-04r9qhcyym] {
    background: linear-gradient(135deg, #7c5cdb 0%, #8b6ce8 100%);
    color: #ffffff;
}

.rrl-btn-primary:hover:not([disabled])[b-04r9qhcyym] {
    background: linear-gradient(135deg, #6d4dcb 0%, #7a5cdb 100%);
}
/* /Pages/Rollouts/Components/GenerateNoticesModal.razor.rz.scp.css */
/* Generate Notices confirmation modal — sits inside the shared .rrl-modal-dialog
   from RrlModal.razor. Local styles for the count rows, alert, and blocker list. */

.gn-lede[b-n6zzht2zyr] {
    margin: 0 0 14px;
    color: #6e6e73;
}

.gn-postnote[b-n6zzht2zyr] {
    margin: 12px 0 0;
    color: #6e6e73;
    font-size: 13px;
}

.gn-counts[b-n6zzht2zyr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
}

.gn-count[b-n6zzht2zyr] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #1d1d1f;
}

.gn-count strong[b-n6zzht2zyr] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 26px;
    text-align: right;
}

.gn-dot[b-n6zzht2zyr] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gn-dot.rollout[b-n6zzht2zyr] { background: #3a5fa8; }
.gn-dot.cashout[b-n6zzht2zyr] { background: #1f9d6a; }

.gn-alert[b-n6zzht2zyr] {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin: 12px 0 0;
}
.gn-alert svg[b-n6zzht2zyr] {
    width: 17px; height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke-width: 2;
}
/* Mockup .alert-warn (03_Notices_Generated.html lines 1187-1194): the entire
   block is amber — strong tags inherit the same colour, so "40 of 40" reads
   as bold-amber, not bold-black. Earlier the override forced strong to
   #1d1d1f which broke the visual hierarchy of the warning. */
.gn-alert-warn[b-n6zzht2zyr] {
    background: #f8eed5;
    color: #a07020;
}

.gn-blockers[b-n6zzht2zyr] {
    margin: 8px 0 0;
    padding-left: 22px;
    color: #1d1d1f;
}
.gn-blockers li[b-n6zzht2zyr] {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
}
.gn-blockers li:last-child[b-n6zzht2zyr] { margin-bottom: 0; }

/* RrlModal exposes .rrl-btn classes in markup but its CSS file has no styles for
   them — each modal owns its own button styles inside its scoped css (Blazor CSS
   isolation). Mirror the PauseRunModal / CancelRunModal pattern so Generate and
   Cancel render with the rollout purple primary instead of unstyled defaults. */
.rrl-btn[b-n6zzht2zyr] {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.rrl-btn:disabled[b-n6zzht2zyr] {
    opacity: 0.6;
    cursor: not-allowed;
}

.rrl-btn-secondary[b-n6zzht2zyr] { background: #f5f5f7; color: #1d1d1f; }
.rrl-btn-secondary:hover:not(:disabled)[b-n6zzht2zyr] { background: #ebebef; }

.rrl-btn-primary[b-n6zzht2zyr] { background: #7c5cdb; color: #ffffff; }
.rrl-btn-primary:hover:not(:disabled)[b-n6zzht2zyr] { background: #6d4dcb; }
/* /Pages/Rollouts/Components/ParticipantDetailPanel.razor.rz.scp.css */
/* Scoped CSS for ParticipantDetailPanel.razor — sliding side drawer with overlay,
   hero, 6-cell info grid, tabbed sections (Balance / Notes / Audit). */

.rrl-drawer-overlay[b-oknhcszwr3] {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 25, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 1000;
}

.rrl-drawer-overlay.is-open[b-oknhcszwr3] {
    opacity: 1;
    pointer-events: auto;
}

.rrl-drawer[b-oknhcszwr3] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 100vw;
    background: #ffffff;
    box-shadow: -8px 0 32px -8px rgba(15, 15, 25, 0.18);
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.rrl-drawer.is-open[b-oknhcszwr3] { transform: translateX(0); }

.rrl-drawer-header[b-oknhcszwr3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e7;
    flex-shrink: 0;
}

.rrl-drawer-header h3[b-oknhcszwr3] {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #1d1d1f;
}

.rrl-drawer-close[b-oknhcszwr3] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: #86868b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.rrl-drawer-close:hover[b-oknhcszwr3] {
    background: #f5f5f7;
    color: #1d1d1f;
}

.rrl-drawer-body[b-oknhcszwr3] {
    flex: 1;
    overflow-y: auto;
}

.pp-loading[b-oknhcszwr3] {
    padding: 32px 20px;
    text-align: center;
    color: #86868b;
}

/* Mockup §pp-hero — purple-tinted gradient (subtle, fades to transparent)
   instead of a solid grey block. Reads as a "soft brand-tinted header". */
.pp-hero[b-oknhcszwr3] {
    padding: 22px 22px 18px;
    background: linear-gradient(180deg, rgba(124, 92, 219, 0.06) 0%, rgba(124, 92, 219, 0) 100%);
    border-bottom: 1px solid #ececef;
}

.pp-name[b-oknhcszwr3] {
    font-size: 19px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.3px;
    line-height: 1.15;
}

.pp-meta[b-oknhcszwr3] {
    font-size: 12px;
    color: #86868b;
    /* JetBrains Mono renders '*' at centre line; sans-serif puts it at
       superscript height — keep in sync with .participant-ssn. */
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-top: 2px;
}

.pp-pills[b-oknhcszwr3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.status-mini[b-oknhcszwr3] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: #f5f5f7;
    color: #6e6e73;
}

/* Bucket → semantic-pill palette mirrors the mockup's 6 .status-mini variants
   (green/purple/warn/error/info/neutral). Rollout = green per mockup pp-hero. */
.status-mini.rollout[b-oknhcszwr3] { background: #d6ecdf; color: #0f6b46; }
.status-mini.cashout[b-oknhcszwr3] { background: #dde6f5; color: #3a5fa8; }
.status-mini.feeout[b-oknhcszwr3] { background: #f8eed5; color: #a07020; }
.status-mini.rmd[b-oknhcszwr3] { background: #f3f0ff; color: #7c5cdb; }
.status-mini.overthreshold[b-oknhcszwr3] { background: #f8dde2; color: #d24d61; }
.status-mini.active[b-oknhcszwr3] { background: #f5f5f7; color: #6e6e73; }
.status-mini.removed[b-oknhcszwr3] { background: #f5f5f7; color: #86868b; }

/* Bucket dot — drawer-header indicator. Palette mirrors the mockup's
   .bucket-dot.* (info-blue / success / warning-amber / purple / slate /
   muted / error). */
.bucket-dot[b-oknhcszwr3] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #86868b;
}

.bucket-dot.rollout[b-oknhcszwr3] { background: #4d72c6; }
.bucket-dot.cashout[b-oknhcszwr3] { background: #1f9d6a; }
.bucket-dot.feeout[b-oknhcszwr3] { background: #d18a2c; }
.bucket-dot.rmd[b-oknhcszwr3] { background: #7c5cdb; }
.bucket-dot.overthreshold[b-oknhcszwr3] { background: #4f6f8a; }
.bucket-dot.active[b-oknhcszwr3] { background: #86868b; }
.bucket-dot.removed[b-oknhcszwr3] { background: #d24d61; }

.pp-grid[b-oknhcszwr3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #ececef;
}

.pp-field[b-oknhcszwr3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-field .lbl[b-oknhcszwr3] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #86868b;
    font-weight: 600;
}

.pp-field .val[b-oknhcszwr3] {
    font-size: 14px;
    color: #1d1d1f;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.pp-field .val.strong[b-oknhcszwr3] { font-weight: 700; }

/* Tabs */
.pp-tabs[b-oknhcszwr3] {
    display: flex;
    border-bottom: 1px solid #e5e5e7;
    padding: 0 22px;
}

.pp-tabs button[b-oknhcszwr3] {
    background: none;
    border: none;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #86868b;
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
    font-family: inherit;
}

.pp-tabs button:hover[b-oknhcszwr3] { color: #1d1d1f; }

/* Mockup §pp-tabs.active — active tab label is purple, not dark. The
   underline is achieved via border-bottom-color flip to keep the spec
   minimal. */
.pp-tabs button.active[b-oknhcszwr3] {
    color: #7c5cdb;
    font-weight: 600;
}

.pp-tabs button.active[b-oknhcszwr3]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: #7c5cdb;
    border-radius: 2px;
}

.tab-count-mini[b-oknhcszwr3] {
    display: inline-block;
    background: #f8eed5;
    color: #a07020;
    padding: 0 6px;
    font-size: 10px;
    margin-left: 4px;
    border-radius: 999px;
    font-weight: 700;
}

/* Section */
.pp-section[b-oknhcszwr3] { padding: 16px 22px 24px; }

/* Balance breakdown — line items left, amounts right. Vested-balance row is
   the highlighted summary block at the end. Per mockup §pp-bal-grid: line
   items use secondary/400, amounts use primary/500. */
.pp-bal-grid[b-oknhcszwr3] {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    row-gap: 10px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.b-k[b-oknhcszwr3] {
    color: #6e6e73;
    font-weight: 400;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.b-v[b-oknhcszwr3] {
    color: #1d1d1f;
    font-weight: 500;
    line-height: 1.4;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.b-section[b-oknhcszwr3] {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ececef;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #86868b;
}
.b-section:first-child[b-oknhcszwr3] { margin-top: 0; }

.vp-badge[b-oknhcszwr3] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: #f3f0ff;
    color: #6d4dcb;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.b-divider[b-oknhcszwr3] {
    grid-column: 1 / -1;
    border-top: 1px solid #e5e5e7;
    margin: 4px 0 0;
}

/* Other Employer Contributions — collapsed disclosure → mini-table expansion. */
.oe-disclosure[b-oknhcszwr3] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-top: 4px;
    background: #fafafb;
    border: 1px solid #ececef;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 13px;
}

.oe-disclosure:hover[b-oknhcszwr3] { background: #f3f3f5; }

.oe-chevron[b-oknhcszwr3] {
    display: inline-block;
    width: 12px;
    color: #86868b;
    transition: transform 0.15s ease;
    font-size: 10px;
}
.oe-chevron.open[b-oknhcszwr3] { transform: rotate(90deg); }

.oe-title[b-oknhcszwr3] { flex: 1; font-weight: 500; color: #1d1d1f; }
.oe-sum[b-oknhcszwr3] {
    color: #6d4dcb;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.oe-table-wrap[b-oknhcszwr3] {
    grid-column: 1 / -1;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #ececef;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: #fff;
}

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

.oe-table thead th[b-oknhcszwr3] {
    position: sticky;
    top: 0;
    background: #fafafb;
    padding: 6px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #86868b;
    text-align: left;
    border-bottom: 1px solid #ececef;
}
.oe-table th.r[b-oknhcszwr3], .oe-table td.r[b-oknhcszwr3] { text-align: right; }

.oe-table tbody td[b-oknhcszwr3] {
    padding: 5px 10px;
    border-bottom: 1px solid #f5f5f7;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
}
.oe-table tbody tr:last-child td[b-oknhcszwr3] { border-bottom: none; }
.oe-table tbody tr:hover td[b-oknhcszwr3] { background: #fafafb; }

/* Vesting formula collapses to a single full-width block — otherwise its long
   string blows out the right column and starves every label in the left column. */
.formula-row[b-oknhcszwr3] {
    grid-column: 1 / -1;
    margin-top: 4px;
    font-size: 12px;
    color: #86868b;
    font-style: italic;
    line-height: 1.5;
    word-break: break-word;
}
.formula-row .formula-label[b-oknhcszwr3] {
    font-weight: 600;
    color: #6e6e73;
    margin-right: 6px;
    font-style: normal;
}

/* Mockup §pp-bal-grid .b-total — flex space-between (NOT grid), 500
   weight (NOT 700), 14px on the amount. Sits on a soft grey card at the
   bottom of the breakdown. */
.b-total[b-oknhcszwr3] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding: 12px 14px;
    background: #f5f5f7;
    border-radius: 8px;
}

.b-total .b-k[b-oknhcszwr3] { color: #1d1d1f; font-weight: 500; }
.b-total .b-v[b-oknhcszwr3] { color: #1d1d1f; font-weight: 500; font-size: 14px; }

.pp-rationale[b-oknhcszwr3] {
    margin-top: 18px;
    padding: 12px 14px;
    background: #f3f0ff;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: #6d4dcb;
}

.pp-rationale svg[b-oknhcszwr3] {
    color: #7c5cdb;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Notes */
.pp-notes-empty[b-oknhcszwr3] {
    color: #86868b;
    font-size: 13px;
    margin: 0 0 14px;
}

.pp-note[b-oknhcszwr3] {
    background: #fbfbfd;
    border: 1px solid #f0f0f2;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.pp-note-meta[b-oknhcszwr3] {
    font-size: 11px;
    color: #86868b;
    margin-bottom: 4px;
}

.pp-note-body[b-oknhcszwr3] {
    font-size: 13px;
    color: #1d1d1f;
    white-space: pre-wrap;
}

.pp-note-form[b-oknhcszwr3] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-note-form textarea[b-oknhcszwr3] {
    width: 100%;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    color: #1d1d1f;
    resize: vertical;
    min-height: 64px;
}

.pp-note-form textarea:focus[b-oknhcszwr3] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

.btn-primary[b-oknhcszwr3] {
    background: #7c5cdb;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.15s;
}

.btn-primary:hover:not(:disabled)[b-oknhcszwr3] { background: #6d4dcb; }
.btn-primary:disabled[b-oknhcszwr3] { background: #c4b8e5; cursor: not-allowed; }

/* Audit */
.audit-log[b-oknhcszwr3] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.audit-item[b-oknhcszwr3] {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f2;
}

.audit-item:last-child[b-oknhcszwr3] { border-bottom: none; }

.audit-icon[b-oknhcszwr3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: #86868b;
}

.audit-icon.initial[b-oknhcszwr3] { background: #7c5cdb; }
.audit-icon.manual[b-oknhcszwr3] { background: #d18a2c; }
.audit-icon.auto[b-oknhcszwr3] { background: #3a5fa8; }

.audit-body[b-oknhcszwr3] { flex: 1; }

.audit-title[b-oknhcszwr3] {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}

.audit-reason[b-oknhcszwr3] {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 2px;
}

.audit-meta[b-oknhcszwr3] {
    font-size: 11px;
    color: #86868b;
    margin-top: 4px;
}
/* /Pages/Rollouts/Components/ParticipantTable.razor.rz.scp.css */
/* Scoped CSS for ParticipantTable.razor — keeps table presentation owned by the
   child component (Blazor CSS isolation wouldn't propagate the parent's styles
   into this component otherwise). Tokens reference the global CSS variables that
   the parent page already declares on .rrl-page. */

.rrl-table[b-qixmdhsbry] {
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: white;
    min-width: 1080px;
    /* Side borders extend the bucket-tabs / quick-filters / selection-bar /
       summary-line card down through the table so the whole stack reads as
       one continuous container. Top border lives on the previous element
       (summary-line bottom border) and bottom is closed by the pagination. */
    border-left: 1px solid #e5e5e7;
    border-right: 1px solid #e5e5e7;
}

.rrl-table thead[b-qixmdhsbry] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%), #fbfbfd;
    border-bottom: 1px solid #e5e5e7;
}

.rrl-table th[b-qixmdhsbry] {
    color: #86868b;
    font-weight: 700;
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.rrl-table th.right[b-qixmdhsbry] { text-align: right; }
.rrl-table th.checkbox-cell[b-qixmdhsbry] { width: 36px; padding-right: 0; }

/* Header select-all checkbox — purple accent to match the row checkboxes.
   Earlier this rule was added to RolloutRunLandingPage.razor.css, but
   Blazor's scoped CSS keeps the parent's styles from reaching this
   component's shadow scope, so the rule has to live here. */
.rrl-table th.checkbox-cell input[b-qixmdhsbry] {
    width: 15px;
    height: 15px;
    accent-color: #7c5cdb;
    cursor: pointer;
}

.rrl-table tbody tr.data-row td[b-qixmdhsbry] {
    color: #1d1d1f;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f7;
    vertical-align: middle;
    transition: background 0.18s;
}

.rrl-table tbody tr.data-row:nth-child(even) td[b-qixmdhsbry] { background: rgba(15, 15, 25, 0.018); }
.rrl-table tbody tr.data-row:hover td[b-qixmdhsbry] { background: rgba(15, 15, 25, 0.025); }

.rrl-table td.right[b-qixmdhsbry] { text-align: right; }
.rrl-table td.checkbox-cell[b-qixmdhsbry] { width: 36px; padding-right: 0; }

.rrl-table td.checkbox-cell input[b-qixmdhsbry] {
    width: 15px;
    height: 15px;
    accent-color: #7c5cdb;
    cursor: pointer;
}

.rrl-table td.amount[b-qixmdhsbry] {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

.participant-link[b-qixmdhsbry] { cursor: pointer; }
.participant-link:hover .participant-name[b-qixmdhsbry] {
    color: #7c5cdb;
    text-decoration: underline;
}

.name-row[b-qixmdhsbry] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.participant-name[b-qixmdhsbry] {
    font-weight: 500;
    color: #1d1d1f;
}

.notes-btn[b-qixmdhsbry] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #7c5cdb;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.notes-btn:hover[b-qixmdhsbry] {
    background: #7c5cdb;
    color: #ffffff;
}

.notes-btn:hover .notes-dot[b-qixmdhsbry] {
    border-color: #7c5cdb;
}

.notes-btn svg[b-qixmdhsbry] {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.notes-btn .notes-dot[b-qixmdhsbry] {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d24d61;
    border: 1.5px solid #ffffff;
    box-sizing: content-box;
    pointer-events: none;
}

/* Manual move badge — placed below the SSN line on the participant cell.
   Light-blue tint with a darker-blue label and a small reroute glyph so it
   reads as a metadata chip rather than a status pill. */
.manual-badge[b-qixmdhsbry] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e2eaf7;       /* color-info-bg */
    color: #3a5fa8;            /* color-info-blue */
    border: 1px solid rgba(58, 95, 168, 0.20);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 3px;
    cursor: help;
    line-height: 1.4;
}

.manual-badge svg[b-qixmdhsbry] {
    width: 10px;
    height: 10px;
    stroke-width: 2.2;
    flex-shrink: 0;
}

/* Forces the badge to sit on its own line below the SSN regardless of any
   inline-collapse quirks of the surrounding flow. */
.manual-badge-row[b-qixmdhsbry] {
    display: block;
    margin-top: 4px;
    margin-left: 28px;
}

/* Feature #8040 — "RMD AGE" marker. Inline tag sitting next to the participant
   name (mockup pattern, alongside ROTH / AFTER-TAX), NOT a row below the SSN.
   Small uppercase warm-tan chip; distinct from the blue .manual-badge. */
.rmd-age-tag[b-qixmdhsbry] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3ead6;
    color: #8a6a2f;
    border: 1px solid rgba(138, 106, 47, 0.22);
    cursor: help;
}

/* ── Styled hover tooltip (notes icon + manual badge) ──────────
   Browser default `title=` tooltips appear after ~1s with OS chrome.
   This is the styled, instantly-visible variant used wherever the
   element carries data-tooltip + .has-tooltip (or the notes-btn). */
[data-tooltip][b-qixmdhsbry] {
    position: relative;
}

.notes-btn[data-tooltip]:hover[b-qixmdhsbry]::after,
.has-tooltip:hover[b-qixmdhsbry]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(29, 29, 31, 0.92);
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    max-width: 320px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 50;
    pointer-events: none;
}

.notes-btn[data-tooltip]:hover[b-qixmdhsbry]::before,
.has-tooltip:hover[b-qixmdhsbry]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(29, 29, 31, 0.92);
    z-index: 50;
    pointer-events: none;
}

/* Long manual-move reasons can blow past 320px; let them wrap. */
.manual-badge.has-tooltip:hover[b-qixmdhsbry]::after {
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: left;
}

.participant-ssn[b-qixmdhsbry] {
    font-size: 11px;
    color: #86868b;
    /* JetBrains Mono renders '*' at centre line; sans-serif and Courier New
       both place it at superscript height, which mangles the SSN mask. */
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

.participant-cell[b-qixmdhsbry] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vest-cell[b-qixmdhsbry] {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.vesting-input[b-qixmdhsbry] {
    width: 56px;
    padding: 3px 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    text-align: right;
    color: #1d1d1f;
    background: white;
    font-variant-numeric: tabular-nums;
    transition: all 0.15s;
}

/* Empty-vesting "needs review" indicator (wiki 962 AC 3.3.1). Visual cue
   only — backend still treats NULL as 100% for bucket assignment. Solid
   border (no dashed/dotted), amber-tinted background, amber border + text
   so the row reads as "missing data, please confirm." */
.vesting-input.is-empty[b-qixmdhsbry] {
    background: #f8eed5;             /* color-warning-bg */
    border-color: rgba(209, 138, 44, 0.35); /* color-warning-amber @ 35% */
    color: #a07020;                  /* color-warning (darker amber for the placeholder) */
}

.vesting-input.is-empty[b-qixmdhsbry]::placeholder {
    color: #d18a2c;                  /* color-warning-amber */
    opacity: 1;
}

.vesting-input.is-empty:hover[b-qixmdhsbry] {
    border-color: rgba(209, 138, 44, 0.55);
}

/* Disabled state — shown when the participant's rollout configuration is in
   "Total" / Scenario 1 mode (ProfitSharingBalance / EmployerMatchBalance is
   null). PS%/EM% have no meaning without their balance partners, so the input
   is locked and rendered as a muted neutral chip. */
.vesting-input.is-disabled[b-qixmdhsbry],
.vesting-input:disabled[b-qixmdhsbry] {
    background: #f5f5f7;
    border-color: #e5e5e7;
    color: #c7c7cc;
    cursor: not-allowed;
    pointer-events: none;
}

.vesting-input.is-disabled[b-qixmdhsbry]::placeholder,
.vesting-input:disabled[b-qixmdhsbry]::placeholder {
    color: #c7c7cc;
    opacity: 1;
}

.vesting-input:hover[b-qixmdhsbry] { border-color: #c7c7c7; }

.vesting-input:focus[b-qixmdhsbry] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

.percent-sign[b-qixmdhsbry] {
    color: #86868b;
    font-size: 11px;
    margin-left: 3px;
}

.vesting-na[b-qixmdhsbry] {
    color: #86868b;
    font-size: 11px;
}

/* Manually-set rollout term date — tinted with the same warning amber used
   for empty vesting cells so reviewers can see at a glance that the date was
   entered on the rollout worksheet rather than coming from the census /
   recordkeeper. The pencil glyph keeps the "edited here" affordance. */
.term-manual[b-qixmdhsbry] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-warning-amber, #d18a2c);
    font-weight: 600;
    cursor: default;
}

.term-manual svg[b-qixmdhsbry] {
    width: 11px;
    height: 11px;
    color: inherit;
}

.set-term-btn[b-qixmdhsbry] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px dashed #c4b8e5;
    color: #7c5cdb;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}

.set-term-btn:hover[b-qixmdhsbry] {
    background: #f3f0ff;
    border-style: solid;
}

.set-term-btn svg[b-qixmdhsbry] {
    width: 11px;
    height: 11px;
}

.rrl-table td.actions-cell[b-qixmdhsbry] {
    width: auto;
    padding: 12px 16px;
    text-align: center;
}

.kebab-wrap[b-qixmdhsbry] {
    position: relative;
    display: inline-block;
}

.action-kebab[b-qixmdhsbry] {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 6px;
    color: #86868b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: all 0.15s;
}

.action-kebab:hover[b-qixmdhsbry],
.action-kebab.is-open[b-qixmdhsbry] {
    background: #f5f5f7;
    color: #1d1d1f;
}

.action-kebab svg[b-qixmdhsbry] {
    width: 16px;
    height: 16px;
}

.row-popover-overlay[b-qixmdhsbry] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 55;
}

.row-popover[b-qixmdhsbry] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);
    padding: 4px 0;
    z-index: 60;
    text-align: left;
    animation: rp-pop-b-qixmdhsbry 0.12s ease;
    overflow: visible;
    max-height: none;
}

.row-popover.flip-up[b-qixmdhsbry] {
    top: auto;
    bottom: calc(100% + 4px);
}

@keyframes rp-pop-b-qixmdhsbry {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

.rp-section-label[b-qixmdhsbry] {
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #86868b;
}

.rp-item[b-qixmdhsbry] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.rp-item:hover:not(:disabled)[b-qixmdhsbry] { background: #f5f5f7; }

/* Disabled state — shown for the row's own current bucket so the user sees
   where the row is now and can't no-op-move it to itself. Same pattern as
   the bulk "Move to ▾" dropdown. */
.rp-item:disabled[b-qixmdhsbry] {
    color: #86868b;
    cursor: not-allowed;
    background: transparent;
}

/* "current" tag pushed to the right edge of the disabled bucket option. */
.rp-current[b-qixmdhsbry] {
    margin-left: auto;
    color: #86868b;
    font-size: 11px;
    font-weight: 500;
}

.rp-item svg[b-qixmdhsbry] {
    width: 14px;
    height: 14px;
    color: #6e6e73;
}

.rp-divider[b-qixmdhsbry] {
    height: 1px;
    background: #f0f0f2;
    margin: 4px 0;
}

.rp-dot[b-qixmdhsbry] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #86868b;
}

.rp-dot.rollout[b-qixmdhsbry]       { background: #7c5cdb; }
.rp-dot.cashout[b-qixmdhsbry]       { background: #3a5fa8; }
.rp-dot.feeout[b-qixmdhsbry]        { background: #d18a2c; }
.rp-dot.rmd[b-qixmdhsbry]           { background: #1f9d6a; }
.rp-dot.overthreshold[b-qixmdhsbry] { background: #d24d61; }
.rp-dot.active[b-qixmdhsbry]        { background: #1f9d6a; }
.rp-dot.removed[b-qixmdhsbry]       { background: #86868b; }

/* Recalculate button on Removed-bucket rows (wiki 985 §2.5 / §4.5).
   Compact pill with refresh icon — visually quieter than the primary
   Move/Generate actions, since it's a per-row recovery action that
   restores the system bucket. */
.recalc-btn[b-qixmdhsbry] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    color: #7c5cdb;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.recalc-btn:hover[b-qixmdhsbry] {
    background: #f3f0ff;
    border-color: #7c5cdb;
    color: #6d4dcb;
}

.recalc-btn:active[b-qixmdhsbry] {
    background: #ece5ff;
    color: #5d3dbb;
}

.recalc-btn svg[b-qixmdhsbry] {
    flex-shrink: 0;
}

/* Bucket-token for the "Originally" column on Removed rows — same dot +
   label pattern used in the BucketMoveModal "from → to" transition row. */
.bucket-token[b-qixmdhsbry] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #1d1d1f;
}

.bucket-token .bucket-dot[b-qixmdhsbry] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #86868b;
}

.bucket-token.rollout       .bucket-dot[b-qixmdhsbry] { background: #7c5cdb; }
.bucket-token.cashout       .bucket-dot[b-qixmdhsbry] { background: #3a5fa8; }
.bucket-token.feeout        .bucket-dot[b-qixmdhsbry] { background: #d18a2c; }
.bucket-token.rmd           .bucket-dot[b-qixmdhsbry] { background: #1f9d6a; }
.bucket-token.overthreshold .bucket-dot[b-qixmdhsbry] { background: #d24d61; }
.bucket-token.active        .bucket-dot[b-qixmdhsbry] { background: #1f9d6a; }
.bucket-token.removed       .bucket-dot[b-qixmdhsbry] { background: #86868b; }
/* /Pages/Rollouts/Components/PauseRunModal.razor.rz.scp.css */
.pause-summary[b-idywv5dvqh] {
    margin: 0 0 14px;
    color: #6e6e73;
    font-size: 13px;
    line-height: 1.5;
}

/* Mockup .form-row label (03_Notices_Generated.html line 1831 / same block
   on 02_buckets.html): 11px / weight 600 / 0.5px letter-spacing / muted
   #86868b / 5px gap, inherited Inter — NOT a mono font. Mono at semi-bold
   reads visually heavier than Inter at the same weight, which is why the
   earlier styling looked bold in the screenshot. */
.pause-label[b-idywv5dvqh] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #86868b;
    margin-bottom: 5px;
}

/* Mockup .form-row input[type=text] (03_Notices_Generated.html line 1832):
   padding 8px 12px, border 1px #d2d2d7, radius --r-md (8px), 14px font. */
.rrl-reason-input[b-idywv5dvqh] {
    display: block;
    width: 100%;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #1d1d1f;
    background: white;
    box-sizing: border-box;
}

.rrl-reason-input[b-idywv5dvqh]::placeholder {
    color: #86868b;
}

.rrl-reason-input:focus[b-idywv5dvqh] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

/* Buttons match the mockup .btn-primary / .btn-outline-secondary tokens
   (03_Notices_Generated.html lines 968-1008 / 02_buckets.html same block):
   outlined-white secondary + purple gradient primary with inset highlight +
   drop shadow + translateY hover lift. Flat colors before this read as
   unstyled compared to the mockup. */
.rrl-btn[b-idywv5dvqh] {
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}

.rrl-btn-secondary[b-idywv5dvqh] {
    background: white;
    color: #6e6e73;
    border: 1px solid #d2d2d7;
    font-weight: 500;
}
.rrl-btn-secondary:hover:not(:disabled)[b-idywv5dvqh] {
    color: #1d1d1f;
    background: #f5f5f7;
    border-color: #c7c7c7;
}

.rrl-btn-primary[b-idywv5dvqh] {
    color: white;
    background: linear-gradient(180deg, #8b6ce8 0%, #5b3fc7 100%) padding-box,
                linear-gradient(180deg, #6d4dcb 0%, #3d1d9c 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
        0 4px 10px -2px rgba(94, 68, 200, 0.40);
    font-weight: 600;
}
.rrl-btn-primary:hover:not(:disabled)[b-idywv5dvqh] {
    color: white;
    background: linear-gradient(180deg, #9879ec 0%, #6b50d5 100%) padding-box,
                linear-gradient(180deg, #7c5cdb 0%, #4823b4 100%) border-box;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -2px rgba(94, 68, 200, 0.45);
}
.rrl-btn-primary:disabled[b-idywv5dvqh] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Pages/Rollouts/Components/PlanActivityModal.razor.rz.scp.css */
/* Modal shell styled in non-isolated rollouts-modal.css — ModalDialog portals chrome out, so ::deep can't reach it. */

.pa-modal-title[b-ensvulpz3y] {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.35;
    margin: 0;
}

.pa-modal-body[b-ensvulpz3y] {
    padding: 4px 0;
}

.pa-modal-subhead[b-ensvulpz3y] {
    font-size: 13px;
    color: #6e6e73;
    margin-bottom: 14px;
    line-height: 1.5;
}

.pa-modal-subhead strong[b-ensvulpz3y] {
    color: #1d1d1f;
    font-weight: 600;
}

.pa-loading[b-ensvulpz3y] {
    display: flex;
    align-items: center;
    padding: 16px 0;
    color: #86868b;
    font-size: 13px;
}

.pa-empty[b-ensvulpz3y] {
    padding: 16px 0;
    color: #86868b;
    font-size: 13px;
    font-style: italic;
}

.pa-activity-list[b-ensvulpz3y] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pa-activity-list li[b-ensvulpz3y] {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #f5f5f7;
}

.pa-activity-list li:first-child[b-ensvulpz3y] {
    border-top: 0;
    padding-top: 0;
}

.pa-dot[b-ensvulpz3y] {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 6px;
    background: #86868b;
}

.pa-dot.system[b-ensvulpz3y] {
    background: #d24d61;
}

.pa-body[b-ensvulpz3y] {
    flex: 1;
}

.pa-transition[b-ensvulpz3y] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}

.pa-arrow[b-ensvulpz3y] {
    color: #86868b;
}

.pa-meta[b-ensvulpz3y] {
    font-size: 12px;
    color: #86868b;
    margin-top: 4px;
}

.pa-reason[b-ensvulpz3y] {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
    font-style: italic;
}

.pa-status-mini[b-ensvulpz3y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    background: #f5f5f7;
    color: #6e6e73;
}

.pa-status-mini.green[b-ensvulpz3y]   { background: #d6ecdf; color: #0f6b46; }
.pa-status-mini.warn[b-ensvulpz3y]    { background: #f8eed5; color: #a07020; }
.pa-status-mini.error[b-ensvulpz3y]   { background: #f8dde2; color: #d24d61; }
.pa-status-mini.info[b-ensvulpz3y]    { background: #dde6f5; color: #3a5fa8; }
.pa-status-mini.purple[b-ensvulpz3y]  { background: #f3f0ff; color: #7c5cdb; }
.pa-status-mini.neutral[b-ensvulpz3y] { background: #f5f5f7; color: #6e6e73; }
/* /Pages/Rollouts/Components/RemoveFromCycleModal.razor.rz.scp.css */
/* Modal shell styled in non-isolated rollouts-modal.css — ModalDialog portals chrome out, so ::deep can't reach it. */

.rfc-modal-title[b-8plrz63f3c] {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.35;
    margin: 0;
}

.rfc-modal-body[b-8plrz63f3c] {
    padding: 4px 0;
}

.rfc-alert-warn[b-8plrz63f3c] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f8eed5;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #a07020;
    line-height: 1.55;
}

.rfc-alert-warn svg[b-8plrz63f3c] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: #a07020;
    margin-top: 1px;
}

.rfc-alert-warn strong[b-8plrz63f3c] {
    color: #a07020;
    font-weight: 700;
}

.rfc-modal-skipped-pre[b-8plrz63f3c] {
    font-size: 12px;
    color: #6e6e73;
    margin: -4px 0 12px;
    padding-left: 2px;
}

.rfc-modal-label[b-8plrz63f3c] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.rfc-modal-reason[b-8plrz63f3c] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: #1d1d1f;
    background: white;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
}

.rfc-modal-reason:focus[b-8plrz63f3c] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

.rfc-modal-actions[b-8plrz63f3c] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* Disabled primary reads as muted gray, not a faded primary. */
.rfc-modal-actions .btn-primary:disabled[b-8plrz63f3c],
.rfc-modal-actions .btn-primary[disabled][b-8plrz63f3c] {
    background-color: #e5e5e7;
    border-color: #e5e5e7;
    color: #86868b;
    opacity: 1;
}
/* /Pages/Rollouts/Components/RrlModal.razor.rz.scp.css */
.rrl-modal-overlay[b-jud2geirhv] {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 25, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: rrl-fade-b-jud2geirhv 0.15s ease;
}

@keyframes rrl-fade-b-jud2geirhv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rrl-modal-dialog[b-jud2geirhv] {
    /* Mockup tokens (sprint-1 02_buckets.html / 03_Notices_Generated.html):
         background = white, border-radius = --r-xl (16px), no border,
         --shadow-modal. Previously dialog used a tinted grey background
         (#f7f7fa) + 12px radius which read as a panel, not a modal. */
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 24px 64px -12px rgba(15, 15, 25, 0.25), 0 8px 16px -8px rgba(15, 15, 25, 0.12);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rrl-pop-b-jud2geirhv 0.18s cubic-bezier(0.32, 0.72, 0, 1);
    /* Fonts are explicit here so the modal renders identically regardless of
       the parent page's font cascade (the bucket page lacks the .ng-page
       scope that the Notices Generated page sets up). */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1d1d1f;
}

@keyframes rrl-pop-b-jud2geirhv {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.rrl-modal-header[b-jud2geirhv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Mockup: symmetric 18px 22px, border-bottom handles visual separation. */
    padding: 18px 22px;
    border-bottom: 1px solid #f5f5f7;
}

.rrl-modal-header h3[b-jud2geirhv] {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    /* Display font for modal titles, matching the mockup's h-tag treatment. */
    font-family: 'Inter Tight', 'Inter', sans-serif;
    letter-spacing: -0.1px;
}

/* Danger modal: the WARNING BLOCK + confirm button carry the red signal —
   the title stays default dark per the mockup. Earlier we tinted h3 red,
   which fought the warning box for attention. Mockup .modal-title has no
   color override, so we don't either. */

.rrl-modal-close[b-jud2geirhv] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: #86868b;
    display: inline-flex;
    transition: background 0.15s;
}

.rrl-modal-close:hover[b-jud2geirhv] {
    background: #f5f5f7;
    color: #1d1d1f;
}

.rrl-modal-body[b-jud2geirhv] {
    padding: 18px 22px;
    overflow-y: auto;
    color: #1d1d1f;
    font-size: 13px;
}

.rrl-modal-footer[b-jud2geirhv] {
    /* Mockup: 12px 22px — tighter than header, action bar reads compact. */
    padding: 12px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #f5f5f7;
}
/* /Pages/Rollouts/Components/RunWorkflowIndicator.razor.rz.scp.css */
.pipeline[b-n8odl5k9tn] {
    background: linear-gradient(180deg, #eeeef2 0%, #ffffff 70%);
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    /* Mockup --shadow-card pattern: tight 1px ambient + soft 24px hover
       lift. Single-layer 1px 2px rgba(..,0.04) reads too flat against the
       light-gray page background. */
    box-shadow: 0 1px 2px rgba(15, 15, 25, 0.06), 0 8px 24px -8px rgba(15, 15, 25, 0.10);
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
}

.pipeline-label[b-n8odl5k9tn] {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #86868b);
    padding: 12px 22px 6px;
}

/* Mockup 02b_buckets_cancelled.html lines 337-341 — hairline at the top
   of .pipeline-label gives the meta strip's drop-shadow a "lip" to land
   against, making the meta + workflow layering read as ONE card.
   This rule MUST live in RunWorkflowIndicator scope (not the landing
   page's scope) because Blazor CSS isolation tags the .pipeline-label
   element with this component's scope id. */
.pipeline > .pipeline-label[b-n8odl5k9tn] {
    box-shadow: inset 0 1px 0 #e5e5e7;
}

.pipeline-scroll[b-n8odl5k9tn] {
    display: flex;
    /* Mockup uses align-items: stretch + flex:1 connector to align the
       connector with the dot center via its own margin-top:14px. The previous
       align-items: center + negative-margin connector hack drifted as labels
       wrapped. */
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    /* Mockup 02b_buckets_cancelled.html line 1779-1785 sets pipeline-scroll
       padding to 4px 0 14px (zero horizontal) and adds 14px of net inset via
       phase-group {padding:0 6px} + phase-steps {padding:0 8px} wrappers.
       Since we don't ship the phase-group wrapper for the 2-step cancelled
       view, fold the wrappers' net 14px inset directly onto pipeline-scroll
       — same visual result, one fewer DOM level. */
    padding: 4px 14px 14px;
    scrollbar-width: thin;
}

.pipeline-scroll[b-n8odl5k9tn]::-webkit-scrollbar { height: 6px; }
.pipeline-scroll[b-n8odl5k9tn]::-webkit-scrollbar-thumb { background: rgba(15, 15, 25, 0.18); border-radius: 3px; }
.pipeline-scroll[b-n8odl5k9tn]::-webkit-scrollbar-track { background: transparent; }

.stepper-step[b-n8odl5k9tn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Mockup: 90px (not 110). Wider min-width forces the connector to span
       more space, which mine compensated for with negative margins; matching
       the mockup means the connector can flex naturally between siblings. */
    min-width: 90px;
    padding: 0 6px;
    flex-shrink: 0;
    /* No `gap` — children use explicit per-element margins (.step-label
       margin-top:8px, .step-sub margin-top:2px) so the sub-label sits tight
       against the label and hover-scale on the dot doesn't shove the label
       around. Matches mockup .step-label / .step-sublabel rules. */
}

.step-dot[b-n8odl5k9tn] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #d2d2d7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    position: relative;
    /* Stack above the .step-connector so the connector line passes BEHIND the
       circle, matching mockup 02b_buckets_cancelled.html z-index pattern. */
    z-index: 1;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover lift on both steps — subtle scale + expanding ring keyed off the
   step's state colour. Cursor stays default (forced below) so the affordance
   doesn't read as a link. */
.step-dot:hover[b-n8odl5k9tn] {
    transform: scale(1.08);
}

.step-dot[data-state="future"]:hover[b-n8odl5k9tn] {
    border-color: #b8b8c0;
    box-shadow: 0 0 0 4px rgba(124, 92, 219, 0.08);
}

.step-dot[data-state="active"]:hover[b-n8odl5k9tn] {
    box-shadow: 0 0 0 7px rgba(124, 92, 219, 0.22);
}

.step-dot[data-state="complete"]:hover[b-n8odl5k9tn] {
    box-shadow: 0 0 0 5px rgba(124, 92, 219, 0.18);
}

.step-dot[data-state="paused"]:hover[b-n8odl5k9tn] {
    box-shadow: 0 0 0 5px rgba(209, 138, 44, 0.20);
}

/* Match NoticesGenerated.razor.css — pointer cursor on every stepper
   step so both pages feel consistent. List Review here is not actually
   navigable (clicking is a no-op since we're already on that page), but
   the cursor matches Notices Generated's affordance. */
.stepper-step[b-n8odl5k9tn],
.stepper-step *[b-n8odl5k9tn] {
    cursor: pointer;
}

/* Wiki 990 (user direction 2026-06-03) — chips whose data gate is closed
   (e.g. Re-evaluation while still Awaiting) read as unreachable: dimmed,
   default cursor, no hover lift. Active + error chips excluded so the
   "current step in trouble" treatment reads at full saturation. */
.stepper-step:not([data-clickable]):not([data-state="active"]):not([data-state="error"])[b-n8odl5k9tn] {
    opacity: 0.45;
}

.stepper-step:not([data-clickable]):not([data-state="active"]):not([data-state="error"])[b-n8odl5k9tn],
.stepper-step:not([data-clickable]):not([data-state="active"]):not([data-state="error"]) *[b-n8odl5k9tn] {
    cursor: not-allowed;
}

.stepper-step:not([data-clickable]):not([data-state="active"]):not([data-state="error"]) .step-dot:hover[b-n8odl5k9tn] {
    transform: none;
    box-shadow: none;
}

.step-dot[b-n8odl5k9tn]::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d2d2d7;
    transition: background 0.25s;
}

/* Active (in-progress): solid purple circle, white inner dot, 5px translucent ring. */
.step-dot[data-state="active"][b-n8odl5k9tn] {
    background: #7c5cdb;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 5px rgba(124, 92, 219, 0.16);
}

.step-dot[data-state="active"][b-n8odl5k9tn]::after { background: #ffffff; }

/* Complete: solid green (mockup), white check svg inside. */
.step-dot[data-state="complete"][b-n8odl5k9tn] {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.step-dot[data-state="complete"][b-n8odl5k9tn]::after { display: none; }

/* Paused: amber. */
.step-dot[data-state="paused"][b-n8odl5k9tn] {
    background: #f8eed5;
    border-color: #d18a2c;
}

.step-dot[data-state="paused"][b-n8odl5k9tn]::after { background: #d18a2c; }

/* Wiki 989 §6.3 — Cancelled stepper marker. Muted dot, muted label, no
   animation. Mockup 02b_buckets_cancelled.html lines 482-503 — the
   "Cancelled" pseudo-chip below the label is the visual signal that
   distinguishes this from a plain "future" step. */
.step-dot[data-state="cancelled"][b-n8odl5k9tn] {
    background: #f5f5f7;
    border-color: #c8c8d0;
}
.step-dot[data-state="cancelled"][b-n8odl5k9tn]::after { background: #86868b; }

/* Wiki 990 — overdue / error state dot. Solid red fill with white "!" glyph
   and a soft red ring matching the active chip's purple ring pattern. */
.step-dot[data-state="error"][b-n8odl5k9tn] {
    background: #d24d61;
    border-color: #d24d61;
    color: #ffffff;
    box-shadow: 0 0 0 5px rgba(210, 77, 97, 0.16);
}
.step-dot[data-state="error"][b-n8odl5k9tn]::after { display: none; }
.step-dot[data-state="error"]:hover[b-n8odl5k9tn] {
    transform: scale(1.08);
}

/* Future / default already handled by base rule. */

.step-label[b-n8odl5k9tn] {
    /* margin-top here (not stepper-step gap) so hover scale on the dot
       doesn't push the label around. Matches mockup .step-label. */
    margin-top: 8px;
    font-size: 12px;
    color: #6e6e73;
    white-space: nowrap;
    text-align: center;
}

.stepper-step[data-state="complete"] .step-label[b-n8odl5k9tn] { color: #1d1d1f; font-weight: 600; }
.stepper-step[data-state="active"] .step-label[b-n8odl5k9tn] { color: #7c5cdb; font-weight: 700; }
.stepper-step[data-state="paused"] .step-label[b-n8odl5k9tn] { color: #a07020; font-weight: 600; }
.stepper-step[data-state="cancelled"] .step-label[b-n8odl5k9tn] { color: #86868b; font-weight: 500; }
.stepper-step[data-state="error"] .step-label[b-n8odl5k9tn] { color: #d24d61; font-weight: 700; }

/* Wiki 989 §6.3 — red pseudo-chip directly under the cancelled step's label.
   Pixel match to mockup 02b_buckets_cancelled.html lines 493-503. */
.stepper-step[data-state="cancelled"][b-n8odl5k9tn] {
    position: relative;
}
.stepper-step[data-state="cancelled"][b-n8odl5k9tn]::after {
    content: 'Cancelled';
    display: block;
    /* width: fit-content keeps the pill snug to its text in flex containers
       where align-items: center would otherwise let the block stretch to the
       column's min-width. */
    width: fit-content;
    margin-top: 4px;
    padding: 1px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #f8dde2;
    color: #d24d61;
    border-radius: 999px;
    align-self: center;
}

/* Wiki 990 mockup — sub-label under the active chip (e.g. "awaiting approval").
   Only rendered when CurrentStepSub is supplied AND the chip is active.
   Sits tight against the label (2px gap) per mockup .step-sublabel rules. */
.step-sub[b-n8odl5k9tn] {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 500;
    color: #86868b;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.step-connector[b-n8odl5k9tn] {
    /* Mockup uses an inline flex connector that grows between two stepper
       columns and aligns to the dot center via its own margin-top:14px
       (= half the 28px dot height). The earlier `margin: -22px -10px 0`
       hack pulled a fixed-width line up out of layout, which drifted
       whenever labels wrapped. Flex layout fixes that. */
    flex: 1;
    min-width: 16px;
    max-width: 28px;
    height: 1.5px;
    background: #c8c8d0;
    margin-top: 14px;
}

.step-connector[data-state="complete"][b-n8odl5k9tn] { background: #16a34a; }

/* Notices Generated step becomes clickable once notices exist, but the
   visual stays identical to the non-clickable state per mockup direction —
   no underline, no hover background, no purple tint, no pointer cursor.
   Only the keyboard focus ring is kept for accessibility. */
.stepper-step[data-clickable="true"]:focus-visible[b-n8odl5k9tn] {
    outline: 2px solid #7c5cdb;
    outline-offset: 2px;
    border-radius: 6px;
}
/* /Pages/Rollouts/Components/SetTermDateModal.razor.rz.scp.css */
.td-summary[b-fqwmuf9syw] {
    margin: 0 0 12px;
    color: #6e6e73;
    font-size: 13px;
    line-height: 1.5;
}

.td-warning[b-fqwmuf9syw] {
    display: flex;
    gap: 10px;
    background: #f8eed5;
    color: #6f4f12;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.5;
}

.td-warning svg[b-fqwmuf9syw] {
    color: #d18a2c;
    flex-shrink: 0;
    margin-top: 2px;
}

.td-row[b-fqwmuf9syw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.td-row.last[b-fqwmuf9syw] { margin-bottom: 0; }

.td-row label[b-fqwmuf9syw] {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
}

.td-row input[type="date"][b-fqwmuf9syw],
.td-row select[b-fqwmuf9syw],
.td-row textarea[b-fqwmuf9syw] {
    width: 100%;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    color: #1d1d1f;
    background: #ffffff;
}

.td-row input[type="date"]:focus[b-fqwmuf9syw],
.td-row select:focus[b-fqwmuf9syw],
.td-row textarea:focus[b-fqwmuf9syw] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

.td-row textarea[b-fqwmuf9syw] { resize: vertical; }

.td-error[b-fqwmuf9syw] {
    color: #d24d61;
    font-size: 12px;
    margin: 0 0 8px;
}

.td-target[b-fqwmuf9syw] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f2;
}

.td-target-label[b-fqwmuf9syw] {
    font-size: 12px;
    color: #86868b;
    margin-bottom: 6px;
}

.td-target-pill[b-fqwmuf9syw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f3f0ff;
    color: #7c5cdb;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.bucket-dot[b-fqwmuf9syw] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: #86868b;
    flex-shrink: 0;
}

.bucket-dot.rollout[b-fqwmuf9syw] { background: #4d72c6; }
.bucket-dot.cashout[b-fqwmuf9syw] { background: #1f9d6a; }
.bucket-dot.feeout[b-fqwmuf9syw] { background: #d18a2c; }
.bucket-dot.rmd[b-fqwmuf9syw] { background: #7c5cdb; }
.bucket-dot.overthreshold[b-fqwmuf9syw] { background: #4f6f8a; }
.bucket-dot.active[b-fqwmuf9syw] { background: #86868b; }
.bucket-dot.removed[b-fqwmuf9syw] { background: #d24d61; }

.rrl-btn[b-fqwmuf9syw] {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.rrl-btn-secondary[b-fqwmuf9syw] { background: #f5f5f7; color: #1d1d1f; }
.rrl-btn-secondary:hover[b-fqwmuf9syw] { background: #ebebef; }

.rrl-btn-primary[b-fqwmuf9syw] { background: #7c5cdb; color: #ffffff; }
.rrl-btn-primary:hover[b-fqwmuf9syw] { background: #6d4dcb; }
/* /Pages/Rollouts/Components/StartNewRunModal.razor.rz.scp.css */
.snr-lede[b-9780ltv9qm] {
    margin: 0 0 12px;
    color: #1d1d1f;
    font-size: 14px;
    line-height: 1.5;
}
.snr-lede strong[b-9780ltv9qm] {
    color: #1d1d1f;
    font-weight: 600;
}

.snr-census-warning[b-9780ltv9qm] {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
}
.snr-census-warning strong[b-9780ltv9qm] {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
    color: #92400e;
}

.snr-summary[b-9780ltv9qm] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    padding: 12px 14px;
    background: #f5f5f7;
    border-radius: 8px;
    margin: 0 0 12px;
    font-size: 13px;
}
.snr-summary-row[b-9780ltv9qm] {
    display: contents;
}
.snr-summary-key[b-9780ltv9qm] {
    color: #6e6e73;
}
.snr-summary-val[b-9780ltv9qm] {
    color: #1d1d1f;
}
.snr-summary-reason[b-9780ltv9qm] {
    /* Reason can be long; allow wrap. */
    white-space: normal;
    word-break: break-word;
}
.snr-prev-run-id[b-9780ltv9qm] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
}
.snr-prev-sep[b-9780ltv9qm] {
    margin: 0 4px;
    color: #86868b;
}
.snr-mini-pill[b-9780ltv9qm] {
    display: inline-block;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(0, 0, 0, 0.06);
    color: #6e6e73;
    border-radius: 999px;
    vertical-align: middle;
}

.snr-label[b-9780ltv9qm] {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}
.snr-label-hint[b-9780ltv9qm] {
    font-weight: 400;
    color: #86868b;
    margin-left: 4px;
}

.snr-reason-input[b-9780ltv9qm] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #1d1d1f;
    background: white;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    resize: vertical;
    min-height: 72px;
}
.snr-reason-input[b-9780ltv9qm]::placeholder {
    color: #86868b;
}
.snr-reason-input:focus[b-9780ltv9qm] {
    outline: none;
    border-color: #7c5cdb;
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.18);
}

/* RrlModal ships no .rrl-btn styles; each modal owns them in its scoped css (CSS isolation). */
.rrl-btn[b-9780ltv9qm] {
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}

.rrl-btn-secondary[b-9780ltv9qm] {
    background: white;
    color: #6e6e73;
    border: 1px solid #d2d2d7;
    font-weight: 500;
}
.rrl-btn-secondary:hover:not(:disabled)[b-9780ltv9qm] {
    color: #1d1d1f;
    background: #f5f5f7;
    border-color: #c7c7c7;
}

.rrl-btn-primary[b-9780ltv9qm] {
    color: white;
    background: linear-gradient(180deg, #8b6ce8 0%, #5b3fc7 100%) padding-box,
                linear-gradient(180deg, #6d4dcb 0%, #3d1d9c 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
        0 4px 10px -2px rgba(94, 68, 200, 0.40);
    font-weight: 600;
}
.rrl-btn-primary:hover:not(:disabled)[b-9780ltv9qm] {
    color: white;
    background: linear-gradient(180deg, #9879ec 0%, #6b50d5 100%) padding-box,
                linear-gradient(180deg, #7c5cdb 0%, #4823b4 100%) border-box;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -2px rgba(94, 68, 200, 0.45);
}
.rrl-btn-primary:disabled[b-9780ltv9qm] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Pages/Rollouts/NoticesGenerated.razor.rz.scp.css */
/* Pixel-match port of sprint-1/03_Notices_Generated.html scoped under .ng-page.
   Variables and selectors mirror the prototype 1:1. Fonts (Inter / Inter Tight /
   JetBrains Mono) are already loaded by wwwroot/index.html. */

.ng-page[b-5w424gfn8i] {
    --ng-color-purple-primary: #7c5cdb;
    --ng-color-purple-hover: #6d4dcb;
    --ng-color-purple-light: #8b6ce8;
    --ng-color-purple-bg: #f3f0ff;
    --ng-color-purple-border: #ede9fe;
    --ng-color-mark-navy: #2C2A76;
    --ng-color-mark-blue: #3C9AC4;

    --ng-color-text-primary: #1d1d1f;
    --ng-color-text-secondary: #6e6e73;
    --ng-color-text-muted: #86868b;
    --ng-color-text-breadcrumb: #64748b;
    --ng-color-text-current: #334155;
    --ng-color-text-separator: #94a3b8;

    --ng-color-bg-page: #f8fafc;
    --ng-color-bg-page-alt: #f5f5f7;
    --ng-color-bg-surface: #ffffff;

    --ng-color-border-primary: #e5e5e7;
    --ng-color-border-input: #d2d2d7;
    --ng-color-border-input-h: #c7c7c7;
    --ng-color-border-row: #f5f5f7;

    --ng-color-success: #1f9d6a;
    --ng-color-success-bg: #e1f1e9;
    --ng-color-success-text: #0f6b46;
    --ng-color-success-light: #d6ecdf;
    --ng-color-warning: #a07020;
    --ng-color-warning-bg: #f8eed5;
    --ng-color-warning-amber: #d18a2c;
    --ng-color-error: #d24d61;
    --ng-color-error-bg: #f8dde2;
    --ng-color-info: #4d72c6;
    --ng-color-info-bg: #e2eaf7;
    --ng-color-info-blue: #3a5fa8;
    --ng-color-info-blue-bg: #dde6f5;

    --ng-gradient-primary: linear-gradient(135deg, #7c5cdb 0%, #8b6ce8 100%);

    --ng-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ng-font-display: 'Inter Tight', 'Inter', sans-serif;
    --ng-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ng-fs-14: 14px;
    --ng-fs-13: 13px;
    --ng-fs-12: 12px;
    --ng-fs-11: 11px;

    --ng-sp-1: 4px; --ng-sp-2: 8px; --ng-sp-3: 12px;
    --ng-sp-4: 16px; --ng-sp-5: 20px; --ng-sp-6: 24px;

    --ng-r-sm: 6px;
    --ng-r-md: 8px;
    --ng-r-lg: 12px;
    --ng-r-xl: 16px;
    --ng-r-pill: 999px;

    --ng-shadow-card: 0 1px 2px rgba(15, 15, 25, 0.04);
    --ng-shadow-modal: 0 24px 64px -12px rgba(15, 15, 25, 0.25), 0 8px 16px -8px rgba(15, 15, 25, 0.12);
    --ng-shadow-popover: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);

    font-family: var(--ng-font-sans);
    color: var(--ng-color-text-primary);
    background: transparent;
    padding: 22px 28px;
    /* Full-width like the mockup — no cap/auto-centering (a 1480 cap left empty gutters on wide/zoomed-out viewports). Negative margins cancel the .content 8px left pad + container-fluid 12px gutters. */
    margin: -12px -12px 0 -20px;
    min-height: calc(100vh - 80px);
    box-sizing: border-box;
    font-size: var(--ng-fs-14);
    line-height: 1.55;
}

.ng-page h1[b-5w424gfn8i],
.ng-page h2[b-5w424gfn8i],
.ng-page h3[b-5w424gfn8i],
.ng-page h4[b-5w424gfn8i] {
    font-family: var(--ng-font-display);
    margin: 0;
}

.ng-page td[b-5w424gfn8i],
.ng-page th[b-5w424gfn8i] {
    font-variant-numeric: tabular-nums;
}

.ng-page a[b-5w424gfn8i] {
    color: var(--ng-color-purple-primary);
    text-decoration: none;
}
.ng-page a:hover[b-5w424gfn8i] { text-decoration: underline; }

.ng-page button[b-5w424gfn8i] { font-family: inherit; }

/* Focus ring is for keyboard navigation of *interactive* elements only.
   The h1 receives programmatic focus from Blazor's <FocusOnNavigate Selector="h1" />
   for screen-reader page-change announcements — that focus must not be
   visually decorated, otherwise every navigation paints a ring on the title. */
.ng-page button:focus-visible[b-5w424gfn8i],
.ng-page a:focus-visible[b-5w424gfn8i],
.ng-page input:focus-visible[b-5w424gfn8i],
.ng-page textarea:focus-visible[b-5w424gfn8i],
.ng-page select:focus-visible[b-5w424gfn8i],
.ng-page [tabindex]:not([tabindex="-1"]):focus-visible[b-5w424gfn8i] {
    outline: 2px solid var(--ng-color-purple-primary);
    outline-offset: 2px;
}
.ng-page input:focus-visible[b-5w424gfn8i],
.ng-page textarea:focus-visible[b-5w424gfn8i],
.ng-page select:focus-visible[b-5w424gfn8i] {
    outline-offset: 1px;
}
.ng-page h1:focus[b-5w424gfn8i],
.ng-page h1:focus-visible[b-5w424gfn8i] {
    outline: none;
}

.ng-page svg[b-5w424gfn8i] { display: block; }

/* ── Entry animations ───────────────────────────────────────── */
@keyframes ngFadeIn-b-5w424gfn8i {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ng-page .run-header[b-5w424gfn8i] { animation: ngFadeIn-b-5w424gfn8i 0.45s ease-out both; }
.ng-page .pipeline[b-5w424gfn8i] { animation: ngFadeIn-b-5w424gfn8i 0.55s 0.08s ease-out both; }
.ng-page .stage-panel.active[b-5w424gfn8i] { animation: ngFadeIn-b-5w424gfn8i 0.55s 0.16s ease-out both; }
.ng-page .pipeline-scroll .phase-steps > *[b-5w424gfn8i] { animation: ngFadeIn-b-5w424gfn8i 0.25s ease-out both; }
.ng-page .pipeline-scroll .phase-steps > *:nth-child(1)[b-5w424gfn8i] { animation-delay: 0.40s; }
.ng-page .pipeline-scroll .phase-steps > *:nth-child(2)[b-5w424gfn8i] { animation-delay: 0.50s; }
.ng-page .pipeline-scroll .phase-steps > *:nth-child(3)[b-5w424gfn8i] { animation-delay: 0.60s; }
@media (prefers-reduced-motion: reduce) {
    .ng-page .run-header[b-5w424gfn8i],
    .ng-page .pipeline[b-5w424gfn8i],
    .ng-page .stage-panel.active[b-5w424gfn8i],
    .ng-page .pipeline-scroll .phase-steps > *[b-5w424gfn8i] { animation: none !important; }
}

/* ── Run header ─────────────────────────────────────────────── */
.ng-page .run-header[b-5w424gfn8i] {
    padding: 0 0 18px;
    background: transparent;
    border: none;
    position: relative;
    z-index: 5;
}
.ng-page .run-header-top[b-5w424gfn8i] {
    /* flex-end aligns the status pill to the h1's baseline (the h1 sits at
       the bottom of the titles column, with the small RUN-NNNN eyebrow
       stacked above). Matches mockup line 1867. */
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.ng-page .run-header-titles[b-5w424gfn8i] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ng-page .run-id-mono[b-5w424gfn8i] {
    font-family: var(--ng-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ng-color-text-muted);
    background: none;
    padding: 0;
    border-radius: 0;
}
.ng-page .run-header-top h1[b-5w424gfn8i] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ng-color-text-primary);
    margin: 0;
    line-height: 1.15;
}

/* Status pill — uses a subtle 135° gradient per mockup line 2027 */
.ng-page .status-pill[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--ng-r-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
}
.ng-page .status-pill.purple[b-5w424gfn8i] {
    background: linear-gradient(135deg, #f3f0ff 0%, #e9e1ff 100%);
    color: var(--ng-color-purple-primary);
}
.ng-page .status-pill.green[b-5w424gfn8i] {
    background: linear-gradient(135deg, #d6ecdf 0%, #c2e3d0 100%);
    color: var(--ng-color-success-text);
}
.ng-page .status-pill.blue[b-5w424gfn8i] {
    background: linear-gradient(135deg, var(--ng-color-info-blue-bg) 0%, #cdd9ed 100%);
    color: var(--ng-color-info-blue);
}
.ng-page .status-pill.amber[b-5w424gfn8i] {
    background: linear-gradient(135deg, var(--ng-color-warning-bg) 0%, #f3e3bd 100%);
    color: var(--ng-color-warning);
}
/* Wiki 989 §6.1 — Cancelled pill uses the error palette (mockup
   02b_buckets_cancelled.html line 412). Flat color, not a gradient. */
.ng-page .status-pill.red[b-5w424gfn8i] {
    background: #f8dde2;
    color: #d24d61;
}
.ng-page .status-pill .dot-glyph[b-5w424gfn8i] {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

/* Run-level kebab */
.ng-page .run-kebab-wrap[b-5w424gfn8i] {
    position: relative;
    display: inline-block;
    margin-left: auto;
}
.ng-page .run-kebab[b-5w424gfn8i] {
    background: white;
    border: 1px solid var(--ng-color-border-input);
    color: var(--ng-color-text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--ng-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
    box-shadow: 0 1px 3px rgba(15, 15, 25, 0.08), 0 1px 2px rgba(15, 15, 25, 0.06);
}
.ng-page .run-kebab:hover[b-5w424gfn8i],
.ng-page .run-kebab-wrap.open .run-kebab[b-5w424gfn8i] {
    color: var(--ng-color-text-primary);
    border-color: var(--ng-color-border-input-h);
    background: var(--ng-color-bg-page-alt);
}
.ng-page .run-kebab svg[b-5w424gfn8i] { width: 18px; height: 18px; }

.ng-page .run-kebab-backdrop[b-5w424gfn8i] {
    position: fixed; inset: 0;
    background: transparent;
    z-index: 999;
}
.ng-page .run-kebab-menu[b-5w424gfn8i] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--ng-color-border-primary);
    border-radius: var(--ng-r-md);
    box-shadow: var(--ng-shadow-popover);
    z-index: 1000;
    overflow: hidden;
    padding: 4px 0;
}
.ng-page .run-kebab-menu button[b-5w424gfn8i] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--ng-fs-13);
    font-weight: 500;
    color: var(--ng-color-text-primary);
    cursor: pointer;
    transition: background 0.12s;
}
.ng-page .run-kebab-menu button svg[b-5w424gfn8i] { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.8; }
.ng-page .run-kebab-menu button:hover[b-5w424gfn8i] { background: var(--ng-color-bg-page-alt); }
.ng-page .run-kebab-menu button.danger[b-5w424gfn8i] { color: var(--ng-color-error); }
.ng-page .run-kebab-menu button.danger:hover[b-5w424gfn8i] { background: rgba(210, 77, 97, 0.07); }

/* ── Pipeline card ──────────────────────────────────────────
   Two visual layers:
     1. White meta strip sitting on top with its own drop shadow.
     2. Faint gradient workflow area below it (hairline-divided).
   `padding: 0` keeps children flush with the rounded card edges so the
   meta strip can render edge-to-edge with its own internal padding. */
.ng-page .pipeline[b-5w424gfn8i] {
    background: linear-gradient(180deg, #eeeef2 0%, #ffffff 70%);
    border: 1px solid var(--ng-color-border-row);
    border-radius: var(--ng-r-lg);
    box-shadow: var(--ng-shadow-card);
    margin-bottom: 24px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Meta strip — overlays the workflow gradient with solid white + shadow. */
.ng-page .pipeline > .run-header-meta[b-5w424gfn8i] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 28px;
    font-size: var(--ng-fs-13);
    padding: 14px 22px;
    background: white;
    position: relative;
    z-index: 2;
    box-shadow:
        0 5px 11px -3px rgba(15, 15, 25, 0.09),
        0 1px 3px rgba(15, 15, 25, 0.04);
}
.ng-page .run-header-meta .meta-item[b-5w424gfn8i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.ng-page .run-header-meta .meta-label[b-5w424gfn8i] {
    font-family: var(--ng-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ng-color-text-muted);
}
/* Normalize the value row so pills + plain text share the same height
   and center optically — mockup line 1915. */
.ng-page .run-header-meta .meta-item > :not(.meta-label)[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}
.ng-page .run-header-meta .meta-value[b-5w424gfn8i] {
    color: var(--ng-color-text-primary);
    font-weight: 400;
    line-height: 1.3;
}
.ng-page .run-header-meta a.meta-value[b-5w424gfn8i] { color: var(--ng-color-purple-primary); }
.ng-page .run-header-meta a.meta-value:hover[b-5w424gfn8i] { text-decoration: underline; }
.ng-page .run-header-meta .meta-value-row[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ng-page .run-header-meta .meta-sub[b-5w424gfn8i] {
    color: var(--ng-color-text-muted);
    font-size: 11px;
}
.ng-page .run-header-meta .status-mini[b-5w424gfn8i] { margin-left: -9px; }

.ng-page .status-mini[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--ng-r-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.ng-page .status-mini.purple[b-5w424gfn8i] { background: var(--ng-color-purple-bg); color: var(--ng-color-purple-primary); }
.ng-page .status-mini.green[b-5w424gfn8i]  { background: var(--ng-color-success-light); color: var(--ng-color-success-text); }
.ng-page .status-mini.amber[b-5w424gfn8i]  { background: var(--ng-color-warning-bg); color: var(--ng-color-warning); }
.ng-page .status-mini.blue[b-5w424gfn8i]   { background: var(--ng-color-info-blue-bg); color: var(--ng-color-info-blue); }
/* Stale-census pill. Without this `.error` variant the pill fell through to the
   solid dark global error style; match List Review / Followup (light-red bg +
   red text) using this page's own error tokens. */
.ng-page .status-mini.error[b-5w424gfn8i]  { background: var(--ng-color-error-bg); color: var(--ng-color-error); }

/* Workflow label — sits below the meta strip, gets a top hairline so the
   meta strip's drop shadow has a lip to land against (mockup line 1908). */
.ng-page .pipeline > .pipeline-label[b-5w424gfn8i] {
    box-shadow: inset 0 1px 0 var(--ng-color-border-row);
}
.ng-page .pipeline-label[b-5w424gfn8i] {
    font-family: var(--ng-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ng-color-text-muted);
    padding: 12px 22px 6px;
    margin: 0;
}
.ng-page .pipeline-scroll[b-5w424gfn8i] {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 0 14px;
    scrollbar-width: thin;
}
.ng-page .pipeline-scroll[b-5w424gfn8i]::-webkit-scrollbar { height: 6px; }
.ng-page .pipeline-scroll[b-5w424gfn8i]::-webkit-scrollbar-thumb {
    background: rgba(15, 15, 25, 0.18);
    border-radius: 3px;
}
.ng-page .pipeline-scroll[b-5w424gfn8i]::-webkit-scrollbar-track { background: transparent; }
.ng-page .phase-group[b-5w424gfn8i] {
    display: flex;
    flex-direction: column;
    padding: 0 6px;
    flex-shrink: 0;
}
.ng-page .phase-steps[b-5w424gfn8i] {
    display: flex;
    align-items: flex-start;
    padding: 0 8px;
}
.ng-page .stepper-step[b-5w424gfn8i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0 6px;
}
.ng-page .step-circle[b-5w424gfn8i] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid var(--ng-color-border-input);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}
.ng-page .step-circle[b-5w424gfn8i]::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ng-color-border-input);
    transition: all 0.25s;
}
.ng-page .step-label[b-5w424gfn8i] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ng-color-text-muted);
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s, font-weight 0.3s;
}
.ng-page .step-connector[b-5w424gfn8i] {
    flex: 1;
    /* Inside the pipeline card the connector is intentionally short — just a
       hairline tying two adjacent step circles together. Mockup line 2017
       (`.pipeline .step-connector { min-width: 16px; max-width: 28px }`). */
    min-width: 16px;
    max-width: 28px;
    height: 1.5px;
    background: var(--ng-color-border-input);
    margin-top: 14px;
    transition: background 0.4s;
}
.ng-page .step-connector.complete[b-5w424gfn8i] { background: var(--ng-color-success); }
.ng-page .stepper-step[data-state="complete"] .step-circle[b-5w424gfn8i] {
    background: var(--ng-color-success);
    border-color: var(--ng-color-success);
}
.ng-page .stepper-step[data-state="complete"] .step-circle[b-5w424gfn8i]::after {
    content: '';
    width: 7px; height: 11px;
    background: transparent;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
    border-radius: 0;
}
.ng-page .stepper-step[data-state="complete"] .step-label[b-5w424gfn8i] {
    color: var(--ng-color-success);
    font-weight: 600;
}
.ng-page .stepper-step[data-state="processing"] .step-circle[b-5w424gfn8i] {
    background: var(--ng-color-purple-primary);
    border-color: var(--ng-color-purple-primary);
    box-shadow: 0 0 0 5px rgba(124, 92, 219, 0.16);
}
.ng-page .stepper-step[data-state="processing"] .step-circle[b-5w424gfn8i]::after { background: white; }

/* Wiki 989 §6.3 — Cancelled stepper marker, mirrors the version in
   RunWorkflowIndicator.razor.css. Muted circle + red "Cancelled" pseudo-chip
   below the label. Used when the Notices Generated step itself was the
   cancellation point. */
.ng-page .stepper-step[data-state="cancelled"] .step-circle[b-5w424gfn8i] {
    background: #f5f5f7;
    border-color: #c8c8d0;
}
.ng-page .stepper-step[data-state="cancelled"] .step-circle[b-5w424gfn8i]::after {
    background: #86868b;
}
.ng-page .stepper-step[data-state="cancelled"] .step-label[b-5w424gfn8i] {
    color: #86868b;
    font-weight: 500;
}
.ng-page .stepper-step[data-state="cancelled"][b-5w424gfn8i] {
    position: relative;
}
.ng-page .stepper-step[data-state="cancelled"][b-5w424gfn8i]::after {
    content: 'Cancelled';
    display: block;
    width: fit-content;
    margin-top: 4px;
    padding: 1px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #f8dde2;
    color: #d24d61;
    border-radius: 999px;
    align-self: center;
}
.ng-page .stepper-step[data-state="processing"] .step-label[b-5w424gfn8i] {
    color: var(--ng-color-purple-primary);
    font-weight: 600;
}
.ng-page .stepper-step:hover .step-circle[b-5w424gfn8i] { transform: scale(1.08); }

/* ── Stage panel ────────────────────────────────────────────── */
.ng-page .stage-panel[b-5w424gfn8i] { display: none; }
.ng-page .stage-panel.active[b-5w424gfn8i] { display: block; }

/* ── Notices Generated: batch strip ────────────────────────── */
.ng-page .ng-batch[b-5w424gfn8i] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    background: white;
    border: 1px solid var(--ng-color-border-row);
    border-radius: var(--ng-r-lg);
    box-shadow: var(--ng-shadow-card);
    margin-bottom: 18px;
    font-size: 13px;
}
.ng-page .ng-batch-template[b-5w424gfn8i] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ng-color-text-primary);
    font-weight: 600;
    min-width: 0;
}
.ng-page .ng-batch-template svg[b-5w424gfn8i] {
    width: 14px;
    height: 14px;
    color: var(--ng-color-error);
    flex-shrink: 0;
}
.ng-page .ng-batch-template .ver[b-5w424gfn8i] {
    color: var(--ng-color-text-muted);
    font-weight: 500;
    font-size: 12px;
}
.ng-page .ng-batch-divider[b-5w424gfn8i] {
    width: 1px;
    height: 22px;
    background: var(--ng-color-border-row);
    flex-shrink: 0;
}
.ng-page .ng-batch-stats[b-5w424gfn8i] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--ng-color-text-secondary);
    font-size: 12.5px;
}
.ng-page .ng-batch-stats .stat strong[b-5w424gfn8i] {
    color: var(--ng-color-text-primary);
    font-weight: 600;
}
.ng-page .ng-batch-stats .stat.gen[b-5w424gfn8i] { color: var(--ng-color-text-muted); }
.ng-page .ng-batch-action[b-5w424gfn8i] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ng-color-text-primary);
    background: white;
    border: 1px solid var(--ng-color-border-input);
    border-radius: var(--ng-r-md);
    padding: 6px 11px;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.ng-page .ng-batch-action:hover[b-5w424gfn8i] {
    color: var(--ng-color-purple-primary);
    border-color: var(--ng-color-purple-primary);
    background: var(--ng-color-purple-bg);
    text-decoration: none;
}
.ng-page .ng-batch-action svg[b-5w424gfn8i] { width: 12px; height: 12px; stroke-width: 2; }

/* Type pills (Rollout / Cashout) */
.ng-page .ng-pill[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--ng-r-pill);
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
}
.ng-page .ng-pill.rollout[b-5w424gfn8i] { background: var(--ng-color-info-blue-bg); color: var(--ng-color-info-blue); }
.ng-page .ng-pill.cashout[b-5w424gfn8i] { background: var(--ng-color-success-light); color: var(--ng-color-success-text); }
.ng-page .ng-pill .bucket-dot[b-5w424gfn8i] { width: 6px; height: 6px; border-radius: 50%; }
.ng-page .ng-pill.rollout .bucket-dot[b-5w424gfn8i] { background: var(--ng-color-info-blue); }
.ng-page .ng-pill.cashout .bucket-dot[b-5w424gfn8i] { background: var(--ng-color-success); }
.ng-page .bucket-dot[b-5w424gfn8i] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ng-page .bucket-dot.rollout[b-5w424gfn8i] { background: var(--ng-color-info-blue); }
.ng-page .bucket-dot.cashout[b-5w424gfn8i] { background: var(--ng-color-success); }

/* ── Notices table shell ────────────────────────────────────── */
.ng-page .data-table-shell[b-5w424gfn8i] {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}
.ng-page .table-controls[b-5w424gfn8i] {
    background: white;
    padding: 10px 16px;
    border-radius: var(--ng-r-lg) var(--ng-r-lg) 0 0;
    border: 1px solid var(--ng-color-border-primary);
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 52px;
}
.ng-page .table-controls-right[b-5w424gfn8i] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Type chip filter */
.ng-page .ng-type-chips[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ng-page .ng-chip[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid var(--ng-color-border-input);
    color: var(--ng-color-text-secondary);
    padding: 3px 10px;
    border-radius: var(--ng-r-pill);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ng-page .ng-chip:hover[b-5w424gfn8i] {
    color: var(--ng-color-text-primary);
    border-color: var(--ng-color-border-input-h);
}
.ng-page .ng-chip.is-active[b-5w424gfn8i] {
    background: var(--ng-color-purple-bg);
    color: var(--ng-color-purple-primary);
    border-color: var(--ng-color-purple-border);
    font-weight: 600;
}
.ng-page .ng-chip-count[b-5w424gfn8i] {
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
    border-radius: var(--ng-r-pill);
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.ng-page .ng-chip.is-active .ng-chip-count[b-5w424gfn8i] {
    background: white;
    color: var(--ng-color-purple-primary);
}

/* Search input */
.ng-page .ng-search[b-5w424gfn8i] {
    position: relative;
    width: 320px;
}
.ng-page .ng-search svg[b-5w424gfn8i] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--ng-color-text-muted);
}
.ng-page .ng-search input[b-5w424gfn8i] {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--ng-color-border-input);
    border-radius: var(--ng-r-md);
    font-size: 13px;
    font-family: inherit;
    background: white;
    outline: none;
    transition: border-color 0.15s ease;
}
.ng-page .ng-search input:focus[b-5w424gfn8i] {
    border-color: var(--ng-color-purple-primary);
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

/* Icon-only buttons */
.ng-page .btn-icon[b-5w424gfn8i] {
    padding: 7px;
    background: none;
    border: 1px solid transparent;
    color: var(--ng-color-text-secondary);
    border-radius: var(--ng-r-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ng-page .btn-icon:hover[b-5w424gfn8i] {
    color: var(--ng-color-purple-primary);
    background: var(--ng-color-purple-bg);
}
.ng-page .btn-icon svg[b-5w424gfn8i] { width: 17px; height: 17px; stroke-width: 2; }

.ng-page .btn-icon:disabled[b-5w424gfn8i] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Export dropdown — small popover anchored under the export icon.
   Mirrors the .run-kebab-menu pattern on the Followup page so the
   visual language stays consistent (white card, 1px border, sub-item
   buttons with svg + label). */
.ng-page .ng-export-wrap[b-5w424gfn8i] {
    position: relative;
    display: inline-flex;
}
.ng-page .ng-export-backdrop[b-5w424gfn8i] {
    position: fixed;
    inset: 0;
    z-index: 99;
}
.ng-page .ng-export-menu[b-5w424gfn8i] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    min-width: 180px;
    background: white;
    border: 1px solid var(--ng-color-border, #e5e7eb);
    border-radius: var(--ng-r-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ng-page .ng-export-menu button[b-5w424gfn8i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: var(--ng-r-sm, 6px);
    text-align: left;
    font-size: 13px;
    color: var(--ng-color-text-primary, #111827);
    cursor: pointer;
    transition: background 0.15s;
}
.ng-page .ng-export-menu button:hover:not(:disabled)[b-5w424gfn8i] {
    background: var(--ng-color-purple-bg);
    color: var(--ng-color-purple-primary);
}
.ng-page .ng-export-menu button:disabled[b-5w424gfn8i] {
    opacity: 0.55;
    cursor: not-allowed;
}
.ng-page .ng-export-menu button svg[b-5w424gfn8i] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Data table */
.ng-page .data-table-wrap[b-5w424gfn8i] {
    background: white;
    border-radius: 0 0 var(--ng-r-lg) var(--ng-r-lg);
    border: 1px solid var(--ng-color-border-primary);
    border-top: none;
    box-shadow: 0 1px 2px rgba(15, 15, 25, 0.04), 0 4px 16px -4px rgba(15, 15, 25, 0.06);
    overflow-x: auto;
}
.ng-page .data-table[b-5w424gfn8i] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1080px;
}
.ng-page .data-table th[b-5w424gfn8i] {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ng-color-text-muted);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%), #fbfbfd;
    border-bottom: 1px solid var(--ng-color-border-primary);
    white-space: nowrap;
}
.ng-page .data-table th.right[b-5w424gfn8i],
.ng-page .data-table td.right[b-5w424gfn8i] { text-align: right; }
.ng-page .data-table td[b-5w424gfn8i] {
    padding: 12px 16px;
    font-size: var(--ng-fs-14);
    border-bottom: 1px solid var(--ng-color-border-row);
    color: var(--ng-color-text-primary);
    vertical-align: middle;
    transition: background 0.18s;
}
.ng-page .data-table tbody tr:nth-child(even) td[b-5w424gfn8i] { background: rgba(15, 15, 25, 0.018); }
.ng-page .data-table tbody tr:hover td[b-5w424gfn8i] {
    background: rgba(15, 15, 25, 0.035);
    cursor: pointer;
}
.ng-page .data-table tbody tr.selected td[b-5w424gfn8i] { background: rgba(15, 15, 25, 0.035); }
.ng-page .data-table tbody tr.selected td:first-child[b-5w424gfn8i] { box-shadow: inset 3px 0 0 var(--ng-color-purple-primary); }
.ng-page .data-table .checkbox-cell[b-5w424gfn8i] { width: 36px; padding-right: 0; }
.ng-page .data-table .checkbox-cell input[b-5w424gfn8i] {
    width: 15px; height: 15px;
    accent-color: var(--ng-color-purple-primary);
    cursor: pointer;
}
.ng-page .data-table tbody tr.is-failed td[b-5w424gfn8i] { background: rgba(210, 77, 97, 0.05); }
.ng-page .data-table tbody tr.is-failed:hover td[b-5w424gfn8i] { background: rgba(210, 77, 97, 0.09); }
.ng-page .data-table tbody tr.empty-row td[b-5w424gfn8i] { background: white !important; cursor: default; }
.ng-page .data-table tbody tr.empty-row:hover td[b-5w424gfn8i] { background: white !important; }

.ng-page .name-cell[b-5w424gfn8i] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ng-page .name-cell .name[b-5w424gfn8i] {
    color: var(--ng-color-text-primary);
    font-weight: 600;
    cursor: pointer;
}
.ng-page .name-cell .name:hover[b-5w424gfn8i] {
    color: var(--ng-color-purple-primary);
    text-decoration: underline;
}
.ng-page .name-cell .meta[b-5w424gfn8i] {
    color: var(--ng-color-text-muted);
    font-size: 11px;
    font-family: var(--ng-font-mono);
}

.ng-page .ng-address-cell[b-5w424gfn8i] {
    color: var(--ng-color-text-secondary);
    font-size: 12.5px;
    line-height: 1.4;
}
.ng-page .ng-row-arrow[b-5w424gfn8i] {
    color: var(--ng-color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}
.ng-page .ng-row-arrow svg[b-5w424gfn8i] { width: 14px; height: 14px; }
.ng-page .data-table tbody tr:hover .ng-row-arrow[b-5w424gfn8i] { color: var(--ng-color-purple-primary); }

/* ── Notice preview drawer ─────────────────────────────────── */
.ng-page .notice-drawer-overlay[b-5w424gfn8i] {
    position: fixed; inset: 0;
    background: rgba(15, 15, 25, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 900;
}
.ng-page .notice-drawer-overlay.is-open[b-5w424gfn8i] {
    opacity: 1;
    pointer-events: auto;
}
.ng-page .notice-drawer[b-5w424gfn8i] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 680px;
    max-width: 100vw;
    background: white;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    z-index: 901;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ng-page .notice-drawer.is-open[b-5w424gfn8i] { transform: translateX(0); }
.ng-page .notice-drawer-header[b-5w424gfn8i] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ng-color-border-row);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ng-page .notice-drawer-header-titles[b-5w424gfn8i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ng-page .notice-drawer-header-titles .ndh-kicker[b-5w424gfn8i] {
    font-family: var(--ng-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ng-color-text-muted);
}
.ng-page .notice-drawer-header-titles h3[b-5w424gfn8i] {
    font-size: 17px;
    font-weight: 700;
    color: var(--ng-color-text-primary);
}
.ng-page .notice-drawer-close[b-5w424gfn8i] {
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: var(--ng-r-sm);
    color: var(--ng-color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ng-page .notice-drawer-close:hover[b-5w424gfn8i] {
    background: var(--ng-color-bg-page-alt);
    color: var(--ng-color-text-primary);
}
.ng-page .notice-drawer-meta[b-5w424gfn8i] {
    padding: 14px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--ng-color-border-row);
    background: var(--ng-color-bg-page-alt);
}
.ng-page .notice-drawer-meta .nm-field[b-5w424gfn8i] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}
.ng-page .notice-drawer-meta .nm-field .nm-k[b-5w424gfn8i] {
    font-family: var(--ng-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ng-color-text-muted);
}
.ng-page .notice-drawer-meta .nm-field .nm-v[b-5w424gfn8i] {
    color: var(--ng-color-text-primary);
    font-weight: 400;
}
.ng-page .notice-drawer-body[b-5w424gfn8i] {
    flex: 1;
    overflow-y: auto;
    background: #323439;
    padding: 24px;
    display: flex;
    justify-content: center;
}

/* Real-PDF preview shell. Outer .ng-pdf-shell wraps the (Blazor-managed)
   status row + the (JS-managed) canvas container so the two never share a
   parent that Blazor's diff has to reconcile against JS-injected DOM. The
   inner container stays as a pure placeholder — pnBlazorExtentions
   .renderPdfToCanvas wipes its innerHTML and appends canvases. Same pattern
   NoticesDatagrid's PDF preview modal uses. */
.ng-page .ng-pdf-shell[b-5w424gfn8i] {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* Zoom toolbar — sits above the canvas container. Compact, dark-on-dark so it
   reads as part of the PDF chrome rather than the page chrome. */
.ng-page .ng-pdf-toolbar[b-5w424gfn8i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.88);
}

.ng-page .ng-pdf-zoom-btn[b-5w424gfn8i] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 30px;
    transition: background 0.12s, border-color 0.12s;
}

.ng-page .ng-pdf-zoom-btn:hover:not(:disabled)[b-5w424gfn8i] {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
}

.ng-page .ng-pdf-zoom-btn:disabled[b-5w424gfn8i] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ng-page .ng-pdf-zoom-btn.ng-pdf-zoom-reset[b-5w424gfn8i] {
    font-size: 12px;
    min-width: auto;
    padding: 5px 12px;
    margin-left: 6px;
}

.ng-page .ng-pdf-zoom-value[b-5w424gfn8i] {
    min-width: 52px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 500;
}

.ng-page .ng-pdf-canvas-container[b-5w424gfn8i] {
    width: 100%;
    min-height: 720px;
    background: #525659;
    border-radius: 4px;
    padding: 16px 0;
    /* Allow horizontal scroll only when zoomed past 100%; the canvases below
       are sized via --pdf-zoom so a 200% zoom takes 2× container width and
       needs a scroll affordance. */
    overflow-x: auto;
}

/* JS injects canvases at intrinsic width = viewport.width * 1.5. Browser
   downscales to the CSS width set here. --pdf-zoom is inherited from the
   container's inline style (set by Blazor on every render); 100% fills the
   shell's max-width (~720px) so a typical letter-size PDF fits without
   horizontal scroll. The !important is needed because the JS sets
   canvas.style inline (display: block, margin: 0 auto 10px auto) — those
   stay, but the CSS-driven width/height override the intrinsic pixel size. */
.ng-page .ng-pdf-canvas-container canvas[b-5w424gfn8i] {
    width: var(--pdf-zoom, 100%) !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 10px auto !important;
}

.ng-page .ng-pdf-status[b-5w424gfn8i] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    padding: 28px 16px;
    text-align: center;
    background: #525659;
    border-radius: 4px;
}

.ng-page .ng-pdf-status-error[b-5w424gfn8i] {
    color: #f8c4cc;
}
.ng-page .notice-drawer-body[b-5w424gfn8i]::-webkit-scrollbar { width: 10px; }
.ng-page .notice-drawer-body[b-5w424gfn8i]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 5px;
}
.ng-page .notice-drawer .pdf-page[b-5w424gfn8i] {
    width: 100%;
    max-width: 560px;
    min-height: 720px;
    background: white;
    box-shadow: 0 8px 30px -10px rgba(15, 15, 25, 0.18), 0 2px 6px rgba(15, 15, 25, 0.04);
    border-radius: 2px;
    padding: 48px 56px;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ng-color-text-primary);
}
.ng-page .notice-drawer .pdf-page h3[b-5w424gfn8i] {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    margin: 16px 0 6px;
}
.ng-page .notice-drawer .pdf-page p[b-5w424gfn8i] { margin-bottom: 12px; }
.ng-page .notice-drawer .pdf-page ol[b-5w424gfn8i] {
    padding-left: 20px;
    margin-bottom: 12px;
}
.ng-page .notice-drawer .pdf-page ol li[b-5w424gfn8i] { margin-bottom: 6px; }
.ng-page .notice-drawer-footer[b-5w424gfn8i] {
    padding: 12px 22px;
    border-top: 1px solid var(--ng-color-border-row);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.ng-page .notice-drawer-footer .btn[b-5w424gfn8i] {
    font-size: 12px;
    padding: 7px 14px;
    font-weight: 600;
}

/* ── Buttons ───────────────────────────────────────────────── */
.ng-page .btn[b-5w424gfn8i] { font-family: inherit; border-radius: var(--ng-r-md); }
.ng-page .btn.btn-primary[b-5w424gfn8i] {
    color: white;
    background: linear-gradient(180deg, #8b6ce8 0%, #5b3fc7 100%) padding-box,
                linear-gradient(180deg, #6d4dcb 0%, #3d1d9c 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
        0 4px 10px -2px rgba(94, 68, 200, 0.40);
    font-weight: 600;
    transition: transform 0.12s, box-shadow 0.12s;
}
.ng-page .btn.btn-primary:hover[b-5w424gfn8i] {
    background: linear-gradient(180deg, #9879ec 0%, #6b50d5 100%) padding-box,
                linear-gradient(180deg, #7c5cdb 0%, #4823b4 100%) border-box;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -2px rgba(94, 68, 200, 0.45);
}
.ng-page .btn.btn-outline-secondary[b-5w424gfn8i] {
    color: var(--ng-color-text-secondary);
    background: white;
    border: 1px solid var(--ng-color-border-input);
    font-weight: 500;
}
.ng-page .btn.btn-outline-secondary:hover[b-5w424gfn8i] {
    color: var(--ng-color-text-primary);
    background: var(--ng-color-bg-page-alt);
    border-color: var(--ng-color-border-input-h);
}
.ng-page .btn.btn-danger[b-5w424gfn8i] {
    color: white;
    background: linear-gradient(180deg, #e16579 0%, #c43d52 100%) padding-box,
                linear-gradient(180deg, #d24d61 0%, #862333 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
        0 4px 10px -2px rgba(180, 40, 60, 0.35);
    font-weight: 600;
}
.ng-page .btn.btn-danger:hover[b-5w424gfn8i] {
    background: linear-gradient(180deg, #e87687 0%, #cf4961 100%) padding-box,
                linear-gradient(180deg, #d24d61 0%, #732030 100%) border-box;
    color: white;
}
.ng-page .btn.btn-sm[b-5w424gfn8i] {
    font-size: var(--ng-fs-13);
    padding: 6px 14px;
}

/* ── Lightweight inline modals ─────────────────────────────── */
.ng-page .ng-modal-backdrop[b-5w424gfn8i] {
    position: fixed; inset: 0;
    background: rgba(15, 15, 25, 0.45);
    z-index: 1050;
}
.ng-page .ng-modal[b-5w424gfn8i] {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: calc(100vw - 32px);
    background: white;
    border-radius: var(--ng-r-xl);
    box-shadow: var(--ng-shadow-modal);
    z-index: 1051;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ng-page .ng-modal-header[b-5w424gfn8i] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ng-color-border-row);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ng-page .ng-modal-header h5[b-5w424gfn8i] {
    font-family: var(--ng-font-display);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.ng-page .ng-modal-close[b-5w424gfn8i] {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--ng-color-text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.ng-page .ng-modal-close:hover[b-5w424gfn8i] { color: var(--ng-color-text-primary); }
.ng-page .ng-modal-body[b-5w424gfn8i] {
    padding: 18px 22px;
    color: var(--ng-color-text-secondary);
}
.ng-page .ng-modal-body p[b-5w424gfn8i] { margin: 0 0 14px; }
.ng-page .ng-modal-body p:last-child[b-5w424gfn8i] { margin-bottom: 0; }
.ng-page .ng-modal-footer[b-5w424gfn8i] {
    padding: 12px 22px;
    border-top: 1px solid var(--ng-color-border-row);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ng-page .alert-error[b-5w424gfn8i] {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--ng-r-md);
    font-size: var(--ng-fs-13);
    background: var(--ng-color-error-bg);
    color: var(--ng-color-error);
    margin-bottom: 14px;
}
.ng-page .alert-error svg[b-5w424gfn8i] {
    width: 17px; height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke-width: 2;
}

/* ── Pagination strip (mockup .pagination — 03_Notices_Generated.html
   lines 919-947). Mirrors design-system tokens used on bucket pages so the
   strip is visually identical to the rest of the rollout flow:
     • Container — 10px 22px, top border separator from the table.
     • p-info — tabular-nums so the "1-12 of 156" counter never wiggles.
     • p-controls button — 30×30 squared, white, --r-sm radius.
     • .active — purple bg + border + tint, weight 600 to read as the
       current page without underlining or extra glyphs.
     • Disabled prev/next dim to 0.4 (mockup convention).
   We don't render this strip when the run has no notices (page.razor gates
   on _counts.Total > 0), so empty-state styles aren't needed here. */
.ng-page .pagination[b-5w424gfn8i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    border-top: 1px solid var(--ng-color-border-row);
    font-size: var(--ng-fs-13);
    color: var(--ng-color-text-secondary);
}
.ng-page .pagination .p-info[b-5w424gfn8i] {
    font-variant-numeric: tabular-nums;
}
.ng-page .pagination .p-info strong[b-5w424gfn8i] {
    color: var(--ng-color-text-primary);
    font-weight: 600;
}
.ng-page .pagination .p-controls[b-5w424gfn8i] {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ng-page .pagination .p-controls button[b-5w424gfn8i] {
    min-width: 30px;
    height: 30px;
    background: white;
    border: 1px solid var(--ng-color-border-input);
    border-radius: var(--ng-r-sm);
    color: var(--ng-color-text-primary);
    font-size: var(--ng-fs-13);
    font-family: inherit;
    line-height: 1;
    padding: 0 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-variant-numeric: tabular-nums;
}
.ng-page .pagination .p-controls button:hover:not(:disabled)[b-5w424gfn8i] {
    background: var(--ng-color-bg-page-alt);
}
.ng-page .pagination .p-controls button.active[b-5w424gfn8i] {
    background: var(--ng-color-purple-bg);
    border-color: var(--ng-color-purple-border);
    color: var(--ng-color-purple-primary);
    font-weight: 600;
}
.ng-page .pagination .p-controls button:disabled[b-5w424gfn8i] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Wiki 989 §6.2 — Cancelled audit banner ────────────────────────
   Pixel match to mockup 02b_buckets_cancelled.html lines 440-459.
   ─────────────────────────────────────────────────────────────────── */
.ng-page .cancelled-banner[b-5w424gfn8i] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 18px;
    padding: 12px 16px;
    background: #f8dde2;
    border: 1px solid rgba(176, 42, 55, 0.35);
    border-left: 3px solid #d24d61;
    border-radius: 8px;
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.45;
}
.ng-page .cancelled-banner .cb-icon[b-5w424gfn8i] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #d24d61;
}
.ng-page .cancelled-banner .cb-body strong[b-5w424gfn8i] {
    font-weight: 600;
}
.ng-page .cancelled-banner .cb-body em[b-5w424gfn8i] {
    font-style: normal;
    color: #6e6e73;
}

/* Wiki 995 §4.6 — Expired banner (parity with List Review). */
.ng-page .expired-banner[b-5w424gfn8i] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 18px;
    padding: 12px 16px;
    background: #fff8e9;
    border: 1px solid rgba(138, 46, 59, 0.30);
    border-left: 3px solid #8a2e3b;
    border-radius: 8px;
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.45;
}
.ng-page .expired-banner .eb-icon[b-5w424gfn8i] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #8a2e3b;
}
.ng-page .expired-banner .eb-body strong[b-5w424gfn8i] {
    font-weight: 600;
}

/* Wiki 989 §6.4 — read-only worksheet when the run is cancelled. Hides
   the per-row select checkboxes (no bulk actions on a cancelled run);
   all other affordances (filter chips, sort, pagination, preview drawer)
   stay live for browsing the historic record. */
.ng-page.is-frozen .checkbox-cell[b-5w424gfn8i] {
    display: none !important;
}

/* Wiki 989 §8.1 — Start-new-run CTA cluster on the Notices Generated page,
   pixel match to mockup 02b_buckets_cancelled.html lines 424-438. `.ng-page`
   max-width set below keeps `margin-left: auto` reading as a card edge
   rather than the viewport edge. */
.ng-page .run-header-actions[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}
/* Pixel match to mockup 02b_buckets_cancelled.html .run-header-actions
   .btn-restart (lines 430-438) — compact `.btn-sm` Bootstrap sizing. The
   audit found wwwroot/css/app.css force-sets `button.btn-primary { min-width:
   100px !important }` globally; we neutralise it on this one button so the
   compact padding actually reads. */
.ng-page .btn-restart[b-5w424gfn8i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 4px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    min-width: 0 !important;
}
.ng-page .btn-restart svg[b-5w424gfn8i] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.ng-page .btn-restart:disabled[b-5w424gfn8i] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Pages/Rollouts/RolloutRunFollowupPage.razor.rz.scp.css */
/*  Wiki 990 — Phase 2 (Follow-up) host page.

    Visual parity with RolloutRunLandingPage.razor.css: same theme tokens, same
    run-header / meta-strip / pipeline shell. Stage-specific styling lives in
    the individual Followup* component CSS files (FollowupVestingStage.razor.css
    etc.), so this file only owns the run-header chrome unique to this page.

    The kebab pattern is cribbed from NoticesGenerated.razor.css; we re-namespace
    it under .rrf-page so Blazor's scoped-CSS rewriter scopes it correctly.
*/

.rrf-page[b-ft6846o1rj] {
    --color-purple-primary: #7c5cdb;
    --color-purple-hover: #6d4dcb;
    --color-purple-light: #8b6ce8;
    --color-purple-bg: #f3f0ff;

    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-muted: #86868b;

    --color-bg-page: #f8fafc;
    --color-bg-surface: #ffffff;
    --color-bg-page-alt: #f5f5f7;

    --color-border-primary: #e5e5e7;
    --color-border-input: #d2d2d7;
    --color-border-input-h: #c5c5cc;
    --color-border-row: #f5f5f7;

    --color-success: #1f9d6a;
    --color-warning-amber: #d18a2c;
    --color-warning-bg: #f8eed5;
    --color-error: #d24d61;
    --color-info-blue: #3a5fa8;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    color: var(--color-text-primary);
    background: transparent;
    padding: 22px 28px;
    margin: -12px -12px 0;
    min-height: calc(100vh - 80px);
    box-sizing: border-box;
}

/* ── Run header ────────────────────────────────────────────── */
.run-header[b-ft6846o1rj] {
    padding: 0 0 18px 0;
    background: transparent;
    border: none;
    margin-bottom: 0;
    position: relative;
}

.run-eyebrow[b-ft6846o1rj] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin: 0 0 6px;
}

.run-title-row[b-ft6846o1rj] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.run-title[b-ft6846o1rj] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.run-header-meta[b-ft6846o1rj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 28px;
    padding: 14px 22px;
    background: white;
    font-size: 13px;
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 11px -3px rgba(15, 15, 25, 0.09), 0 1px 3px rgba(15, 15, 25, 0.04);
}

.meta-item[b-ft6846o1rj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.meta-label[b-ft6846o1rj] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.meta-value[b-ft6846o1rj] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: 1.3;
    font-size: 13px;
}

.meta-value.link[b-ft6846o1rj] {
    color: var(--color-purple-primary);
    text-decoration: none;
}

.meta-value.link:hover[b-ft6846o1rj] { text-decoration: underline; }

.meta-value-row[b-ft6846o1rj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.meta-sub[b-ft6846o1rj] {
    font-size: 11px;
    color: var(--color-text-muted);
}

.status-mini[b-ft6846o1rj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    width: max-content;
}

.status-mini.green[b-ft6846o1rj]   { background: #d6ecdf;                    color: #0f6b46; }
.status-mini.amber[b-ft6846o1rj]   { background: var(--color-warning-bg);    color: #a07020; }
.status-mini.purple[b-ft6846o1rj]  { background: var(--color-purple-bg);     color: var(--color-purple-primary); }
.status-mini.error[b-ft6846o1rj]   { background: #f8dde2;                    color: var(--color-error); }

/* Wiki 990 ticket 8077 / FR-1.4 — Compliance Deadline pill in the run-header
   meta strip. Renders as a subtle purple pill ([clock] 150 days remaining)
   so it reads as the run's always-on 180-day clock without competing with
   the title row's status pill. */
.compliance-pill[b-ft6846o1rj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    background: var(--color-purple-bg, #f3f0ff);
    border: 1px solid #ede9fe;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    color: var(--color-purple-primary, #7c5cdb);
}

.compliance-pill .compliance-clock-icon[b-ft6846o1rj] {
    display: inline-block;
    width: 13px;
    height: 13px;
    color: var(--color-purple-primary, #7c5cdb);
    flex-shrink: 0;
}

.compliance-pill strong[b-ft6846o1rj] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-purple-primary, #7c5cdb);
    line-height: 1;
}

.compliance-pill .compliance-days-unit[b-ft6846o1rj] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-purple-primary, #7c5cdb);
    opacity: 0.75;
    letter-spacing: 0.02em;
}

/* Wiki 995 §4.6 — Expired banner (parity with List Review). */
.rrf-page .expired-banner[b-ft6846o1rj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 18px;
    padding: 12px 16px;
    background: #fff8e9;
    border: 1px solid rgba(138, 46, 59, 0.30);
    border-left: 3px solid #8a2e3b;
    border-radius: 8px;
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.45;
}
.rrf-page .expired-banner .eb-icon[b-ft6846o1rj] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #8a2e3b;
}
.rrf-page .expired-banner .eb-body strong[b-ft6846o1rj] {
    font-weight: 600;
}

/* Wiki 989 §6.2 — Cancelled banner (parity with List Review). */
.rrf-page .cancelled-banner[b-ft6846o1rj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 18px;
    padding: 12px 16px;
    background: #f8dde2;
    border: 1px solid rgba(176, 42, 55, 0.35);
    border-left: 3px solid #d24d61;
    border-radius: 8px;
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.45;
}
.rrf-page .cancelled-banner .cb-icon[b-ft6846o1rj] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #d24d61;
}
.rrf-page .cancelled-banner .cb-body strong[b-ft6846o1rj] { font-weight: 600; }
.rrf-page .cancelled-banner .cb-body em[b-ft6846o1rj] { font-style: normal; color: #6e6e73; }

.status-pill[b-ft6846o1rj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
}

.status-pill .dot-glyph[b-ft6846o1rj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.status-pill.purple[b-ft6846o1rj] { background: linear-gradient(135deg, #f3f0ff 0%, #e9e1ff 100%); color: var(--color-purple-primary); }
.status-pill.blue[b-ft6846o1rj]   { background: linear-gradient(135deg, #e8eef9 0%, #cdd9ed 100%); color: var(--color-info-blue); }
.status-pill.green[b-ft6846o1rj]  { background: linear-gradient(135deg, #d6ecdf 0%, #c2e3d0 100%); color: #0f6b46; }
.status-pill.amber[b-ft6846o1rj]  { background: linear-gradient(135deg, var(--color-warning-bg) 0%, #f3e3bd 100%); color: #a07020; }
.status-pill.error[b-ft6846o1rj]  { background: linear-gradient(135deg, #fce4e7 0%, #f8d3d8 100%); color: #b91c2c; }
.status-pill.neutral[b-ft6846o1rj] { background: #f5f5f7; color: #86868b; }

/* ── Run-level kebab (Pause / Resume / Cancel) ─────────────── */
.run-kebab-wrap[b-ft6846o1rj] {
    position: relative;
    display: inline-block;
    margin-left: auto;
}

.run-kebab[b-ft6846o1rj] {
    background: white;
    border: 1px solid var(--color-border-input);
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
    box-shadow: 0 1px 3px rgba(15, 15, 25, 0.08), 0 1px 2px rgba(15, 15, 25, 0.06);
}

.run-kebab:hover[b-ft6846o1rj],
.run-kebab-wrap.open .run-kebab[b-ft6846o1rj] {
    color: var(--color-text-primary);
    border-color: var(--color-border-input-h);
    background: var(--color-bg-page-alt);
}

.run-kebab svg[b-ft6846o1rj] { width: 18px; height: 18px; }

.run-kebab-backdrop[b-ft6846o1rj] {
    position: fixed; inset: 0;
    background: transparent;
    z-index: 999;
}

.run-kebab-menu[b-ft6846o1rj] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);
    z-index: 1000;
    overflow: hidden;
    padding: 4px 0;
}

.run-kebab-menu button[b-ft6846o1rj] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.12s;
    font-family: inherit;
}

.run-kebab-menu button svg[b-ft6846o1rj] { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.8; }
.run-kebab-menu button:hover[b-ft6846o1rj] { background: var(--color-bg-page-alt); }
.run-kebab-menu button.danger[b-ft6846o1rj] { color: var(--color-error); }
.run-kebab-menu button.danger:hover[b-ft6846o1rj] { background: rgba(210, 77, 97, 0.07); }
.run-kebab-menu button:disabled[b-ft6846o1rj] { opacity: 0.5; cursor: not-allowed; }

/* ── Pagination ────────────────────────────────────────────────
   Lifted verbatim (selector names + visual treatment) from
   RolloutRunLandingPage.razor.css so the Vesting / Waiting stage pagers
   look identical to Phase 1's list-review pager. Rendered by the host
   page as a sibling to the stage component, after each table block. */
.pagination[b-ft6846o1rj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--color-border-primary);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--color-bg-surface);
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: -1px; /* meld into stage table's bottom border */
}

.pagination .p-info[b-ft6846o1rj] {
    font-variant-numeric: tabular-nums;
}

.pagination .p-info strong[b-ft6846o1rj] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.pagination .p-controls[b-ft6846o1rj] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination .p-controls button[b-ft6846o1rj] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    background: #ffffff;
    border: 1px solid var(--color-border-input);
    border-radius: 6px;
    color: var(--color-text-primary);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.pagination .p-controls button:hover:not(:disabled)[b-ft6846o1rj] {
    background: #f5f5f7;
}

.pagination .p-controls button.active[b-ft6846o1rj] {
    background: var(--color-purple-bg);
    border-color: var(--color-purple-primary);
    color: var(--color-purple-primary);
    font-weight: 600;
}

.pagination .p-controls button:disabled[b-ft6846o1rj] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Pages/Rollouts/RolloutRunLandingPage.razor.rz.scp.css */
.rrl-page[b-eqag01a3ym] {
    --color-purple-primary: #7c5cdb;
    --color-purple-hover: #6d4dcb;
    --color-purple-light: #8b6ce8;
    --color-purple-bg: #f3f0ff;

    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-muted: #86868b;
    --color-text-breadcrumb: #64748b;

    --color-bg-page: #f8fafc;
    --color-bg-surface: #ffffff;

    --color-border-primary: #e5e5e7;
    --color-border-input: #d2d2d7;
    --color-border-row: #f5f5f7;

    --color-success: #1f9d6a;
    --color-success-bg: #e1f1e9;
    --color-warning-amber: #d18a2c;
    --color-warning-bg: #f8eed5;
    --color-error: #d24d61;
    --color-info-blue: #3a5fa8;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;

    --radius-sm: 6px;
    --radius-md: 8px;

    /* Use Inter (same as wwwroot/css/app.css body and .ng-page) so the
       cancelled banner and every other text element renders at the same
       optical weight on both the landing page and the Notices Generated
       page. The previous -apple-system stack rendered Inter-13px and
       Segoe-13px side-by-side, making the banner read as a different
       size between pages. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    color: var(--color-text-primary);
    /* No own background — MainLayout's <main class="bg-light"> provides the
       page-wide grey, and stacking another shade on top produced a dual-tone
       seam. Negative horizontal margins pull the page edge-to-edge through
       the container-fluid's 12px gutter so the breadcrumb / header / card
       align with the natural inner padding instead of stacking gutters. */
    background: transparent;
    padding: 22px 28px;
    /* margin-left -20 cancels BOTH the container-fluid 12px gutter and the .content article's 8px left padding so text lands at the mockup's 28px; -12 on the right only cancels the gutter. */
    margin: -12px -12px 0 -20px;
    min-height: calc(100vh - 80px);
    box-sizing: border-box;
}

/* ── Breadcrumb Navigation ────────────────────────────────── */
.breadcrumb[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-item[b-eqag01a3ym] {
    color: var(--color-text-breadcrumb);
}

.breadcrumb-item a[b-eqag01a3ym] {
    color: var(--color-text-breadcrumb);
    text-decoration: none;
}

.breadcrumb-item a:hover[b-eqag01a3ym] {
    color: var(--color-purple-primary);
}

.breadcrumb-separator[b-eqag01a3ym] {
    color: var(--color-text-secondary);
    margin: 0 10px;
    font-weight: 600;
}

.breadcrumb-item.active[b-eqag01a3ym] {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* Full-width to match the mockup (max-width: none). No cap/auto-centering — a 1480 cap
   left big empty gutters on wide / zoomed-out viewports. The first .rrl-page rule's
   negative margins govern horizontal alignment; .run-header-actions' margin-left:auto
   still right-aligns within the full-width header. */

/* ── Run Header Section ────────────────────────────────────── */
.run-header[b-eqag01a3ym] {
    padding: 0 0 18px 0;
    background: transparent;
    border: none;
    margin-bottom: 0;
}

/* Wiki 989 §6.1 — top row layout matches mockup 02b_buckets_cancelled.html
   lines 295-318 verbatim: `.run-header-top` is a flex row, `align-items:
   flex-end` aligns the pill and button to the h1's baseline; the
   `.run-header-titles` column groups RUN-id + h1 with a 1px gap so the
   eyebrow tucks tight to the title; `margin-left: auto` on
   .run-header-actions pushes the Start-new-run button to the right end. */
.run-header-top[b-eqag01a3ym] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.run-header-titles[b-eqag01a3ym] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.run-id-mono[b-eqag01a3ym] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted, #86868b);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Retained for any callers still rendering the standalone eyebrow div;
   safe to remove once the search confirms no remaining usages. */
.run-eyebrow[b-eqag01a3ym] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin: 0 0 6px;
}

.run-title-row[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.run-title[b-eqag01a3ym] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.run-header-meta[b-eqag01a3ym] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 28px;
    padding: 14px 22px;
    background: white;
    font-size: 13px;
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 11px -3px rgba(15, 15, 25, 0.09), 0 1px 3px rgba(15, 15, 25, 0.04);
}

.meta-item[b-eqag01a3ym] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.meta-label[b-eqag01a3ym] {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #86868b);
    text-transform: uppercase;
}

/* Wiki 985 §3.2.2 — blocking-config indicator: label rendered in red when the
   underlying field (Recordkeeper, Custodian) is missing. Drives both visibility
   for the operator and signals that notice generation is blocked. */
.meta-label.is-missing[b-eqag01a3ym] {
    color: var(--color-error, #d24d61);
    font-weight: 700;
}

/* Wiki 985 §3.2.2 third blocking condition — RK is configured but is
   missing one or both required notice PDFs. The label stays normal; only
   the VALUE (RK name) is rendered red so the operator can tell this is a
   different state from "RK not configured at all" (the label-red case). */
.meta-value.is-missing-value[b-eqag01a3ym] {
    color: var(--color-error, #d24d61);
    font-weight: 600;
}

.meta-value[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: 1.3;
    font-size: 13px;
}

.meta-value.link[b-eqag01a3ym] {
    color: var(--color-purple-primary);
    text-decoration: none;
}

.meta-value.link:hover[b-eqag01a3ym] {
    text-decoration: underline;
}

.meta-value-row[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.meta-sub[b-eqag01a3ym] {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Mockup §run-header (02_buckets.html .status-mini) — pill is mixed-case,
   weight 600, 11px, 3×9 padding. No uppercase, no letter-spacing. */
.status-mini[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    width: max-content;
}

.status-mini.green[b-eqag01a3ym]   { background: #d6ecdf;                    color: #0f6b46;                    }
.status-mini.amber[b-eqag01a3ym]   { background: var(--color-warning-bg);    color: #a07020;                    }
.status-mini.neutral[b-eqag01a3ym] { background: var(--color-bg-page-alt);   color: var(--color-text-muted);    }
.status-mini.purple[b-eqag01a3ym]  { background: var(--color-purple-bg);     color: var(--color-purple-primary);}
.status-mini.error[b-eqag01a3ym]   { background: #f8dde2;                    color: var(--color-error);         }

.meta-value.status-badge[b-eqag01a3ym] {
    padding: 3px 10px;
    background: var(--color-purple-bg);
    color: var(--color-purple-primary);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
    margin-left: -9px;
}

/* Animated status pill in meta strip — pulsing dot when processing. */
.status-pill[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
}

.status-pill .dot-glyph[b-eqag01a3ym] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* Mockup §run-header (02_buckets.html .status-pill.* line 1691-1694) —
   pills use a soft 135° gradient instead of a flat fill, giving them a
   subtle dimensional read against the white meta strip. */
.status-pill.purple[b-eqag01a3ym] { background: linear-gradient(135deg, #f3f0ff 0%, #e9e1ff 100%); color: var(--color-purple-primary); }
.status-pill.blue[b-eqag01a3ym]   { background: linear-gradient(135deg, #e8eef9 0%, #cdd9ed 100%); color: var(--color-info-blue); }
.status-pill.green[b-eqag01a3ym]  { background: linear-gradient(135deg, #d6ecdf 0%, #c2e3d0 100%); color: #0f6b46; }
.status-pill.amber[b-eqag01a3ym]  { background: linear-gradient(135deg, var(--color-warning-bg) 0%, #f3e3bd 100%); color: #a07020; }
.status-pill.neutral[b-eqag01a3ym] { background: #f5f5f7; color: #86868b; }
/* Wiki 989 §6.1 — Cancelled pill uses the error palette (mockup
   02b_buckets_cancelled.html line 412). Mockup uses FLAT color (no
   gradient like the other variants) so the cancelled state reads as
   genuinely terminal rather than a soft state. */
.status-pill.red[b-eqag01a3ym]    { background: #f8dde2; color: #d24d61; }

.status-pill.processing .dot-glyph[b-eqag01a3ym] { animation: pulseDot-b-eqag01a3ym 1.5s ease-in-out infinite; }

@keyframes pulseDot-b-eqag01a3ym {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

/* Actions dropdown menu in run header. */
.run-header-actions[b-eqag01a3ym] {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    gap: 8px;
}

.actions-menu-wrap[b-eqag01a3ym] {
    position: relative;
}

.actions-menu-wrap .btn-secondary[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.actions-menu[b-eqag01a3ym] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: white;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);
    padding: 4px 0;
    z-index: 50;
}

.actions-menu button[b-eqag01a3ym] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}

.actions-menu button:hover[b-eqag01a3ym] {
    background: var(--color-bg-page-alt);
}

.actions-menu button.danger[b-eqag01a3ym] { color: #d24d61; }
.actions-menu button.danger:hover[b-eqag01a3ym] { background: #fbecef; }

.run-header[b-eqag01a3ym] { position: relative; }

.pipeline[b-eqag01a3ym] {
    position: relative;
    z-index: 2;
}

/* Wiki 989 §6 — both .pipeline-label and its inset hairline divider are
   now owned by RunWorkflowIndicator.razor.css; this scope can't reach the
   .pipeline-label element anyway (Blazor CSS isolation tags it with the
   indicator's scope id). */

/* ── Workflow Section ─────────────────────────────────────── */
.workflow-container[b-eqag01a3ym] {
    margin-bottom: 0;
    background: white;
}

.workflow-header[b-eqag01a3ym] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 22px;
    border-bottom: 1px solid var(--color-border-primary);
    gap: 16px;
}

.workflow-label[b-eqag01a3ym] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.workflow-indicator[b-eqag01a3ym] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 4px 22px 4px 22px;
    background: white;
}

.workflow-step[b-eqag01a3ym] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 90px;
    flex-shrink: 0;
    cursor: pointer;
}

.workflow-step-circle[b-eqag01a3ym] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: white;
    border: 1.5px solid var(--color-border-input);
    background: white;
    position: relative;
}

.workflow-step-circle[b-eqag01a3ym]::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-input);
}

.workflow-step-circle.completed[b-eqag01a3ym] {
    background: var(--color-success);
    border-color: var(--color-success);
}

.workflow-step-circle.completed[b-eqag01a3ym]::after {
    content: '';
    width: 7px;
    height: 11px;
    background: transparent;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
    border-radius: 0;
}

.workflow-step-circle.pending[b-eqag01a3ym] {
    background: white;
    border-color: var(--color-border-input);
}

.workflow-step-label[b-eqag01a3ym] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 8px;
    white-space: nowrap;
}

.workflow-step-connector[b-eqag01a3ym] {
    flex: 1;
    min-width: 20px;
    max-width: 100px;
    height: 1.5px;
    background: var(--color-border-input);
    margin-top: 14px;
    transition: background 0.4s;
}

.workflow-step-connector.completed[b-eqag01a3ym] {
    background: var(--color-success);
}

/* ── Action Buttons ────────────────────────────────────────── */
.action-buttons[b-eqag01a3ym] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.btn-primary[b-eqag01a3ym], .btn-secondary[b-eqag01a3ym] {
    padding: 6px 14px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-primary[b-eqag01a3ym] {
    background: var(--color-purple-primary);
    color: white;
    border-color: var(--color-purple-primary);
}

.btn-primary:hover[b-eqag01a3ym] {
    background: var(--color-purple-hover);
    border-color: var(--color-purple-hover);
}

.btn-primary.btn-sm[b-eqag01a3ym] {
    padding: 6px 14px;
    font-size: 13px;
}

.btn-secondary[b-eqag01a3ym] {
    background: white;
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
}

.btn-secondary:hover[b-eqag01a3ym] {
    background: var(--color-bg-page-alt);
}

.btn-secondary.btn-sm[b-eqag01a3ym] {
    padding: 6px 14px;
    font-size: 13px;
}

/* Disabled state for header action buttons — prominently muted so users see
   the action is inert (run is terminal / paused gating). Browser default
   disabled styling doesn't override the purple background of .btn-primary,
   so we force a neutral fill + cursor + no-hover. */
.btn-primary:disabled[b-eqag01a3ym],
.btn-primary:disabled:hover[b-eqag01a3ym],
.btn-primary.btn-sm:disabled[b-eqag01a3ym],
.btn-primary.btn-sm:disabled:hover[b-eqag01a3ym] {
    background: #d8d8de;
    border-color: #d8d8de;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.85;
}

.btn-secondary:disabled[b-eqag01a3ym],
.btn-secondary:disabled:hover[b-eqag01a3ym],
.btn-secondary.btn-sm:disabled[b-eqag01a3ym],
.btn-secondary.btn-sm:disabled:hover[b-eqag01a3ym] {
    background: #f5f5f7;
    border-color: #e5e5e7;
    color: #c4c4c8;
    cursor: not-allowed;
}

.info-banner[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    max-width: max-content;
    background: var(--color-warning-bg);
}

.info-banner.amber[b-eqag01a3ym] {
    background: var(--color-warning-bg);
    color: var(--color-warning-amber);
}

.banner-icon[b-eqag01a3ym] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: currentColor;
}

/* Blocked variant — multi-line, top-aligned icon, bulleted reason list.
   Wider container because blocker reasons can be long. */
.info-banner.blocked[b-eqag01a3ym] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    max-width: 100%;
    line-height: 1.45;
}

.info-banner.blocked .banner-icon[b-eqag01a3ym] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.banner-body[b-eqag01a3ym] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.banner-head[b-eqag01a3ym] {
    font-weight: 700;
    font-size: 12px;
}

.banner-reasons[b-eqag01a3ym] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
}

.banner-reasons li[b-eqag01a3ym] {
    margin: 1px 0;
}

.banner-reason-single[b-eqag01a3ym] {
    font-size: 12px;
}

.pagination[b-eqag01a3ym] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--color-border-primary);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--color-bg-surface);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.pagination .p-info[b-eqag01a3ym] {
    font-variant-numeric: tabular-nums;
}

.pagination .p-info strong[b-eqag01a3ym] { color: var(--color-text-primary); font-weight: 600; }

.pagination .p-controls[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination .p-controls button[b-eqag01a3ym] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    background: #ffffff;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.pagination .p-controls button:hover:not(:disabled)[b-eqag01a3ym] {
    background: #f5f5f7;
}

.pagination .p-controls button.active[b-eqag01a3ym] {
    background: var(--color-purple-bg);
    border-color: var(--color-purple-primary);
    color: var(--color-purple-primary);
    font-weight: 600;
}

.pagination .p-controls button:disabled[b-eqag01a3ym] {
    opacity: 0.4;
    cursor: not-allowed;
}

.run-action-row[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.run-action-row .info-banner[b-eqag01a3ym] { margin: 0; }

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

.rc-actions .btn-primary[b-eqag01a3ym],
.rc-actions .btn-secondary[b-eqag01a3ym] {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    width: auto;
    min-width: max-content;
}

.rc-action-menu[b-eqag01a3ym] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.rc-action-menu-overlay[b-eqag01a3ym] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 50;
}

.rc-action-menu-trigger[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rc-action-menu-trigger .caret[b-eqag01a3ym] {
    width: 12px;
    height: 12px;
    transition: transform 0.15s;
}

.rc-action-menu.open .rc-action-menu-trigger .caret[b-eqag01a3ym] {
    transform: rotate(180deg);
}

.rc-action-menu-list[b-eqag01a3ym] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);
    padding: 4px 0;
    z-index: 60;
    animation: rc-pop-b-eqag01a3ym 0.12s ease;
}

@keyframes rc-pop-b-eqag01a3ym {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

.rc-action-menu-list button[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.rc-action-menu-list button:hover[b-eqag01a3ym] { background: #f5f5f7; }

.rc-action-menu-list button svg[b-eqag01a3ym] {
    width: 14px;
    height: 14px;
    color: #6e6e73;
}

.rc-action-menu-list button.danger[b-eqag01a3ym] { color: #d24d61; }
.rc-action-menu-list button.danger svg[b-eqag01a3ym] { color: #d24d61; }
.rc-action-menu-list button.danger:hover[b-eqag01a3ym] { background: #fdecef; }

/* Disabled state for action-menu items (run is terminal — Canceled / Completed /
   Expired). Mutes the text + svg, removes the hover affordance, switches the
   cursor so the user can see the action is inert. */
.rc-action-menu-list button:disabled[b-eqag01a3ym],
.rc-action-menu-list button:disabled:hover[b-eqag01a3ym] {
    color: #c4c4c8;
    cursor: not-allowed;
    background: transparent;
}
.rc-action-menu-list button:disabled svg[b-eqag01a3ym] { color: #c4c4c8; }
.rc-action-menu-list button.danger:disabled[b-eqag01a3ym],
.rc-action-menu-list button.danger:disabled:hover[b-eqag01a3ym] {
    color: #e5b1b8;
    background: transparent;
}
.rc-action-menu-list button.danger:disabled svg[b-eqag01a3ym] { color: #e5b1b8; }

/* ── Bucket Tabs ──────────────────────────────────────────── */
.bucket-tabs[b-eqag01a3ym] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    background: var(--color-border-row);
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--color-border-primary);
    border-bottom: none;
    overflow-x: auto;
    margin-bottom: 0;
}

.bucket-tab[b-eqag01a3ym] {
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    transition: all 0.18s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    flex-shrink: 0;
}

.bucket-tab:hover[b-eqag01a3ym] {
    color: var(--color-purple-primary);
    background: rgba(124, 92, 219, 0.04);
}

.bucket-tab.active[b-eqag01a3ym] {
    color: var(--color-purple-primary);
    background: white;
    border-top-color: var(--color-purple-primary);
}

.bucket-tab:first-child[b-eqag01a3ym] {
    border-radius: 12px 0 0 0;
}

.bucket-dot[b-eqag01a3ym] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bucket-dot.rollout[b-eqag01a3ym] { background: var(--color-info-blue); }
.bucket-dot.cashout[b-eqag01a3ym] { background: var(--color-success); }
.bucket-dot.feeout[b-eqag01a3ym] { background: var(--color-warning-amber); }
.bucket-dot.rmd[b-eqag01a3ym] { background: var(--color-purple-primary); }
.bucket-dot.overthreshold[b-eqag01a3ym] { background: #4f6f8a; }
.bucket-dot.active[b-eqag01a3ym] { background: var(--color-text-muted); }
.bucket-dot.removed[b-eqag01a3ym] { background: var(--color-error); }

/* Mockup §02_buckets.html .tab-count — always-on pill with subtle dark-tint
   bg; active state swaps to the purple-bg/purple-primary palette but keeps
   the pill radius. */
.tab-count[b-eqag01a3ym] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.bucket-tab.active .tab-count[b-eqag01a3ym] {
    background: var(--color-purple-bg);
    color: var(--color-purple-primary);
}

/* ── Quick Filter Pills ────────────────────────────────────── */
.quick-filters[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: white;
    /* Left + right borders extend the bucket-tabs card down through quick-
       filters, selection-bar, summary-line, and the grid — all one cohesive
       container with subtle row dividers (mockup §2.5). */
    border-left: 1px solid var(--color-border-primary);
    border-right: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-row);
    font-size: 12px;
    flex-wrap: wrap;
}

/* Mockup §02_buckets.html .chip-label — tiny uppercase eyebrow that
   labels the chip row ("QUICK FILTER"). */
.filter-label[b-eqag01a3ym] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    margin-right: 2px;
}

.filter-sep[b-eqag01a3ym] {
    color: var(--color-border-input);
    font-weight: 300;
    margin: 0 4px;
}

/* Mockup §02_buckets.html .filter-chip — slim pill (3×10), 12px/500,
   border-only hover (no bg), purple-on-purple active. */
.filter-chip[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--color-border-input);
    background: white;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.filter-chip:hover[b-eqag01a3ym] {
    border-color: var(--color-purple-primary);
    color: var(--color-purple-primary);
}

.filter-chip.active[b-eqag01a3ym] {
    background: var(--color-purple-primary);
    border-color: var(--color-purple-primary);
    color: white;
}

/* Mockup §02_buckets.html .chip-count — mono digits, tight padding, dark
   tint bg at rest; flips to translucent-white inside an active chip. */
.chip-count[b-eqag01a3ym] {
    display: inline-block;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
    background: rgba(0, 0, 0, 0.06);
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

.filter-chip.active .chip-count[b-eqag01a3ym] {
    background: rgba(255, 255, 255, 0.22);
    color: white;
}

/* ── Summary Line ─────────────────────────────────────────── */
.summary-line[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    background: white;
    border-left: 1px solid var(--color-border-primary);
    border-right: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-row);
    font-size: 13px;
}

.summary-line .left[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.stat[b-eqag01a3ym] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.stat strong[b-eqag01a3ym] {
    color: var(--color-text-primary);
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-variant-numeric: tabular-nums;
}

/* "N missing vesting %" — only the count number renders in warning amber;
   the surrounding "missing vesting %" label stays in the default secondary
   text colour so the number stands out as the actionable signal. */
.stat.warn strong[b-eqag01a3ym] {
    color: var(--color-warning-amber);
}

/* Cashout / threshold balance-range pill — a subtle light-grey chip so it
   reads as a metadata badge rather than free-floating text alongside the
   other stat counters. */
.stat.balance-range[b-eqag01a3ym] {
    margin-left: 8px;
    padding: 1px 10px;
    line-height: 1.4;
    background: var(--color-bg-page-alt, #f5f5f7);
    border: 1px solid var(--color-border-primary);
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}


.search-box[b-eqag01a3ym] {
    padding: 6px 12px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    width: 200px;
}

.search-box:focus[b-eqag01a3ym] {
    outline: none;
    border-color: var(--color-purple-primary);
    box-shadow: 0 0 0 2px rgba(124, 92, 219, 0.1);
}

/* ── Export dropdown ───────────────────────────────────────── */
.export-dropdown[b-eqag01a3ym] {
    position: relative;
    display: inline-block;
    margin-left: 8px;
}

.export-trigger[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: white;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.export-trigger:hover:not(:disabled)[b-eqag01a3ym] {
    color: var(--color-purple-primary);
    border-color: var(--color-purple-primary);
    background: var(--color-purple-bg);
}

.export-trigger:disabled[b-eqag01a3ym] {
    opacity: 0.6;
    cursor: not-allowed;
}

.export-dropdown.open .export-trigger[b-eqag01a3ym] {
    color: var(--color-purple-primary);
    border-color: var(--color-purple-primary);
    background: var(--color-purple-bg);
}

.export-menu-backdrop[b-eqag01a3ym] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.export-menu[b-eqag01a3ym] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);
    padding: 4px 0;
    z-index: 1000;
}

.export-menu button[b-eqag01a3ym] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.12s;
}

.export-menu button:hover[b-eqag01a3ym] {
    background: var(--color-bg-page-alt);
}

.export-menu button svg[b-eqag01a3ym] {
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.export-menu button:hover svg[b-eqag01a3ym] {
    color: var(--color-purple-primary);
}

/* ── Selection Bar ────────────────────────────────────────── */
/* Selection bar — wiki 985 mockup:
   white background, no pill behind "N selected", just a purple checkmark +
   purple text on the left, Move to + Clear pushed all the way to the right.
   No top/side border, no border-radius, no margin — it sits inline between
   the quick-filters and the stats line so the bucket tabs / filters / bar /
   stats / grid read as ONE continuous card. */
.selection-bar[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: white;
    border-left: 1px solid var(--color-border-primary);
    border-right: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-row);
    animation: slideDownIn-b-eqag01a3ym 0.22s ease;
    font-size: 13px;
}

/* "✓ N selected" — purple text on white, no background pill. */
.selection-chip[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    color: var(--color-purple-primary);
    font-size: 13px;
    font-weight: 600;
}

.selection-chip strong[b-eqag01a3ym] {
    font-size: 13px;
    font-weight: 700;
}

.selection-check[b-eqag01a3ym] {
    flex-shrink: 0;
    color: var(--color-purple-primary);
}

.selection-actions[b-eqag01a3ym] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    /* Push Move to + Clear to the right edge so the bar matches the mockup:
       LEFT "✓ N selected" ←  flex gap  →  "Move to ▾" + "Clear" RIGHT. */
    margin-left: auto;
}

.selection-label[b-eqag01a3ym] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--color-purple-primary);
    margin-right: 4px;
}

.bucket-move-btn[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: white;
    border: 1px solid #d6cdef;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}

.bucket-move-btn:hover[b-eqag01a3ym] {
    background: var(--color-purple-primary);
    color: white;
    border-color: var(--color-purple-primary);
}

.bucket-move-btn:hover .bucket-dot[b-eqag01a3ym] { background: white; }

.bucket-move-btn .bucket-dot[b-eqag01a3ym] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-text-muted);
}

.bucket-move-btn .bucket-dot.rollout[b-eqag01a3ym] { background: #4d72c6; }
.bucket-move-btn .bucket-dot.cashout[b-eqag01a3ym] { background: #1f9d6a; }
.bucket-move-btn .bucket-dot.feeout[b-eqag01a3ym] { background: #d18a2c; }
.bucket-move-btn .bucket-dot.rmd[b-eqag01a3ym] { background: #7c5cdb; }
.bucket-move-btn .bucket-dot.overthreshold[b-eqag01a3ym] { background: #4f6f8a; }
.bucket-move-btn .bucket-dot.active[b-eqag01a3ym] { background: #86868b; }
.bucket-move-btn .bucket-dot.removed[b-eqag01a3ym],
.bucket-move-btn .bucket-dot.remove[b-eqag01a3ym] { background: #d24d61; }

.bucket-move-btn.reset[b-eqag01a3ym] {
    gap: 5px;
    border-color: var(--color-border-input);
    color: var(--color-text-secondary);
}

.bucket-move-btn.reset:hover[b-eqag01a3ym] {
    background: #f5f5f7;
    color: var(--color-text-primary);
    border-color: var(--color-border-input);
}

.bucket-move-btn.reset svg[b-eqag01a3ym] { flex-shrink: 0; }

/* "Move to ▾" dropdown trigger + popover. Replaces the inline-per-bucket
   buttons that used to fan out across the selection bar — see wiki 985
   mockup and AC 3.4.2: the user picks the target bucket from a single
   dropdown, then confirms with a required reason in the modal. */
.move-dropdown[b-eqag01a3ym] {
    position: relative;
    display: inline-block;
}

.move-trigger[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ede9fe;
    color: var(--color-purple-primary);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

/* Hover: solid purple background + white text so the button reads clearly
   as the primary bulk action when active. */
.move-trigger:hover[b-eqag01a3ym] {
    background: var(--color-purple-primary);
    color: white;
    border-color: var(--color-purple-primary);
}

.move-trigger .move-caret[b-eqag01a3ym] {
    opacity: 0.6;
    margin-left: 2px;
}

/* Invisible backdrop — only present while the menu is open. Sits below
   the menu but above everything else so any outside click lands here
   and closes the dropdown. */
.move-dropdown-backdrop[b-eqag01a3ym] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 90;
}

.move-menu[b-eqag01a3ym] {
    position: absolute;
    top: calc(100% + 4px);
    /* Bar is right-aligned, so anchor the menu to the right edge of the
       trigger — keeps the menu inside the viewport, doesn't run off-screen. */
    right: 0;
    min-width: 240px;
    background: white;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);
    z-index: 100;
    /* Size the menu to its content so all 8 entries (7 buckets + Reset)
       always render at once with no scrollbar. The earlier max-height was
       too tight and forced an unwanted scroll on first open. */
    overflow: hidden;
    padding: 4px 0;
}

.move-menu .move-label[b-eqag01a3ym] {
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--color-text-muted, #86868b);
}

.move-menu button[b-eqag01a3ym] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1d1d1f);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

.move-menu button:hover:not(:disabled)[b-eqag01a3ym] { background: #f5f5f7; }

.move-menu button:disabled[b-eqag01a3ym] {
    color: var(--color-text-muted, #86868b);
    cursor: not-allowed;
}

.move-menu button .bucket-dot[b-eqag01a3ym] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: var(--color-text-muted, #86868b);
}

.move-menu button .bucket-dot.rollout[b-eqag01a3ym] { background: #4d72c6; }
.move-menu button .bucket-dot.cashout[b-eqag01a3ym] { background: #1f9d6a; }
.move-menu button .bucket-dot.feeout[b-eqag01a3ym] { background: #d18a2c; }
.move-menu button .bucket-dot.rmd[b-eqag01a3ym] { background: #7c5cdb; }
.move-menu button .bucket-dot.overthreshold[b-eqag01a3ym] { background: #4f6f8a; }
.move-menu button .bucket-dot.active[b-eqag01a3ym] { background: #86868b; }
.move-menu button .bucket-dot.removed[b-eqag01a3ym],
.move-menu button .bucket-dot.remove[b-eqag01a3ym] { background: #d24d61; }

.move-menu button .check[b-eqag01a3ym] {
    margin-left: auto;
    color: var(--color-text-muted, #86868b);
    font-size: 11px;
    font-weight: 500;
}

.move-menu hr[b-eqag01a3ym] {
    border: none;
    border-top: 1px solid #f5f5f7;
    margin: 4px 0;
}

.selection-clear[b-eqag01a3ym] {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid #d6cdef;
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-purple-primary);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.12s;
}

.selection-clear:hover[b-eqag01a3ym] {
    background: white;
    border-color: var(--color-purple-primary);
}

@keyframes slideDownIn-b-eqag01a3ym {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Data Grid / Table ─────────────────────────────────────── */
.rrl-table[b-eqag01a3ym] {
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: white;
    min-width: 1080px;
}

.rrl-table thead[b-eqag01a3ym] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%), #fbfbfd;
    border-bottom: 1px solid var(--color-border-primary);
}

.rrl-table th[b-eqag01a3ym] {
    color: var(--color-text-muted);
    font-weight: 700;
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.rrl-table th.right[b-eqag01a3ym] {
    text-align: right;
}

.rrl-table th.checkbox-cell[b-eqag01a3ym] {
    width: 36px;
    padding-right: 0;
}

.rrl-table tbody tr:nth-child(even) td[b-eqag01a3ym] {
    background: rgba(15, 15, 25, 0.018);
}

.rrl-table tbody tr:hover td[b-eqag01a3ym] {
    background: rgba(15, 15, 25, 0.025);
}

.rrl-table tbody tr.selected td[b-eqag01a3ym] {
    background: rgba(124, 92, 219, 0.06);
}

.rrl-table tbody tr.selected td:first-child[b-eqag01a3ym] {
    box-shadow: inset 3px 0 0 var(--color-purple-primary);
}

.rrl-table td[b-eqag01a3ym] {
    color: var(--color-text-primary);
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-row);
    vertical-align: middle;
    transition: background 0.18s;
}

.rrl-table td.right[b-eqag01a3ym] {
    text-align: right;
}

.rrl-table td.checkbox-cell[b-eqag01a3ym] {
    width: 36px;
    padding-right: 0;
}

.rrl-table td.checkbox-cell input[b-eqag01a3ym] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-purple-primary);
    cursor: pointer;
}

/* Header select-all checkbox — match the row checkboxes' purple accent so
   both render with the same brand color when checked (previously the th
   selector was missing accent-color and fell back to the browser default
   black/dark blue fill). */
.rrl-table th.checkbox-cell input[b-eqag01a3ym] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-purple-primary);
    cursor: pointer;
}

.rrl-table td.participant-cell[b-eqag01a3ym] {
    cursor: pointer;
}

.participant-link[b-eqag01a3ym] {
    cursor: pointer;
}

.participant-link:hover[b-eqag01a3ym] {
    color: var(--color-purple-primary);
    text-decoration: underline;
}

.participant-name[b-eqag01a3ym] {
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
}

.participant-name:hover[b-eqag01a3ym] {
    color: var(--color-purple-primary);
    text-decoration: underline;
}

.participant-ssn[b-eqag01a3ym] {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
}

.participant-cell[b-eqag01a3ym] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rrl-table td.amount[b-eqag01a3ym] {
    font-family: 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

.rrl-table .vesting-input[b-eqag01a3ym] {
    width: 56px;
    padding: 3px 8px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: 'Courier New', monospace;
    text-align: right;
    color: var(--color-text-primary);
    background: white;
    font-variant-numeric: tabular-nums;
    transition: all 0.15s;
}

.rrl-table .vesting-input:hover[b-eqag01a3ym] {
    border-color: var(--color-border-input);
}

.rrl-table .vesting-input:focus[b-eqag01a3ym] {
    outline: none;
    border-color: var(--color-purple-primary);
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

.rrl-table .percent-sign[b-eqag01a3ym] {
    color: var(--color-text-muted);
    font-size: 11px;
    margin-left: 3px;
}

.rrl-table td.actions-cell[b-eqag01a3ym] {
    width: auto;
    padding: 12px 16px;
    text-align: center;
}

.action-kebab[b-eqag01a3ym] {
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.action-kebab:hover[b-eqag01a3ym] {
    background: var(--color-bg-page-alt);
    color: var(--color-text-primary);
}

.action-kebab svg[b-eqag01a3ym] {
    width: 16px;
    height: 16px;
}

/* ── Responsive Design ────────────────────────────────────── */
@media (max-width: 768px) {
    .rrl-page[b-eqag01a3ym] {
        padding: var(--spacing-md);
    }

    .run-header-meta[b-eqag01a3ym] {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .bucket-tabs[b-eqag01a3ym] {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .action-buttons[b-eqag01a3ym] {
        flex-direction: column;
        width: 100%;
    }

    .search-box[b-eqag01a3ym] {
        width: 100%;
    }
}

/* ── Wiki 989 §6.2 — Cancelled audit banner ────────────────────────
   Pixel match to mockup 02b_buckets_cancelled.html lines 440-459.
   ─────────────────────────────────────────────────────────────────── */
.rrl-page .cancelled-banner[b-eqag01a3ym] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 18px;
    padding: 12px 16px;
    background: #f8dde2;
    border: 1px solid rgba(176, 42, 55, 0.35);
    border-left: 3px solid #d24d61;
    border-radius: 8px;
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.45;
}
.rrl-page .cancelled-banner .cb-icon[b-eqag01a3ym] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #d24d61;
}
.rrl-page .cancelled-banner .cb-body strong[b-eqag01a3ym] {
    font-weight: 600;
}
/* Mockup explicitly turns <em> off-italic and tints it secondary so the
   reason quote reads as a muted aside, not an emphasis. */
.rrl-page .cancelled-banner .cb-body em[b-eqag01a3ym] {
    font-style: normal;
    color: #6e6e73;
}

/* Wiki 995 §4.6 — Expired banner. */
.rrl-page .expired-banner[b-eqag01a3ym] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 18px;
    padding: 12px 16px;
    background: #fff8e9;
    border: 1px solid rgba(138, 46, 59, 0.30);
    border-left: 3px solid #8a2e3b;
    border-radius: 8px;
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.45;
}
.rrl-page .expired-banner .eb-icon[b-eqag01a3ym] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #8a2e3b;
}
.rrl-page .expired-banner .eb-body strong[b-eqag01a3ym] {
    font-weight: 600;
}

/* Wiki 989 §8.1 — Start-new-run CTA cluster, pixel match to mockup
   02b_buckets_cancelled.html lines 424-438. `margin-left: auto` pushes the
   button to the right end of the .run-header-top flex row; the page-wide
   max-width above keeps that "right end" at a sensible card edge.

   Local .btn-primary.btn-sm baseline (line 524) is `padding: 6px 14px;
   font-size: 13px` — ~32px tall, taller than the mockup. We override
   explicitly on .btn-restart so this one button uses the mockup's
   compact 5px 12px / 12px / 600 dimensions without affecting siblings
   like "Generate Notice →". */
.rrl-page .run-header-actions[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}
.rrl-page .btn-restart[b-eqag01a3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    /* Mockup-derived compact sizing (Bootstrap .btn-sm). Force-override because
       the local .btn-primary.btn-sm at line 524 has equal specificity (0,2,0)
       and would tie — !important wins the cascade unambiguously. */
    padding: 4px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    min-width: 0 !important;
}
.rrl-page .btn-restart svg[b-eqag01a3ym] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.rrl-page .btn-restart:disabled[b-eqag01a3ym] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Wiki 989 §6.4 — Read-only worksheet (.is-frozen) ─────────────
   Mockup 02b_buckets_cancelled.html lines 465-479: hide all mutating
   controls + disable the inline vest input. Bucket tabs / search /
   pagination / participant-detail drawer stay live so users can
   browse the historic worksheet read-only. OQ #5 — export still
   works once an Export entry is added; only the mutating actions
   inside .rc-actions are hidden today (no Export entry exists yet).
   ─────────────────────────────────────────────────────────────────── */
.rrl-page.is-frozen .run-action-row[b-eqag01a3ym],
.rrl-page.is-frozen .rc-actions[b-eqag01a3ym],
.rrl-page.is-frozen .selection-bar[b-eqag01a3ym],
.rrl-page.is-frozen .move-dropdown[b-eqag01a3ym],
.rrl-page.is-frozen .checkbox-cell[b-eqag01a3ym],
.rrl-page.is-frozen .actions-cell[b-eqag01a3ym],
.rrl-page.is-frozen .recalc-btn[b-eqag01a3ym],
.rrl-page.is-frozen .notes-btn[b-eqag01a3ym] {
    display: none !important;
}
.rrl-page.is-frozen .vesting-input[b-eqag01a3ym] {
    pointer-events: none;
    background: #f5f5f7;
    color: #86868b;
    border-color: transparent;
}
/* /Pages/Rollouts/RolloutsWorksheet.razor.rz.scp.css */
/* Variables declared on `.rw-page` (NOT `:root`) because CSS isolation rewrites selectors with [b-xxx], which never matches the document root. */

.rw-page[b-l5sa8nbnrl] {
    --rw-purple: #7c5cdb;
    --rw-purple-hover: #6d4dcb;
    --rw-purple-bg: #f3f0ff;
    --rw-text: #1d1d1f;
    --rw-text-muted: #6e6e73;
    --rw-text-secondary: #6e6e73;
    --rw-text-breadcrumb: #64748b;
    --rw-text-separator: #94a3b8;
    --rw-bg-page: #f8fafc;
    --rw-bg-alt: #f5f5f7;
    --rw-border: #e5e5e7;
    --rw-border-input: #d2d2d7;
    --rw-row-border: #f5f5f7;

    --rw-success: #1f9d6a;
    --rw-success-bg: #d6ecdf;
    --rw-success-text: #0f6b46;
    --rw-warning: #a07020;
    --rw-warning-bg: #f8eed5;
    --rw-error: #d24d61;
    --rw-error-bg: #f8dde2;
    --rw-info-blue: #3a5fa8;
    --rw-info-blue-bg: #dde6f5;

    /* Offsets the layout wrapper's own padding (.content 8px left + 1.1rem top, .container-fluid 12px sides) so the combined inset lands at the mockup's ~28px sides / ~22px top. Left < right is intentional — the wrapper adds more on the left. */
    padding: 6px 16px 24px 8px;
    background: var(--rw-bg-page);
    min-height: 100vh;
}

.run-title-row[b-l5sa8nbnrl] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    animation: rwFadeIn-b-l5sa8nbnrl 0.45s ease-out both;
}

.run-title-row .run-header-titles[b-l5sa8nbnrl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.run-title-row .run-eyebrow[b-l5sa8nbnrl] {
    font-size: 11px;
    font-weight: 600;
    color: var(--rw-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.run-title-row h1[b-l5sa8nbnrl] {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 0;
    color: var(--rw-text);
    font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@keyframes rwFadeIn-b-l5sa8nbnrl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .run-title-row[b-l5sa8nbnrl] { animation: none !important; }
}

.top-banner[b-l5sa8nbnrl] {
    display: none;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: var(--rw-warning-bg);
    color: var(--rw-warning);
    border-radius: 8px;
    border: 1px solid rgba(209, 138, 44, 0.25);
    font-size: 13px;
}

.top-banner.is-shown[b-l5sa8nbnrl] { display: flex; }

.top-banner svg.banner-icon[b-l5sa8nbnrl] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke-width: 2;
}

.top-banner .banner-body[b-l5sa8nbnrl] { flex: 1; }
.top-banner .banner-body strong[b-l5sa8nbnrl] { font-weight: 700; }

.top-banner .banner-x[b-l5sa8nbnrl] {
    background: none;
    border: none;
    color: inherit;
    padding: 2px 6px;
    cursor: pointer;
    opacity: 0.7;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.top-banner .banner-x:hover[b-l5sa8nbnrl] {
    opacity: 1;
    background: rgba(160, 112, 32, 0.12);
}

.top-banner .banner-x svg[b-l5sa8nbnrl] {
    width: 13px;
    height: 13px;
    stroke-width: 2.5;
}

.rw-stage[b-l5sa8nbnrl] {
    position: relative;
}

.rw-stage.is-loading[b-l5sa8nbnrl] {
    /* Reserve height so the spinner doesn't overlap the title row before the layout is measured. */
    min-height: 360px;
}

.rw-initial-loader[b-l5sa8nbnrl] {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: var(--rw-bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--rw-text-muted);
    font-size: 14px;
}

.rw-initial-loader .spinner-border[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    width: 2rem;
    height: 2rem;
    border-width: 0.2em;
}

.rw-initial-loader-label[b-l5sa8nbnrl] {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.rw-tabs[b-l5sa8nbnrl] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    background: var(--rw-bg-alt);
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--rw-border);
    border-bottom: none;
    overflow-x: auto;
}

.rw-tab[b-l5sa8nbnrl] {
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rw-text-secondary);
    cursor: pointer;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    transition: all 0.18s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.rw-tab:hover[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    background: rgba(124, 92, 219, 0.04);
}

.rw-tab.active[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    background: white;
    border-top-color: var(--rw-purple);
}

.rw-tab:first-child[b-l5sa8nbnrl] {
    border-radius: 12px 0 0 0;
}

.rw-state-dot[b-l5sa8nbnrl] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rw-dot-all[b-l5sa8nbnrl] { background: var(--rw-text-muted); }
.rw-dot-ready[b-l5sa8nbnrl] { background: var(--rw-success); }
.rw-dot-refresh[b-l5sa8nbnrl] { background: var(--rw-error); }
.rw-dot-in_progress[b-l5sa8nbnrl] { background: var(--rw-purple); }
.rw-dot-completed[b-l5sa8nbnrl] { background: var(--rw-info-blue); }
/* Cancelled uses error-red (destructive terminal), distinct from Completed's info-blue. */
.rw-dot-cancelled[b-l5sa8nbnrl] { background: var(--rw-error); }
/* Removed = amber; Expired = dark crimson (distinct from Need-Refresh red so it reads as terminal). */
.rw-dot-removed[b-l5sa8nbnrl] { background: #d18a2c; }
.rw-dot-expired[b-l5sa8nbnrl] { background: #8a2e3b; }

.rw-tab-count[b-l5sa8nbnrl] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: var(--rw-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: center;
}

.rw-tab.active .rw-tab-count[b-l5sa8nbnrl] {
    background: var(--rw-purple-bg);
    color: var(--rw-purple);
}

.rw-card[b-l5sa8nbnrl] {
    background: white;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--rw-border);
    border-top: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.rw-controls[b-l5sa8nbnrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--rw-row-border);
}

.rw-controls-left[b-l5sa8nbnrl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rw-search[b-l5sa8nbnrl] {
    position: relative;
    width: 280px;
}

.rw-search input[b-l5sa8nbnrl] {
    padding: 7px 12px 7px 34px;
    border: 1px solid var(--rw-border-input);
    border-radius: 8px;
    font-size: 13px;
    width: 100%;
    font-family: inherit;
    background: white;
    transition: all 0.15s;
}

.rw-search input:focus[b-l5sa8nbnrl] {
    outline: none;
    border-color: var(--rw-purple);
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.10);
}

.rw-search-icon[b-l5sa8nbnrl] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rw-text-muted);
    pointer-events: none;
    width: 14px;
    height: 14px;
}

.rw-filter-trigger[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid var(--rw-border-input);
    color: var(--rw-text-secondary);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.rw-filter-trigger:hover[b-l5sa8nbnrl] {
    border-color: #c7c7c7;
    color: var(--rw-text);
}

.rw-filter-trigger.is-active[b-l5sa8nbnrl] {
    background: var(--rw-purple-bg);
    color: var(--rw-purple);
    border-color: #ede9fe;
    font-weight: 600;
}

.rw-filter-trigger svg[b-l5sa8nbnrl] {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

.rw-filter-count[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rw-purple);
    color: white;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

.rw-active-filters[b-l5sa8nbnrl] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 18px;
    border-bottom: 1px solid var(--rw-row-border);
    background: var(--rw-bg-alt);
    font-size: 12px;
    color: var(--rw-text-secondary);
}

.rw-filter-chip[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px 2px 10px;
    background: white;
    border: 1px solid var(--rw-border-input);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rw-text);
}

.rw-chip-x[b-l5sa8nbnrl] {
    background: none;
    border: none;
    color: var(--rw-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
}

.rw-chip-x:hover[b-l5sa8nbnrl] {
    color: var(--rw-error);
    background: var(--rw-error-bg);
}

.rw-chip-x svg[b-l5sa8nbnrl] {
    width: 11px;
    height: 11px;
    stroke-width: 2.4;
}

.rw-filter-clear-all[b-l5sa8nbnrl] {
    background: none;
    border: none;
    color: var(--rw-purple);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 6px;
}

.rw-filter-clear-all:hover[b-l5sa8nbnrl] {
    text-decoration: underline;
}

.rw-bulk-bar[b-l5sa8nbnrl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: white;
    border-bottom: 1px solid var(--rw-row-border);
    animation: rwSlideDownIn-b-l5sa8nbnrl 0.22s ease;
}

@keyframes rwSlideDownIn-b-l5sa8nbnrl {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rw-bulk-bar[b-l5sa8nbnrl] { animation: none !important; }
}

.rw-bulk-left[b-l5sa8nbnrl] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rw-bulk-count[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rw-purple);
    font-weight: 600;
    font-size: 13px;
}

.rw-bulk-count svg[b-l5sa8nbnrl] {
    width: 15px;
    height: 15px;
    stroke-width: 2.5;
}

.rw-bulk-actions[b-l5sa8nbnrl] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rw-bulk-warn[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    color: #a07020;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    margin-left: 2px;
}

.rw-primary-btn[b-l5sa8nbnrl] {
    background: linear-gradient(180deg, #8b6ce8 0%, #5b3fc7 100%) padding-box,
                linear-gradient(180deg, #6d4dcb 0%, #3d1d9c 100%) border-box;
    color: white;
    border: 1.5px solid transparent;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
                0 4px 10px -2px rgba(94, 68, 200, 0.40);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.rw-primary-btn:hover:not(:disabled)[b-l5sa8nbnrl] {
    background: linear-gradient(180deg, #9879ec 0%, #6b50d5 100%) padding-box,
                linear-gradient(180deg, #7c5cdb 0%, #4823b4 100%) border-box;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -2px rgba(94, 68, 200, 0.45);
}

.rw-primary-btn:disabled[b-l5sa8nbnrl] {
    background: var(--rw-bg-alt);
    color: var(--rw-text-muted);
    border-color: var(--rw-border-input);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.rw-ghost-btn[b-l5sa8nbnrl] {
    background: white;
    color: var(--rw-text-secondary);
    border: 1px solid var(--rw-border-input);
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

.rw-ghost-btn:hover:not(:disabled)[b-l5sa8nbnrl] {
    border-color: #c7c7c7;
    color: var(--rw-text);
    background: var(--rw-bg-alt);
}

.rw-ghost-btn:disabled[b-l5sa8nbnrl] {
    background: var(--rw-bg-alt);
    color: var(--rw-text-muted);
    cursor: not-allowed;
}

.rw-link-btn[b-l5sa8nbnrl] {
    background: transparent;
    border: none;
    color: var(--rw-purple);
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    border-radius: 8px;
    transition: background 0.12s;
}

.rw-link-btn:hover:not(:disabled)[b-l5sa8nbnrl] {
    background: var(--rw-bg-alt);
}

.rw-link-btn:disabled[b-l5sa8nbnrl] {
    opacity: 0.4;
    cursor: not-allowed;
}

.rw-muted[b-l5sa8nbnrl] {
    color: var(--rw-text-muted);
    font-size: 13px;
}

.rw-dropdown-menu[b-l5sa8nbnrl] {
    min-width: 160px;
    background: white;
    border: 1px solid var(--rw-border);
    border-radius: 8px;
    padding: 4px 0;
    box-shadow: 0 8px 24px -4px rgba(15, 15, 25, 0.12), 0 2px 6px rgba(15, 15, 25, 0.06);
}

/* Floating variant positioned by inline left/top from the click event, independent of grid re-render. */
.rw-dropdown-floating[b-l5sa8nbnrl] {
    position: fixed;
    /* Higher than .rw-kebab-backdrop (90) so it sits above the click-catcher. */
    z-index: 100;
}

.rw-dropdown-item[b-l5sa8nbnrl] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rw-text);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}

.rw-dropdown-item:hover[b-l5sa8nbnrl] {
    background: var(--rw-bg-alt);
    color: var(--rw-text);
}

.rw-dropdown-item-danger[b-l5sa8nbnrl] {
    color: var(--rw-error);
}

.rw-dropdown-item-danger:hover[b-l5sa8nbnrl] {
    background: var(--rw-error-bg);
    color: var(--rw-error);
}

.rw-dropdown-divider[b-l5sa8nbnrl] {
    height: 1px;
    background: var(--rw-row-border);
    margin: 4px 0;
}

.rw-card.is-empty .rw-controls[b-l5sa8nbnrl],
.rw-card.is-empty .rw-bulk-bar[b-l5sa8nbnrl] {
    display: none;
}

.rw-empty-state[b-l5sa8nbnrl] {
    padding: 64px 24px;
    text-align: center;
    color: var(--rw-text-secondary);
}

.rw-empty-icon[b-l5sa8nbnrl] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--rw-purple-bg);
    color: var(--rw-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.rw-empty-icon svg[b-l5sa8nbnrl] {
    width: 28px;
    height: 28px;
    stroke-width: 1.6;
}

.rw-empty-state h3[b-l5sa8nbnrl] {
    font-size: 18px;
    font-weight: 700;
    color: var(--rw-text);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}

.rw-empty-state p[b-l5sa8nbnrl] {
    font-size: 13px;
    color: var(--rw-text-muted);
    margin: 0 0 14px;
}

.rw-empty-action[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.rw-empty-action:hover[b-l5sa8nbnrl] {
    text-decoration: underline;
}

.rw-empty-row[b-l5sa8nbnrl] {
    padding: 36px 24px;
    text-align: center;
    color: var(--rw-text-secondary);
    font-size: 13px;
}

.load-more-sentinel[b-l5sa8nbnrl] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0 4px;
    min-height: 32px;
}

.load-more-spinner[b-l5sa8nbnrl] {
    display: flex;
    gap: 5px;
}

.load-more-spinner span[b-l5sa8nbnrl] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rw-purple);
    opacity: 0.45;
    animation: rwLmBounce-b-l5sa8nbnrl 1.1s ease-in-out infinite;
}

.load-more-spinner span:nth-child(2)[b-l5sa8nbnrl] { animation-delay: 0.15s; }
.load-more-spinner span:nth-child(3)[b-l5sa8nbnrl] { animation-delay: 0.30s; }

@keyframes rwLmBounce-b-l5sa8nbnrl {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40%           { transform: translateY(-4px); opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
    .load-more-spinner span[b-l5sa8nbnrl] { animation: none !important; opacity: 0.6; }
}

.scroll-footer[b-l5sa8nbnrl] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--rw-row-border);
    font-size: 13px;
    color: var(--rw-text-muted);
    font-variant-numeric: tabular-nums;
}

.scroll-footer .sf-count[b-l5sa8nbnrl] {
    color: var(--rw-text-secondary);
    font-weight: 500;
}

.scroll-footer.all-loaded[b-l5sa8nbnrl]::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--rw-success);
    display: inline-block;
    margin-right: 2px;
}

.rw-empty-link[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    font-weight: 500;
    cursor: pointer;
    margin-left: 6px;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

.rw-empty-link:hover[b-l5sa8nbnrl] {
    text-decoration: underline;
}

.rw-checkbox[b-l5sa8nbnrl] {
    width: 16px;
    height: 16px;
    accent-color: var(--rw-purple);
    cursor: pointer;
    margin: 0;
}

.rw-checkbox:disabled[b-l5sa8nbnrl] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Transparent backdrop behind the open kebab so clicking outside closes it. */
.rw-kebab-backdrop[b-l5sa8nbnrl] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

[b-l5sa8nbnrl] .rw-grid {
    border: none;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table {
    font-size: 14px;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%), #fbfbfd;
    color: var(--rw-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--rw-border) !important;
    text-align: left;
    vertical-align: middle;
    transition: color 0.12s, font-weight 0.12s;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th.rz-sortable-column:hover,
[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th:hover {
    color: var(--rw-text) !important;
    font-weight: 700 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%), #fbfbfd !important;
}

/* Push typography into Radzen's inner title wrappers, which otherwise revert to inherited body styling. */
[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th .rz-column-title,
[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th .rz-column-title-content {
    padding: 0;
    margin: 0;
    text-align: left;
    justify-content: flex-start;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th:hover .rz-column-title,
[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th:hover .rz-column-title-content {
    color: inherit;
    font-weight: inherit;
}

/* Hide Radzen's Material sort ligature and emit our own dual-chevron via ::after, wrapper forced inline-flex so it sits beside the text. */
[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th .rz-sortable-column-icon {
    display: none !important;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th.rz-sortable-column {
    cursor: pointer;
    user-select: none;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th .rz-column-title {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th.rz-sortable-column .rz-column-title::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236e6e73' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpolyline points='6 9 12 4 18 9'/%3E%3Cpolyline points='6 15 12 20 18 15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.35;
    transition: opacity 0.12s;
    pointer-events: none;
    flex-shrink: 0;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th.rz-sortable-column:hover .rz-column-title::after {
    opacity: 0.7;
}


[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th.rz-sortable-column:has(.rzi-sort-asc) .rz-column-title::after {
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237c5cdb' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E");
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th.rz-sortable-column:has(.rzi-sort-desc) .rz-column-title::after {
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237c5cdb' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table thead th.rz-sortable-column.rz-state-active {
    color: var(--rw-purple) !important;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody td {
    padding: 14px 16px;
    font-size: 14px;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--rw-row-border) !important;
    vertical-align: middle;
    transition: background 0.18s;
    background: #ffffff;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Defeat Radzen's vertical column dividers (resize handles). Do NOT hide all th::after — the sort icon uses it. */
[b-l5sa8nbnrl] .rw-grid .rz-column-resizer,
[b-l5sa8nbnrl] .rw-grid .rz-grid-table .rz-column-resizer {
    display: none !important;
}

[b-l5sa8nbnrl] .rw-grid,
[b-l5sa8nbnrl] .rw-grid .rz-data-grid,
[b-l5sa8nbnrl] .rw-grid .rz-grid-table {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* table-layout:fixed enforces the per-column widths; without it Radzen auto-layout stretches columns to fill the viewport. */
[b-l5sa8nbnrl] .rw-grid .rz-grid-table {
    table-layout: fixed;
    min-width: 1280px;
}

/* Horizontal scroll on narrow viewports so the fixed-layout table doesn't clip its right edge; applied to every wrapper since the scrollable element varies by Radzen version. */
[b-l5sa8nbnrl] .rw-grid,
[b-l5sa8nbnrl] .rw-grid .rz-data-grid,
[b-l5sa8nbnrl] .rw-grid .rz-data-grid-data {
    overflow-x: auto;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody td .rz-cell-data {
    padding: 0;
    margin: 0;
    /* Override Radzen's overflow:hidden which clips multi-element cell contents. */
    overflow: visible;
}

/* Action cell — keep buttons on one line AND visible so Cancel isn't clipped. */
[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody td.action-cell {
    overflow: visible !important;
    white-space: nowrap;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody td.action-cell .rz-cell-data {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    overflow: visible !important;
}

/* Minimal horizontal padding so View rollout + Cancel both fit in the Action column. */
[b-l5sa8nbnrl] .rw-grid .action-cell .btn.btn-link,
[b-l5sa8nbnrl] .rw-grid .action-cell .btn.btn-link-danger {
    padding: 5px 4px;
}

/* Cancelled-row Start-new-run button: icon before text; sizing matches the compact View/Cancel links in adjacent rows. */
[b-l5sa8nbnrl] .rw-grid .action-cell .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
[b-l5sa8nbnrl] .rw-grid .action-cell .btn.btn-primary svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody tr:nth-child(even) td {
    background: rgba(15, 15, 25, 0.018);
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody tr:hover td {
    background: rgba(15, 15, 25, 0.025);
}

[b-l5sa8nbnrl] .rw-grid .rz-pager {
    border-top: 1px solid var(--rw-row-border);
    padding: 10px 18px;
    background: white;
}

[b-l5sa8nbnrl] .rw-grid .rz-data-grid-empty-content {
    padding: 40px 18px;
    color: var(--rw-text-muted);
    text-align: center;
}

.outcome-subfilter[b-l5sa8nbnrl] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px 0;
    flex-wrap: wrap;
}

.outcome-subfilter .subfilter-label[b-l5sa8nbnrl] {
    font-size: 12px;
    font-weight: 600;
    color: var(--rw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.outcome-subfilter .outcome-chip[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: white;
    border: 1px solid var(--rw-border-input);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rw-text-secondary);
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}

.outcome-subfilter .outcome-chip:hover[b-l5sa8nbnrl] {
    color: var(--rw-text);
    border-color: var(--rw-text-muted);
}

.outcome-subfilter .outcome-chip.is-active[b-l5sa8nbnrl] {
    background: var(--rw-purple-bg);
    border-color: var(--rw-purple);
    color: var(--rw-purple);
}

.outcome-subfilter .outcome-chip .oc-count[b-l5sa8nbnrl] {
    font-size: 11px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--rw-text-secondary);
    font-variant-numeric: tabular-nums;
}

.outcome-subfilter .outcome-chip.is-active .oc-count[b-l5sa8nbnrl] {
    background: rgba(124, 92, 219, 0.18);
    color: var(--rw-purple);
}

.rw-controls-right[b-l5sa8nbnrl] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-icon[b-l5sa8nbnrl] {
    padding: 7px;
    background: none;
    border: 1px solid transparent;
    color: var(--rw-text-secondary);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-icon:hover[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    background: var(--rw-purple-bg);
}

.btn-icon svg[b-l5sa8nbnrl] {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

.name-cell[b-l5sa8nbnrl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.name-cell .name[b-l5sa8nbnrl] {
    color: var(--rw-text);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.name-cell .name:hover[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    text-decoration: underline;
}

.name-cell .meta[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rw-text-muted);
    font-size: 11px;
    flex-wrap: wrap;
}

.name-cell .id-chip[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--rw-bg-alt);
    color: var(--rw-text-secondary);
    white-space: nowrap;
}

.name-cell .id-chip .id-label[b-l5sa8nbnrl] { font-weight: 600; }

.name-cell .id-chip .id-value[b-l5sa8nbnrl] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--rw-text);
}

.name-cell .new-badge[b-l5sa8nbnrl] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--rw-warning-bg);
    color: var(--rw-warning);
    line-height: 1.4;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody td.account-cell {
    white-space: nowrap;
}

.account-cell-type-icon[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    color: var(--rw-text-secondary);
    margin-right: 6px;
    vertical-align: middle;
}

.account-cell-type-icon .prov-type-icon[b-l5sa8nbnrl] {
    width: 14px;
    height: 14px;
}

a.account-link[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    text-decoration: none;
    font-weight: 600;
    vertical-align: middle;
}

a.account-link:hover[b-l5sa8nbnrl] { text-decoration: underline; }

.rk-cell[b-l5sa8nbnrl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rk-cell .rk-name[b-l5sa8nbnrl] {
    color: var(--rw-text);
    font-weight: 500;
    text-decoration: none;
}

a.rk-name:hover[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    text-decoration: underline;
}

.rk-cell .custodian[b-l5sa8nbnrl] {
    color: var(--rw-text-muted);
    font-size: 11px;
    text-decoration: none;
}

a.custodian:hover[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    text-decoration: underline;
}

.status-mini[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    cursor: default;
    line-height: 1.5;
}

.status-mini.warn[b-l5sa8nbnrl] {
    background: var(--rw-warning-bg);
    color: var(--rw-warning);
}

.status-mini.error[b-l5sa8nbnrl] {
    background: var(--rw-error-bg);
    color: var(--rw-error);
}

.status-mini.info[b-l5sa8nbnrl] {
    background: var(--rw-info-blue-bg);
    color: var(--rw-info-blue);
}

.status-mini.neutral[b-l5sa8nbnrl] {
    background: var(--rw-bg-alt);
    color: var(--rw-text-secondary);
}

.status-mini.green[b-l5sa8nbnrl] {
    background: var(--rw-success-bg);
    color: var(--rw-success-text);
}

.status-mini.purple[b-l5sa8nbnrl] {
    background: var(--rw-purple-bg);
    color: var(--rw-purple);
}

.fresh-cell[b-l5sa8nbnrl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fresh-cell .fresh-line[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rw-text);
    font-weight: 600;
    font-size: 12px;
}

.fresh-cell .fresh-meta[b-l5sa8nbnrl] {
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--rw-text-muted);
    letter-spacing: 0.01em;
}

.fresh-cell.fresh .fresh-meta[b-l5sa8nbnrl] { color: var(--rw-text-muted); }
.fresh-cell.warn .fresh-meta[b-l5sa8nbnrl] {
    color: var(--rw-warning);
    font-weight: 600;
}
.fresh-cell.stale .fresh-meta[b-l5sa8nbnrl] {
    color: var(--rw-error);
    font-weight: 600;
}
.fresh-cell.stale .fresh-line[b-l5sa8nbnrl] { color: var(--rw-text-secondary); }

.fresh-pill[b-l5sa8nbnrl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: default;
}

.fresh-pill svg[b-l5sa8nbnrl] {
    width: 12px;
    height: 12px;
    stroke-width: 2.4;
    flex-shrink: 0;
}

.fresh-pill.green[b-l5sa8nbnrl] { color: var(--rw-success); }
.fresh-pill.warn[b-l5sa8nbnrl] { color: var(--rw-warning); }
.fresh-pill.stale[b-l5sa8nbnrl] { color: var(--rw-error); }

.added-cell[b-l5sa8nbnrl] {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
}

.added-cell.is-new[b-l5sa8nbnrl] {
    padding-left: 12px;
}

.added-cell .added-line[b-l5sa8nbnrl] {
    font-size: 13px;
    color: var(--rw-text);
    font-weight: 500;
}

.added-cell .added-meta[b-l5sa8nbnrl] {
    font-size: 11px;
    color: var(--rw-text-muted);
    font-variant-numeric: tabular-nums;
}

.added-cell .added-new-dot[b-l5sa8nbnrl] {
    position: absolute;
    top: 6px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d18a2c;
    box-shadow: 0 0 0 3px rgba(209, 138, 44, 0.18);
}

.active-rollout-cell[b-l5sa8nbnrl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.active-rollout-cell .run-link[b-l5sa8nbnrl] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--rw-purple);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.active-rollout-cell .run-link:hover[b-l5sa8nbnrl] { text-decoration: underline; }

.active-rollout-cell .run-meta[b-l5sa8nbnrl] {
    font-size: 11px;
    color: var(--rw-text-muted);
}

.active-rollout-cell .completed[b-l5sa8nbnrl] {
    font-size: 13px;
    color: var(--rw-text-secondary);
    white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.active-rollout-cell .completed.expired[b-l5sa8nbnrl] { color: var(--rw-warning); }
.active-rollout-cell .completed.canceled[b-l5sa8nbnrl] {
    color: var(--rw-text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.25);
}

.active-rollout-cell .outcome-tag[b-l5sa8nbnrl] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    /* 500 (not the mockup's 600) since our Bootstrap font stack renders heavier than the mockup's Inter. */
    font-weight: 500;
    line-height: 1.5;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.active-rollout-cell .outcome-tag.expired[b-l5sa8nbnrl] {
    background: var(--rw-warning-bg);
    color: var(--rw-warning);
}

/* Cancelled outcome tag uses the error palette, mirroring .status-pill.red on the run-detail page. */
.active-rollout-cell .outcome-tag.canceled[b-l5sa8nbnrl] {
    background: var(--rw-error-bg);
    color: var(--rw-error);
}

/* Removed pill uses amber/warning tones (held out of the cycle, reversible until complete). */
.active-rollout-cell .outcome-tag.removed[b-l5sa8nbnrl] {
    background: #f8eed5;
    color: #a07020;
}

.active-rollout-cell .completed.removed[b-l5sa8nbnrl] {
    color: var(--rw-text-muted);
}

.active-rollout-cell .none[b-l5sa8nbnrl] {
    color: var(--rw-text-muted);
    font-size: 13px;
}

[b-l5sa8nbnrl] .rw-grid .rz-grid-table tbody td.action-cell {
    white-space: nowrap;
}

[b-l5sa8nbnrl] .rw-grid .action-cell .btn {
    /* inline-flex + gap so a leading SVG icon sits cleanly next to the label. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 5px 12px;
    font-weight: 600;
    font-family: inherit;
}

/* SVG sizing for regular inline SVGs; MarkupString icons also embed width/height directly since CSS isolation can't reach them. */
[b-l5sa8nbnrl] .rw-grid .action-cell .btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.btn.btn-sm[b-l5sa8nbnrl] {
    font-size: 12px;
    padding: 5px 12px;
}

.btn.btn-primary[b-l5sa8nbnrl] {
    background: linear-gradient(180deg, #8b6ce8 0%, #5b3fc7 100%) padding-box,
                linear-gradient(180deg, #6d4dcb 0%, #3d1d9c 100%) border-box;
    color: white;
    border: 1.5px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
                0 4px 10px -2px rgba(94, 68, 200, 0.40);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
    font-family: inherit;
}

.btn.btn-primary:hover:not(:disabled):not(.disabled)[b-l5sa8nbnrl] {
    background: linear-gradient(180deg, #9879ec 0%, #6b50d5 100%) padding-box,
                linear-gradient(180deg, #7c5cdb 0%, #4823b4 100%) border-box;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -2px rgba(94, 68, 200, 0.45);
}

.btn.btn-primary:disabled[b-l5sa8nbnrl],
.btn.btn-primary.disabled[b-l5sa8nbnrl] {
    background: var(--rw-bg-alt);
    color: var(--rw-text-muted);
    border-color: var(--rw-border-input);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn.btn-outline-secondary[b-l5sa8nbnrl] {
    background: white;
    color: var(--rw-text-secondary);
    border: 1px solid var(--rw-border-input);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.btn.btn-outline-secondary:hover:not(:disabled)[b-l5sa8nbnrl] {
    border-color: #c7c7c7;
    color: var(--rw-text);
    background: var(--rw-bg-alt);
}

.btn.btn-outline-secondary:disabled[b-l5sa8nbnrl] {
    color: var(--rw-text-muted);
    background: var(--rw-bg-alt);
    cursor: not-allowed;
}

.btn.btn-link[b-l5sa8nbnrl] {
    color: var(--rw-purple);
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    font-family: inherit;
}

.btn.btn-link:hover[b-l5sa8nbnrl] {
    color: var(--rw-purple-hover);
    text-decoration: underline;
}

.btn.btn-link-danger[b-l5sa8nbnrl] {
    background: none;
    border: none;
    color: var(--rw-error);
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    border-radius: 6px;
}

.btn.btn-link-danger:hover[b-l5sa8nbnrl] { text-decoration: underline; }

.row-kebab[b-l5sa8nbnrl] {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 6px;
    color: var(--rw-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.row-kebab:hover[b-l5sa8nbnrl],
.row-kebab.is-open[b-l5sa8nbnrl] {
    background: var(--rw-bg-alt);
    color: var(--rw-text);
}

.row-kebab svg[b-l5sa8nbnrl] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.rw-tabs[b-l5sa8nbnrl],
.rw-card[b-l5sa8nbnrl] { animation: rwFadeIn-b-l5sa8nbnrl 0.55s 0.08s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    .rw-tabs[b-l5sa8nbnrl], .rw-card[b-l5sa8nbnrl] { animation: none !important; }
}
/* /Pages/Users/UserPermissions.razor.rz.scp.css */
/*
   Component-scoped Plan Notice design-system styles for the Permissions viewer.
   Tokens and class names mirror https://pn-design-system.vercel.app/ — kept local
   via Blazor CSS isolation so they don't leak into the rest of Wasm.Client.
*/

.ds-page[b-eevrvartan] {
    /* Color tokens */
    --color-purple-primary: #7c5cdb;
    --color-purple-tint: #f1ecfd;
    --color-text-primary: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-success: #16a34a;
    --color-success-tint: #dcfce7;
    --color-warning-amber: #d97706;
    --color-warning-tint: #fef3c7;
    --color-neutral-tint: #f3f4f6;
    --color-border-primary: #e5e7eb;
    --color-bg-page-alt: #f8fafc;
    --color-bg-table-head: #fafafa;
    --color-bg-row-even: #fafafa;

    /* Spacing tokens (4px base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Radius */
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);

    color: var(--color-text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

/* ── Loading & empty states ─────────────────────────────────────────────── */

.ds-loading[b-eevrvartan] {
    padding: var(--sp-8);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.ds-empty[b-eevrvartan] {
    padding: var(--sp-6);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-page-alt);
    border: 1px dashed var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
}

/* ── Page header ────────────────────────────────────────────────────────── */

.page-header-row[b-eevrvartan] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--color-border-primary);
}

.page-title-block[b-eevrvartan] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1 1 auto;
}

.page-header-actions[b-eevrvartan] {
    display: flex;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.page-title[b-eevrvartan] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--color-text-primary);
    line-height: 1.15;
}

.page-subtitle[b-eevrvartan] {
    color: var(--color-text-secondary);
    font-size: 14px;
    max-width: 70ch;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.ds-section[b-eevrvartan] {
    margin-bottom: var(--sp-8);
}

.ds-section-head[b-eevrvartan] {
    margin-bottom: var(--sp-4);
}

.ds-eyebrow[b-eevrvartan] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-1);
}

.ds-section-title[b-eevrvartan] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--color-text-primary);
}

.ds-section-desc[b-eevrvartan] {
    margin: var(--sp-2) 0 0 0;
    color: var(--color-text-secondary);
    font-size: 13px;
    max-width: 70ch;
}

/* ── Info card grid (Permission Sets Applied) ───────────────────────────── */

.ds-info-grid[b-eevrvartan] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-3);
}

.info-card-field[b-eevrvartan] {
    background: #fff;
    border: 1px solid var(--color-border-primary);
    border-left: 4px solid var(--color-purple-primary);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-card);
}

.info-card-field-label[b-eevrvartan] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-1);
}

.info-card-field-value[b-eevrvartan] {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--sp-1);
}

.info-card-field-meta[b-eevrvartan] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--sp-2);
}

.info-card-field-desc[b-eevrvartan] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.ds-meta-sep[b-eevrvartan] {
    color: var(--color-border-primary);
}

/* ── Data table ─────────────────────────────────────────────────────────── */

.data-table-shell[b-eevrvartan] {
    background: #fff;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.table-controls[b-eevrvartan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    background: #fff;
    border-bottom: 1px solid var(--color-border-primary);
}

.table-controls-count[b-eevrvartan] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.table-controls-meta[b-eevrvartan] {
    font-size: 12px;
    color: var(--color-text-muted);
}

.data-table-wrap[b-eevrvartan] {
    overflow-x: auto;
}

.ds-table[b-eevrvartan] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ds-table thead th[b-eevrvartan] {
    background: var(--color-bg-table-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
}

.ds-table tbody td[b-eevrvartan] {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border-primary);
    vertical-align: middle;
}

.ds-table tbody tr:last-child td[b-eevrvartan] {
    border-bottom: none;
}

.ds-table tbody tr:nth-child(even)[b-eevrvartan] {
    background: var(--color-bg-row-even);
}

.ds-table tbody tr:hover[b-eevrvartan] {
    background: var(--color-purple-tint);
}

.row-granted .td-status[b-eevrvartan] {
    /* No-op marker class — leaves room for future emphasis */
}

.row-empty .permission-name[b-eevrvartan] {
    color: var(--color-text-secondary);
}

.th-status[b-eevrvartan], .td-status[b-eevrvartan] { width: 110px; }
.th-category[b-eevrvartan], .td-category[b-eevrvartan] { width: 140px; color: var(--color-text-secondary); }
.th-source[b-eevrvartan], .td-source[b-eevrvartan] { width: 280px; }

.permission-name[b-eevrvartan] {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.source-line[b-eevrvartan] {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* ── Code identifier ────────────────────────────────────────────────────── */

.ds-code[b-eevrvartan] {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg-page-alt);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--color-border-primary);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */

.badge[b-eevrvartan] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-green[b-eevrvartan] {
    background: var(--color-success-tint);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.badge-amber[b-eevrvartan] {
    background: var(--color-warning-tint);
    color: var(--color-warning-amber);
    border: 1px solid var(--color-warning-amber);
    margin-left: var(--sp-2);
}

.badge-neutral[b-eevrvartan] {
    background: var(--color-neutral-tint);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-primary);
}

/* ── Plan card (per-plan override section) ──────────────────────────────── */

.ds-plan-card[b-eevrvartan] {
    margin-bottom: var(--sp-4);
}

.ds-plan-card-head[b-eevrvartan] {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.ds-plan-name[b-eevrvartan] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.ds-btn[b-eevrvartan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
    white-space: nowrap;
}

.ds-btn:disabled[b-eevrvartan] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.ds-btn-primary[b-eevrvartan] {
    background: linear-gradient(135deg, #7c5cdb 0%, #8b6ce8 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(124, 92, 219, 0.25);
}

.ds-btn-primary:hover:not(:disabled)[b-eevrvartan] {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(124, 92, 219, 0.35);
}

.ds-btn-ghost[b-eevrvartan] {
    background: #fff;
    color: var(--color-text-secondary);
    border-color: var(--color-border-primary);
}

.ds-btn-ghost:hover:not(:disabled)[b-eevrvartan] {
    background: var(--color-bg-page-alt);
}

.ds-btn-danger-ghost[b-eevrvartan] {
    background: #fff;
    color: #b91c1c;
    border-color: #fecaca;
    padding: 4px 10px;
    font-size: 12px;
}

.ds-btn-danger-ghost:hover:not(:disabled)[b-eevrvartan] {
    background: #fef2f2;
    border-color: #fca5a5;
}

/* ── Edit mode controls ────────────────────────────────────────────────── */

.ds-edit-bar[b-eevrvartan] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--color-purple-tint);
    border: 1px solid #d8caf7;
    border-radius: var(--radius-md);
}

.ds-edit-bar-label[b-eevrvartan] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.ds-select[b-eevrvartan] {
    flex: 1 1 auto;
    min-width: 200px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    border: 1.5px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--color-text-primary);
    cursor: pointer;
}

.ds-select:focus[b-eevrvartan] {
    outline: none;
    border-color: var(--color-purple-primary);
    box-shadow: 0 0 0 3px rgba(124, 92, 219, 0.1);
}

.ds-select:disabled[b-eevrvartan] {
    background: var(--color-bg-page-alt);
    cursor: not-allowed;
    color: var(--color-text-muted);
}

.info-card-field-actions[b-eevrvartan] {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--color-border-primary);
    display: flex;
    justify-content: flex-end;
}

/* ── Utility ────────────────────────────────────────────────────────────── */

.ds-text-muted[b-eevrvartan] {
    color: var(--color-text-muted);
    font-size: 12px;
    font-style: italic;
}
/* /Shared/MainLayout - Copy.razor.rz.scp.css */
.page[b-lwcceja2js] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-lwcceja2js] {
    flex: 1;
}

.sidebar[b-lwcceja2js] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #1A1A7C 70%);
    /*background-color:#1A1A7C */
}

.top-row[b-lwcceja2js] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-lwcceja2js]  a, .top-row[b-lwcceja2js]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-lwcceja2js]  a:hover, .top-row[b-lwcceja2js]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-lwcceja2js]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-lwcceja2js] {
        display: none;
    }

    .top-row.auth[b-lwcceja2js] {
        justify-content: space-between;
    }

    .top-row[b-lwcceja2js]  a, .top-row[b-lwcceja2js]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-lwcceja2js] {
        flex-direction: row;
    }

    .sidebar[b-lwcceja2js] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-lwcceja2js] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-lwcceja2js]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-lwcceja2js], article[b-lwcceja2js] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/MainLayout-orig.razor.rz.scp.css */
.page[b-omm0w52wmn] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-omm0w52wmn] {
    flex: 1;
}

.sidebar[b-omm0w52wmn] {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #1A1A7C 70%);*/
    /*background-color:#1A1A7C */
    
    background: #FFFFFF;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

/*.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
        text-decoration: underline;
    }

    .top-row ::deep a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }
*/
/*@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
}*/

@media (min-width: 0px) {
    .page[b-omm0w52wmn] {
        flex-direction: row;
    }

    .sidebar[b-omm0w52wmn] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

  /*  .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }*/
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-kane1y13ak] {
    position: relative;
    display: flex;
    flex-direction: column;    
}

main[b-kane1y13ak] {
    flex: 1;
}

.sidebar[b-kane1y13ak] {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #1A1A7C 70%);*/
    /*background-color:#1A1A7C */

    background: #FFFFFF;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
    z-index: 3;
}

.top-row[b-kane1y13ak] {
    background: #FFFFFF;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
    /*background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;*/
    /*justify-content: flex-end;*/
    height: 50px;
    /*display: flex;*/
    align-items: center;
}

    .top-row[b-kane1y13ak]  a, .top-row[b-kane1y13ak]  .btn-link {
        white-space: nowrap;
        /*margin-left: 1.5rem;*/
        text-decoration: none;
    }

    .top-row[b-kane1y13ak]  a:hover, .top-row[b-kane1y13ak]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-kane1y13ak]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/*@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
}*/

@media (min-width: 0px) {
    .page[b-kane1y13ak] {
        flex-direction: row;
    }

    .sidebar[b-kane1y13ak] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-kane1y13ak] {
        /*position: sticky;*/
        /*top: 0;*/
        /*z-index: 1;*/
    }

    .top-row.auth[b-kane1y13ak]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    /*.top-row, */
    .article[b-kane1y13ak] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu - Copy.razor.rz.scp.css */
.navbar-toggler[b-ieeeqibrry] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-ieeeqibrry] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ieeeqibrry] {
    font-size: 1.1rem;
}

.oi[b-ieeeqibrry] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-ieeeqibrry] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ieeeqibrry] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ieeeqibrry] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ieeeqibrry]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-ieeeqibrry]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-ieeeqibrry]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-icon[b-ieeeqibrry] {
    min-width: 30px;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ieeeqibrry] {
        display: none;
    }

    .collapse[b-ieeeqibrry] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-lnzqs3oylt] {
    background-color: rgba(255, 255, 255, 0.1);
    
}

.top-row[b-lnzqs3oylt] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}
.bottom-row[b-lnzqs3oylt] {
    position: absolute;
    bottom: 0;
    padding-bottom: 10px;
    width: 100%;
}

.icon-menu-arrow[b-lnzqs3oylt] {
    text-align: right;
    cursor:pointer;
}

.navbar-brand[b-lnzqs3oylt] {
    font-size: 1.1rem;
}

.oi[b-lnzqs3oylt] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-lnzqs3oylt] {    
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #667085;
}

    .nav-item:first-of-type[b-lnzqs3oylt] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-lnzqs3oylt] {
        padding-bottom: 1rem;
    }

    .nav-item[b-lnzqs3oylt]  a {        
        border-radius: 4px;
        height: 2.5rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-lnzqs3oylt]  a.active {
            /*background-color: rgba(255,255,255,0.25);*/
            color: #7F56D9;
            
        }

        .nav-item[b-lnzqs3oylt]  a:hover {
            background-color: rgba(255,255,255,0.1);
            /*color: white;*/
            color: #7F56D9;
        }

.nav-icon[b-lnzqs3oylt] {
    min-width: 30px;
}
.nav-submenu[b-lnzqs3oylt] {
    display: none; /* Initially hidden */
    padding-left: 12px;
    margin-top: -6px;
}

    .nav-submenu .nav-item[b-lnzqs3oylt] {
        margin-top: -6px;
    }

    .nav-submenu.show[b-lnzqs3oylt] {
        display: block; /* Show the sub-menu */
    }

   


/*@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {*/
        /* Never collapse the sidebar for wide screens */
        /*display: block;
    }
}*/