/* /App.razor.rz.scp.css */
/* Ensures PCMSystem.Blazor.styles.css is generated for index.html */
#app[b-r3u8cuk7th] {
  min-height: 100vh;
}
/* /Pages/ClaimDetail/Bc3eDetailPage.razor.rz.scp.css */
/* BC3E-only: editable mini-table for the Q1–Q4 weeks/wages grid.
   Section, field, grid, and action-bar primitives live in
   wwwroot/css/app.css (.record-*). */

.bc3e-edit-quarterly[b-8asruw8vsd] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bc3e-edit-quarterly-header[b-8asruw8vsd],
.bc3e-edit-quarterly-row[b-8asruw8vsd] {
  display: grid;
  grid-template-columns: 80px repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.bc3e-edit-quarterly-col[b-8asruw8vsd] {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  padding-left: 16px;
}

.bc3e-edit-quarterly-rowlabel[b-8asruw8vsd] {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
}

.bc3e-edit-quarterly-header[b-8asruw8vsd] {
  border-bottom: 1px solid var(--cds-text-primary);
  padding-bottom: 4px;
}

@media (max-width: 640px) {
  .bc3e-edit-quarterly-header[b-8asruw8vsd] {
    display: none;
  }
  .bc3e-edit-quarterly-row[b-8asruw8vsd] {
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    border-top: 1px solid var(--cds-layer-02);
    padding-top: 8px;
  }
  .bc3e-edit-quarterly-rowlabel[b-8asruw8vsd] {
    grid-column: 1 / -1;
  }
}
/* /Pages/ClaimDetail/LifecycleChip.razor.rz.scp.css */
.lcp-chip[b-kmj5ocbuaw] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #495057;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    min-width: 7.5rem;
}

.lcp-chip-title[b-kmj5ocbuaw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.lcp-chip-sub[b-kmj5ocbuaw] {
    font-size: 0.72rem;
    color: inherit;
    opacity: 0.85;
}

/* Completed: teal */
.lcp-completed[b-kmj5ocbuaw] {
    background: #d6efe7;
    border-color: #bfe3d7;
    color: #0c6e54;
}

/* Current: white + amber border, the only warm element */
.lcp-current[b-kmj5ocbuaw] {
    background: #fff;
    border: 2px solid #d97706;
    color: #92510a;
}

.lcp-current .bi-arrow-repeat[b-kmj5ocbuaw] {
    color: #d97706;
}

/* Pending: neutral white tile (reads as an upcoming step on the gray panel) */
.lcp-pending[b-kmj5ocbuaw] {
    background: #fff;
    color: #6c7a8a;
}

/* Skipped: faded neutral + ramp glyph, never a checkmark */
.lcp-skipped[b-kmj5ocbuaw] {
    background: #fff;
    color: #6c7a8a;
    opacity: 0.75;
}

/* Collapsed (Appeals before any appeal): dashed */
.lcp-collapsed[b-kmj5ocbuaw] {
    background: #fff;
    border: 1px dashed #c4ccd8;
    color: #6c7a8a;
}

.lcp-selected[b-kmj5ocbuaw] {
    box-shadow: 0 2px 6px rgba(31, 45, 70, 0.18);
    border-color: #9aa7b8;
}

.lcp-current.lcp-selected[b-kmj5ocbuaw] {
    border-color: #d97706;
}

.lcp-caret[b-kmj5ocbuaw] {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #9aa7b8;
}

.lcp-current .lcp-caret[b-kmj5ocbuaw] {
    border-top-color: #d97706;
}
/* /Pages/ClaimDetail/LifecyclePhasePanel.razor.rz.scp.css */
.lpp-panel[b-cpf5qk7htd] {
    background: #fff;
    border: 1px solid #dbe1ea;
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
}

/* ── Header ── */

.lpp-header[b-cpf5qk7htd] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.lpp-title[b-cpf5qk7htd] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.lpp-meta[b-cpf5qk7htd] {
    color: #6c7a8a;
    font-size: 0.85rem;
}

.lpp-skip-note[b-cpf5qk7htd] {
    color: #6c7a8a;
    font-size: 0.85rem;
    font-style: italic;
}

.lpp-close[b-cpf5qk7htd] {
    margin-left: auto;
    background: none;
    border: none;
    color: #495057;
    font-size: 0.85rem;
    cursor: pointer;
}

.lpp-close:hover[b-cpf5qk7htd] {
    color: #111827;
}

/* ── Appeal level pills ── */

/* Sits inside .lpp-levels-row (app.css) alongside the outcomes hint — the row owns the spacing. */
.lpp-levels[b-cpf5qk7htd] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lpp-level[b-cpf5qk7htd] {
    border-radius: 999px;
    border: 1px solid #dbe1ea;
    background: #f1f3f7;
    color: #6c7a8a;
    font-size: 0.8rem;
    padding: 0.25rem 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.lpp-level-completed[b-cpf5qk7htd] {
    background: #d6efe7;
    border-color: #bfe3d7;
    color: #0c6e54;
}

.lpp-level-current[b-cpf5qk7htd] {
    background: #fdf3e3;
    border-color: #d97706;
    color: #92510a;
}

.lpp-level-active[b-cpf5qk7htd] {
    box-shadow: 0 1px 4px rgba(31, 45, 70, 0.22);
}

.lpp-level-outcome[b-cpf5qk7htd] {
    font-weight: 400;
    opacity: 0.85;
}

/* Soft duplicate-docket flag — amber rounded pill, mirrors .ct-override-badge. */
.lpp-level-dup[b-cpf5qk7htd] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Sub-stage stepper ── */

/* Small bottom margin, not none: the action bar below supplies its own top margin, but it renders
   nothing for a phase with no actions and no closure control — fact cards and phase activity carry
   no top margin of their own and would butt straight against the stepper. */
.lpp-stepper[b-cpf5qk7htd] {
    list-style: none;
    display: flex;
    margin: 0 0 0.35rem;
    padding: 0.1rem 0 0.25rem;
    overflow-x: auto;
}

.lpp-step[b-cpf5qk7htd] {
    position: relative;
    flex: 1 1 0;
    min-width: 6.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding-top: 0.15rem;
}

/* connector line */
.lpp-step:not(:first-child)[b-cpf5qk7htd]::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #e5e9f0;
    z-index: 0;
}

.lpp-step-completed:not(:first-child)[b-cpf5qk7htd]::before {
    background: #2c9c7f;
}

.lpp-step-dot[b-cpf5qk7htd] {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #c4ccd8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.lpp-step-completed .lpp-step-dot[b-cpf5qk7htd] {
    background: #2c9c7f;
    border-color: #2c9c7f;
    color: #fff;
}

.lpp-step-current .lpp-step-dot[b-cpf5qk7htd] {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}

.lpp-step-exception .lpp-step-dot[b-cpf5qk7htd] {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Bypassed — never happened and no longer can. Muted, struck through, no checkmark. */
.lpp-step-skipped .lpp-step-dot[b-cpf5qk7htd] {
    background: #eef1f5;
    border-color: #c4ccd8;
    color: #9aa7b8;
}

.lpp-step-label[b-cpf5qk7htd] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.lpp-step-pending .lpp-step-label[b-cpf5qk7htd] {
    color: #9aa7b8;
    font-weight: 500;
}

.lpp-step-skipped .lpp-step-label[b-cpf5qk7htd] {
    color: #9aa7b8;
    font-weight: 500;
    text-decoration: line-through;
}

.lpp-step-detail[b-cpf5qk7htd] {
    font-size: 0.72rem;
    color: #6c7a8a;
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.lpp-step-current-detail[b-cpf5qk7htd] {
    color: #b45309;
    font-weight: 600;
}

.lpp-step-exception .lpp-step-label[b-cpf5qk7htd] {
    color: #b02a37;
}

/* ── Participation status row ── */

/* These three classes had no rule anywhere in the repo until Aug 2026: the row was a bare div whose
   only paint came from .lpp-badge-neutral on the chip. Now a labelled strip, so the status reads as
   belonging to the "Employer notified" step rather than to the appeal. */
.lpp-participation[b-cpf5qk7htd] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.6rem;
    background: #f7f8fa;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
}

.lpp-participation-subject[b-cpf5qk7htd] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
}

/* .lpp-badge carries margin-left:auto for the fact-card header it was written for. Inert while this
   row was a plain div; now that the row is flex it would shove the chip to the far right, away from
   the label it qualifies. Must stay a DESCENDANT selector: .lpp-badge is declared further down this
   file, so a bare .lpp-participation-chip ties on specificity and loses on source order. */
.lpp-participation .lpp-participation-chip[b-cpf5qk7htd] {
    margin-left: 0;
}

.lpp-participation-outcome[b-cpf5qk7htd] {
    font-size: 0.78rem;
    color: #6c7a8a;
}

/* ── Fact cards ── */

/* The action bar above ends flush against its own row; without a top margin the fact cards read as
   part of the action group rather than as the phase's facts. */
.lpp-facts[b-cpf5qk7htd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.lpp-fact-card[b-cpf5qk7htd] {
    background: #f7f8fa;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

/* pre-wrap keeps the paragraphing the examiner typed. No max-width: the card takes a normal grid column
   alongside Appeal record, so the column is already narrower than a comfortable measure. */
/* This panel's one style for recorded free text — an examiner's prep write-up or an employer's own
   words on the participation survey. One rule, so a change to prose here cannot reach only half of it. */
.lpp-prep-summary-narrative[b-cpf5qk7htd],
.lpp-participation-survey-comment[b-cpf5qk7htd] {
    margin: 0.5rem 0 0;
    white-space: pre-wrap;
    line-height: 1.55;
    color: #2c3340;
}

/* Likewise the panel's one in-card list: prep documents, survey witnesses, survey availability. */
.lpp-prep-summary-docs[b-cpf5qk7htd],
.lpp-participation-survey-list[b-cpf5qk7htd] {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.lpp-participation-survey-note[b-cpf5qk7htd] {
    font-size: 0.78rem;
    margin: 0 0 0.25rem;
}

.lpp-prep-summary-docs li + li[b-cpf5qk7htd],
.lpp-participation-survey-list li + li[b-cpf5qk7htd] {
    margin-top: 0.15rem;
}

.lpp-fact-head[b-cpf5qk7htd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lpp-fact-title[b-cpf5qk7htd] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c7a8a;
}

/* Size-only variant of .lpp-history-btn (app.css) — same quiet outline button, tightened to sit in a
   card header without competing with the action row. Border/fill/hover all come from that class. */
.lpp-fact-action[b-cpf5qk7htd] {
    padding: 1px 7px;
    font-size: 0.72rem;
}

.lpp-badge[b-cpf5qk7htd] {
    margin-left: auto;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
}

.lpp-badge-neutral[b-cpf5qk7htd] { background: #e9ecef; color: #495057; }
.lpp-badge-good[b-cpf5qk7htd]    { background: #d6efe7; color: #0c6e54; }
.lpp-badge-warn[b-cpf5qk7htd]    { background: #fdf3e3; color: #92510a; }
.lpp-badge-bad[b-cpf5qk7htd]     { background: #fde5e8; color: #b02a37; }

.lpp-fact-rows[b-cpf5qk7htd] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.3rem;
    margin: 0;
}

.lpp-fact-rows dt[b-cpf5qk7htd] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6c7a8a;
}

.lpp-fact-rows dd[b-cpf5qk7htd] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
    /* Examiner free text reaches these rows now (the "Hearing held" card's write-up), and without
       pre-wrap a multi-paragraph account collapses into one run-on block. Matches how the other two
       homes for examiner prose render it (.lpp-prep-summary-narrative, HearingPackageModal). Single-line
       values are unaffected — they contain no newlines to preserve. */
    white-space: pre-wrap;
}

/* ...but a button in one of these rows carries an icon and a short label, never prose, so pre-wrap
   must not reach it. Razor leaves the source indentation that follows the label inside the button as a
   real text node (" View\n                                "), and preserved, that whitespace becomes a
   flex item: measured, the Hearing package button rendered 135x39 instead of 51x20, and since
   .lpp-doc-link is text-align:left its icon and label then sat ~65px inside a box whose right edge was
   correctly at the row's right margin — reading as a row that failed to right-align. Reset here rather
   than reflowing each button onto one source line, so the next button added to a fact row cannot
   reintroduce it. */
.lpp-fact-rows dd .lpp-doc-link[b-cpf5qk7htd],
.lpp-fact-rows dd .lpp-fact-info-btn[b-cpf5qk7htd] {
    white-space: normal;
}

.lpp-fact-rows dd.lpp-tone-good[b-cpf5qk7htd], .lpp-tone-good[b-cpf5qk7htd] { color: #0c6e54; }
.lpp-fact-rows dd.lpp-tone-warn[b-cpf5qk7htd], .lpp-tone-warn[b-cpf5qk7htd] { color: #b45309; }
.lpp-fact-rows dd.lpp-tone-bad[b-cpf5qk7htd],  .lpp-tone-bad[b-cpf5qk7htd]  { color: #b02a37; }

/* ── Phase activity ── */

.lpp-activity-title[b-cpf5qk7htd] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c7a8a;
    margin-bottom: 0.4rem;
}

.lpp-activity ul[b-cpf5qk7htd] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lpp-activity li[b-cpf5qk7htd] {
    display: flex;
    gap: 0.9rem;
    padding: 0.22rem 0;
    font-size: 0.82rem;
}

.lpp-activity-date[b-cpf5qk7htd] {
    color: #6c7a8a;
    white-space: nowrap;
    min-width: 7.5rem;
}

.lpp-activity-text[b-cpf5qk7htd] {
    color: #1f2937;
}

/* Correction affordance on an activity row. The row is a flex line, so this sits after the text and
   stays out of the reading order until hovered/focused — it is a repair, not a primary action. */
.lpp-activity-correct[b-cpf5qk7htd] {
    background: none;
    border: none;
    padding: 0 0.15rem;
    margin-left: auto;
    line-height: 1;
    color: #6c7a8a;
    cursor: pointer;
}

.lpp-activity-correct:hover[b-cpf5qk7htd],
.lpp-activity-correct:focus-visible[b-cpf5qk7htd] {
    color: #0f62fe;
}

.lpp-activity-toggle[b-cpf5qk7htd] {
    background: none;
    border: none;
    padding: 0.25rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f62fe;
    cursor: pointer;
}

.lpp-activity-toggle:hover[b-cpf5qk7htd] {
    text-decoration: underline;
}

.lpp-empty[b-cpf5qk7htd] {
    color: #6c7a8a;
    font-size: 0.85rem;
    margin: 0;
}

.lpp-unmatched-notice[b-cpf5qk7htd], .lpp-unresolved-history[b-cpf5qk7htd] {
    color: #6c7a8a;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.lpp-claim-actions[b-cpf5qk7htd] {
    margin-bottom: 0.75rem;
}

/* Employer Participation Survey card. The fact rows at the top ride .lpp-fact-rows; these are the
   sections below them — the employer's comment and the witness / availability lists. */
.lpp-participation-survey-section[b-cpf5qk7htd] {
    margin-top: 0.65rem;
}

.lpp-participation-survey-label[b-cpf5qk7htd] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6b7280;
}
/* /Pages/ClaimDetail/LifecyclePipeline.razor.rz.scp.css */
.lcp-row[b-xqladn8r3q] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* ── Claim lifecycle strip (ClaimStatusRedesign ticket 15, SPEC §8.2; always flat — ADR-0103) ── */

.lcp-tree-wrap[b-xqladn8r3q] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* The prefix chips are one ordered sequence: they never split mid-sequence (nowrap) and never shrink
   below their content (no min-width:0), so a too-narrow strip breaks between the prefix and the
   determination group instead of dropping Fact finding to row 2 while the branches keep row 1. */
.lcp-tree-prefix[b-xqladn8r3q] {
    margin-bottom: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
}

/* Uniform chip height across the whole strip (chips with and without subtitles). */
.lcp-tree-wrap[b-xqladn8r3q]  .lcp-chip {
    padding: 0.35rem 0.7rem;
    min-width: 6.5rem;
    font-size: 0.8rem;
    min-height: 54px;
    justify-content: center;
}

/* The flat strip (ADR-0103): Determination + Appeals sit side by side, no border. */
.lcp-det-col[b-xqladn8r3q] {
    display: flex;
    gap: 0.5rem;
}

/* Done always rides the top line, outside the determination/appeals pair — the whole-claim terminus,
   never one determination's tail. */
.lcp-tree-done[b-xqladn8r3q] {
    align-self: flex-start;
}

/* Narrow view: the prefix chips stack vertically, the determination/appeal group takes its own
   full-width line, Done sits on its own line below. Appeals drops under Determination. */
@media (max-width: 1280px) {
    .lcp-tree-prefix[b-xqladn8r3q] {
        flex-direction: column;
        flex-basis: 100%;
    }

    .lcp-tree-prefix[b-xqladn8r3q]  .lcp-chip {
        width: 250px;
    }

    .lcp-det-col[b-xqladn8r3q] {
        flex-direction: column;
        gap: 0.45rem;
        align-items: flex-start;
    }

    .lcp-tree-done[b-xqladn8r3q] {
        flex-basis: 100%;
    }
}

/* G2: the strip's legend pointer. Quiet by design — it is a one-time question, not a control.
   Only the wrapper's spacing is scoped here; .lcp-legend-link itself moved to app.css when the
   claim page started rendering its own copy in the panel head. */
.lcp-legend[b-xqladn8r3q] { margin-top: .35rem; }
/* /Pages/ClaimDetail/Lifecycle/HearingRegistrationCard.razor.rz.scp.css */
/* The card renders inside LifecyclePhasePanel's .lpp-facts grid, but it is its own component, so that
   panel's scoped .lpp-fact-* rules cannot reach it — Blazor scopes CSS per component. The card's shell
   is restated here rather than promoted to app.css so the panel's appearance is left untouched.
   Buttons, links and badges do come from app.css (.lpp-action-btn, .lpp-doc-link, .lpp-badge*), which
   is global already. */

/* Takes a normal grid column, matching Appeal record and Hearing. */
.lpp-registration-card[b-6j2qbubbih] {
    background: #f7f8fa;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

.lpp-fact-head[b-6j2qbubbih] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lpp-fact-title[b-6j2qbubbih] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c7a8a;
}

.lpp-fact-rows[b-6j2qbubbih] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.3rem;
    margin: 0;
}

.lpp-fact-rows dt[b-6j2qbubbih] {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6c7a8a;
}

.lpp-fact-rows dd[b-6j2qbubbih] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
}

/* The value and its affordance share the dd. justify-content:flex-end keeps the pair hard right, where
   the dd's text-align used to put the bare value, so the column of values stays aligned. */
.hreg-value-row[b-6j2qbubbih] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.hreg-empty[b-6j2qbubbih] {
    font-weight: 400;
    color: #6c7a8a;
}

/* Icon-only, so it stays inside a fact row instead of reading as a second control. */
.hreg-icon-btn[b-6j2qbubbih] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: #334155;
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
}

.hreg-icon-btn:hover:not(:disabled)[b-6j2qbubbih] {
    background: #f1f5f9;
}

.hreg-icon-btn:disabled[b-6j2qbubbih] {
    opacity: 0.5;
    cursor: default;
}

/* Pushed to the far edge of the head: it undoes the whole card, so it must not read as part of the badge.
   #b91c1c matches the destructive icon button in the action bar this card sits beside
   (.lpp-action-btn-icon, app.css) — the user sees the two in one view, so they have to agree. That is a
   shade off the --cds-support-error token; the lifecycle family already diverged, and re-theming it is not
   this change's job. */
.hreg-remove-btn[b-6j2qbubbih] {
    margin-left: auto;
    color: #b91c1c;
}
/* /Pages/ClaimDetail/SeparationRequestView.razor.rz.scp.css */
/* Carbon-style scoped CSS for the staff separation-request view.
   Uses only --cds-* tokens from wwwroot/css/app.css. No hex literals.
   ::deep is used because most descendants (buttons, badges, alerts,
   form controls) appear in child components or nested markup whose
   elements wouldn't otherwise carry this component's scope attribute. */

/* ─── Page shell ─────────────────────────────────────────── */
.sep-view[b-r9vlmtic27] {
  font-family: var(--cds-font-sans);
  color: var(--cds-text-primary);
}

.sep-view-title[b-r9vlmtic27] {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  margin: 16px 0 16px 0;
  color: var(--cds-text-primary);
}

.sep-view-error[b-r9vlmtic27] {
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-support-error);
  margin: 0;
}

.sep-view-loading[b-r9vlmtic27] {
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-secondary);
  margin: 0;
}

/* ─── Header row: summary + action bar ──────────────────── */
.sep-view-header[b-r9vlmtic27] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sep-view-summary[b-r9vlmtic27] {
  flex: 1 1 auto;
}

.sep-view-status[b-r9vlmtic27] {
  font-size: 14px;
  letter-spacing: 0.16px;
  line-height: 20px;
  color: var(--cds-text-secondary);
  margin: 0 0 8px 0;
}

.sep-view-status strong[b-r9vlmtic27] {
  color: var(--cds-text-primary);
  font-weight: 600;
}

/* Action bar — Carbon convention: primary right, tertiary middle,
   destructive left. The 1px gap visually snaps adjacent buttons. */
.sep-view-actions[b-r9vlmtic27] {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 1px;
  flex-wrap: wrap;
}

/* ─── Carbon button (small, 32px) ────────────────────────
   Restyles Bootstrap .btn classes already used throughout the file
   so we don't need to touch every <button> element. */
.sep-view[b-r9vlmtic27]  .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--cds-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.07s,
    color 0.07s,
    border-color 0.07s;
}

.sep-view[b-r9vlmtic27]  .btn:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -4px;
}

.sep-view[b-r9vlmtic27]  .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary action (Approve). The .sep-view-approve marker keeps the
   blue treatment without depending on Bootstrap's green semantic. */
.sep-view[b-r9vlmtic27]  .btn-success,
.sep-view[b-r9vlmtic27]  .sep-view-approve {
  background: var(--cds-link-primary);
  color: var(--cds-text-on-color);
  border-color: var(--cds-link-primary);
}

.sep-view[b-r9vlmtic27]  .btn-success:hover:not(:disabled),
.sep-view[b-r9vlmtic27]  .sep-view-approve:hover:not(:disabled) {
  background: var(--cds-link-primary-hover);
  border-color: var(--cds-link-primary-hover);
}

/* Tertiary (ghost-blue with border) — Open employer view, etc. */
.sep-view[b-r9vlmtic27]  .btn-outline-primary {
  background: transparent;
  color: var(--cds-link-primary);
  border-color: var(--cds-link-primary);
}

.sep-view[b-r9vlmtic27]  .btn-outline-primary:hover:not(:disabled) {
  background: var(--cds-layer-selected);
  color: var(--cds-link-primary-hover);
  border-color: var(--cds-link-primary-hover);
}

/* Neutral tertiary — New separation request. */
.sep-view[b-r9vlmtic27]  .btn-outline-secondary {
  background: transparent;
  color: var(--cds-text-primary);
  border-color: var(--cds-border-subtle);
}

.sep-view[b-r9vlmtic27]  .btn-outline-secondary:hover:not(:disabled) {
  background: var(--cds-layer-01);
  border-color: var(--cds-text-primary);
}

/* Warning-state tertiary — Cancel / Reopen. */
.sep-view[b-r9vlmtic27]  .btn-outline-warning {
  background: transparent;
  color: var(--cds-text-primary);
  border-color: var(--cds-support-warning);
}

.sep-view[b-r9vlmtic27]  .btn-outline-warning:hover:not(:disabled) {
  background: var(--cds-layer-01);
}

/* Danger tertiary — Delete draft. */
.sep-view[b-r9vlmtic27]  .btn-outline-danger {
  background: transparent;
  color: var(--cds-support-error);
  border-color: var(--cds-support-error);
}

.sep-view[b-r9vlmtic27]  .btn-outline-danger:hover:not(:disabled) {
  background: var(--cds-layer-01);
}

/* Inline link-style button (Edit override / Remove override / etc.). */
.sep-view[b-r9vlmtic27]  .btn-link {
  background: none;
  border: none;
  height: auto;
  padding: 0;
  color: var(--cds-link-primary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
}

.sep-view[b-r9vlmtic27]  .btn-link:hover:not(:disabled) {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

.sep-view[b-r9vlmtic27]  .btn-link.text-danger {
  color: var(--cds-support-error);
}

.sep-view[b-r9vlmtic27]  .btn-sm {
  font-size: 14px;
  letter-spacing: 0.16px;
  height: 32px;
}

.sep-view[b-r9vlmtic27]  .btn-primary {
  background: var(--cds-link-primary);
  color: var(--cds-text-on-color);
  border-color: var(--cds-link-primary);
}

.sep-view[b-r9vlmtic27]  .btn-primary:hover:not(:disabled) {
  background: var(--cds-link-primary-hover);
  border-color: var(--cds-link-primary-hover);
}

/* ─── Carbon-style tag (replaces Bootstrap .badge) ───────── */
.sep-view[b-r9vlmtic27]  .badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 24px;
  border: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  line-height: 16px;
  background: var(--cds-layer-selected);
  color: var(--cds-link-primary);
}

.sep-view[b-r9vlmtic27]  .badge.bg-success {
  background: var(--cds-layer-selected);
  color: var(--cds-support-success);
}

.sep-view[b-r9vlmtic27]  .badge.bg-info {
  background: var(--cds-layer-selected);
  color: var(--cds-link-primary);
}

/* ─── Carbon inline notification (replaces Bootstrap .alert) ── */
.sep-view[b-r9vlmtic27]  .alert {
  display: flex;
  align-items: flex-start;
  background: var(--cds-layer-01);
  border: none;
  border-left: 3px solid var(--cds-link-primary);
  border-radius: 0;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 14px;
  letter-spacing: 0.16px;
  line-height: 18px;
  color: var(--cds-text-primary);
}

.sep-view[b-r9vlmtic27]  .alert-danger {
  border-left-color: var(--cds-support-error);
}

.sep-view[b-r9vlmtic27]  .alert-warning {
  border-left-color: var(--cds-support-warning);
}

.sep-view[b-r9vlmtic27]  .alert-info {
  border-left-color: var(--cds-link-primary);
}

.sep-view[b-r9vlmtic27]  .alert code {
  background: var(--cds-background);
  padding: 0 4px;
  font-family: "IBM Plex Mono", Menlo, Courier, monospace;
  font-size: 13px;
}

/* ─── Question / answer / action grid ────────────────────── */
.sep-view[b-r9vlmtic27]  .sep-grid {
  display: grid;
  grid-template-columns: minmax(280px, 3fr) minmax(160px, 1fr);
  column-gap: 24px;
  row-gap: 16px;
  background: var(--cds-layer-01);
  padding: 16px;
  margin: 16px 0 0 0;
}

.sep-view[b-r9vlmtic27]  .sep-question {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16px;
  line-height: 20px;
  color: var(--cds-text-primary);
  margin: 0;
  padding: 0;
}

.sep-view[b-r9vlmtic27]  .sep-answer {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  line-height: 20px;
  color: var(--cds-text-primary);
  margin: 0;
  padding: 0;
  min-width: 0;
}

.sep-view[b-r9vlmtic27]  .sep-action {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.sep-view[b-r9vlmtic27]  .sep-answer a {
  color: var(--cds-link-primary);
  text-decoration: none;
}

.sep-view[b-r9vlmtic27]  .sep-answer a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

.sep-view[b-r9vlmtic27]  .text-muted {
  color: var(--cds-text-secondary);
}

.sep-view[b-r9vlmtic27]  .text-warning-emphasis {
  color: var(--cds-text-primary);
}

/* ─── Override panel (left-accent flat panel) ────────────── */
.sep-view[b-r9vlmtic27]  .border-start.border-warning {
  background: var(--cds-background);
  border-left: 3px solid var(--cds-support-warning) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
  margin-top: 8px;
}

.sep-view[b-r9vlmtic27]  .border-start.border-secondary {
  background: var(--cds-background);
  border-left: 3px solid var(--cds-border-subtle) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
  margin-top: 8px;
}

/* ─── Inline form controls (override editing) ────────────── */
.sep-view[b-r9vlmtic27]  .form-control {
  background: var(--cds-layer-01);
  border: none;
  border-bottom: 1px solid var(--cds-border-subtle);
  border-radius: 0;
  padding: 0 16px;
  height: 32px;
  font-family: var(--cds-font-sans);
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
  box-shadow: none;
}

.sep-view[b-r9vlmtic27]  .form-control:focus {
  outline: none;
  border-bottom: 2px solid var(--cds-focus);
}

/* Override icon button (pencil ✏). Restyle the awkward ms-2 py-0 px-2
   variant into a small ghost square. */
.sep-view[b-r9vlmtic27]  .btn-outline-secondary.py-0.px-2 {
  height: 24px;
  width: 24px;
  padding: 0;
  border-color: var(--cds-border-subtle);
  color: var(--cds-text-secondary);
}

.sep-view[b-r9vlmtic27]  .btn-outline-secondary.py-0.px-2:hover {
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
}
/* /Pages/ClaimDetail/StateRecords/Bc3eRecordView.razor.rz.scp.css */
/* BC3E-only: editable form's quarterly breakdown mini-table.
   Section/field/grid primitives live in wwwroot/css/app.css (.record-*). */

.bc3e-quarterly[b-ndcrf2lllg] {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cds-font-sans);
  font-size: 14px;
}

.bc3e-quarterly thead th[b-ndcrf2lllg] {
  padding: 8px 16px;
  text-align: right;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cds-text-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
}

.bc3e-quarterly thead th:first-child[b-ndcrf2lllg] {
  text-align: left;
}

.bc3e-quarterly tbody th[b-ndcrf2lllg] {
  padding: 8px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cds-layer-02);
  width: 1%;
  white-space: nowrap;
}

.bc3e-quarterly tbody td[b-ndcrf2lllg] {
  padding: 8px 16px;
  text-align: right;
  border: none;
  border-bottom: 1px solid var(--cds-layer-02);
  font-variant-numeric: tabular-nums;
}

.bc3e-quarterly tbody tr:last-child th[b-ndcrf2lllg],
.bc3e-quarterly tbody tr:last-child td[b-ndcrf2lllg] {
  border-bottom: none;
}
/* /Pages/FactFindingResponse.razor.rz.scp.css */
/* Page shell — mirrors SeparationResponse.razor.css so both public employer
   forms sit on the same centred 800px column. */
.ff-page[b-fz6u3fzmgz] {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  font-family: var(--cds-font-sans);
  color: var(--cds-text-primary);
}

/* Heading 02 (Carbon) — 32px / weight 400, same as .sep-page-title. */
.ff-page-title[b-fz6u3fzmgz] {
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  margin: 0 0 24px 0;
  color: var(--cds-text-primary);
}
/* /Pages/HearingParticipationResponse.razor.rz.scp.css */
/* Banners on this page use .alert / .alert-danger / .alert-success from wwwroot/css/app.css, which is
   served unscoped to every page and already carries the Carbon inline-notification treatment. The
   .cds-notification classes the sibling public forms use are defined only inside their own scoped
   stylesheets, so they render as undecorated text anywhere else — do not reach for them here. */

/* ─── Page shell ─────────────────────────────────────────── */
.hp-page[b-tqj5czqteo] {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  font-family: var(--cds-font-sans);
  color: var(--cds-text-primary);
}

.hp-page-title[b-tqj5czqteo] {
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  margin: 0 0 24px 0;
  color: var(--cds-text-primary);
}

.hp-help-text[b-tqj5czqteo] {
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-secondary);
  margin: 16px 0 0 0;
}

.hp-loading[b-tqj5czqteo] {
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-secondary);
  margin: 0;
}

/* ─── Claim info table ────────────────────────────────────── */
.hp-info[b-tqj5czqteo] {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  margin: 0 0 24px 0;
  padding: 16px;
  background: var(--cds-layer-01);
  border-left: 3px solid var(--cds-link-primary);
}

.hp-info-row[b-tqj5czqteo] {
  display: contents;
}

.hp-info dt[b-tqj5czqteo] {
  font-weight: 600;
  font-size: 14px;
  color: var(--cds-text-secondary);
  padding: 4px 16px 4px 0;
  white-space: nowrap;
}

.hp-info dd[b-tqj5czqteo] {
  font-size: 14px;
  margin: 0;
  padding: 4px 0;
}

/* ─── Participate fieldset ────────────────────────────────── */
.hp-fieldset[b-tqj5czqteo] {
  border: none;
  border-top: 1px solid var(--cds-border-subtle);
  padding: 24px 0 0 0;
  margin: 0 0 24px 0;
}

.hp-legend[b-tqj5czqteo] {
  font-size: 16px;
  font-weight: 600;
  color: var(--cds-text-primary);
  float: left;
  width: 100%;
  margin-bottom: 16px;
}

.hp-radio-group[b-tqj5czqteo] {
  display: flex;
  gap: 24px;
  /* .hp-legend is floated (the usual hack for giving a <legend> a width). A flex container does not
     let floats intrude, so without this it is laid out beside the full-width float and overflows the
     page to the right, taking the Yes/No choice off-screen. */
  clear: both;
}

.hp-radio-label[b-tqj5czqteo] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* ─── Witness / availability sections ────────────────────── */
.hp-section[b-tqj5czqteo] {
  margin-bottom: 32px;
  padding-top: 8px;
  border-top: 1px solid var(--cds-border-subtle);
}

.hp-section-title[b-tqj5czqteo] {
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 4px 0;
  color: var(--cds-text-primary);
}

.hp-section-hint[b-tqj5czqteo] {
  font-size: 13px;
  color: var(--cds-text-secondary);
  margin: 0 0 16px 0;
}

/* ─── Witness row ─────────────────────────────────────────── */
.hp-witness-row[b-tqj5czqteo],
.hp-slot-row[b-tqj5czqteo] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 12px 0;
  border-bottom: 1px solid var(--cds-border-subtle);
}

.hp-field-col[b-tqj5czqteo] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 140px;
  min-width: 120px;
}

.hp-field-label[b-tqj5czqteo] {
  font-size: 12px;
  font-weight: 600;
  color: var(--cds-text-secondary);
  letter-spacing: 0.32px;
}

.hp-input[b-tqj5czqteo] {
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--cds-border-subtle);
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.hp-input:focus[b-tqj5czqteo] {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.hp-add-btn[b-tqj5czqteo] {
  font-size: 14px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--cds-link-primary);
  color: var(--cds-link-primary);
  cursor: pointer;
  margin-top: 12px;
}

.hp-add-btn:hover[b-tqj5czqteo] {
  background: var(--cds-layer-01-hover);
}

.hp-remove-btn[b-tqj5czqteo] {
  font-size: 12px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--cds-support-error);
  color: var(--cds-support-error);
  cursor: pointer;
  align-self: flex-end;
  white-space: nowrap;
}

.hp-actions[b-tqj5czqteo] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.hp-submit-btn[b-tqj5czqteo] {
  font-size: 14px;
  padding: 12px 32px;
  background: var(--cds-link-primary);
  color: var(--cds-text-on-color);
  border: none;
  cursor: pointer;
}

/* Secondary to the submit button: saving a draft is the lesser action, so it reads as an outline. */
.hp-draft-btn[b-tqj5czqteo] {
  font-size: 14px;
  padding: 12px 32px;
  background: transparent;
  border: 1px solid var(--cds-link-primary);
  color: var(--cds-link-primary);
  cursor: pointer;
}

.hp-draft-btn:hover:not(:disabled)[b-tqj5czqteo] {
  background: var(--cds-layer-01-hover);
}

.hp-submit-btn:disabled[b-tqj5czqteo],
.hp-draft-btn:disabled[b-tqj5czqteo] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* /Pages/OcrReview/OcrReviewDetail.razor.rz.scp.css */
/* Cap the inline PDF canvas so the pager controls stay visible and the page
   scrolls inside PdfViewer's own overflow:auto canvas wrapper. Mirrors the
   right column's max-height:90vh, minus card header + pager chrome. */
.ocr-doc-pane[b-n1v00stcp1]  .pdf-viewer-canvas {
    max-height: 80vh;
}
/* /Pages/SeparationResponse.razor.rz.scp.css */
/* ─── Page shell ─────────────────────────────────────────── */
.sep-page[b-n84whaians] {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  font-family: var(--cds-font-sans);
  color: var(--cds-text-primary);
}

/* ─── Heading 02 (Carbon) — 32px / weight 400 ────────────── */
.sep-page-title[b-n84whaians] {
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  margin: 0 0 24px 0;
  color: var(--cds-text-primary);
}

.sep-help-text[b-n84whaians] {
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-secondary);
  margin: 16px 0 0 0;
}

.sep-loading[b-n84whaians] {
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-secondary);
  margin: 0;
}

/* ─── Carbon-style inline notification ────────────────────
   Flat panel, hairline-thick coloured left bar, no shadow,
   no border-radius. Background uses Gray 10 layer per the
   project's layer scale. */
.cds-notification[b-n84whaians] {
  display: flex;
  align-items: flex-start;
  background: var(--cds-layer-01);
  border: none;
  border-left: 3px solid var(--cds-link-primary);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 16px;
  font-size: 14px;
  letter-spacing: 0.16px;
  line-height: 18px;
  color: var(--cds-text-primary);
}

.cds-notification__body[b-n84whaians] {
  flex: 1 1 auto;
}

.cds-notification--error[b-n84whaians] {
  border-left-color: var(--cds-support-error);
}

.cds-notification--success[b-n84whaians] {
  border-left-color: var(--cds-support-success);
}

.cds-notification--info[b-n84whaians] {
  border-left-color: var(--cds-link-primary);
}

.cds-notification--warning[b-n84whaians] {
  border-left-color: var(--cds-support-warning);
}
/* /Pages/WageAudit/Modals/DocumentEditorModal.razor.rz.scp.css */
/* DocumentEditorModal — sub-spec #2 (WageAuditDocumentEditingToolkit) Phase 9.
   Three-column layout: 180px toolbar / canvas / 240px pending-ops rail. */

.document-editor-modal[b-gyraicv57g] { display: flex; flex-direction: column; min-height: 70vh; }

.dirty-indicator[b-gyraicv57g] {
    color: #d97706;
    margin-left: 6px;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: middle;
}

.editor-body[b-gyraicv57g] {
    display: grid;
    grid-template-columns: 180px 1fr 240px;
    gap: 8px;
    padding: 8px;
    position: relative;
    min-height: 60vh;
}

.toolbar[b-gyraicv57g] { display: flex; flex-direction: column; gap: 6px; }
.toolbar-btn[b-gyraicv57g] { width: 100%; text-align: left; }
.toolbar-btn.active[b-gyraicv57g] { background-color: #0d6efd; color: #fff; border-color: #0d6efd; }

.canvas-pane[b-gyraicv57g] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevent overflow when canvas is wide */
}

.tool-controls[b-gyraicv57g] {
    border-top: 1px solid #e5e7eb;
    padding: 8px;
    background: #f9fafb;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.split-controls[b-gyraicv57g] { flex-direction: column; align-items: flex-start; }

/* Overlay primitives ───────────────────────────────────────────────────── */
.overlay-click-catch[b-gyraicv57g] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    cursor: crosshair;
    background: transparent;
    /* PdfViewer's .pdf-viewer-overlay sets pointer-events:none and its scoped
       "> *" re-enable can't reach this consumer-rendered element. Re-enable
       explicitly so clicks reach OnCanvasClick. */
    pointer-events: auto;
}

.overlay-annotation[b-gyraicv57g] {
    position: absolute;
    /* Top-left anchored: matches the server's TextPlacement convention
       (top-left origin per CONTEXT.md / WageAuditFieldPlacement) so the
       preview lands where the rendered text actually appears. */
    background: rgba(255, 255, 0, 0.65);
    border: 1px solid #b45309;
    padding: 0 2px;
    pointer-events: none;
    white-space: nowrap;
    color: #111;
}

.overlay-redaction[b-gyraicv57g] {
    position: absolute;
    background: rgba(220, 38, 38, 0.65);
    border: 1px solid #7f1d1d;
    pointer-events: none;
}

.overlay-rotation-badge[b-gyraicv57g] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(13, 110, 253, 0.85);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

/* Merge drawer ─────────────────────────────────────────────────────────── */
.merge-drawer[b-gyraicv57g] {
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #d1d5db;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.merge-drawer-header[b-gyraicv57g] {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.merge-drawer-body[b-gyraicv57g] {
    padding: 8px 12px;
    flex: 1;
    overflow-y: auto;
}

.merge-drawer-footer[b-gyraicv57g] {
    padding: 8px 12px;
    border-top: 1px solid #e5e7eb;
    text-align: right;
}

.merge-order-row[b-gyraicv57g] {
    display: flex;
    align-items: center;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 4px;
    background: #f9fafb;
}

.btn-xs[b-gyraicv57g] { padding: 0.1rem 0.4rem; font-size: 0.7rem; line-height: 1; }

/* Pending-ops rail ─────────────────────────────────────────────────────── */
.pending-ops[b-gyraicv57g] {
    border-left: 1px solid #e5e7eb;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pending-header[b-gyraicv57g] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.pending-ops .empty[b-gyraicv57g] { font-style: italic; }

.pending-ops .chip[b-gyraicv57g] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.78rem;
}

.pending-ops .chip-kind[b-gyraicv57g] {
    font-weight: 600;
    color: #4338ca;
    min-width: 50px;
}

.pending-ops .chip-label[b-gyraicv57g] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-ops .btn-close-sm[b-gyraicv57g] {
    --bs-btn-close-bg: none;
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    font-size: 0.7rem;
}
/* /Shared/DocumentReviewLayout.razor.rz.scp.css */
.document-review-layout[b-5vqlbuwccb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.document-review-source[b-5vqlbuwccb],
.document-review-form[b-5vqlbuwccb] {
    min-width: 0;
    max-height: calc(100dvh - 12rem);
    overflow: auto;
}

.document-review-source[b-5vqlbuwccb] {
    padding: 1rem;
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.document-review-source[b-5vqlbuwccb]  canvas {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .document-review-layout[b-5vqlbuwccb] { grid-template-columns: minmax(0, 1fr); }
    .document-review-source[b-5vqlbuwccb] { max-height: 45vh; border-right: 0; border-bottom: 1px solid #dee2e6; }
    .document-review-form[b-5vqlbuwccb] { max-height: none; }
}
/* /Shared/DS/LoadErrorCard.razor.rz.scp.css */
.ds-load-error[b-m4dn3kmrhs] {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ds-load-error-msg[b-m4dn3kmrhs] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ds-load-error-retry[b-m4dn3kmrhs] { flex: 0 0 auto; }
/* /Shared/DS/ToastHost.razor.rz.scp.css */
.ds-toast-host[b-wro7jbqltn] {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1100; /* above the modal backdrop (1050) so a toast fired from a modal is visible */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: none; /* let clicks fall through the gaps between toasts */
}

.ds-toast[b-wro7jbqltn] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--cds-layer-01);
    border-left: 3px solid var(--cds-link-primary);
    box-shadow: var(--cds-shadow-raised);
    padding: 12px 12px 12px 14px;
    font-family: var(--cds-font-sans);
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--cds-text-primary);
    animation: ds-toast-in-b-wro7jbqltn 120ms ease-out;
}

.ds-toast--success[b-wro7jbqltn] { border-left-color: var(--cds-support-success); }
.ds-toast--warning[b-wro7jbqltn] { border-left-color: var(--cds-support-warning); }
.ds-toast--error[b-wro7jbqltn]   { border-left-color: var(--cds-support-error); }
.ds-toast--info[b-wro7jbqltn]    { border-left-color: var(--cds-link-primary); }

.ds-toast-icon[b-wro7jbqltn] {
    font-weight: 700;
    line-height: 1.3;
    flex: 0 0 auto;
}
.ds-toast--success .ds-toast-icon[b-wro7jbqltn] { color: var(--cds-support-success); }
.ds-toast--warning .ds-toast-icon[b-wro7jbqltn] { color: #8a3800; } /* --cds-support-warning yellow is too light on this bg for a glyph */
.ds-toast--error .ds-toast-icon[b-wro7jbqltn]   { color: var(--cds-support-error); }
.ds-toast--info .ds-toast-icon[b-wro7jbqltn]    { color: var(--cds-link-primary); }

.ds-toast-body[b-wro7jbqltn] { flex: 1 1 auto; min-width: 0; }
.ds-toast-title[b-wro7jbqltn] { font-weight: 600; margin-bottom: 2px; }
.ds-toast-msg[b-wro7jbqltn] { overflow-wrap: anywhere; }

.ds-toast-dismiss[b-wro7jbqltn] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cds-text-secondary);
    font-size: 0.875rem;
    padding: 0 2px;
    line-height: 1;
    flex: 0 0 auto;
}
.ds-toast-dismiss:hover[b-wro7jbqltn] { color: var(--cds-text-primary); }

@keyframes ds-toast-in-b-wro7jbqltn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: none; }
}
/* /Shared/GlobalSearch.razor.rz.scp.css */
.global-search-row[b-o0mbchhqa2] {
    padding: 0;
    background: transparent;
    border-bottom: none;
    position: relative;
}

.global-search-container[b-o0mbchhqa2] {
    position: relative;
    max-width: 480px;
    width: 100%;
}

.search-icon[b-o0mbchhqa2] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6f6f6f;
    font-size: 13px;
    pointer-events: none;
}

.search-input[b-o0mbchhqa2] {
    width: 100%;
    height: 36px;
    background: #f4f4f4;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0 12px 0 36px;
    color: #161616;
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.16px;
    outline: none;
    transition: background 0.11s, border-color 0.11s;
}

.search-input[b-o0mbchhqa2]::placeholder {
    color: #6f6f6f;
    letter-spacing: 0.16px;
}

.search-input:hover[b-o0mbchhqa2] {
    background: #e8e8e8;
}

.search-input:focus[b-o0mbchhqa2] {
    background: #f4f4f4;
    border-bottom-color: #1b3a6b;
}

.search-spinner[b-o0mbchhqa2] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid #c6c6c6;
    border-top-color: #1b3a6b;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@@keyframes spin {
    to[b-o0mbchhqa2] { transform: translateY(-50%) rotate(360deg); }
}

.search-dropdown[b-o0mbchhqa2] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 480px;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 1000;
}

.search-message[b-o0mbchhqa2] {
    padding: 12px 16px;
    font-size: 0.8125rem;
    letter-spacing: 0.16px;
    color: #525252;
}

.search-message-error[b-o0mbchhqa2] {
    color: #161616;
    border-left: 3px solid #da1e28;
    background: #f4f4f4;
}

.search-result-item[b-o0mbchhqa2] {
    padding: 8px 16px;
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.11s;
}

.search-result-item:last-child[b-o0mbchhqa2] {
    border-bottom: none;
}

.search-result-item:hover[b-o0mbchhqa2] {
    background: #e8e8e8;
}

/* G12: the arrowed-to option must look picked, not just hovered — keyboard users get no
   pointer. Same treatment for the "See all N results" footer when it is the active row. */
.search-result-active[b-o0mbchhqa2],
.search-footer.search-result-active[b-o0mbchhqa2] {
    background: #e8e8e8;
    box-shadow: inset 3px 0 0 var(--cds-focus, #1b3a6b);
}

.result-info[b-o0mbchhqa2] {
    flex: 1;
    min-width: 0;
}

.result-name[b-o0mbchhqa2] {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.16px;
    color: #161616;
}

.result-details[b-o0mbchhqa2] {
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    color: #525252;
    margin-top: 2px;
}

.result-status[b-o0mbchhqa2] {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.32px;
    padding: 2px 8px;
    border-radius: 24px;
    white-space: nowrap;
    margin-left: 8px;
}

.status-new[b-o0mbchhqa2], .status-pending[b-o0mbchhqa2] { background: #fff3e0; color: #e65100; }
.status-needemployerinfo[b-o0mbchhqa2] { background: #fff3e0; color: #e65100; }
.status-separationinformationrequested[b-o0mbchhqa2] { background: #edf5ff; color: #1b3a6b; }
.status-separationinforeceived[b-o0mbchhqa2] { background: #edf5ff; color: #1b3a6b; }
.status-determined[b-o0mbchhqa2] { background: #defbe6; color: #24a148; }
.status-appeal[b-o0mbchhqa2] { background: #fff1f1; color: #da1e28; }
.status-nonchargeableemployer[b-o0mbchhqa2] { background: #f4f4f4; color: #525252; }
.status-complete[b-o0mbchhqa2] { background: #f4f4f4; color: #525252; }

.search-footer[b-o0mbchhqa2] {
    padding: 8px 16px;
    background: #f4f4f4;
    text-align: center;
    cursor: pointer;
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    color: #1b3a6b;
    font-weight: 600;
    transition: background 0.11s, color 0.11s;
}

.search-footer:hover[b-o0mbchhqa2] {
    background: #e8e8e8;
    color: #0043ce;
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* Shell layout: 240px fixed sidebar + 52px fixed topbar + scrollable content */

.app-shell[b-7djai1tilk] {
    min-height: 100vh;
    background: #f4f4f4;
}

/* === Sidebar ============================================================ */

.sidebar[b-7djai1tilk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: #1b3a6b;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    z-index: 100;
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.sidebar-brand[b-7djai1tilk] {
    padding: 24px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hamburger toggle — desktop hides it; the mobile media query below reveals it. */
.sidebar-hamburger[b-7djai1tilk] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.brand-title[b-7djai1tilk] {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.16px;
    color: #ffffff;
    line-height: 1.4;
}

.brand-sub[b-7djai1tilk] {
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.32px;
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-nav[b-7djai1tilk] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 0;
}

.sidebar-footer[b-7djai1tilk] {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: #ffffff;
}

/* Login display on navy sidebar — force readable colors */
.sidebar-footer[b-7djai1tilk]  .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.8125rem;
    letter-spacing: 0.16px;
}

.sidebar-footer[b-7djai1tilk]  .btn-outline-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
}

.sidebar-footer[b-7djai1tilk]  .btn-outline-secondary:hover {
    color: #1b3a6b;
    background: #ffffff;
    border-color: #ffffff;
}

.sidebar-footer[b-7djai1tilk]  .btn-primary {
    background: #ffffff;
    color: #1b3a6b;
    border-color: #ffffff;
}

.sidebar-footer[b-7djai1tilk]  .btn-primary:hover {
    background: #e8e8e8;
    color: #1b3a6b;
    border-color: #e8e8e8;
}

/* === NavMenu restyle (vertical sidebar nav) ============================ */

.sidebar-nav[b-7djai1tilk]  .top-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
    background: transparent;
}

.sidebar-nav[b-7djai1tilk]  .top-nav > a,
.sidebar-nav[b-7djai1tilk]  .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.16px;
    text-align: left;
    cursor: pointer;
    transition: background 0.11s, color 0.11s, border-color 0.11s;
}

.sidebar-nav[b-7djai1tilk]  .top-nav > a:hover,
.sidebar-nav[b-7djai1tilk]  .nav-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sidebar-nav[b-7djai1tilk]  .top-nav > a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-left-color: #ffffff;
    font-weight: 600;
}

.sidebar-nav[b-7djai1tilk]  .nav-dropdown {
    position: relative;
    width: 100%;
}

.sidebar-nav[b-7djai1tilk]  .nav-dropdown-menu {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0;
}

.sidebar-nav[b-7djai1tilk]  .nav-dropdown-menu a {
    display: block;
    padding: 8px 16px 8px 32px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
    letter-spacing: 0.16px;
    text-decoration: none;
    white-space: normal;
}

.sidebar-nav[b-7djai1tilk]  .nav-dropdown-menu a:hover,
.sidebar-nav[b-7djai1tilk]  .nav-dropdown-menu a.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* === Main area =========================================================== */

.app-main[b-7djai1tilk] {
    margin-left: 240px;
    min-height: 100vh;
    background: #f4f4f4;
}

/* === Top bar ============================================================ */

.app-topbar[b-7djai1tilk] {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    height: 52px;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 90;
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.topbar-search[b-7djai1tilk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.topbar-search[b-7djai1tilk]  > * {
    width: 100%;
    max-width: 480px;
}

.topbar-actions[b-7djai1tilk] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === Scrollable content =================================================== */

.app-content[b-7djai1tilk] {
    padding: 76px 24px 24px 24px; /* 52px topbar + 24px gutter */
    min-height: 100vh;
    background: #f4f4f4;
    box-sizing: border-box;
}

/* === Responsive collapse (small screens) ================================ */

@media (max-width: 672px) {
    .sidebar[b-7djai1tilk] {
        position: static;
        width: 100%;
        height: auto;
    }

    .sidebar-brand[b-7djai1tilk] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar-hamburger[b-7djai1tilk] {
        display: inline-flex;
    }

    /* Collapsed by default; the .nav-open class (toggled by the hamburger) reveals them. */
    .sidebar-nav[b-7djai1tilk],
    .sidebar-footer[b-7djai1tilk] {
        display: none;
    }

    .sidebar.nav-open .sidebar-nav[b-7djai1tilk] {
        display: block;
    }

    .sidebar.nav-open .sidebar-footer[b-7djai1tilk] {
        display: flex;
    }

    .app-main[b-7djai1tilk] {
        margin-left: 0;
    }

    .app-topbar[b-7djai1tilk] {
        position: sticky;
        left: 0;
    }
}
/* /Shared/Modals/DocumentReviseModal.razor.rz.scp.css */
/* EmployerDocumentRedaction (SPEC §3). Chrome uses the app.css tokens. Only tokens actually defined in
   app.css :root may be used — an undefined --cds-* voids the whole declaration rather than falling back. */

.revise-layout[b-5y8ucycnqj] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.revise-canvas[b-5y8ucycnqj] {
    flex: 1 1 auto;
    min-width: 0;
}

.revise-rail[b-5y8ucycnqj] {
    flex: 0 0 15rem;
    max-height: 32rem;
    overflow-y: auto;
}

.revise-pages[b-5y8ucycnqj] {
    margin-bottom: 0;
}

.revise-page-row[b-5y8ucycnqj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .15rem .25rem;
    border-radius: .25rem;
}

.revise-page-row.current[b-5y8ucycnqj] {
    background: var(--cds-layer-selected);
}

.revise-page-actions[b-5y8ucycnqj] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.revise-chip[b-5y8ucycnqj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .1rem 0;
}

/* .revise-overlay and .revise-box live in the GLOBAL app.css, not here. They are emitted from
   RenderRedactionOverlay's RenderTreeBuilder rather than from markup, so the Razor compiler never
   stamps them with this file's scope attribute and every rule here would silently miss them. See the
   block next to .click-to-place-modal .overlay-click-catch in app.css for the full explanation.
   Only selectors written as markup above may live in this file. */
/* /Shared/NotificationBell.razor.rz.scp.css */
/* Scoped styles for NotificationBell.

   These moved verbatim out of MainLayout.razor.css when the bell became its own component
   (.scratch/separation-claimfact-followups/issues/13). They had to move: Blazor CSS isolation stamps
   each element with its OWN component's scope id, so the moment the markup left MainLayout, every
   MainLayout.razor.css `.notif-*` rule stopped matching it. The bell button, badge and dropdown have
   duplicate rules in wwwroot/css/app.css and would only have degraded; the .notif-import-* and
   .notif-pill* rules below exist NOWHERE else, so the import cards would have rendered unstyled. */

/* Notification bell on white topbar */
.notif-bell-wrapper[b-ioo581dthj] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notif-bell-btn[b-ioo581dthj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: #525252;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.11s, color 0.11s, border-color 0.11s;
}

.notif-bell-btn:hover[b-ioo581dthj] {
    background: #f4f4f4;
    color: #161616;
    border-color: #c6c6c6;
}

.notif-badge[b-ioo581dthj] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #da1e28;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.32px;
    border-radius: 24px; /* pill — sole rounded exception */
    padding: 0 6px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.notif-dropdown[b-ioo581dthj] {
    position: absolute;
    top: 44px;
    right: 0;
    width: 320px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notif-dropdown-header[b-ioo581dthj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #f4f4f4;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.16px;
    color: #161616;
}

.notif-mark-all-btn[b-ioo581dthj] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    color: #1b3a6b;
    padding: 0;
}

.notif-mark-all-btn:hover[b-ioo581dthj] {
    color: #0043ce;
    text-decoration: underline;
}

.notif-dropdown-list[b-ioo581dthj] {
    max-height: 360px;
    overflow-y: auto;
}

.notif-empty[b-ioo581dthj] {
    padding: 24px 16px;
    text-align: center;
    color: #525252;
    font-size: 0.875rem;
    letter-spacing: 0.16px;
}

.notif-item[b-ioo581dthj] {
    padding: 8px 16px;
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
    transition: background 0.11s;
}

.notif-item:last-child[b-ioo581dthj] {
    border-bottom: none;
}

.notif-item:hover[b-ioo581dthj] {
    background: #e8e8e8;
}

.notif-unread[b-ioo581dthj] {
    background: #edf5ff;
}

.notif-read[b-ioo581dthj] {
    background: #ffffff;
}

.notif-item-time[b-ioo581dthj] {
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    color: #6f6f6f;
}

/* === Import notification card layout (Roster / Claim imports) ================
   Three columns: icon, filename + verb stack, count pills. Mirrors the sample
   toast in design (green check / red X icon, pill counts on the right). */

.notif-import-card[b-ioo581dthj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notif-import-icon[b-ioo581dthj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

.notif-import-icon-success[b-ioo581dthj] { background: #defbe6; color: #0e6027; }
.notif-import-icon-warning[b-ioo581dthj] { background: #fff1e1; color: #8a3800; }
.notif-import-icon-failure[b-ioo581dthj] { background: #fff1f1; color: #a8071a; }

.notif-import-text[b-ioo581dthj] {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-import-filename[b-ioo581dthj] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #161616;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-import-verb[b-ioo581dthj] {
    font-size: 0.75rem;
    color: #6f6f6f;
    margin-top: 2px;
}

.notif-import-error[b-ioo581dthj] {
    font-size: 0.75rem;
    color: #a8071a;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-pills[b-ioo581dthj] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.notif-pill[b-ioo581dthj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

.notif-pill-success[b-ioo581dthj] { background: #defbe6; color: #0e6027; }
.notif-pill-warning[b-ioo581dthj] { background: #fff8e1; color: #6f5e00; }
.notif-pill-danger[b-ioo581dthj]  { background: #fff1f1; color: #a8071a; }

/* Right-aligned "View →" affordance on employer-response notification cards
   (Separation + Fact-finding). Reuses the .notif-import-card flex container;
   sits where pills sit for imports. */
.notif-card-action[b-ioo581dthj] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: #0f62fe;
    white-space: nowrap;
}
/* /Shared/PdfViewer.razor.rz.scp.css */
.pdf-viewer-wrapper[b-zs61cxwtsk] { display: flex; flex-direction: column; gap: 8px; }
.pdf-viewer-controls[b-zs61cxwtsk] { display: flex; gap: 8px; align-items: center; }
/* Shrink-wrap to the canvas so the bordered viewer ends where the canvas ends —
   otherwise the area to the right of the canvas (still inside the wrapper) is a
   "dead zone" with no overlay/click-catch, and clicks there silently do nothing. */
.pdf-viewer-canvas[b-zs61cxwtsk] { position: relative; overflow: auto; border: 1px solid #ccc; width: fit-content; max-width: 100%; }
/* Width/height set inline to match canvas extent so both scroll together
 * inside the overflow:auto wrapper. See PdfViewer.razor. */
.pdf-viewer-overlay[b-zs61cxwtsk] { position: absolute; top: 0; left: 0; pointer-events: none; }
.pdf-viewer-overlay > *[b-zs61cxwtsk] { pointer-events: auto; }
/* /Shared/SeparationFormHeader.razor.rz.scp.css */
/* Carbon-style flat info panel. No border, no shadow, Gray 10
   layer surface, 16px content padding. Sits in the page flow
   above <SeparationResponseForm>. */
.sep-info-panel[b-pdyajr7ts6] {
  background: var(--cds-layer-01);
  padding: 16px;
  margin-bottom: 24px;
}

.sep-info-grid[b-pdyajr7ts6] {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 8px;
  margin: 0;
}

.sep-info-grid dt[b-pdyajr7ts6] {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  line-height: 16px;
  color: var(--cds-text-secondary);
  margin: 0;
}

.sep-info-grid dd[b-pdyajr7ts6] {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  line-height: 18px;
  color: var(--cds-text-primary);
  margin: 0;
}

/* On narrow viewports, stack label above value. */
@media (max-width: 480px) {
  .sep-info-grid[b-pdyajr7ts6] {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .sep-info-grid dt[b-pdyajr7ts6] {
    margin-top: 8px;
  }
  .sep-info-grid dt:first-of-type[b-pdyajr7ts6] {
    margin-top: 0;
  }
}
/* /Shared/SeparationResponseForm.razor.rz.scp.css */
/* Carbon-style form for the separation response page.
   All values use --cds-* tokens defined in wwwroot/css/app.css.
   No border-radius (0 is the Carbon signature), 8px-base spacing,
   bottom-border inputs, right-aligned action bar. */

/* ─── Form shell ─────────────────────────────────────────── */
.sep-form[b-c7duq3huj6] {
  font-family: var(--cds-font-sans);
  color: var(--cds-text-primary);
}

.sep-form-body[b-c7duq3huj6] {
  margin-bottom: 24px;
}

/* ─── Notification banners (rendered inline; scoped copy of the
       page-level style so this component works outside SeparationResponse) ── */
.cds-notification[b-c7duq3huj6] {
  display: flex;
  align-items: flex-start;
  background: var(--cds-layer-01);
  border: none;
  border-left: 3px solid var(--cds-link-primary);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 16px;
  font-size: 14px;
  letter-spacing: 0.16px;
  line-height: 18px;
  color: var(--cds-text-primary);
}

.cds-notification__body[b-c7duq3huj6] {
  flex: 1 1 auto;
}

.cds-notification--error[b-c7duq3huj6] {
  border-left-color: var(--cds-support-error);
}

.cds-notification--success[b-c7duq3huj6] {
  border-left-color: var(--cds-support-success);
}

.cds-notification--info[b-c7duq3huj6] {
  border-left-color: var(--cds-link-primary);
}

.cds-notification--warning[b-c7duq3huj6] {
  border-left-color: var(--cds-support-warning);
}

/* ─── Field group (per question and email) ───────────────── */
.sep-form-body[b-c7duq3huj6]  .mb-3 {
  margin-bottom: 24px;
}

.sep-form-body[b-c7duq3huj6]  .form-label {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  line-height: 16px;
  color: var(--cds-text-secondary);
  margin-bottom: 8px;
}

.sep-form-body[b-c7duq3huj6]  .badge {
  display: inline-block;
  background: var(--cds-layer-selected);
  color: var(--cds-link-primary);
  border: none;
  border-radius: 24px;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  line-height: 16px;
}

/* Carbon bottom-border inputs.
   The scoped CSS targets Bootstrap classes already used in the
   form's switch-by-question-type markup so we don't need to touch
   each <input>/<select>/<textarea>. */
.sep-form-body[b-c7duq3huj6]  .form-control,
.sep-form-body[b-c7duq3huj6]  .form-select {
  width: 100%;
  background: var(--cds-layer-01);
  border: none;
  border-bottom: 1px solid var(--cds-border-subtle);
  border-radius: 0;
  padding: 0 16px;
  height: 40px;
  font-family: var(--cds-font-sans);
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
  box-shadow: none;
  transition: border-color 0.07s;
}

.sep-form-body[b-c7duq3huj6]  textarea.form-control {
  height: auto;
  min-height: 64px;
  padding: 8px 16px;
  resize: vertical;
}

.sep-form-body[b-c7duq3huj6]  .form-control:hover,
.sep-form-body[b-c7duq3huj6]  .form-select:hover {
  border-bottom-color: var(--cds-text-primary);
}

.sep-form-body[b-c7duq3huj6]  .form-control:focus,
.sep-form-body[b-c7duq3huj6]  .form-select:focus {
  outline: none;
  border-bottom: 2px solid var(--cds-focus);
}

.sep-form-body[b-c7duq3huj6]  .form-control:disabled,
.sep-form-body[b-c7duq3huj6]  .form-select:disabled {
  color: var(--cds-text-placeholder);
  cursor: not-allowed;
  border-bottom-color: transparent;
}

.sep-form-body[b-c7duq3huj6]  .form-control::placeholder {
  color: var(--cds-text-placeholder);
}

/* ─── Checkbox list (multi-select) ───────────────────────── */
.sep-form-body[b-c7duq3huj6]  .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.sep-form-body[b-c7duq3huj6]  .form-check-input {
  width: 16px;
  height: 16px;
  border: 1px solid var(--cds-text-primary);
  border-radius: 0;
  accent-color: var(--cds-link-primary);
}

.sep-form-body[b-c7duq3huj6]  .form-check-label {
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
}

/* ─── File list (existing + pending) ─────────────────────── */
.sep-form-body[b-c7duq3huj6]  .list-group {
  border: none;
  border-radius: 0;
  margin-bottom: 8px;
}

.sep-form-body[b-c7duq3huj6]  .list-group-item {
  background: var(--cds-layer-01);
  border: none;
  border-bottom: 1px solid var(--cds-layer-02);
  border-radius: 0;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
}

.sep-form-body[b-c7duq3huj6]  .list-group-item:last-child {
  border-bottom: none;
}

.sep-form-body[b-c7duq3huj6]  .list-group-item a {
  color: var(--cds-link-primary);
  text-decoration: none;
}

.sep-form-body[b-c7duq3huj6]  .list-group-item a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

.sep-form-body[b-c7duq3huj6]  .text-muted,
.sep-form-body[b-c7duq3huj6]  .small {
  color: var(--cds-text-secondary);
  font-size: 12px;
  letter-spacing: 0.32px;
}

/* Inline "Remove" link buttons inside file lists. */
.sep-form-body[b-c7duq3huj6]  .btn-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--cds-font-sans);
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-link-primary);
  cursor: pointer;
}

.sep-form-body[b-c7duq3huj6]  .btn-link.text-danger {
  color: var(--cds-support-error);
}

.sep-form-body[b-c7duq3huj6]  .btn-link:hover {
  text-decoration: underline;
}

/* ─── Submitter email field group ────────────────────────── */
.sep-field-group[b-c7duq3huj6] {
  margin-bottom: 24px;
}

.sep-label[b-c7duq3huj6] {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  line-height: 16px;
  color: var(--cds-text-secondary);
  margin-bottom: 8px;
}

.sep-input[b-c7duq3huj6] {
  width: 100%;
  max-width: 384px;
  background: var(--cds-layer-01);
  border: none;
  border-bottom: 1px solid var(--cds-border-subtle);
  border-radius: 0;
  padding: 0 16px;
  height: 40px;
  font-family: var(--cds-font-sans);
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
  box-shadow: none;
  transition: border-color 0.07s;
}

.sep-input:hover[b-c7duq3huj6] {
  border-bottom-color: var(--cds-text-primary);
}

.sep-input:focus[b-c7duq3huj6] {
  outline: none;
  border-bottom: 2px solid var(--cds-focus);
}

.sep-input[b-c7duq3huj6]::placeholder {
  color: var(--cds-text-placeholder);
}

.sep-field-helper[b-c7duq3huj6] {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.32px;
  line-height: 16px;
  color: var(--cds-text-secondary);
}

/* ─── Action bar ─────────────────────────────────────────── */
/* Carbon convention: primary right, secondary/tertiary to its
   immediate left. 1px gap so adjacent buttons read as a snapped
   pair without a visible separator. */
.sep-action-bar[b-c7duq3huj6] {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 1px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--cds-layer-02);
}

/* ─── Buttons (Carbon: 0 radius, 48px, 14px text, .16 tracking) ── */
.sep-btn[b-c7duq3huj6] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 48px;
  min-width: 160px;
  padding: 0 64px 0 16px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--cds-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  line-height: 18px;
  cursor: pointer;
  transition:
    background 0.07s,
    color 0.07s,
    border-color 0.07s;
}

.sep-btn:focus-visible[b-c7duq3huj6] {
  outline: 2px solid var(--cds-focus);
  outline-offset: -4px;
}

.sep-btn:disabled[b-c7duq3huj6] {
  cursor: not-allowed;
  opacity: 0.5;
}

.sep-btn--primary[b-c7duq3huj6] {
  background: var(--cds-link-primary);
  color: var(--cds-text-on-color);
}

.sep-btn--primary:hover:not(:disabled)[b-c7duq3huj6] {
  background: var(--cds-link-primary-hover);
}

.sep-btn--primary:active:not(:disabled)[b-c7duq3huj6] {
  background: var(--cds-button-primary-active);
}

.sep-btn--tertiary[b-c7duq3huj6] {
  background: transparent;
  color: var(--cds-link-primary);
  border-color: var(--cds-link-primary);
}

.sep-btn--tertiary:hover:not(:disabled)[b-c7duq3huj6] {
  background: var(--cds-layer-selected);
  color: var(--cds-link-primary-hover);
  border-color: var(--cds-link-primary-hover);
}

.sep-btn--tertiary:active:not(:disabled)[b-c7duq3huj6] {
  background: var(--cds-layer-02);
}

/* On narrow viewports stack buttons full-width so the primary
   still ends up below the secondary (closest to the thumb). */
@media (max-width: 480px) {
  .sep-action-bar[b-c7duq3huj6] {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .sep-btn[b-c7duq3huj6] {
    width: 100%;
    min-width: 0;
  }
}

/* .sep-input is scoped, so app.css's .form-control.is-invalid can't reach it. Same Carbon
   treatment, restated for this one class. */
.sep-input.is-invalid[b-c7duq3huj6],
.sep-input.is-invalid:focus[b-c7duq3huj6] {
  outline: 2px solid var(--cds-support-error);
  outline-offset: -2px;
  border-bottom-color: var(--cds-support-error);
}