@import '_content/Egov.Fod.UIComponents/Egov.FOD.UIComponents.5zd8t80lyz.bundle.scp.css';
@import '_content/Mud.Blazor/Mud.Blazor.wvsof9b5cr.bundle.scp.css';

/* /Components/DisabledOperatorNotice.razor.rz.scp.css */
/* Spaced like the page-header block it follows. Semantic tokens only (MIS-018 lint). */
.disabled-operator-notice[b-n5nyxko1sl] {
    margin-bottom: var(--spacing-24);
}
/* /Components/DocumentPreview.razor.rz.scp.css */
/* MW-580 (FR24.10). The card itself carries the portal's own classes and is deliberately left unstyled here:
   this dialog shows the portal's STRUCTURE and content, not its skin, and importing the portal stylesheet
   into the back-office would make two apps share a cascade neither owns.
   MUD semantic tokens only, no fallbacks (SemanticTokenLintTests): a fallback hides a misspelled token, which
   is how this file first shipped with names that do not exist. */
.document-preview[b-tz3jl80js5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.document-preview__facts[b-tz3jl80js5] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-4) var(--spacing-12);
    margin: 0;
}

.document-preview__facts dt[b-tz3jl80js5] {
    color: var(--color-text-base-secondary);
}

.document-preview__facts dd[b-tz3jl80js5] {
    margin: 0;
    /* A long upload name must wrap rather than widen the dialog past the viewport. */
    overflow-wrap: anywhere;
}

/* A fixed height, not a viewport unit: the dialog already scrolls, and a frame sized to the window leaves
   the facts above it off-screen on a laptop. */
.document-preview__frame[b-tz3jl80js5] {
    width: 100%;
    height: 32rem;
    border: 1px solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
}

@media (max-width: 480px) {
    .document-preview__frame[b-tz3jl80js5] {
        height: 20rem;
    }
}
/* /Components/DocumentVersionHistory.razor.rz.scp.css */
.document-versions[b-bdm8tgcp57] {
    margin-top: var(--spacing-32);
}

.document-versions h2[b-bdm8tgcp57] {
    margin-bottom: var(--spacing-16);
}
/* /Components/MisEmptyState.razor.rz.scp.css */
/* UI-SPEC §3.1 / §8 — the MUD `empty-states` pattern at CARD scale. Layout only, the way the pattern's own
   sheet is: everything visual belongs to the composed spinner / banner / button. Semantic MUD tokens only —
   no hex literals, no palette primitives, no inline styles (MIS-018 lint / ADR-016 D5).

   The deviation is the height. The pattern sizes its states in viewport units (60vh empty, 40vh loading,
   30vh error) because it was drawn for a PAGE content area; inside a dashboard card that would push every
   widget below it off the screen. --spacing-120 is the card-scale equivalent: tall enough that the state
   reads as a deliberate answer rather than a gap, short enough that four of them fit on one dashboard. */
.mis-empty-state[b-pux49juwd1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-16);
    min-height: var(--spacing-120);
    padding: var(--spacing-24);
    text-align: center;
}

.mis-empty-state__heading[b-pux49juwd1] {
    margin: 0;
}

.mis-empty-state__body[b-pux49juwd1] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

/* The banner is full width and left-aligned inside itself — centring a block of error text under a centred
   icon reads as decoration rather than as a failure to act on. */
.mis-empty-state--error[b-pux49juwd1] {
    align-items: stretch;
    text-align: start;
}
/* /Components/MisFilterBar.razor.rz.scp.css */
/* UI-SPEC §3.2 / §6 — the composed filter row. Semantic MUD tokens only: no hex literals, no
   --color-palette-* primitives, no inline styles (MIS-018 lint / ADR-016 D5). */
.mis-filter-bar[b-mx8oey8u7g] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-24);
}

/* Mobile-first, and the two halves are one rule: below 768 the controls STACK, because a select, a chip
   row and a search box do not sit on one line at phone widths and a row that wraps mid-control reads as
   broken. At 768 and above they become the toolbar row, wrapping as a whole. */
.mis-filter-bar__controls[b-mx8oey8u7g] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.mis-filter-bar__results[b-mx8oey8u7g] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

@media (min-width: 768px) {
    .mis-filter-bar__controls[b-mx8oey8u7g] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }
}
/* /Components/MisOperatorPicker.razor.rz.scp.css */
/* No box of its own: pages lay FodSelect out as a flex item (the template preview's export bar), and a wrapper box
   would take its place there. The element exists only so the rule below can reach into FodSelect's markup. */
.mis-operator-picker[b-vx9qngish5] {
    display: contents;
}

/* MW-571 — the "first 20 of N" row is disabled so FodSelect will not select it, but it is a message, not an
   inactive option. The library's disabled look (its disabled-text colour at 60% opacity) left it barely legible. */
.mis-operator-picker[b-vx9qngish5]  .fod-select__list .fod-select__option--disabled {
    color: var(--color-text-base-secondary);
    opacity: 1;
    cursor: default;
}

/* The note is a sentence, not a name: FOD keeps option text to one ellipsised line, which on the template preview's
   export bar (383 px) cut it at "…din 1144. Tastați den…" and lost the instruction to type. */
.mis-operator-picker[b-vx9qngish5]  .fod-select__list .fod-select__option--disabled .fod-select__option-text {
    white-space: normal;
}
/* /Components/MisPageHeader.razor.rz.scp.css */
/* UI-SPEC §2.3 / §6 — composed page header. Semantic MUD tokens only: no hex literals, no
   --color-palette-* primitives, no inline styles (MIS-018 lint / ADR-016 D5). */
.mis-page-header[b-0tuhqiy1b5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-32);
}

/* Breadcrumb is desktop-only (UI-SPEC §2.3): below 768 the trail costs a line and earns nothing. */
.mis-page-header__breadcrumb[b-0tuhqiy1b5] {
    display: none;
}

.mis-page-header__row[b-0tuhqiy1b5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
}

.mis-page-header__heading[b-0tuhqiy1b5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    min-width: 0;
}

/* The block owns its own rhythm (gap + bottom margin); the browser's default h1 margin fights it. */
.mis-page-header__heading h1[b-0tuhqiy1b5] {
    margin: 0;
}

.mis-page-header__actions[b-0tuhqiy1b5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
}

.mis-page-header__description[b-0tuhqiy1b5] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

@media (min-width: 768px) {
    .mis-page-header__breadcrumb[b-0tuhqiy1b5] {
        display: block;
    }
}
/* /Components/MisStatTile.razor.rz.scp.css */
/* UI-SPEC §3.1 / §6 — the composed KPI tile. Semantic MUD tokens only: no hex literals, no
   --color-palette-* primitives, no inline styles (MIS-018 lint / ADR-016 D5). */
.mis-stat-tile[b-g1opior8fg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-24);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-base-default);
    color: inherit;
    text-decoration: none;
}

/* The figure carries the display-medium scale from the token bundle's own responsive pair
   (.text-display-medium: 40/48 below 768, 48/56 at and above it), so the breakpoint lives in ONE place
   rather than being restated here. What this sheet owns is the part the scale does not describe: digits
   that line up down a column of tiles, and the tone. */
.mis-stat-tile__value[b-g1opior8fg] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-brand-default);
}

.mis-stat-tile--positive .mis-stat-tile__value[b-g1opior8fg] {
    color: var(--color-text-positive-default);
}

.mis-stat-tile--warning .mis-stat-tile__value[b-g1opior8fg] {
    color: var(--color-text-warning-default);
}

.mis-stat-tile--danger .mis-stat-tile__value[b-g1opior8fg] {
    color: var(--color-text-danger-default);
}

.mis-stat-tile__label[b-g1opior8fg] {
    color: var(--color-text-base-secondary);
}

/* The skeleton reserves the figure's own height, so a row does not jump when the numbers land. Sized from
   the scale's larger half — the tile is at its widest on the desktop the dashboard is designed for. */
.mis-stat-tile__value--skeleton[b-g1opior8fg] {
    height: var(--line-height-56);
    border-radius: var(--border-radius-8);
    background-color: var(--color-background-base-secondary);
}

/* A tile that leads somewhere says so on hover and focus. The focus ring is the shell's own 2px brand
   outline (UI-SPEC §5), never a colour change alone. */
a.mis-stat-tile:hover[b-g1opior8fg] {
    border-color: var(--color-border-brand-default);
}

a.mis-stat-tile:focus-visible[b-g1opior8fg] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}
/* /Components/ReportLetterheadBlocks.razor.rz.scp.css */
/* A letterhead block is a line of the document's header or footer, not body copy: no paragraph margins, and
   only the space a printed letterhead leaves between its lines. */
.report-letterhead__block[b-t1qpdb79ud] {
    margin: 0;
}

.report-letterhead__block + .report-letterhead__block[b-t1qpdb79ud] {
    margin-top: var(--spacing-4);
}

.report-letterhead__block--heading1[b-t1qpdb79ud] {
    font-size: var(--font-size-20);
    line-height: var(--line-height-28);
}

.report-letterhead__block--heading2[b-t1qpdb79ud] {
    font-size: var(--font-size-18);
    line-height: var(--line-height-26);
}

.report-letterhead__block--heading3[b-t1qpdb79ud] {
    font-size: var(--font-size-16);
    line-height: var(--line-height-24);
}

/* The design system's strongest weight; it defines no "bold". */
.report-letterhead__run--bold[b-t1qpdb79ud] {
    font-weight: var(--font-weight-semibold);
}

.report-letterhead__run--italic[b-t1qpdb79ud] {
    font-style: italic;
}

.report-letterhead__run--underline[b-t1qpdb79ud] {
    text-decoration: underline;
}
/* /Layout/AppShellLayout.razor.rz.scp.css */
/* ADR-015 — back-office shell: sidebar rail flush left running from the top down to the footer, thin
   action strip over the content column, content filling all remaining width, footer spanning the FULL
   viewport width beneath both columns. A deviation from the MUD page-with-sidebar pattern (recorded in
   ADR-015); component-level usage stays on the DS. ADR-016 adds D1 (fluid to 1600 from 1920) and
   D3 (sticky rail + sticky action row) on top of it.
   Semantic MUD tokens only — no hex literals, no --color-palette-* primitives (MIS-018 lint). */

/* Mobile (base): one column, rows in DOM order (pre-header → strip → rail → main → footer). */
.app-shell[b-a179jve9kq] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* `grid-area` matters only once the link is focused: unfocused it is out of flow (absolute) and no
   grid item at all, so its row below collapses to 0px. Focused it turns static, becomes an in-flow
   grid item, and without a placement of its own would land in an implicit row UNDER the footer. */
.app-shell__skip[b-a179jve9kq] {
    position: absolute;
    grid-area: skip;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.app-shell__skip:focus[b-a179jve9kq] {
    position: static;
    width: auto;
    height: auto;
    padding: var(--spacing-16);
}

/* Government pre-header — chrome comes from FOD's own `.pre-header` (main.css); this only lays the
   row out edge to edge. FOD's `.pre-header__content` is deliberately NOT used: it caps content at
   1320px and centres it, which would sit off-centre over an uncapped shell (ADR-015). */
.app-shell__preheader[b-a179jve9kq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
}

.app-shell__gov[b-a179jve9kq] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-6);
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base-default);
}

/* Action strip — the banner landmark; carries the auth actions (language switch lives above).
   ADR-016 fixes its geometry: 72 high, right-aligned, gap 24. 72 is on the 4px scale but has no
   spacing token, hence the literal; min-height (not height) so a wrapped control cannot clip.
   No block padding: around the 56px menu trigger it made the row 81, and app.css's 72px
   scroll-padding-top (MW-498) then left focus targets 9px under it. */
.app-shell__topbar[b-a179jve9kq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-24);
    min-height: 72px;
    padding: var(--spacing-0) var(--spacing-24);
    flex-wrap: wrap;
    row-gap: var(--spacing-12);
    background-color: var(--color-background-base-default);
    border-bottom: var(--border-width-1) solid var(--color-border-base-default);
}

.app-shell__rail[b-a179jve9kq] {
    background-color: var(--color-background-base-default);
    border-right: var(--border-width-1) solid var(--color-border-base-default);
}

.app-shell__rail-inner[b-a179jve9kq] {
    display: flex;
    flex-direction: column;
}

/* F1 shell — brand link and the rail toggle share one row. */
.app-shell__brand-row[b-a179jve9kq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    padding: var(--spacing-20) var(--spacing-16) var(--spacing-20) var(--spacing-24);
}

.app-shell__brand[b-a179jve9kq] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--spacing-12);
    min-width: 0;
    color: var(--color-text-base-default);
    text-decoration: none;
}

/* The collapse toggle is a desktop affordance: below 768 the rail is a stacked strip, not a column. */
.app-shell__rail-toggle[b-a179jve9kq] {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--spacing-40);
    height: var(--spacing-40);
    padding: var(--spacing-0);
    border: none;
    border-radius: var(--border-radius-6);
    background-color: transparent;
    cursor: pointer;
}

.app-shell__rail-toggle:hover[b-a179jve9kq] {
    background-color: var(--color-background-base-default-hover);
}

.app-shell__rail-toggle:focus-visible[b-a179jve9kq],
.app-shell__brand:focus-visible[b-a179jve9kq] {
    outline: none;
    box-shadow: 0 0 0 var(--border-width-1) var(--color-background-base-default),
                0 0 0 var(--border-width-3) var(--color-border-focus);
}

.app-shell__brand-text[b-a179jve9kq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-shell__brand-name[b-a179jve9kq] {
    font-size: var(--font-size-18);
    line-height: var(--line-height-24);
    font-weight: var(--font-weight-bold);
}

.app-shell__brand-tagline[b-a179jve9kq] {
    font-size: var(--font-size-12);
    line-height: var(--line-height-16);
    color: var(--color-text-base-secondary);
}

/* The rail is the whole left edge, so the sidebar drops its card chrome (border + radius) and
   stretches to the rail's width; those are the design system's own container custom properties. */
.app-shell__rail[b-a179jve9kq]  mud-sidebar {
    display: block;
    --sidebar-container-inline-size: 100%;
    --sidebar-container-border-width: 0;
    --sidebar-container-border-radius: var(--border-radius-0);
    --sidebar-container-background: transparent;
}

/* Group header: the design system's expandable item, restyled to read as a section heading
   (its own --sidebar-heading-* scale) rather than as another destination row. */
.app-shell__group-label[b-a179jve9kq] {
    font-size: var(--sidebar-heading-font-size);
    line-height: var(--sidebar-heading-line-height);
    font-weight: var(--sidebar-heading-font-weight);
    color: var(--sidebar-heading-color);
    text-transform: uppercase;
}

/* Members of a group sit one indent step in from their header. */
.app-shell__rail mud-sidebar-item[slot="children"][b-a179jve9kq] {
    --sidebar-item-padding-inline-start: var(--spacing-32);
}

/* F1 shell (Figma) — nav row spacing. The DS item slots its content into one label span, so an icon and a
   label slotted together sit inline with none of the item's own gap between them and the label on the baseline.
   The DS gap token puts the design's space back; middle alignment centres the 20px icon on the 24px label line. */
.app-shell__rail mud-sidebar-item > img[b-a179jve9kq] {
    margin-inline-end: var(--sidebar-item-gap);
}

.app-shell__rail mud-sidebar-item > img[b-a179jve9kq],
.app-shell__rail mud-sidebar-item > span[b-a179jve9kq] {
    vertical-align: middle;
}

/* D1 (ADR-016) — the content column is fluid: no 1200px cap, only the ≥1920 line-length bound below.
   Padding climbs 16 → 24 (≥768) → 40 (≥1024) with the MUD breakpoint margins (UI-SPEC §1.1/§1.3). */
.app-shell__main[b-a179jve9kq] {
    flex: 1;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--spacing-16);
}

/* The skip link focuses <main> (tabindex -1) only as a sequential-focus starting point; a ring around
   the whole content column would read as a control. Same call as the portal shell. */
.app-shell__main:focus[b-a179jve9kq] {
    outline: none;
}

.app-shell__footer[b-a179jve9kq] {
    min-width: 0;
}

/* F1 shell (Figma) — the footer's contacts: icon + value per line, links in brand colour (MUD link). */
.shell-footer-contacts[b-a179jve9kq] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin: var(--spacing-0);
    padding: var(--spacing-0);
    list-style: none;
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    color: var(--color-text-base-secondary);
}

.shell-footer-contacts li[b-a179jve9kq] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-8);
}

.shell-footer-contacts a[b-a179jve9kq] {
    color: var(--color-text-brand-default);
    text-decoration: underline;
    text-underline-offset: var(--spacing-2);
}

/* The bottom row's partner block: the ministry's crest and name, then the funding line. */
.shell-footer-partner[b-a179jve9kq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-12) var(--spacing-24);
    font-size: var(--font-size-12);
    line-height: var(--line-height-16);
    color: var(--color-text-base-secondary);
}

.shell-footer-partner__name[b-a179jve9kq] {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base-default);
}

/* Desktop: rail on the left down to the footer, content column takes ALL remaining width — the
   1200px centred cap is gone (ADR-015). The footer spans BOTH columns across the full viewport
   width. DOM order stays banner → aside → main → contentinfo; grid areas place the rail beside them. */
@media (min-width: 768px) {
    .app-shell[b-a179jve9kq] {
        display: grid;
        /* UI-SPEC §1.3 "368px 1fr": the rail keeps the design system's own sidebar width token (368px),
           read from the root so it tracks the DS, and the content column takes all the rest. */
        grid-template-columns: var(--sidebar-container-inline-size) minmax(0, 1fr);
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "skip skip"
            "preheader preheader"
            "rail topbar"
            "rail main"
            "footer footer";
    }

    .app-shell__preheader[b-a179jve9kq] {
        grid-area: preheader;
    }

    /* D3 (ADR-016) — the action row is sticky over the content column. Shell-level only: MUD removed
       the `--sticky` component variant deliberately, so nothing here touches a DS component. It sticks
       at the very top (the pre-header scrolls away with the page) and paints over scrolling content. */
    .app-shell__topbar[b-a179jve9kq] {
        grid-area: topbar;
        position: sticky;
        top: 0;
        z-index: 1;
        /* F1 shell: one 72px row from here up — the greeting truncates instead (ShellHeaderActions.razor.css). */
        flex-wrap: nowrap;
    }

    /* The rail fills its two rows exactly (default stretch), so its surface and right border meet the
       footer with no gap and no overlap whatever the page height. */
    .app-shell__rail[b-a179jve9kq] {
        grid-area: rail;
    }

    /* MW-590 — what sticks is the rail's inner wrapper, not the grid item. Chromium bounds a sticky grid
       item by the grid container, not by its grid area: a sticky <aside> kept travelling past "rail main"
       and, being positioned, painted over the left of the full-width footer (the "footer squeezed into the
       content column, rail running on beside it" report). Inside the aside the aside itself bounds it, so
       it releases at the footer edge. max-height (not height) caps it at the viewport, which gives sticky
       room to travel and keeps the nav's own scrollbar. */
    .app-shell__rail-inner[b-a179jve9kq] {
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
    }

    .app-shell__main[b-a179jve9kq] {
        grid-area: main;
        padding: var(--spacing-24);
    }

    .app-shell__rail-toggle[b-a179jve9kq] {
        display: inline-flex;
    }

    /* F1 shell — the rail collapsed to its icons. Every label stays in the DOM, visually hidden, so the
       rows keep their accessible names; the brand row stacks so the mark and the toggle fit the column. */
    .app-shell--rail-collapsed[b-a179jve9kq] {
        grid-template-columns: var(--spacing-80) minmax(0, 1fr);
    }

    .app-shell--rail-collapsed .app-shell__brand-row[b-a179jve9kq] {
        flex-direction: column;
        padding: var(--spacing-16) var(--spacing-8);
    }

    .app-shell--rail-collapsed .app-shell__brand[b-a179jve9kq] {
        flex: none;
    }

    .app-shell--rail-collapsed .app-shell__brand-text[b-a179jve9kq],
    .app-shell--rail-collapsed mud-sidebar-item > span[b-a179jve9kq] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .app-shell--rail-collapsed[b-a179jve9kq]  .shell-user-card {
        padding-inline: var(--spacing-12);
    }

    .app-shell--rail-collapsed[b-a179jve9kq]  .shell-user-card__text,
    .app-shell--rail-collapsed[b-a179jve9kq]  .shell-user-card__chevron {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .app-shell--rail-collapsed[b-a179jve9kq]  .shell-user-card .mud-menu__trigger {
        justify-content: center;
        padding: var(--spacing-4);
    }

    .app-shell--rail-collapsed mud-sidebar-item[slot="children"][b-a179jve9kq] {
        --sidebar-item-padding-inline-start: var(--spacing-24);
    }

    /* The numbered row badge is drawn in the item's shadow DOM, so the span-hiding above leaves it showing; the
       icon keeps its place and the badge takes the 80px rail's remaining width (tight gap and end padding). */
    .app-shell--rail-collapsed mud-sidebar-item[badge][b-a179jve9kq] {
        --sidebar-item-gap: var(--spacing-4);
        --sidebar-item-padding-inline-end: var(--spacing-4);
    }

    .app-shell__footer[b-a179jve9kq] {
        grid-area: footer;
    }
}

@media (min-width: 1024px) {
    .app-shell__main[b-a179jve9kq] {
        padding: var(--spacing-40);
    }
}

/* D1's only bound: past 1920 the content column stops growing at 1600 and centres inside its grid
   area, so text lines stay readable on 24–27" monitors. Below this the column is fully fluid.
   MW-558: auto inline margins turn a grid item's width into fit-content, so `main` shrink-wrapped its
   content — a short page collapsed narrower than the column (/obligations 1162 px of 1552), and a wide
   table's min-content pushed it to the 1600 cap inside a 1552 px track, scrolling the whole page sideways.
   An explicit width keeps it the track's width up to the cap; min-width 0 leaves wide content to its own
   scroller. */
@media (min-width: 1920px) {
    .app-shell__main[b-a179jve9kq] {
        inline-size: 100%;
        min-inline-size: 0;
        max-width: 1600px;
        margin-inline: auto;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Semantic MUD tokens only — no hex literals, no --color-palette-* primitives (MIS-018 lint). */
.page[b-ob4y30xqh0] {
    min-height: 100vh;
    margin: 0;
    padding: var(--spacing-32);
    background-color: var(--color-background-base-default);
    color: var(--color-text-base-default);
    font-family: var(--font-family-primary);
}
/* /Pages/Analytics/IndicatorsPage.razor.rz.scp.css */
/* MIS-102 — the filter row. Four controls plus a reset read as one band rather than a stack of full-width
   selects; every value comes from the existing design tokens, so this page ages with them. Page-level scoped
   CSS, not a library's: the RCL rebuild gotcha in the root CLAUDE.md does not apply here. */
/* Rides the shared .mud-page__toolbar pattern (main-page.css), which is what a filter band is FOR — it
   already supplies the row, the wrap and the separation from the content below. Two overrides only: the
   controls carry labels above them, so they align on their bottoms rather than their centres, and the gap
   widens because each child here is a label+control stack rather than a single chip. */
.indicators-filters[b-2sr2s8k8lo] {
    align-items: flex-end;
    gap: var(--spacing-16);
}

/* Label above its control, and the pair moves as one when the row wraps. */
.indicators-filter[b-2sr2s8k8lo] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.indicators-filter select[b-2sr2s8k8lo] {
    min-width: 14rem;
    padding: var(--spacing-8);
    border: 1px solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-default);
    font: inherit;
}

/* MIS-103 — how far behind publication the projection is. Secondary text above the filter band: it qualifies
   everything below it, and it must not read as a heading or compete with the data. */
.indicators-freshness[b-2sr2s8k8lo] {
    margin-bottom: var(--spacing-8);
    color: var(--color-text-base-secondary);
}

.indicators-clear-all[b-2sr2s8k8lo] {
    padding: var(--spacing-8) var(--spacing-16);
    border: 1px solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-secondary);
    font: inherit;
    cursor: pointer;
}

.indicators-clear-all:hover[b-2sr2s8k8lo] {
    background: var(--color-background-base-secondary-hover);
}
/* /Pages/Analytics/SectorEvolutionPage.razor.rz.scp.css */
/* MW-488/MIS-119 — the filter band and the two qualifying lines around the table. Page-level scoped CSS, not
   a library's: the RCL rebuild gotcha in the root CLAUDE.md does not apply here. Every value is an existing
   design token, so this page ages with them. */

/* Same shape as the indicator listing's band (main-page.css supplies the row, the wrap and the separation):
   the controls carry labels above them, so they align on their bottoms, and the gap widens because each child
   is a label+control stack rather than a single chip. */
.sector-evolution-filters[b-e5q8umpmzx] {
    align-items: flex-end;
    gap: var(--spacing-16);
}

.sector-evolution-filter[b-e5q8umpmzx] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* How many operators the totals rest on. Secondary text between the chart and the table because it qualifies
   both — a sum over 40 operators and a sum over 4 are different claims, and the number is what tells them
   apart. */
.sector-evolution-population[b-e5q8umpmzx] {
    margin: var(--spacing-8) 0;
    color: var(--color-text-base-secondary);
}

/* The download control. Below the table because it acts on what is above it, and separated so it does not read
   as a table footer. */
.sector-evolution-actions[b-e5q8umpmzx] {
    margin-top: var(--spacing-16);
}

/* The Form 564 address behind the chosen column. Secondary and below the table: it is provenance, which a
   reader consults after the figure rather than before it — but it has to be on the page, because traceability
   to a row of a legal form is exactly what the hand-compiled workbook lost. */
.sector-evolution-source[b-e5q8umpmzx] {
    margin-top: var(--spacing-8);
    color: var(--color-text-base-secondary);
}
/* /Pages/Audit/AuditTrailPage.razor.rz.scp.css */
/* A payload is one unbroken JSON line; let it wrap inside its cell instead of widening the table. */
.audit-trail__payload[b-15akrr83ti] {
    overflow-wrap: anywhere;
}
/* /Pages/Compliance/ComplianceOversightPage.razor.rz.scp.css */
/* MW-475/MIS-108 — the Head's compliance screen. Scoped CSS: every class below is emitted by this component's
   own markup, which is what isolation can reach (the note on wwwroot/css/dashboard-widgets.css explains when it
   cannot). MUD tokens only. */

.compliance-filters[b-js06f8eqb0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin: var(--spacing-16) 0;
}

/* Buttons, not links: choosing a state narrows the table in place and does not change the address of the
   page. They carry their counts, so the reader is never picking a filter blind. */
.compliance-filter[b-js06f8eqb0] {
    padding: var(--spacing-4) var(--spacing-12);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-4);
    background-color: var(--color-background-base-default);
    color: var(--color-text-base-default);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-12);
    cursor: pointer;
}

.compliance-filter:hover[b-js06f8eqb0] {
    background-color: var(--color-background-base-secondary);
}

.compliance-filter:focus-visible[b-js06f8eqb0] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}

/* The active filter is marked by BOTH a fill and a border weight: a single colour cue would be the only
   carrier of which view the reader is in (the rule MudChartTone states for the charts). */
.compliance-filter--active[b-js06f8eqb0] {
    border-color: var(--color-border-brand-default);
    border-width: var(--border-width-2);
    background-color: var(--color-background-brand-secondary);
    font-weight: var(--font-weight-medium);
}

.compliance-drilldown[b-js06f8eqb0] {
    color: var(--color-text-brand-default);
}

.compliance-drilldown:focus-visible[b-js06f8eqb0] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}

/* One chart per indicator, in a grid so a wide screen reads several at once and a narrow one stacks them.
   Each carries its own caption, axis and legal basis, so they need real space between them. */
.compliance-trends[b-js06f8eqb0] {
    list-style: none;
    margin: var(--spacing-16) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-24);
}

.compliance-trend[b-js06f8eqb0] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* The article of 356/2019 the indicator is judged against, under its own chart: a compliance verdict a Head
   may be asked to defend must name what it was measured against. */
.compliance-trend__basis[b-js06f8eqb0] {
    color: var(--color-text-base-secondary);
}
/* /Pages/Contact/ContactEditPage.razor.rz.scp.css */
/* MIS-061 — Contact admin page: page-specific bits only. The header/body/action-row spacing comes from the
   shared `.mud-page__*` main-page pattern (wwwroot/css/main-page.css). */

/* The structured field stack inside a language tab. */
.contact-fields[b-zmatjbhz19] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* Right-aligned save bar for the current language. */
.contact-fields__actions[b-zmatjbhz19] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
}

/* Caption for the Markdown notes — mirrors a MUD field label so it reads with the input. */
.contact-field-label[b-zmatjbhz19] {
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base-secondary);
    margin-bottom: calc(var(--spacing-16) * -1 + var(--spacing-4));
}

/* Version-history section, separated from the editor above it. */
.contact-versions[b-zmatjbhz19] {
    margin-top: var(--spacing-32);
}

.contact-versions h2[b-zmatjbhz19] {
    margin-bottom: var(--spacing-16);
}

/* Rendered contact-card preview inside the modal. */
.contact-preview[b-zmatjbhz19] {
    color: var(--color-text-base-default);
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* MIS-021 — dashboard main-column layout, MUD tokens only (spacing/radius/border/color roles),
   following the page-with-sidebar main-column composition. */

/* Search / sort / filter affordances on one row (FR04.02–03), wrapping on narrow widths. */
.dashboard-toolbar[b-wv916mr8j6] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-24);
    padding-bottom: var(--spacing-24);
    border-bottom: var(--border-width-1) solid var(--color-border-base-secondary);
}

.dashboard-toolbar > *[b-wv916mr8j6] {
    flex: 0 1 240px;
    min-width: 0;
}

/* The dashboard's regions, stacked with one gap between them. The alert region and the widget grid are
   separate blocks, and nothing else spaces them: .dashboard-slot is WidgetSlotView's markup, so a rule for it
   here would match nothing (CSS isolation stamps its attribute on one component's own elements). Owning the
   gap on a page element keeps it reachable — and it applies to any region a later ticket adds. */
.dashboard-regions[b-wv916mr8j6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

/* Two-column widget area; collapses to one column under the pattern's mobile breakpoint. UI-SPEC §1.1
   allows exactly two asymmetric splits, and the dashboard uses both: col-8 + col-4 for the alerts row and
   col-6 + col-6 for the tables row. Tracks are minmax(0, ...), never a bare fr: a bare 1fr floors at the widest
   item's min-content, so a widget table (nowrap headers) stretched the column past a 480px viewport instead of
   scrolling inside its own .mud-table__viewport (NFR15). */
.dashboard-grid[b-wv916mr8j6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
}

@media (min-width: 1024px) {
    .dashboard-grid--main[b-wv916mr8j6] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .dashboard-grid--split[b-wv916mr8j6] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* The toolbar's plain select fields — MudInputSearch brings its own label, these two do not. */
.dashboard-toolbar__field[b-wv916mr8j6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.dashboard-toolbar__field label[b-wv916mr8j6] {
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-12, 0.75rem);
}

/* MW-472/MIS-105 — the region and widget-card rules that used to sit here have moved to
   wwwroot/css/dashboard-widgets.css. They describe markup emitted by WidgetSlotView, not by this page, and
   CSS isolation stamps its attribute on ONE component's own elements: the rules never matched anything.
   See that sheet's header. */
/* /Pages/Faq/FaqEditPage.razor.rz.scp.css */
/* MIS-060 — FAQ admin page: page-specific bits only. The header/body/action-row spacing comes from the
   shared `.mud-page__*` main-page pattern (wwwroot/css/main-page.css). */

/* The ordered entry list inside a language tab. */
.faq-entries[b-2azjylo2bw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

/* One Q/A entry — a bordered card so the list of question+answer pairs reads as discrete rows. */
.faq-entry[b-2azjylo2bw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    padding: var(--spacing-16);
    border: 1px solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
}

/* The add-entry form, set apart from the existing entries above it. */
.faq-entry--new[b-2azjylo2bw] {
    border-style: dashed;
    margin-top: var(--spacing-8);
}

.faq-entry--new h3[b-2azjylo2bw] {
    margin: 0;
}

/* Per-row action bar: reorder chevrons + save/remove, right-aligned, wrapping on narrow widths. */
.faq-entry__actions[b-2azjylo2bw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
}

/* Caption for the Markdown answer — mirrors a MUD field label so it reads with the input. */
.faq-entry-label[b-2azjylo2bw] {
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base-secondary);
    margin-bottom: calc(var(--spacing-12) * -1 + var(--spacing-4));
}

/* Version-history section, separated from the editor above it. */
.faq-versions[b-2azjylo2bw] {
    margin-top: var(--spacing-32);
}

.faq-versions h2[b-2azjylo2bw] {
    margin-bottom: var(--spacing-16);
}

/* Rendered accordion preview inside the modal. */
.faq-preview[b-2azjylo2bw] {
    color: var(--color-text-base-default);
}
/* /Pages/Gallery.razor.rz.scp.css */
/* Semantic MUD tokens only — no hex literals, no --color-palette-* primitives (MIS-018 lint). */
.gallery-section[b-pe7n9s5hdz] {
    margin-block: var(--spacing-32);
}

.gallery-row[b-pe7n9s5hdz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-12);
    margin-block: var(--spacing-16);
}

.gallery-col[b-pe7n9s5hdz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
    max-width: 480px;
}

/* The chart demos. A chart sizes itself to its box, so the gallery gives it one — otherwise every mark on
   this page would be as wide as the section and comparable with nothing. */
.gallery-chart[b-pe7n9s5hdz] {
    max-width: 420px;
    margin-bottom: var(--spacing-24);
}

/* Meters are read down a column, against each other: that is the whole reason the caller passes them a shared
   maximum, and it only shows if they are stacked. */
.gallery-chart--meters[b-pe7n9s5hdz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}
/* /Pages/Guidelines/GuidelineEditPage.razor.rz.scp.css */
/* MIS-062 — Guideline editor page: page-specific bits only. Header/body/action-row spacing comes from the
   shared `.mud-page__*` main-page pattern (wwwroot/css/main-page.css). */

/* Always-visible "back to the list" link at the top of the editor. */
.guideline-back[b-sk85ntzzei] {
    display: inline-block;
    margin-bottom: var(--spacing-8);
    color: var(--color-text-brand-default);
    text-decoration: none;
}

.guideline-back:hover[b-sk85ntzzei] {
    text-decoration: underline;
}

/* The rich-text field stack inside a language tab. */
.guideline-variant[b-sk85ntzzei] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* Caption for the Markdown body — mirrors a MUD field label so it reads with the editor. */
.guideline-variant-label[b-sk85ntzzei] {
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base-secondary);
    margin-bottom: calc(var(--spacing-16) * -1 + var(--spacing-4));
}

/* Version-history section, separated from the editor above it. */
.guideline-versions[b-sk85ntzzei] {
    margin-top: var(--spacing-32);
}

.guideline-versions h2[b-sk85ntzzei] {
    margin-bottom: var(--spacing-16);
}

/* Rendered guideline preview inside the modal. */
.guideline-preview[b-sk85ntzzei] {
    color: var(--color-text-base-default);
}
/* /Pages/Home.razor.rz.scp.css */
/* Semantic MUD tokens only — no hex literals, no --color-palette-* primitives (MIS-018 lint). */
.preview[b-ptoj2nw31t] {
    margin-block: var(--spacing-32);
}

.swatches[b-ptoj2nw31t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-12);
}

.swatch[b-ptoj2nw31t] {
    display: flex;
    align-items: flex-end;
    min-width: var(--spacing-120);
    padding: var(--spacing-32) var(--spacing-16) var(--spacing-12);
    border-radius: var(--border-radius-8);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-14);
}

.swatch--brand[b-ptoj2nw31t] {
    background-color: var(--color-background-brand-default);
    color: var(--color-text-base-default-on-color);
}

.swatch--brand-secondary[b-ptoj2nw31t] {
    background-color: var(--color-background-brand-secondary);
    color: var(--color-text-brand-default);
}

.swatch--base-secondary[b-ptoj2nw31t] {
    background-color: var(--color-background-base-secondary);
    color: var(--color-text-base-default);
}

.swatch--danger[b-ptoj2nw31t] {
    background-color: var(--color-background-danger-default);
    color: var(--color-text-base-default-on-color);
}

.swatch--inverse[b-ptoj2nw31t] {
    background-color: var(--color-background-base-inverse-default);
    color: var(--color-background-base-inverse-on-color);
}
/* /Pages/HomeHero/HomeHeroEditPage.razor.rz.scp.css */
/* MW-542 — home-hero admin page: page-specific bits only. Header/body/action-row spacing comes from the shared
   `.mud-page__*` main-page pattern (wwwroot/css/main-page.css). MUD tokens only. */

/* The text field stack inside a language tab. */
.home-hero-variant[b-c9b3ud8dvr] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* The one image shared by every language, in the same framed group the document editors use. */
.home-hero-image[b-c9b3ud8dvr] {
    min-width: 0;
    margin: var(--spacing-24) 0;
    padding: var(--spacing-16);
    border: 1px solid var(--color-border-base-subtle);
    border-radius: var(--border-radius-4);
}

.home-hero-image p[b-c9b3ud8dvr] {
    margin: 0 0 var(--spacing-8);
}

/* A thumbnail, not the full upload: the width/height attributes keep its ratio, CSS caps its box. */
.home-hero-current[b-c9b3ud8dvr] {
    display: block;
    max-width: 20rem;
    height: auto;
    margin-bottom: var(--spacing-12);
    border-radius: var(--border-radius-8);
}

.home-hero-versions[b-c9b3ud8dvr] {
    margin-top: var(--spacing-32);
}

.home-hero-versions h2[b-c9b3ud8dvr] {
    margin-bottom: var(--spacing-16);
}

.home-hero-preview[b-c9b3ud8dvr] {
    color: var(--color-text-base-default);
}

/* The preview is portal markup the back office does not style; keep its image inside the modal. */
.home-hero-preview[b-c9b3ud8dvr]  img {
    max-width: 100%;
    height: auto;
}
/* /Pages/News/NewsEditPage.razor.rz.scp.css */
/* MIS-024 — news create/edit page: page-specific bits only. The header/body/action-row
   spacing comes from the shared `.mud-page__*` main-page pattern (wwwroot/css/main-page.css). */

/* Always-visible "back to the list" link at the top of the editor. */
.news-back[b-px27ucfvog] {
    display: inline-block;
    margin-bottom: var(--spacing-8);
    color: var(--color-text-brand-default);
    text-decoration: none;
}

.news-back:hover[b-px27ucfvog] {
    text-decoration: underline;
}

/* One language variant (inside a tab): title / body / meta stacked. */
.news-variant[b-px27ucfvog] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* Caption for the Markdown body — mirrors a MUD field label so it reads with the inputs. */
.news-variant-label[b-px27ucfvog] {
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base-secondary);
    /* Pull the editor toward its label so the pair reads as one field (offsets the column gap). */
    margin-bottom: calc(var(--spacing-16) * -1 + var(--spacing-6));
}

/* Version-history section, separated from the editor above it. */
.news-versions[b-px27ucfvog] {
    margin-top: var(--spacing-32);
}

.news-versions h2[b-px27ucfvog] {
    margin-bottom: var(--spacing-16);
}

/* Rendered Markdown preview inside the modal. */
.news-preview[b-px27ucfvog] {
    color: var(--color-text-base-default);
}
/* /Pages/Nomenclatures/NomenclatureDetailPage.razor.rz.scp.css */
/* MIS-031 — version-history table cells are also click-to-open (the row-action menu stays as the
   discoverable path). Mirrors NomenclaturesPage.razor.css's .cell-clickable. Renders as plain cell
   text — the pointer cursor is the only affordance that it's clickable. */
/* MIS-049 — item-editor header: title + Add-item action, same split-row pattern as the list page's head. */
.nomenclature-items-head[b-0zc4e05tk1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-16);
}

.cell-clickable[b-0zc4e05tk1] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* MW-553 — UI-SPEC §5 section gap: the history is its own section, not a caption under the items table. */
.nomenclature-versions[b-0zc4e05tk1] {
    margin-top: var(--spacing-40);
}

/* MW-553 — the version number and, on the current version, its "curentă" tag share one history cell. */
.nomenclature-version-cell[b-0zc4e05tk1] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
}

.nomenclature-version-cell .cell-clickable[b-0zc4e05tk1] {
    width: auto;
}

/* Reorder is staged locally (drag-and-drop or Move up/down) — this bar is the explicit confirm step
   that actually commits the new order and creates a version. */
.nomenclature-reorder-bar[b-0zc4e05tk1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-base-secondary);
}

.nomenclature-reorder-bar-actions[b-0zc4e05tk1] {
    display: inline-flex;
    gap: var(--spacing-8);
}

/* The polite live region that names the moved item and its new position (RT-ADMIN-2). It stays in the
   DOM from first render so a screen reader has it registered before the first message; with nothing to
   say it takes no space. Visible when it has something: the same feedback helps a sighted keyboard user. */
.nomenclature-reorder-announcement[b-0zc4e05tk1] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.nomenclature-reorder-announcement:empty[b-0zc4e05tk1] {
    display: none;
}
/* /Pages/Nomenclatures/NomenclatureItemLabel.razor.rz.scp.css */
/* MW-553 — one label column: the Romanian label, each translation on its own line under it. */
.nomenclature-item-label[b-43v642vc2j],
.nomenclature-item-translation[b-43v642vc2j] {
    display: block;
}

.nomenclature-item-translation[b-43v642vc2j] {
    color: var(--color-text-base-secondary);
}

/* The language marker comes from the element's own lang attribute, so the marker and what a screen reader is told
   about the text's language cannot disagree. */
.nomenclature-item-translation[b-43v642vc2j]::before {
    content: attr(lang) " · ";
    text-transform: uppercase;
}
/* /Pages/Nomenclatures/NomenclatureMetaPanel.razor.rz.scp.css */
/* Metadata panel: a bordered card with a two-column "label / value" property grid — dt/dd pairs
   auto-flow into the grid's two columns row-by-row, so no explicit per-field wrapper is needed. */
.nomenclature-detail-meta[b-qwhakmtsab] {
    margin-bottom: var(--spacing-24);
}

.nomenclature-detail-meta h2[b-qwhakmtsab] {
    margin: 0 0 var(--spacing-16) 0;
}

.nomenclature-detail-meta-grid[b-qwhakmtsab] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--spacing-24);
    row-gap: var(--spacing-12);
    margin: 0;
    padding: var(--spacing-24);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-base-default);
}

.nomenclature-detail-meta-grid dt[b-qwhakmtsab] {
    margin: 0;
    color: var(--color-text-base-secondary);
    white-space: nowrap;
}

.nomenclature-detail-meta-grid dd[b-qwhakmtsab] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-base-default);
    word-break: break-word;
}

.nomenclature-item-reorder-buttons[b-qwhakmtsab] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
}

@media (max-width: 640px) {
    .nomenclature-detail-meta-grid[b-qwhakmtsab] {
        grid-template-columns: 1fr;
        row-gap: var(--spacing-4);
    }

    .nomenclature-detail-meta-grid dd[b-qwhakmtsab] {
        margin-bottom: var(--spacing-12);
    }
}
/* /Pages/Nomenclatures/NomenclaturesPage.razor.rz.scp.css */
/* MIS-031/MIS-048 — nomenclatures list layout, MUD tokens only (spacing/radius/border/color roles).
   The page header is the shared MisPageHeader and the filter row the shared MisFilterBar (MW-553);
   only the page-specific bordered list card, the search box's growth and the table live here. */

/* Search + table share one bordered card, matching the design's enclosed list panel. */
.nomenclatures-body[b-13iv8dje7g] {
    padding: var(--spacing-24);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-base-default);
}

/* MW-553 — the search box fills the filter row. MudInputSearch renders <form><div class="mud-input-search">
   with ITS scope attribute, so the old `.nomenclatures-search-row > .mud-input-search` never matched and the
   box stayed 234 px wide; the form is the flex item MisFilterBar lays out, reached through ::deep. */
.nomenclatures-filters[b-13iv8dje7g]  .mud-input-search__form {
    flex: 1 1 auto;
}

/* "Elemente": the count, and under it the deprecated items, only when there are some. */
.nomenclatures-count[b-13iv8dje7g],
.nomenclatures-deprecated[b-13iv8dje7g] {
    display: block;
}

.nomenclatures-deprecated[b-13iv8dje7g] {
    color: var(--color-text-base-secondary);
}

/* Code/Name cells are also click-to-open (the row-action menu stays as the discoverable path).
   Renders as plain cell text — the pointer cursor is the only affordance that it's clickable. */
.cell-clickable[b-13iv8dje7g] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Create/rename modals: FOD default label-to-input gap runs too wide and the gap
   before the next field's label too tight — tighten the former, widen the latter.
   .fod-textfield/mud-input are FOD library markup (no page scope attribute of their
   own), so ::deep must anchor on .nomenclature-modal-fields — a real element in
   this page's own markup — to reach them at all. The label itself lives in
   mud-input's shadow DOM (unreachable by any selector, ::deep included) — its gap
   to the input is the --input-field-gap custom property, which inherits through
   the shadow boundary. */
.nomenclature-modal-fields[b-13iv8dje7g]  mud-input {
    --input-field-gap: var(--spacing-2, 2px);
}

.nomenclature-modal-fields[b-13iv8dje7g]  .fod-textfield {
    margin-bottom: var(--spacing-16, 16px) !important;
}
/* /Pages/Nomenclatures/NomenclatureVersionDetailPage.razor.rz.scp.css */
/* MW-553 — with the section headings at heading-h4, the banner needs its own gap before "Detalii". */
.nomenclature-version-banner[b-mn5aw6azhu] {
    margin-bottom: var(--spacing-24);
}

.nomenclature-version-rollback[b-mn5aw6azhu] {
    margin-top: var(--spacing-16);
}
/* /Pages/Notifications/NotificationsPage.razor.rz.scp.css */
/* MW-496 — the feed and its pager, one column under the page header. The lines are the dashboard card's
   (global .dashboard-list rules), so this page only spaces the blocks. */
.notifications-page[b-l5vm22nxz4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}
/* /Pages/Operators/LicenceEditPage.razor.rz.scp.css */
/* MIS-123 — the licence form's own layout. Semantic MUD/FOD tokens only: no hex literals, no
   --color-palette-* primitives, no inline styles (MIS-018 lint / ADR-016 D5). */

/* A form is read down one column; the fields were unspaced and full-page-wide, so a licence number ran the
   width of a 1600px screen. MW-559: the whole page is one column, capped at 720 px by the global
   .mud-page__body--form (UI-SPEC §1.4), so every section lines up; each section stacks its own fields. */
.licence-edit__terms[b-vnxsi2x6xr],
.licence-edit__lifecycle[b-vnxsi2x6xr] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    align-items: flex-start;
}

/* The activity pair is a real fieldset (a group with one legend), but the UA's own inset border and
   overlapping legend are the one piece of native chrome left in a design-system form. */
.licence-edit__activities[b-vnxsi2x6xr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-16);
    width: 100%;
    margin: 0;
    padding: var(--spacing-12) var(--spacing-16);
    border: 1px solid var(--color-border-base-subtle);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-default);
}

.licence-edit__activities > legend[b-vnxsi2x6xr] {
    /* A flex container ignores a legend's UA float, so it needs to claim the row itself. */
    width: 100%;
    margin-bottom: var(--spacing-8);
    padding: 0;
    color: var(--color-text-base-secondary);
}

/* The DS marks a required field with a danger-coloured asterisk after its label; the group says it the same
   way rather than inventing a second vocabulary. */
.licence-edit__required[b-vnxsi2x6xr] {
    margin-inline-start: var(--spacing-4);
    color: var(--color-text-danger-default-aa);
}

/* The sections after the terms are separate acts on the licence (art. 33–34, the arie de operare), so a rule sets
   each apart; the column's own gap spaces them. */
.licence-edit__lifecycle[b-vnxsi2x6xr],
.licence-edit[b-vnxsi2x6xr]  .licence-service-area {
    margin-top: var(--spacing-16);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--color-border-base-subtle);
}

.licence-edit__lifecycle > h2[b-vnxsi2x6xr] {
    margin: 0;
}
/* /Pages/Operators/OperatorDetailPage.razor.rz.scp.css */
/* FR20.02/MIS-123 — the operator page's own spacing, and only that: the header block belongs to
   mis-page-header and each panel styles itself. Semantic tokens only (MIS-018 lint / ADR-016 D5). */

/* The review prompt sits between the header and the comparison it is about, and needs to be clear of both
   (the Fod box owns its inner padding, not its place on the page). */
.operator-detail__conflict[b-8nj7tt220i] {
    margin-top: var(--spacing-16);
}
/* /Pages/Operators/OperatorLicencesPanel.razor.rz.scp.css */
/* MIS-123 — the operator's licence panel layout, and only that. Semantic MUD/FOD tokens only: no hex
   literals, no --color-palette-* primitives, no inline styles (MIS-018 lint / ADR-016 D5).

   No stylesheet existed: the heading and its "issue" button stacked instead of sharing a row, and each
   licence was four unstyled paragraphs one under the other, so a list of three read as twelve lines with no
   boundary between the licences. */

/* MW-559 (UI-SPEC §5) — a card like the two RSUD halves above it: radius 12, padding 24, resting --shadow-100. */
.operator-licences[b-3295aq0rjd] {
    margin-top: var(--spacing-24);
    padding: var(--spacing-16);
    border-radius: var(--border-radius-12);
    background: var(--color-background-base-default);
    box-shadow: var(--shadow-100);
}

@media (min-width: 768px) {
    .operator-licences[b-3295aq0rjd] {
        padding: var(--spacing-24);
    }
}

.operator-licences__head[b-3295aq0rjd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-12);
}

.operator-licences__head > h2[b-3295aq0rjd] {
    margin: 0;
}

.operator-licences__note[b-3295aq0rjd] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.operator-licences__list[b-3295aq0rjd] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One licence is one row: number, term, activity, status. A rule between rows rather than around each — the
   card already draws the panel's boundary, and a box per licence inside a box reads as nesting that is not
   there. */
.operator-licences__item[b-3295aq0rjd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2) var(--spacing-16);
    padding: var(--spacing-12) 0;
    border-top: 1px solid var(--color-border-base-subtle);
}

.operator-licences__item:first-child[b-3295aq0rjd] {
    border-top: 0;
    padding-top: 0;
}

@media (min-width: 768px) {
    .operator-licences__item[b-3295aq0rjd] {
        grid-template-columns: minmax(8rem, auto) minmax(12rem, auto) 1fr auto;
        align-items: center;
    }
}

.operator-licences__number[b-3295aq0rjd] {
    color: var(--color-text-brand-default);
    text-decoration: none;
}

.operator-licences__number:hover[b-3295aq0rjd] {
    color: var(--color-text-brand-default-hover);
    text-decoration: underline;
}

.operator-licences__number:visited[b-3295aq0rjd] {
    color: var(--color-text-brand-visited);
}

.operator-licences__term[b-3295aq0rjd],
.operator-licences__activity[b-3295aq0rjd] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.operator-licences__status[b-3295aq0rjd] {
    margin: 0;
    /* The tag sits at the row's end on a wide screen and under the activity on a narrow one; either way it
       must not stretch to the column's width. */
    justify-self: start;
}

@media (min-width: 768px) {
    .operator-licences__status[b-3295aq0rjd] {
        justify-self: end;
    }
}
/* /Pages/Operators/OperatorsPage.razor.rz.scp.css */
/* MW-559 (UI-11) — the /operators register's own layout, and only that: the header block belongs to
   mis-page-header, the filter row to mis-filter-bar and the table's anatomy to Mud.Blazor. Semantic tokens only
   (MIS-018 lint / ADR-016 D5); the 16 px cell gutter is the shared .mis-table-compact. */

.operators-search[b-cu3nuq2zl1] {
    flex: 1 1 320px;
    min-inline-size: 0;
}

.operators-table[b-cu3nuq2zl1]  .mud-table__th {
    white-space: normal;
}

/* UI-SPEC §1.3: sticky header + sticky first column. A sticky element sticks to its nearest scroll container, and
   MudTable's viewport is one (overflow-x: auto) — so the header can only pin under the shell's 72 px action strip
   where the register fits the column (≥ 1248 px, the full sidebar's breakpoint) and the viewport stops scrolling;
   below it the table scrolls sideways and the name column is the one that stays (the /templates rule). */
@media (min-width: 1248px) {
    .operators-table[b-cu3nuq2zl1]  .mud-table__viewport {
        overflow: visible;
    }

    .operators-table[b-cu3nuq2zl1]  thead th {
        position: sticky;
        top: 72px;
        z-index: 2;
        background: var(--color-background-base-default);
    }
}

@media (max-width: 1247.98px) {
    .operators-table[b-cu3nuq2zl1]  tbody td:first-child,
    .operators-table[b-cu3nuq2zl1]  thead th:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        background: var(--color-background-base-default);
    }

    .operators-table[b-cu3nuq2zl1]  .mud-table--zebra tbody tr:nth-child(even) td:first-child {
        background: var(--color-background-base-secondary);
    }
}

.operators-table__name[b-cu3nuq2zl1],
.operators-table__stack[b-cu3nuq2zl1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
}

/* The name column never squeezes below a readable width: the other columns are short tokens and would otherwise
   leave a long operator name one word a line. */
.operators-table__name[b-cu3nuq2zl1] {
    min-inline-size: 160px;
}

.operators-table__abbreviation[b-cu3nuq2zl1] {
    color: var(--color-text-base-secondary);
}

/* An IDNO is one 13-digit token: broken, it reads as two numbers. (A licence number may wrap at its hyphens.) */
.operators-table__nowrap[b-cu3nuq2zl1] {
    white-space: nowrap;
}

/* Two Small actions side by side where the column allows, stacked where it does not (1280). The table's cells have
   no block padding of their own, so the pair carries it: stacked, it would otherwise touch both row rules. */
.operators-table__actions[b-cu3nuq2zl1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    padding-block: var(--spacing-8);
}

.operators-footer[b-cu3nuq2zl1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    margin-top: var(--spacing-16);
}

.operators-footer__range[b-cu3nuq2zl1] {
    margin: 0;
    color: var(--color-text-base-secondary);
}
/* /Pages/Operators/RsudComparisonPanel.razor.rz.scp.css */
/* FR20.02 — the dual-source comparison's layout, and only that. Semantic MUD/FOD tokens only: no hex
   literals, no --color-palette-* primitives, no inline styles (MIS-018 lint / ADR-016 D5).

   The panel had no stylesheet at all: two stacked divs, each an unstyled <dl>, so every label sat above its
   own indented value and the two halves this component exists to compare were nowhere near each other. */

.rsud-comparison[b-cfr2137psd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-16);
    margin-top: var(--spacing-24);
}

/* Side by side only where both halves fit without their values wrapping every other word. */
@media (min-width: 1024px) {
    .rsud-comparison[b-cfr2137psd] {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-24);
    }
}

/* MW-559 (UI-SPEC §5, prototype record page) — each half is a card: radius 12, padding 24, resting --shadow-100,
   as the records on /water-quality (MW-558). */
.rsud-comparison-local[b-cfr2137psd],
.rsud-comparison-register[b-cfr2137psd] {
    padding: var(--spacing-16);
    border-radius: var(--border-radius-12);
    background: var(--color-background-base-default);
    box-shadow: var(--shadow-100);
}

@media (min-width: 768px) {
    .rsud-comparison-local[b-cfr2137psd],
    .rsud-comparison-register[b-cfr2137psd] {
        padding: var(--spacing-24);
    }
}

/* The register half is not editable, and its surface says so before the heading does. */
.rsud-comparison-register[b-cfr2137psd] {
    background: var(--color-background-base-secondary);
}

.rsud-comparison-local > h2[b-cfr2137psd],
.rsud-comparison-register > h2[b-cfr2137psd] {
    margin: 0 0 var(--spacing-12);
}

.rsud-comparison__facts[b-cfr2137psd] {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--spacing-4) var(--spacing-16);
    margin: 0;
}

.rsud-comparison__facts dt[b-cfr2137psd] {
    color: var(--color-text-base-secondary);
    padding: var(--spacing-4) 0;
}

.rsud-comparison__facts dd[b-cfr2137psd] {
    margin: 0;
    padding: var(--spacing-4) 0;
    /* An IDNO or an RSUD address has no spaces to break at. */
    overflow-wrap: anywhere;
}

/* Narrow enough that a two-column grid would leave one word per line. */
@media (max-width: 520px) {
    .rsud-comparison__facts[b-cfr2137psd] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rsud-comparison__facts dd[b-cfr2137psd] {
        padding: 0 0 var(--spacing-8);
    }
}

/* The pair an admin is asked to review: a tinted row with a warning rule down its side, not a bare word
   sitting where every other word sits. Both halves of the pair carry it, so the eye pairs them across the
   two cards. */
.rsud-comparison__facts .rsud-comparison-diff[b-cfr2137psd] {
    margin-inline-start: calc(var(--spacing-8) * -1);
    padding-inline-start: var(--spacing-8);
    border-inline-start: 2px solid var(--color-border-warning-default);
    background: var(--color-background-warning-secondary);
    border-radius: var(--border-radius-4);
}

.rsud-comparison__source[b-cfr2137psd],
.rsud-comparison__note[b-cfr2137psd] {
    margin: 0 0 var(--spacing-12);
    color: var(--color-text-base-secondary);
}

/* Q&A §10 — a value the register moved since the last review carries its previous value underneath, so the
   comparison the conflict banner asks for is on the page rather than in the admin's memory. */
.rsud-comparison__previous[b-cfr2137psd] {
    display: block;
    color: var(--color-text-base-secondary);
}

/* The remit is free prose an admin may have typed on several lines. */
.rsud-comparison__prose[b-cfr2137psd] {
    white-space: pre-line;
}
/* /Pages/PresentationTemplates/PresentationTemplateEditPage.razor.rz.scp.css */
/* MIS-042/043 — presentation-template editor: page-specific structure only. The form's overall
   vertical rhythm + header come from the shared `.mud-page__*` main-page pattern; these rules space
   the editor's bespoke sub-sections (token picker, preview, report-type + logo fieldsets). The escaped
   <pre> preview blocks (.presentation-template-block) are styled globally in app.css because the detail
   page shares them. MUD tokens only. */

/* Each editor sub-section stacks its heading + content. */
.presentation-template-tokens[b-fq4mbxdxn4],
.presentation-template-preview[b-fq4mbxdxn4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

/* Token picker (MW-545): a description list — each token button beside what it stands for. Two columns
   from tablet width up; one stacked column on a phone (NFR15, 480px). */
.presentation-template-token-list[b-fq4mbxdxn4] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4) var(--spacing-16);
    align-items: center;
    margin: 0;
}

.presentation-template-token-list dd[b-fq4mbxdxn4] {
    margin: 0 0 var(--spacing-8);
    color: var(--color-text-base-secondary);
}

@media (min-width: 768px) {
    .presentation-template-token-list[b-fq4mbxdxn4] {
        grid-template-columns: max-content 1fr;
    }

    .presentation-template-token-list dd[b-fq4mbxdxn4] {
        margin: 0;
    }
}

/* Report-type + logo fieldsets: drop the UA fieldset chrome, stack rows with a gap.
   min-width:0 overrides the fieldset default (min-content) so it can shrink in the column. */
.presentation-template-report-types[b-fq4mbxdxn4],
.presentation-template-logo[b-fq4mbxdxn4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.presentation-template-report-types legend[b-fq4mbxdxn4],
.presentation-template-logo legend[b-fq4mbxdxn4] {
    padding: 0;
    margin-bottom: var(--spacing-4);
    color: var(--color-text-base-secondary);
}

/* Logo rows are rendered conditionally — collapse the empty ones so they add no phantom gap. */
.presentation-template-logo-body:empty[b-fq4mbxdxn4] {
    display: none;
}

/* Logo preview never overflows its column. */
.presentation-template-logo-thumb[b-fq4mbxdxn4] {
    display: block;
    max-width: 100%;
    height: auto;
}
/* /Pages/Reporting/AnalystReportViewPage.razor.rz.scp.css */
/* MW-479/MIS-112 — the Analyst's read-only report viewer. Component-scoped so it cannot leak into the
   reviewer's workspace, whose layout it deliberately resembles without sharing. Semantic MUD tokens only
   (SemanticTokenLintTests): no hex, no --color-palette-*. */

.mud-page__body[b-ham3ow67c1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    max-width: 60rem;
}

/* FR12.03 stated where the reader looks first. Quiet rather than alarming: it describes a standing, not a
   refusal — the reader is where they are supposed to be.

   A NOTE, not a pill. It was a pill until the running app was measured: the sentence is 75 characters, so
   `fit-content` resolved to the full column and the rounded chip rendered as a stretched grey band. A left
   accent reads as a standing note at any width, which is what a whole sentence needs. bUnit reads markup, so
   only the live DOM could show this. */
.report-view__read-only[b-ham3ow67c1] {
    margin: var(--spacing-8) 0 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-left: var(--border-width-3) solid var(--color-border-brand-default);
    border-radius: 0 var(--border-radius-6) var(--border-radius-6) 0;
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-secondary);
}

.report-view__summary[b-ham3ow67c1],
.report-view__search[b-ham3ow67c1],
.report-view__contents[b-ham3ow67c1],
.report-view__annex[b-ham3ow67c1] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-20) var(--spacing-24);
}

.report-view__summary[b-ham3ow67c1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-16);
}

.report-state-card__facts[b-ham3ow67c1] {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: var(--spacing-8) var(--spacing-24);
    margin: 0;
    width: 100%;
}

.report-state-card__facts > dt[b-ham3ow67c1] {
    color: var(--color-text-base-secondary);
    font-weight: 600;
    margin: 0;
}

.report-state-card__facts > dd[b-ham3ow67c1] {
    margin: 0;
}

.report-state-card__state[b-ham3ow67c1] {
    /* `justify-self`, because `display: inline-block` cannot work here: a grid item is blockified, so the
       badge stretched across the whole fact column instead of hugging its one word. The inline-block stays
       for the contexts where this class is NOT a grid item. */
    justify-self: start;
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-12);
    border-radius: var(--border-radius-full);
    font-weight: 600;
    background: var(--color-background-brand-secondary);
    color: var(--color-text-brand-default);
}

.report-state-card__state[data-state="Rejected"][b-ham3ow67c1] {
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}

/* The AA success TEXT token, not the icon token: the icon green on this background measured about 3.3:1,
   under WCAG 1.4.3's 4.5:1 for 16px text (MW-479 E2E 2026-10-13). See local-tokens.css. */
.report-state-card__state[data-state="Validated"][b-ham3ow67c1],
.report-state-card__state[data-state="Approved"][b-ham3ow67c1],
.report-state-card__state[data-state="Published"][b-ham3ow67c1] {
    background: var(--numeric-input-success-background-filled);
    color: var(--color-text-success-default-aa);
}

/* FR12.05: the "you are on an older version" line is a standing note, styled as the read-only one above. */
.report-view__notice[b-ham3ow67c1] {
    margin: 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-left: var(--border-width-3) solid var(--color-border-brand-default);
    border-radius: 0 var(--border-radius-6) var(--border-radius-6) 0;
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-default);
}

/* The version list as a list of this page's own entries rather than browser bullets with default blue links. */
.report-view__versions > ul[b-ham3ow67c1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin: 0 0 var(--spacing-12);
    padding: 0;
    list-style: none;
}

.report-view__versions a:not(.mud-button)[b-ham3ow67c1] {
    color: var(--color-text-brand-default);
}

.report-view__versions [aria-current="true"][b-ham3ow67c1] {
    font-weight: 600;
}

.report-view__search[b-ham3ow67c1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

/* ::deep, because the field is MudInputSearch's markup now: scoped CSS stamps the page's own elements only,
   so a plain descendant selector would stop matching the moment the bare <input> became a component. The
   whole control is capped rather than the inner input — capping the input inside a full-width bordered
   wrapper leaves the border running to the edge with the field floating short of it. */
.report-view__search[b-ham3ow67c1]  .mud-input-search__form {
    width: 100%;
    max-width: 28rem;
}

/* FR12.02 section navigation. Sticky so a reader deep in a long annex can still jump — which is the whole
   point of a contents list in a document that scrolls as one piece. */
.report-view__contents[b-ham3ow67c1] {
    position: sticky;
    top: var(--spacing-8);
    z-index: 1;
    /* The element carries .annex-nav too, so it IS the flex row — the entries centre in the card instead of
       hugging the left edge with the rest of the width empty. */
    justify-content: center;
}

/* flex-basis, because the heading is a flex item of that same row: without it "Cuprins" sat BESIDE the
   first entry rather than above the list it titles. */
.report-view__contents > h2[b-ham3ow67c1] {
    flex-basis: 100%;
    margin: 0 0 var(--spacing-4);
    text-align: center;
}

.annex-nav[b-ham3ow67c1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.annex-nav-item[b-ham3ow67c1] {
    padding: var(--spacing-8) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-8);
    color: var(--color-text-base-default);
    text-decoration: none;
    white-space: nowrap;
}

/* The fragment jump lands the section's heading under the sticky contents list rather than behind it.
   position/z-index give the section its OWN stacking context: an annex table has sticky parts of its own
   (thead z-index 2, .annex-rowlabel z-index 1) which, sharing the page's context, painted straight through
   the sticky contents list above them — the row codes and headers appeared on top of the nav. Contained
   here rather than by out-bidding them from the nav, so a future z-index inside the table cannot reopen it. */
.report-view__annex[b-ham3ow67c1] {
    scroll-margin-top: var(--spacing-64);
    position: relative;
    z-index: 0;
}

.report-state-card__error[b-ham3ow67c1] {
    margin: 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}
/* /Pages/Reporting/DataSearchPage.razor.rz.scp.css */
/* MW-547 (V3b D12): the context band shipped as markup with no stylesheet — `data-search-context` and
   `data-search-context-chip` had no rule anywhere, so the chips rendered as stacked plain text each ending in a
   UA-default grey button (2px outset border, Arial, 24x21 px). They are MUD-style pills now: the value in words,
   and a remove control that is an icon button. Semantic MUD tokens only (SemanticTokenLintTests). */
/* The band also wears `mud-page__body`, whose global rule is a COLUMN: without a direction of its own each chip
   stretched into a full-width bar, three of them stacked (live re-drive 2026-10-19). A row of pills, set apart from
   the filter band below it. */
.data-search-context[b-c6tv3ivg3l] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
    margin-block-end: var(--spacing-16);
}

.data-search-context-chip[b-c6tv3ivg3l] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    min-block-size: var(--spacing-32);
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-12) var(--spacing-4);
    border-radius: var(--border-radius-full);
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-default);
    font: inherit;
    font-weight: var(--font-weight-medium);
}

.data-search-context-chip__label[b-c6tv3ivg3l] {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

/* The remove control keeps a 24 px target inside the pill (WCAG 2.5.8) and the MUD focus ring. */
.data-search-context-chip__remove[b-c6tv3ivg3l] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--spacing-24);
    block-size: var(--spacing-24);
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.data-search-context-chip__remove:hover[b-c6tv3ivg3l] {
    background: var(--color-background-base-secondary-hover);
}

.data-search-context-chip__remove:focus-visible[b-c6tv3ivg3l] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 1px;
}

/* The year pair: one bound, two numbers side by side. The design system's input fills its container, and as a
   direct child of the wrapping toolbar each year took a full line; here each is a number's width. */
.data-search-years[b-c6tv3ivg3l] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-16);
}

.data-search-years[b-c6tv3ivg3l]  .fod-input {
    inline-size: 10rem;
}
/* /Pages/Reporting/DraftEditorPage.razor.rz.scp.css */
/* Visual pass on the draft editor — component-scoped so it cannot leak into other screens.
   Semantic MUD tokens only (SemanticTokenLintTests): no hex, no --color-palette-*.
   Card treatment matches ReportReviewWorkspacePage.razor.css, the other sectioned Reporting screen. */

.mud-page__body[b-jfrbf48vx7] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

/* UI-SPEC 3.3: entry column + validation work list. col-8 + col-4 is the only asymmetric split MUD
   documents (foundations/breakpoints). The split starts at 1600, not xl: with the 368 px rail, the 8fr
   column left the annex grid about 489 px at 1280 and 595 px at 1440, while Anexa 2.2 needs 688 px to fit
   without sideways scroll (MW-595 F11); at 1600 it gets about 723 px. Below 1600 the panel stacks under
   the grid rather than squeezing it. Media queries take px literals - custom properties are not allowed
   in @media. */
.draft-editor__split[b-jfrbf48vx7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
    align-items: start;
}

/* min-width: 0 on the entry column: without it the annex grid's own horizontal scroll box refuses to
   shrink below its content width and blows the whole grid track out. */
.draft-editor__entry[b-jfrbf48vx7] {
    min-width: 0;
}

@media (min-width: 1600px) {
    .draft-editor__split[b-jfrbf48vx7] {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    }

    /* Sticky beside a page-length grid, under the shell's own sticky action row (72 high, ADR-016 D3):
       the work list is only useful while the reporter is IN the cells it points at. */
    .draft-editor__aside[b-jfrbf48vx7] {
        position: sticky;
        top: calc(72px + var(--spacing-16));
        max-height: calc(100vh - 72px - var(--spacing-32));
        overflow-y: auto;
    }
}

.draft-editor-conflict[b-jfrbf48vx7],
.draft-editor-classification[b-jfrbf48vx7],
.draft-editor-annexes[b-jfrbf48vx7],
.draft-editor-annex[b-jfrbf48vx7] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-20) var(--spacing-24);
}

.draft-editor-section__title[b-jfrbf48vx7] {
    margin: 0 0 var(--spacing-16);
}

/* Page-level slot, kept out of the cards so the ref survives every @if (see the .razor comment). Renders
   nothing while idle, so it must not reserve vertical space of its own. */
.draft-editor__status[b-jfrbf48vx7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8) var(--spacing-16);
    align-items: center;
}

/* ---- Validation ---- */

.draft-editor-validation-report-link[b-jfrbf48vx7] {
    color: var(--color-text-brand-default);
}

.draft-editor-validate-result[b-jfrbf48vx7] {
    margin: var(--spacing-16) 0 0;
    display: block;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}

.draft-editor-validate-result[data-valid="true"][b-jfrbf48vx7] {
    background: var(--numeric-input-success-background-filled);
    color: var(--file-item-icon-color-success);
}

/* ---- Conflicts ---- */

.draft-editor-conflict[b-jfrbf48vx7] {
    border-color: var(--color-border-danger-default);
    background: var(--color-background-danger-secondary);
}

/* Grid, not flex: with several conflicts open the mine/theirs/actions triples must line up column-wise
   down the list — under flex each row broke at a different point depending on its own value lengths. */
.draft-editor-conflict-cell[b-jfrbf48vx7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-8) var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-base-default);
}

.draft-editor-conflict-cell + .draft-editor-conflict-cell[b-jfrbf48vx7] {
    margin-top: var(--spacing-12);
}

.draft-editor-conflict-mine[b-jfrbf48vx7],
.draft-editor-conflict-theirs[b-jfrbf48vx7] {
    font-weight: 600;
}

.draft-editor-conflict-theirs[b-jfrbf48vx7] {
    color: var(--color-text-danger-default);
}

/* Last grid column, so the two values read together before the choice between them. */
.draft-editor-conflict__actions[b-jfrbf48vx7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    justify-content: flex-end;
}

/* ---- Classification ---- */

.draft-editor-classification[b-jfrbf48vx7] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.draft-classification__fields[b-jfrbf48vx7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--spacing-16) var(--spacing-24);
    align-items: end;
}

.draft-classification__new-tag[b-jfrbf48vx7],
.draft-classification__new-category[b-jfrbf48vx7] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-8);
}

.draft-classification-tags[b-jfrbf48vx7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.draft-classification-error[b-jfrbf48vx7] {
    margin: 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}

/* ---- Annex tabs ---- */

/* ADR-016 D7: the tabs row sticks under the shell's sticky action row (72 high). MUD has no sticky
   variant for `tabs` and one is NOT added here - this is consumer-level positioning on the wrapper,
   the component itself is untouched. */
.draft-editor-annexes[b-jfrbf48vx7] {
    position: sticky;
    top: 72px;
    z-index: 1;
    background: var(--color-background-base-default);
    margin-bottom: var(--spacing-16);
}

.annex-tab[b-jfrbf48vx7] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
}

/* The tab label owns the annex's name; completeness is a separate badge so the colour does not have to
   be carried by the whole tab, where it would compete with the selected state's own brand colouring. */
.annex-tab__badge[b-jfrbf48vx7] {
    padding: var(--spacing-2) var(--spacing-8);
    /* Transparent by default so the dashed "not checked" variant below does not render 2px taller than
       every other badge in the same strip. */
    border: var(--border-width-1) solid transparent;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-12);
    font-weight: 600;
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-secondary);
}

.annex-tab[data-completeness="filled"] .annex-tab__badge[b-jfrbf48vx7] {
    background: var(--numeric-input-success-background-filled);
    color: var(--file-item-icon-color-success);
}

.annex-tab[data-completeness="mandatory-missing"] .annex-tab__badge[b-jfrbf48vx7] {
    background: var(--color-background-warning-secondary);
    color: var(--color-text-warning-default);
}

.annex-tab[data-completeness="has-errors"] .annex-tab__badge[b-jfrbf48vx7] {
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}

.annex-tab[data-completeness="not-checked"] .annex-tab__badge[b-jfrbf48vx7] {
    border: var(--border-width-1) dashed var(--color-border-base-secondary);
}

/* ---- Annex grids ---- */

/* Each grid scrolls sideways inside its own .annex-scroll box. clip, not auto, keeps this wrapper from becoming
   a second scroll container (MW-595 AC2: the page scrolls the grid and its column header follows the page)
   while still keeping the page body out of horizontal scroll. */
.draft-editor-annex__scroll[b-jfrbf48vx7] {
    overflow-x: clip;
}

@media (max-width: 48rem) {
    .draft-editor-conflict-cell[b-jfrbf48vx7] {
        grid-template-columns: 1fr;
    }

    .draft-editor-conflict__actions[b-jfrbf48vx7] {
        justify-content: flex-start;
    }

    .draft-classification__new-tag[b-jfrbf48vx7],
    .draft-classification__new-category[b-jfrbf48vx7] {
        flex-wrap: wrap;
    }
}

/* The report has left Draft: its data is frozen for every caller, so the form says so before the operator
   spends work on a save the server will refuse. */
.draft-editor-locked[b-jfrbf48vx7] {
    margin: 0 0 var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--border-radius-6);
    border-inline-start: var(--border-width-3) solid var(--color-border-warning-default);
    background: var(--color-background-warning-secondary);
    color: var(--color-text-warning-default);
}
/* /Pages/Reporting/MyDraftsPage.razor.rz.scp.css */
.drafts-row-tags[b-y4l58nl1rq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.drafts-row-tag[b-y4l58nl1rq] {
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--border-radius-full);
    background: var(--color-background-base-secondary);
    font: inherit;
}

/* FR07.03 (R5-08): one filled cell per line in the value column. */
.drafts-row-indicator[b-y4l58nl1rq] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* UI-SPEC pinned viewports (runtime E2E 2026-10-01 S3-6): at 1280 px the table measured 880 px in an 817 px
   column, and the Actions column sat clipped inside the scroll viewport, where a click landed on nothing. Two
   things widened it: no-wrap headers, and the 24 px cell gutter on every column. Headers may wrap between
   words and the gutter drops to 16 px on this register only; MudTable's own spec is untouched elsewhere. */
.drafts-table[b-y4l58nl1rq]  .mud-table__th {
    white-space: normal;
}

.drafts-table[b-y4l58nl1rq]  .mud-table__th,
.drafts-table[b-y4l58nl1rq]  .mud-table__td {
    padding-inline: var(--spacing-16);
}

/* PV 10.07 §3.12 — a report returned for correction carries a red mark. Colour is never the only cue:
   the cell also carries a visually hidden "returned" label (WCAG 1.4.1). */
.drafts-row-type[b-y4l58nl1rq] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
}

.drafts-returned-mark[b-y4l58nl1rq] {
    flex: none;
    inline-size: var(--spacing-4);
    block-size: 1.25em;
    border-radius: var(--border-radius-full);
    background: var(--color-background-danger-default);
}

.drafts-sr-only[b-y4l58nl1rq] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The DS listbox opens at its trigger's width and ellipsizes what does not fit, so a trigger sized to its
   current value cut "Toate categoriile" to "Toate cate…" beside the selected tick. A floor wide enough for the
   longest option keeps every label readable; the bar wraps at ≥768 (MisFilterBar) and stacks below it. */
.drafts-filters[b-y4l58nl1rq]  mud-select-input {
    min-inline-size: 13rem;
}
/* /Pages/Reporting/NotificationHistoryWidget.razor.rz.scp.css */
/* MW-467/MIS-100 AC8 — the notification history, rendered as the same bordered grid the annex preview
   above it uses (AnnexTableRenderer.razor.css). The card + table rules are restated here rather than
   reused: both those files are CSS-isolation scoped to their own component, and this widget's markup
   carries neither scope. Semantic MUD tokens only (SemanticTokenLintTests): no hex, no --color-palette-*. */

.report-state-card__notifications[b-7f8hqv9hrz] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-20) var(--spacing-24);
}

.report-state-card__notifications > h2[b-7f8hqv9hrz] {
    margin: 0 0 var(--spacing-16);
}

/* A long MNotify subject must scroll inside the card, not widen it — same job .annex-scroll does for a
   wide annex. No height cap: this table is short and nothing in it is sticky. */
.notification-scroll[b-7f8hqv9hrz] {
    overflow-x: auto;
    max-width: 100%;
}

.notification-table[b-7f8hqv9hrz] {
    border-collapse: collapse;
    width: 100%;
}

.notification-table th[b-7f8hqv9hrz],
.notification-table td[b-7f8hqv9hrz] {
    border: var(--border-width-0-5) solid var(--color-border-base-default);
    padding: 6px 12px;
    text-align: left;
    vertical-align: middle;
}

.notification-table thead th[b-7f8hqv9hrz] {
    background: var(--color-background-base-tertiary);
    color: var(--color-text-base-default);
}

/* The two narrow columns keep their value on one line; the subject is the one that may wrap. */
.report-state-card__notification-status[b-7f8hqv9hrz],
.report-state-card__notification-date[b-7f8hqv9hrz] {
    white-space: nowrap;
    color: var(--color-text-base-secondary);
}
/* /Pages/Reporting/ObligationsPage.razor.rz.scp.css */
/* UI-SPEC §3.2 — the obligations register's own layout, and only that: the filter row's geometry belongs
   to mis-filter-bar and the table's to Mud.Blazor. Semantic MUD tokens only: no hex literals, no
   --color-palette-* primitives, no inline styles (MIS-018 lint / ADR-016 D5). */

/* The chip set is one control in the filter row, so it wraps as a unit rather than letting its chips
   scatter across the row's own wrapping. */
.obligations-state-filter[b-pnm55111vk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
}

.obligations-more[b-pnm55111vk] {
    margin: var(--spacing-16) 0 0;
    color: var(--color-text-base-secondary);
}

/* UI-SPEC pinned viewports (runtime E2E 2026-10-01 S3-6): at 1280 px the table measured 880 px in an 817 px
   column, and the Actions column sat clipped inside the scroll viewport, where a click landed on nothing. Two
   things widened it: no-wrap headers, and the 24 px cell gutter on every column. Headers may wrap between
   words and the gutter drops to 16 px on this register only; MudTable's own spec is untouched elsewhere. */
.obligations-table[b-pnm55111vk]  .mud-table__th {
    white-space: normal;
}

.obligations-table[b-pnm55111vk]  .mud-table__th,
.obligations-table[b-pnm55111vk]  .mud-table__td {
    padding-inline: var(--spacing-16);
}
/* /Pages/Reporting/OperatorTransmissionsPage.razor.rz.scp.css */
/* MW-576 (FR18.02) — the register's table and footer shapes for one operator's transmissions. Its own rules: a page borrowing
   classes from another component's scoped CSS gets none of them. Semantic MUD tokens only (SemanticTokenLintTests). */
.operator-transmissions__subject[b-ptljkyc8by] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin: 0 0 var(--spacing-16);
}

.operator-transmissions__subject dt[b-ptljkyc8by] {
    color: var(--color-text-base-secondary);
}

.operator-transmissions__subject dd[b-ptljkyc8by] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-8);
    margin: 0;
}

.operator-transmissions__note[b-ptljkyc8by] {
    color: var(--color-text-base-secondary);
}

/* The register's 16 px cell gutter, so the five columns fit the content column at 1440. */
.operator-transmissions-table[b-ptljkyc8by]  .mud-table__th {
    white-space: normal;
}

.operator-transmissions-table[b-ptljkyc8by]  .mud-table__th,
.operator-transmissions-table[b-ptljkyc8by]  .mud-table__td {
    padding-inline: var(--spacing-16);
}

/* The version it carried, and under it whether it was a resubmission. */
.operator-transmissions-table__stack[b-ptljkyc8by] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
}

/* The row's two ways out on one line: open the report, or its history. */
.operator-transmissions__actions[b-ptljkyc8by] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-12);
    white-space: nowrap;
}

/* The list footer: range, export, pager — wrapping as a whole on a narrow column. */
.operator-transmissions__footer[b-ptljkyc8by] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding-block: var(--spacing-16);
}

.operator-transmissions__range[b-ptljkyc8by] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.operator-transmissions__export[b-ptljkyc8by] {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    flex-wrap: wrap;
}

.operator-transmissions__error[b-ptljkyc8by] {
    margin: var(--spacing-8) 0 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}
/* /Pages/Reporting/ReportAttachmentsPanel.razor.rz.scp.css */
/* MIS-121 — the statutory attachment checklist. Semantic MUD tokens only (SemanticTokenLintTests): no hex,
   no --color-palette-*. Card chrome matches the report-state-card sections it sits beside, so the pack reads
   as part of the report rather than as a separate widget. */

.report-attachments[b-9rvb2g9djm] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-20) var(--spacing-24);
}

.report-attachments__head[b-9rvb2g9djm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-12);
    margin-block-end: var(--spacing-16);
}

.report-attachments__head > h2[b-9rvb2g9djm] {
    margin: 0;
}

/* "3 of 4 filed" — the pack's progress at a glance, so a reader does not have to count the rows. */
.report-attachments__count[b-9rvb2g9djm] {
    color: var(--color-text-base-secondary);
    font-weight: 600;
    white-space: nowrap;
}

/* The verdict reads as a banner rather than a stray sentence: an accent edge in the colour of the state it
   reports, with the wording (not the colour) carrying the meaning. */
.report-attachments__status[b-9rvb2g9djm] {
    margin: 0 0 var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--border-radius-6);
    border-inline-start: var(--border-width-3) solid var(--color-border-warning-default);
    background: var(--color-background-warning-secondary);
    color: var(--color-text-warning-default);
}

.report-attachments__status[data-complete="true"][b-9rvb2g9djm] {
    border-inline-start-color: var(--file-item-border-success);
    background: var(--numeric-input-success-background-filled);
    color: var(--file-item-icon-color-success);
}

.report-attachments__list[b-9rvb2g9djm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Each slot is its own card, so the rows are separated by space rather than by a hairline — a stack of
       bordered blocks touching edge to edge reads as one broken table. */
    gap: var(--spacing-12);
}

.report-attachments__slot[b-9rvb2g9djm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12) var(--spacing-24);
    padding: var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-subtle);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-default);
}

.report-attachments__slot:hover[b-9rvb2g9djm] {
    background: var(--color-background-base-secondary);
}

/* An unfilled MANDATORY row is what stops the report being transmitted, so it is marked on the row itself —
   the reader should not have to pair a label with a chip halfway across the line to see it. The leading edge
   replaces that side's border rather than sitting inside it, so the card keeps one clean outline. */
.report-attachments__slot[data-filled="false"][b-9rvb2g9djm] {
    border-inline-start: var(--border-width-3) solid var(--color-border-warning-default);
    padding-inline-start: calc(var(--spacing-16) - var(--border-width-2));
}

.report-attachments__slot-text[b-9rvb2g9djm] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    /* Long statutory labels wrap inside their own column instead of pushing the action off the row. */
    flex: 1 1 22rem;
    min-width: 0;
}

.report-attachments__label[b-9rvb2g9djm] {
    color: var(--color-text-base-default);
    font-weight: 600;
    line-height: 1.35;
}

.report-attachments__tags[b-9rvb2g9djm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-6);
}

/* Chips state their meaning in TEXT — colour is a second, redundant signal only (WCAG 2.1 AA, 1.4.1). */
.report-attachments__chip[b-9rvb2g9djm] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-2) var(--spacing-8);
    border-radius: var(--border-radius-full);
    background: var(--color-background-base-tertiary);
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-12);
    font-weight: 600;
    line-height: 1.6;
}

.report-attachments__chip[b-9rvb2g9djm]::before {
    content: "";
    inline-size: var(--spacing-6);
    block-size: var(--spacing-6);
    border-radius: var(--border-radius-full);
    background: currentColor;
}

.report-attachments__chip--missing[b-9rvb2g9djm] {
    background: var(--color-background-warning-secondary);
    color: var(--color-text-warning-default);
}

.report-attachments__chip--present[b-9rvb2g9djm] {
    background: var(--numeric-input-success-background-filled);
    color: var(--file-item-icon-color-success);
}

.report-attachments__actions[b-9rvb2g9djm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
    margin-inline-start: auto;
}

/* The filed document, as a card that says what it is and how big it is. It stays a <button> because the
   bytes come through the SDK, not through an href (see the component's note). */
.report-attachments__file[b-9rvb2g9djm] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-8);
    max-inline-size: 18rem;
    padding: var(--spacing-6) var(--spacing-12);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-6);
    background: var(--color-background-base-default);
    color: var(--color-text-brand-default);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.report-attachments__file:hover:not(:disabled)[b-9rvb2g9djm] {
    background: var(--color-background-base-secondary);
    border-color: var(--color-border-brand-default);
}

.report-attachments__file-name[b-9rvb2g9djm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-attachments__file-size[b-9rvb2g9djm] {
    color: var(--color-text-base-tertiary);
    font-weight: 400;
    font-size: var(--font-size-12);
    white-space: nowrap;
}

.report-attachments__remove[b-9rvb2g9djm] {
    padding: var(--spacing-6) var(--spacing-12);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-6);
    background: transparent;
    color: var(--color-text-base-secondary);
    font: inherit;
    cursor: pointer;
}

.report-attachments__remove:hover:not(:disabled)[b-9rvb2g9djm] {
    border-color: var(--color-border-danger-default);
    color: var(--color-text-danger-default);
}

/* The upload control is the design system's own <mud-file-input variant="button"> and brings its own
   appearance. What stood here was a native <input type="file"> made transparent and stretched over a styled
   label — the browser paints its "Choose File / No file chosen" chrome in the BROWSER's UI language, which no
   page can style or translate, so the control had to be hidden and imitated. That imitation, its ::deep rule
   (needed because InputFile's <input> carries no scope attribute of this component) and the --busy class that
   stood in for an unreachable :has(input:disabled) are all gone with it. */

.report-attachments__subhead[b-9rvb2g9djm] {
    margin: var(--spacing-24) 0 var(--spacing-8);
    color: var(--color-text-base-secondary);
}

/* Earlier transmissions are context, not the working set — quieter, and never actionable. */
.report-attachments__list--past .report-attachments__label[b-9rvb2g9djm] {
    font-weight: 400;
    color: var(--color-text-base-secondary);
}

.report-attachments__error[b-9rvb2g9djm] {
    margin: var(--spacing-16) 0 0;
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--border-radius-6);
    border-inline-start: var(--border-width-3) solid var(--color-border-danger-default);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}
/* /Pages/Reporting/ReportHistoryPage.razor.rz.scp.css */
/* MW-562 · UI-SPEC §3.6 — the report history as a vertical timeline. Semantic MUD tokens only (SemanticTokenLintTests):
   no hex, no --color-palette-*. §5: cards radius 12, padding 24, resting drop-shadow-100. */

.report-history__field[b-8nacc72vtf] {
    flex: 0 1 220px;
    min-inline-size: 180px;
}

.report-history__error[b-8nacc72vtf] {
    margin: 0 0 var(--spacing-16);
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    color: var(--color-text-danger-default);
    background: var(--color-background-danger-secondary);
    border: var(--border-width-1) solid var(--color-background-danger-default);
}

.report-history__timeline[b-8nacc72vtf] {
    list-style: none;
    margin: 0;
    padding: var(--spacing-24);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    background: var(--color-background-base-default);
    box-shadow: var(--drop-shadow-100);
}

/* Dot on a rail: the rail is each item's left border, so it runs exactly as tall as the entries do and stops at
   the last one without a separate connector element. */
.report-history__item[b-8nacc72vtf] {
    position: relative;
    display: flex;
    gap: var(--spacing-16);
    padding: 0 0 var(--spacing-24) var(--spacing-8);
    margin-inline-start: var(--spacing-8);
    border-inline-start: var(--border-width-2) solid var(--color-border-base-default);
    scroll-margin-top: 96px;
}

.report-history__item:last-child[b-8nacc72vtf] {
    padding-bottom: 0;
    border-inline-start-color: transparent;
}

.report-history__dot[b-8nacc72vtf] {
    position: absolute;
    inset-inline-start: calc(-1 * var(--spacing-8) - var(--border-width-1));
    inset-block-start: var(--spacing-4);
    inline-size: var(--spacing-16);
    block-size: var(--spacing-16);
    border-radius: var(--border-radius-full);
    border: var(--border-width-2) solid var(--color-background-base-default);
    background: var(--color-background-brand-default);
}

.report-history__item[data-state="Rejected"] .report-history__dot[b-8nacc72vtf] {
    background: var(--color-background-danger-default);
}

.report-history__item[data-state="RevisionRequested"] .report-history__dot[b-8nacc72vtf],
.report-history__item[data-state="InReview"] .report-history__dot[b-8nacc72vtf] {
    background: var(--color-background-warning-default);
}

.report-history__item[data-state="Approved"] .report-history__dot[b-8nacc72vtf],
.report-history__item[data-state="Published"] .report-history__dot[b-8nacc72vtf] {
    background: var(--color-background-positive-default);
}

.report-history__entry[b-8nacc72vtf] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    min-inline-size: 0;
    padding-inline-start: var(--spacing-16);
}

.report-history__head[b-8nacc72vtf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8) var(--spacing-12);
}

.report-history__from[b-8nacc72vtf],
.report-history__time[b-8nacc72vtf] {
    color: var(--color-text-base-secondary);
}

.report-history__actor[b-8nacc72vtf],
.report-history__reason[b-8nacc72vtf] {
    margin: 0;
}

.report-history__reason[b-8nacc72vtf] {
    padding: var(--spacing-8) var(--spacing-12);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-secondary);
}

/* MW-468 AC4 — the deep-linked transition. */
.report-history__row--highlighted .report-history__entry[b-8nacc72vtf] {
    border-radius: var(--border-radius-8);
    background: var(--color-background-warning-secondary);
    box-shadow: inset 3px 0 0 var(--color-background-warning-default);
    padding: var(--spacing-8) var(--spacing-12) var(--spacing-8) var(--spacing-16);
}

.report-history__item:focus-visible[b-8nacc72vtf] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: var(--spacing-4);
}
/* /Pages/Reporting/ReportInsertedDataPanel.razor.rz.scp.css */
/* MW-582 — the report's inserted data sections. Semantic MUD tokens only (SemanticTokenLintTests); the card chrome and the
   focusable scroller follow ReportMaintenancePanel, which sits beside it on both screens. */

.report-inserted-data[b-ozouth89lb] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-20) var(--spacing-24);
    min-width: 0;
}

.report-inserted-data > h2[b-ozouth89lb] {
    margin: 0 0 var(--spacing-12);
}

.report-inserted-data > p[b-ozouth89lb] {
    margin: 0 0 var(--spacing-12);
}

.report-inserted-data__section + .report-inserted-data__section[b-ozouth89lb] {
    margin-top: var(--spacing-20);
}

.report-inserted-data__section > h3[b-ozouth89lb] {
    margin: 0 0 var(--spacing-8);
}

.report-inserted-data__section > p[b-ozouth89lb] {
    margin: 0 0 var(--spacing-8);
}

.report-inserted-data__scroller[b-ozouth89lb] {
    overflow-x: auto;
    border-radius: var(--border-radius-4);
}

.report-inserted-data__scroller:focus-visible[b-ozouth89lb] {
    outline: none;
    box-shadow: 0 0 0 calc(var(--border-width-1) * 2) var(--color-border-focus);
}

.report-inserted-data__scroller[b-ozouth89lb]  .mud-table__viewport {
    overflow: visible;
}

.report-inserted-data__scroller[b-ozouth89lb]  .mud-table__th,
.report-inserted-data__scroller[b-ozouth89lb]  .mud-table__td {
    padding-inline: var(--spacing-8);
}

.report-inserted-data__scroller[b-ozouth89lb]  .mud-table__th {
    white-space: normal;
}

.report-inserted-data__nowrap[b-ozouth89lb] {
    white-space: nowrap;
}
/* /Pages/Reporting/ReportMaintenancePanel.razor.rz.scp.css */
/* MW-581 — the report's maintenance section. Semantic MUD tokens only (SemanticTokenLintTests). Card chrome matches the
   attachments panel it sits beside on both screens, so the section reads as part of the report. */

.report-maintenance[b-zr652aa3pc] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-20) var(--spacing-24);
    min-width: 0;
}

.report-maintenance > h2[b-zr652aa3pc] {
    margin: 0 0 var(--spacing-12);
}

.report-maintenance > p[b-zr652aa3pc] {
    margin: 0 0 var(--spacing-12);
}

/* The scroll container is this focusable region, not MudTable's own viewport (which nothing could focus). */
.report-maintenance__scroller[b-zr652aa3pc] {
    overflow-x: auto;
    border-radius: var(--border-radius-4);
}

.report-maintenance__scroller:focus-visible[b-zr652aa3pc] {
    outline: none;
    box-shadow: 0 0 0 calc(var(--border-width-1) * 2) var(--color-border-focus);
}

.report-maintenance__scroller[b-zr652aa3pc]  .mud-table__viewport {
    overflow: visible;
}

/* Five columns in a col-8 card. At 24 px a side the nowrap headers alone outgrew the card at a 1280 px window and hid
   the consumers column behind the scroll (seen on the uc10 run), so here the headers wrap and the cells sit closer;
   narrower screens still scroll inside the region above. */
.report-maintenance__scroller[b-zr652aa3pc]  .mud-table__th,
.report-maintenance__scroller[b-zr652aa3pc]  .mud-table__td {
    padding-inline: var(--spacing-8);
}

.report-maintenance__scroller[b-zr652aa3pc]  .mud-table__th {
    white-space: normal;
}

.report-maintenance__nowrap[b-zr652aa3pc] {
    white-space: nowrap;
}
/* /Pages/Reporting/ReportReviewWorkspacePage.razor.rz.scp.css */
/* MW-564 · UI-SPEC §3.5 — the review workspace: col-8 report content (summary, annex tabs, all tables, documents) + col-4 sticky
   decision panel and internal notes. Component-scoped so it cannot leak into other screens. Semantic MUD tokens only
   (SemanticTokenLintTests): no hex, no --color-palette-*. §5: cards radius 12, padding 24, resting shadow-100; section
   H2 at heading-h4. */

/* ---- col-8 + col-4 ---- */
.review-workspace__layout[b-u4nsvk5pgs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
    align-items: start;
}

.review-workspace__main[b-u4nsvk5pgs],
.review-workspace__rail[b-u4nsvk5pgs] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    min-inline-size: 0;
}

/* The decision panel comes FIRST in the DOM. Below 1400 px (the 368 px sidebar leaves ~860 px; a col-8 of ~470 px
   broke the title page's values into one word per line, measured at 1280) the workspace is one column and the
   verdict is the first thing under the header — in reading and focus order too, not only on screen. From 1400 px the
   grid places it in the right-hand column; each column still reads top to bottom. */
@media (min-width: 1400px) {
    .review-workspace__layout[b-u4nsvk5pgs] {
        grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
    }

    .review-workspace__main[b-u4nsvk5pgs] {
        grid-column: 1;
        grid-row: 1;
    }

    .review-workspace__rail[b-u4nsvk5pgs] {
        grid-column: 2;
        grid-row: 1;
    }

    /* Sticky under the shell's 72 px action row (the draft editor's aside, ADR-016 D3/D7): the verdict stays in
       reach while the reviewer reads a long annex. Scrolls on its own when the notes outgrow the viewport. */
    .review-workspace__rail[b-u4nsvk5pgs] {
        position: sticky;
        top: calc(72px + var(--spacing-16));
        max-height: calc(100vh - 72px - var(--spacing-32));
        overflow-y: auto;
    }
}

.review-workspace__card[b-u4nsvk5pgs] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
    min-inline-size: 0;
}

.review-workspace__card > h2[b-u4nsvk5pgs] {
    margin: 0 0 var(--spacing-16);
}

/* The shared attachments block joins the card set: same surface, same section-heading size (UI-SPEC §5). */
.review-workspace__main[b-u4nsvk5pgs]  .report-attachments,
.review-workspace__main[b-u4nsvk5pgs]  .report-maintenance {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
}

.review-workspace__main[b-u4nsvk5pgs]  .report-attachments h2,
.review-workspace__main[b-u4nsvk5pgs]  .report-maintenance > h2 {
    margin: 0 0 var(--spacing-16);
    font-size: var(--font-size-20);
    line-height: var(--line-height-28);
}

/* ---- facts ---- */
.report-state-card__facts[b-u4nsvk5pgs] {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: var(--spacing-8) var(--spacing-24);
    margin: 0;
}

/* In the col-4 rail a label column leaves no room for the value: label above value. */
.report-state-card__facts--stacked[b-u4nsvk5pgs] {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
}

.report-state-card__facts--stacked > dd[b-u4nsvk5pgs] {
    margin-bottom: var(--spacing-8);
}

.report-state-card__facts > dt[b-u4nsvk5pgs] {
    color: var(--color-text-base-secondary);
    font-weight: 600;
    margin: 0;
}

.report-state-card__facts > dd[b-u4nsvk5pgs] {
    margin: 0;
}

/* ---- annex tabs ---- */
.review-workspace__tabs[b-u4nsvk5pgs] {
    margin-bottom: var(--spacing-16);
    overflow-x: auto;
}

/* Both properties are load-bearing: an annex wider than the card scrolls inside AnnexTableRenderer's own
   overflow-x box instead of scrolling the page (same remedy as the state card's preview). */
.review-workspace__panel[b-u4nsvk5pgs],
.review-workspace__indicators > div[b-u4nsvk5pgs] {
    width: 100%;
    min-width: 0;
}

.review-workspace__indicators > div + div[b-u4nsvk5pgs] {
    margin-top: var(--spacing-24);
}

/* ---- performance indicators (MW-575 · FR15.03) ---- */
/* Where the figures come from, one sentence per line, set apart from the table like the other muted notes. */
.review-workspace__kpis-intro[b-u4nsvk5pgs] {
    margin: 0 0 var(--spacing-16);
    color: var(--color-text-base-secondary);
}

.review-workspace__kpis-intro > p[b-u4nsvk5pgs] {
    margin: 0;
}

.review-workspace__kpis-intro > p + p[b-u4nsvk5pgs] {
    margin-top: var(--spacing-4);
}

/* Names and their legal basis left, figures right-aligned in tabular numerals, the verdict tag last. A narrow col-8
   scrolls the table inside the card rather than the page. */
.review-workspace__kpi-scroll[b-u4nsvk5pgs] {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.review-workspace__kpi-table[b-u4nsvk5pgs] {
    width: 100%;
    border-collapse: collapse;
}

.review-workspace__kpi-table th[b-u4nsvk5pgs],
.review-workspace__kpi-table td[b-u4nsvk5pgs] {
    padding: var(--spacing-12) var(--spacing-16);
    border-bottom: var(--border-width-1) solid var(--color-border-base-default);
    text-align: start;
    vertical-align: top;
}

.review-workspace__kpi-table thead th[b-u4nsvk5pgs] {
    color: var(--color-text-base-secondary);
    font-weight: var(--font-weight-semibold);
}

.review-workspace__kpi-table tbody th[b-u4nsvk5pgs] {
    font-weight: var(--font-weight-regular);
}

.review-workspace__kpi-table .review-workspace__kpi-figure[b-u4nsvk5pgs] {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* "≤ 48 h" and "Fără prag legal" read as one unit; wrapped, the second broke into a word per line at 1440. */
.review-workspace__kpi-table .review-workspace__kpi-bound[b-u4nsvk5pgs] {
    white-space: nowrap;
}

.review-workspace__kpi-name[b-u4nsvk5pgs] {
    display: block;
    color: var(--color-text-base-default);
}

.review-workspace__kpi-basis[b-u4nsvk5pgs],
.review-workspace__kpi-statement[b-u4nsvk5pgs] {
    color: var(--color-text-base-secondary);
}

.review-workspace__kpi-basis[b-u4nsvk5pgs] {
    display: block;
    margin-top: var(--spacing-2);
}

/* ---- decision panel ---- */
.review-workspace__actions[b-u4nsvk5pgs] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-8);
    margin-top: var(--spacing-16);
    padding-top: var(--spacing-16);
    border-top: var(--border-width-1) solid var(--color-border-base-default);
}

/* The four-eyes notice (UIS §3.5, G18) is a DS banner, built for one line across a page: its message part is
   `white-space: nowrap`. In the col-4 panel that clipped the sentence and gave the panel a horizontal scrollbar
   (seen on a real In-review report, MW-564), so the message wraps here. */
.review-workspace__notice[b-u4nsvk5pgs]  mud-banner::part(message) {
    white-space: normal;
}

.report-state-card__reason[b-u4nsvk5pgs] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    width: 100%;
    padding: var(--spacing-16);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-secondary);
}

.report-state-card__reason textarea[b-u4nsvk5pgs],
.report-state-card__reason select[b-u4nsvk5pgs] {
    width: 100%;
}

.report-state-card__reason textarea[b-u4nsvk5pgs] {
    min-height: 6rem;
    resize: vertical;
}

.review-workspace__reason-actions[b-u4nsvk5pgs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.report-state-card__error[b-u4nsvk5pgs] {
    margin: 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}

/* ---- internal notes ---- */
.review-workspace__muted[b-u4nsvk5pgs] {
    margin: 0 0 var(--spacing-16);
    color: var(--color-text-base-secondary);
}

.review-workspace__notes-list[b-u4nsvk5pgs] {
    list-style: none;
    margin: 0 0 var(--spacing-20);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.review-workspace__notes-list > li[b-u4nsvk5pgs] {
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-base-secondary);
}

.review-workspace__notes-list > li > p[b-u4nsvk5pgs] {
    margin: var(--spacing-6) 0 0;
}

.review-workspace__note-author[b-u4nsvk5pgs] {
    font-weight: 600;
    color: var(--color-text-base-default);
}

.review-workspace__note-time[b-u4nsvk5pgs] {
    color: var(--color-text-base-secondary);
    margin-left: var(--spacing-8);
    font-size: var(--font-size-14);
}

.review-workspace__add-note[b-u4nsvk5pgs] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    align-items: flex-start;
}

.review-workspace__add-note label[b-u4nsvk5pgs] {
    font-weight: 600;
}

.review-workspace__add-note textarea[b-u4nsvk5pgs] {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
}

@media (max-width: 40rem) {
    .report-state-card__facts[b-u4nsvk5pgs] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .report-state-card__facts > dd[b-u4nsvk5pgs] {
        margin-bottom: var(--spacing-8);
    }
}
/* /Pages/Reporting/ReportsAwaitingReviewPage.razor.rz.scp.css */
/* The row's hand-off to the state card (MW-460): the report's name is the link, so it wears the brand text colour
   and the MUD focus ring rather than the template's default anchor blue — the Compliance drill-down's rule.
   Semantic MUD tokens only (SemanticTokenLintTests). */
.review-queue__open[b-b8yluotzcn] {
    color: var(--color-text-brand-default);
    font-weight: var(--font-weight-medium);
}

.review-queue__open:focus-visible[b-b8yluotzcn] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}
/* /Pages/Reporting/ReportStateCardPage.razor.rz.scp.css */
/* MW-561 · UI-SPEC §3.4 (UI-04) — the report state page: stepper, then col-8 + col-4 cards. Semantic MUD tokens only
   (SemanticTokenLintTests): no hex, no --color-palette-*. §5: cards radius 12, padding 24, resting shadow-100;
   section H2 at heading-h4. */

/* ---- lifecycle stepper ---- */
.report-stepper[b-dv15kghh5v] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-8);
    list-style: none;
    margin: 0 0 var(--spacing-24);
    padding: var(--spacing-16) var(--spacing-24);
    border-radius: var(--border-radius-12);
    background: var(--color-background-base-secondary);
    overflow-x: auto;
}

.report-stepper__step[b-dv15kghh5v] {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--spacing-8);
    min-inline-size: 7.5rem;
    color: var(--color-text-base-secondary);
}

/* The connector after every step but the last. */
.report-stepper__step:not(:last-child)[b-dv15kghh5v]::after {
    content: "";
    flex: 1 1 auto;
    min-inline-size: var(--spacing-16);
    block-size: var(--border-width-2);
    background: var(--color-border-base-default);
}

.report-stepper__step--done:not(:last-child)[b-dv15kghh5v]::after {
    background: var(--color-background-brand-default);
}

.report-stepper__dot[b-dv15kghh5v] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--spacing-32);
    block-size: var(--spacing-32);
    border-radius: var(--border-radius-full);
    border: var(--border-width-2) solid var(--color-border-base-default);
    background: var(--color-background-base-default);
    font-weight: 600;
}

.report-stepper__label[b-dv15kghh5v] {
    font-weight: 600;
    white-space: nowrap;
}

.report-stepper__step--done .report-stepper__dot[b-dv15kghh5v] {
    border-color: var(--color-background-brand-default);
    background: var(--color-background-brand-default);
    color: var(--color-text-base-inverse-default);
}

.report-stepper__step--done[b-dv15kghh5v],
.report-stepper__step--current[b-dv15kghh5v] {
    color: var(--color-text-base-default);
}

.report-stepper__step--current .report-stepper__dot[b-dv15kghh5v] {
    border-color: var(--color-background-brand-default);
    color: var(--color-text-brand-default);
}

.report-stepper__step--branch[b-dv15kghh5v] {
    color: var(--color-text-danger-default);
}

.report-stepper__step--branch .report-stepper__dot[b-dv15kghh5v] {
    border-color: var(--color-background-danger-default);
    color: var(--color-text-danger-default);
}

/* ---- col-8 + col-4 ---- */
.report-state-card__layout[b-dv15kghh5v] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
    align-items: start;
}

.report-state-card__main[b-dv15kghh5v],
.report-state-card__rail[b-dv15kghh5v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    min-inline-size: 0;
}

/* The full sidebar's breakpoint (TemplatesPage.razor.css): below it the content column is too narrow for two. */
@media (min-width: 1248px) {
    .report-state-card__layout[b-dv15kghh5v] {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    }
}

.report-state-card__section[b-dv15kghh5v] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
}

.report-state-card__section > h2[b-dv15kghh5v] {
    margin: 0 0 var(--spacing-16);
}

/* The two hosted blocks (attachments, notifications) are shared with the review workspace, which keeps its own
   H2 size; on this page they join the card set: same surface, same section-heading size (UI-SPEC §5). */
.report-state-card__layout[b-dv15kghh5v]  .report-attachments,
.report-state-card__layout[b-dv15kghh5v]  .report-maintenance,
.report-state-card__layout[b-dv15kghh5v]  .report-state-card__notifications {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
}

.report-state-card__layout[b-dv15kghh5v]  .report-attachments h2,
.report-state-card__layout[b-dv15kghh5v]  .report-maintenance > h2,
.report-state-card__layout[b-dv15kghh5v]  .report-state-card__notifications > h2 {
    margin: 0 0 var(--spacing-16);
    font-size: var(--font-size-20);
    line-height: var(--line-height-28);
}

.report-state-card__facts[b-dv15kghh5v] {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: var(--spacing-8) var(--spacing-24);
    margin: 0;
}

/* In the col-4 rail a label column leaves no room for the value: label above value. */
.report-state-card__facts--stacked[b-dv15kghh5v] {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
}

.report-state-card__facts--stacked > dd[b-dv15kghh5v] {
    margin-bottom: var(--spacing-8);
}

.report-state-card__facts > dt[b-dv15kghh5v] {
    color: var(--color-text-base-secondary);
    font-weight: 600;
    margin: 0;
}

.report-state-card__facts > dd[b-dv15kghh5v] {
    margin: 0;
}

.report-state-card__last-transition[b-dv15kghh5v],
.report-state-card__actions[b-dv15kghh5v],
.report-state-card__compile[b-dv15kghh5v],
.report-state-card__signature[b-dv15kghh5v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    align-items: flex-start;
}

.report-state-card__last-transition > .report-state-card__facts[b-dv15kghh5v] {
    width: 100%;
}

.report-state-card__revision-list[b-dv15kghh5v] {
    margin: 0;
    padding-inline-start: var(--spacing-20);
}

.report-state-card__action-row[b-dv15kghh5v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.report-state-card__notice[b-dv15kghh5v] {
    margin: 0;
}

.report-state-card__reason[b-dv15kghh5v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    width: 100%;
    padding: var(--spacing-16);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-secondary);
}

.report-state-card__reason textarea[b-dv15kghh5v] {
    width: 100%;
    min-height: 6rem;
    resize: vertical;
}

.report-state-card__resubmission[b-dv15kghh5v] {
    width: 100%;
    border-left: var(--border-width-3) solid var(--color-background-danger-default);
    border-radius: 0 var(--border-radius-6) var(--border-radius-6) 0;
    /* The accent bar had no padding behind it, so the instruction text sat against the red line. */
    padding: var(--spacing-12) var(--spacing-16);
    background: var(--color-background-danger-secondary);
}

.report-state-card__resubmission > p[b-dv15kghh5v] {
    margin: 0;
}

.report-state-card__error[b-dv15kghh5v] {
    margin: 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}

.report-state-card__muted[b-dv15kghh5v] {
    color: var(--color-text-base-secondary);
}

.report-state-card__versions[b-dv15kghh5v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    width: 100%;
}

.report-state-card__versions > li[b-dv15kghh5v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8) var(--spacing-12);
    padding: var(--spacing-8) var(--spacing-12);
    border-radius: var(--border-radius-6);
    background: var(--color-background-base-secondary);
}

.report-state-card__copy[b-dv15kghh5v] {
    padding: var(--spacing-2) var(--spacing-8);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-6);
    background: var(--color-background-base-default);
    font: inherit;
    font-size: var(--font-size-14);
    cursor: pointer;
}

.report-state-card__copy:focus-visible[b-dv15kghh5v] {
    outline: var(--border-width-2) solid var(--color-border-brand-default);
    outline-offset: var(--spacing-2);
}

/* Both properties are load-bearing. width:100% overrides the shrink-to-fit that align-items:flex-start
   imposes on a column flex child; min-width:0 defeats the `auto` minimum that flex and grid items carry by
   default, which is the other route a max-content table uses to push past its container. With them, an annex
   wider than the card scrolls inside AnnexTableRenderer's own overflow-x box instead of scrolling the page. */
.report-state-card__preview[b-dv15kghh5v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    width: 100%;
    min-width: 0;
}

.report-state-card__annex[b-dv15kghh5v] {
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-8) var(--spacing-16);
    min-width: 0;
}

.report-state-card__annex > summary[b-dv15kghh5v] {
    cursor: pointer;
    padding-block: var(--spacing-4);
}

.report-state-card__annex[open] > summary[b-dv15kghh5v] {
    margin-bottom: var(--spacing-12);
}

/* ---- rail: recent history ---- */
.report-state-card__timeline[b-dv15kghh5v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    width: 100%;
}

.report-state-card__timeline > li[b-dv15kghh5v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-inline-start: var(--spacing-16);
    border-inline-start: var(--border-width-2) solid var(--color-border-base-default);
}

.report-state-card__timeline > li:first-child[b-dv15kghh5v] {
    border-inline-start-color: var(--color-background-brand-default);
}

.report-state-card__timeline-time[b-dv15kghh5v] {
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-14);
}

@media (max-width: 40rem) {
    .report-state-card__facts[b-dv15kghh5v] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .report-state-card__facts > dd[b-dv15kghh5v] {
        margin-bottom: var(--spacing-8);
    }
}
/* /Pages/Reporting/ServiceInterruptionsPage.razor.rz.scp.css */
/* R5-09 — the interruption register: the filing form keeps the `page-with-forms` column (UI-SPEC §1.4, as the
   water-quality forms); the list below it takes the page width. Semantic tokens only (MIS-018 / ADR-016 D5). */

.interruptions__form[b-4zebdjjg2k] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-16);
    max-width: 45rem;
}

.interruptions h2[b-4zebdjjg2k] {
    margin: var(--spacing-24) 0 var(--spacing-8);
}

/* A date and its time share the line. */
.interruptions__when[b-4zebdjjg2k] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-16);
    align-items: end;
}

.interruptions__sr-only[b-4zebdjjg2k] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Pages/Reporting/SubmittedReportsPage.razor.rz.scp.css */
/* MW-560 (UI-12) — against prototype `reports`: one filter row (MisFilterBar owns the row and the count), the search takes what is
   left and every select keeps a readable width. Semantic MUD tokens only (SemanticTokenLintTests). */
.submitted-reports-filters__term[b-sth7d8e6bb] {
    flex: 1 1 320px;
    min-inline-size: 0;
}

.submitted-reports-filters__field[b-sth7d8e6bb] {
    flex: 0 1 180px;
    min-inline-size: 160px;
}

.submitted-reports-filters__field--wide[b-sth7d8e6bb] {
    flex-basis: 240px;
}

/* The /templates remedy (TemplatesPage.razor.css): a 16 px cell gutter on this register only, so the columns fit
   the content column at 1440 instead of wrapping the operator's name over four lines. */
.submitted-reports-table[b-sth7d8e6bb]  .mud-table__th {
    white-space: normal;
}

.submitted-reports-table[b-sth7d8e6bb]  .mud-table__th,
.submitted-reports-table[b-sth7d8e6bb]  .mud-table__td {
    padding-inline: var(--spacing-16);
}

/* The name reads on one line at 1280 ("TEST-AGRO S.R.L." broke after the dash); the identifiers go under it. */
.submitted-reports-table__operator[b-sth7d8e6bb] {
    display: flex;
    flex-direction: column;
    min-inline-size: 136px;
}

.submitted-reports-table__stack[b-sth7d8e6bb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
}

.submitted-reports-table__note[b-sth7d8e6bb] {
    color: var(--color-text-base-secondary);
}

/* The row's two ways out on one line: open the report, or its history. */
.submitted-reports__actions[b-sth7d8e6bb] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-12);
    white-space: nowrap;
}

/* The prototype's list footer: range, export, pager — wrapping as a whole on a narrow column. */
.submitted-reports__footer[b-sth7d8e6bb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding-block: var(--spacing-16);
}

.submitted-reports__range[b-sth7d8e6bb] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.submitted-reports__export[b-sth7d8e6bb] {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    flex-wrap: wrap;
}

.submitted-reports__export p[b-sth7d8e6bb] {
    margin: 0;
}

/* FR12.05 — sits under the page header: what changed is consulted before deciding what to narrow. */
.submitted-reports-updates[b-sth7d8e6bb] {
    margin-bottom: var(--spacing-24);
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-20) var(--spacing-24);
}

.submitted-reports-updates > h2[b-sth7d8e6bb] {
    margin: 0 0 var(--spacing-12);
}

.submitted-reports-updates__list[b-sth7d8e6bb] {
    list-style: none;
    margin: 0 0 var(--spacing-16);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

/* "new · what · where it stands · when", read down the column rather than across ragged lines. */
.submitted-reports-updates__list > li[b-sth7d8e6bb] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--spacing-12);
    padding-bottom: var(--spacing-8);
    border-bottom: var(--border-width-1) solid var(--color-border-base-secondary);
}

.submitted-reports-updates__list > li:last-child[b-sth7d8e6bb] {
    border-bottom: none;
    padding-bottom: 0;
}

.submitted-reports-updates__list time[b-sth7d8e6bb] {
    color: var(--color-text-base-secondary);
    white-space: nowrap;
}

/* MW-584 — the rest of what moved since the mark, between the list and the mark. */
.submitted-reports-updates__pager[b-sth7d8e6bb] {
    margin: 0 0 var(--spacing-16);
}

/* The page's own alert style. It borrowed .report-state-card__error, which lives in other pages' scoped CSS
   and so never reached this one: the export and mark-read errors rendered unstyled. */
.submitted-reports__error[b-sth7d8e6bb] {
    margin: var(--spacing-8) 0 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default);
}
/* /Pages/Reporting/ValidationFindingRow.razor.rz.scp.css */
/* Semantic MUD tokens only (SemanticTokenLintTests). */

/* Anchor (report page), button (editor panel) or plain text (a reader with no editor) — the one list row all read as;
   only the interactive two point and react to hover. */
.validation-report-finding-link[b-vdj199i4eh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    box-sizing: border-box;
    width: 100%;
    text-decoration: none;
    font: inherit;
    text-align: start;
    padding: var(--spacing-8) var(--spacing-12);
    border: var(--border-width-1) solid transparent;
    border-inline-start-width: var(--border-width-2);
    border-radius: var(--border-radius-6);
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-default);
}

.validation-report-finding-link:is(a, button)[b-vdj199i4eh] {
    cursor: pointer;
}

.validation-report-finding-link + .validation-report-finding-link[b-vdj199i4eh] {
    margin-top: var(--spacing-8);
}

.validation-report-finding-link:is(a, button):hover[b-vdj199i4eh] {
    border-color: var(--color-border-base-secondary);
}

.validation-report-finding-link--error[b-vdj199i4eh] {
    border-inline-start-color: var(--color-border-danger-default);
    background: var(--color-background-danger-secondary);
}

.validation-report-finding-link--warning[b-vdj199i4eh] {
    border-inline-start-color: var(--color-text-warning-default);
    background: var(--color-background-warning-secondary);
}

/* The severity word carries the meaning colour-blind users cannot take from the rule alone. */
.validation-report-finding-label[b-vdj199i4eh] {
    font-weight: 600;
    font-size: var(--font-size-12);
    text-transform: uppercase;
}

.validation-report-finding-link--error .validation-report-finding-label[b-vdj199i4eh] {
    color: var(--color-text-danger-default);
}

.validation-report-finding-link--warning .validation-report-finding-label[b-vdj199i4eh] {
    color: var(--color-text-warning-default);
}

.validation-report-finding-message[b-vdj199i4eh] {
    font-size: var(--font-size-14);
}

.validation-report-finding-location[b-vdj199i4eh] {
    font-size: var(--font-size-12);
    color: var(--color-text-base-secondary);
}

/* UI-SPEC §5 — a visible 2px brand focus ring on every interactive element; the row is a link or a button. */
.validation-report-finding-link:focus-visible[b-vdj199i4eh] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}
/* /Pages/Reporting/ValidationIssuesPanel.razor.rz.scp.css */
/* UI-03b — the "Probleme de validare" work list (UI-SPEC §3.3). Semantic MUD tokens only
   (SemanticTokenLintTests): no hex, no --color-palette-*. Card treatment matches the other cards on
   DraftEditorPage.

   The finding rows are ValidationFindingRow (shared with ValidationReportPage). */

.validation-issues[b-joqjluv2u6] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    padding: var(--spacing-20) var(--spacing-24);
}

.validation-issues__title[b-joqjluv2u6] {
    margin: 0 0 var(--spacing-16);
}

.validation-issues__empty[b-joqjluv2u6] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.validation-report-annex + .validation-report-annex[b-joqjluv2u6] {
    margin-top: var(--spacing-20);
}

.validation-report-annex h3[b-joqjluv2u6] {
    margin: 0 0 var(--spacing-8);
    color: var(--color-text-base-secondary);
}
/* /Pages/Reporting/ValidationReportPage.razor.rz.scp.css */
/* MW-563 — the consolidated validation report. Semantic MUD tokens only (SemanticTokenLintTests). UI-SPEC §5: cards
   radius 12, padding 24, resting drop-shadow-100; section H2 at heading-h4. */

/* Mirrors DraftEditorPage's notice — the same fact stated on the screen that links to it. */
.validation-report-locked[b-p6z5kzcn6v] {
    margin: 0 0 var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--border-radius-6);
    border-inline-start: var(--border-width-3) solid var(--color-border-warning-default);
    background: var(--color-background-warning-secondary);
    color: var(--color-text-warning-default);
}

/* MIS-067 (NFR50) — tables still unjudged because the registry was down; same tone as the editor's note. */
.validation-report-pending[b-p6z5kzcn6v] {
    margin: 0 0 var(--spacing-16);
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-warning-secondary);
    color: var(--color-text-warning-default);
}

/* The prototype's validation bar: the counts, then what they mean for the next move. */
.validation-report-summary[b-p6z5kzcn6v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8) var(--spacing-12);
    margin-bottom: var(--spacing-24);
    padding: var(--spacing-12) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    background: var(--color-background-base-secondary);
}

.validation-report-summary__note[b-p6z5kzcn6v] {
    color: var(--color-text-base-secondary);
}

.validation-report-annex[b-p6z5kzcn6v] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
}

.validation-report-annex + .validation-report-annex[b-p6z5kzcn6v] {
    margin-top: var(--spacing-24);
}

.validation-report-annex__head[b-p6z5kzcn6v] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-8) var(--spacing-16);
    margin-bottom: var(--spacing-16);
}

.validation-report-annex__head h2[b-p6z5kzcn6v] {
    margin: 0;
}

.validation-report-annex__count[b-p6z5kzcn6v] {
    color: var(--color-text-base-secondary);
}
/* /Pages/Reporting/WaterQualityCompliancePage.razor.rz.scp.css */
/* MW-491/MIS-122 — the water-quality compliance screen's own layout, and only that: the header's geometry
   belongs to mis-page-header, the tables' to Mud.Blazor and the chips'/fields' to the design system.
   Semantic MUD/FOD tokens only: no hex literals, no --color-palette-* primitives, no inline styles
   (MIS-018 lint / ADR-016 D5).

   The page had NO stylesheet at all until a live pass on the running app: its chips were UA-default
   <button>s, its filing fields UA-default <input>s, and `water-quality__overdue` — the class carrying the
   law's "you are late" — resolved to plain body text, so the one thing on the screen that had to stand out
   was the one thing indistinguishable from everything else. */

.water-quality__section + .water-quality__section[b-dh5pdrq77m] {
    margin-top: var(--spacing-32);
}

/* MW-558 (UI-SPEC §5, prototype record page) — each record is a card: the two programmes, the registers and
   the derogations. Flat sections beside one carded derogation gave the records unequal weight, and the page
   read as one ~6,900 px column. Radius 12, padding 24, resting --shadow-100. */
.water-quality__card[b-dh5pdrq77m] {
    padding: var(--spacing-16);
    border-radius: var(--border-radius-12);
    background: var(--color-background-base-default);
    box-shadow: var(--shadow-100);
}

@media (min-width: 768px) {
    .water-quality__card[b-dh5pdrq77m] {
        padding: var(--spacing-24);
    }
}

.water-quality__card h2[b-dh5pdrq77m] {
    margin: 0;
}

/* Who filed the record and when — provenance, read after the title, never before it. */
.water-quality__provenance[b-dh5pdrq77m] {
    margin: var(--spacing-4) 0 0;
    color: var(--color-text-base-secondary);
}

.water-quality__recorded[b-dh5pdrq77m] {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

/* The three records are read together, so each register/parameter table needs air above its heading
   without the headings themselves drifting apart. */
.water-quality__section h3[b-dh5pdrq77m],
.water-quality__section h4[b-dh5pdrq77m] {
    margin: var(--spacing-24) 0 var(--spacing-8);
}

/* Label above value on a phone; two columns from 768 up, the label column sized to the longest legal term
   ("Actualizare necesară până la") rather than to a fraction of the page. */
.water-quality__facts[b-dh5pdrq77m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4) var(--spacing-16);
    margin: var(--spacing-16) 0 0;
}

.water-quality__facts dt[b-dh5pdrq77m] {
    color: var(--color-text-base-secondary);
}

.water-quality__facts dd[b-dh5pdrq77m] {
    margin: 0 0 var(--spacing-8);
}

@media (min-width: 768px) {
    .water-quality__facts[b-dh5pdrq77m] {
        grid-template-columns: minmax(12rem, 18rem) 1fr;
    }

    .water-quality__facts dt[b-dh5pdrq77m],
    .water-quality__facts dd[b-dh5pdrq77m] {
        margin: 0;
        padding: var(--spacing-4) 0;
    }
}

/* The operator question, before any record is shown: the administered operators as a wrapping row of
   choices. */
.water-quality__operator-choices[b-dh5pdrq77m] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin: var(--spacing-16) 0 0;
    justify-content: center;
}

/* The authority's sector-wide picker's search box, in a `mud-page__toolbar` beside the table's own
   `mud-page__body` — same layout every other table screen uses (OperatorsPage). Sized on the page's own
   wrapper rather than left at the field's intrinsic width, which used to be capped at 34rem and centered
   under a "choose one" banner meant for a couple of buttons or a single field, not a full table. */
.water-quality__operator-search[b-dh5pdrq77m] {
    max-width: 24rem;
    margin-bottom: var(--spacing-16);
}

/* Sized on the page's own wrapper, same reason as `.water-quality__report-field > *`: a Fod control's
   root element belongs to the Fod component, not this file, so CSS isolation can only size it via its
   wrapper's child selector. Without this the field defaults to its intrinsic width. */
.water-quality__operator-search > *[b-dh5pdrq77m] {
    width: 100%;
}

/* The overview's operator cell: the name, then its IDNO quieter under it. The minimum width keeps a hyphenated
   name such as "AQUA-SUD S.R.L." whole; squeezed by wider columns, it broke at every hyphen. */
.water-quality__overview-operator[b-dh5pdrq77m] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    min-width: 8rem;
}

/* The table's headers may wrap. Kept on one line, "Programe de monitorizare", "Depășiri în 2026" and "Evaluări
   restante" alone made the table wider than the 832 px main column at 1280, and the row's only action was
   scrolled out of view. */
.water-quality__overview[b-dh5pdrq77m]  th {
    white-space: normal;
}

.water-quality__overview-idno[b-dh5pdrq77m] {
    color: var(--color-text-base-secondary);
    white-space: nowrap;
}

/* Short flags wrapping as a set rather than widening the column: a one-sentence tag here pushed the row's only
   action off-screen at 1280 px. */
.water-quality__overview-flags[b-dh5pdrq77m] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

/* The register chips and the year, flowing as one filter band: the year follows the chips on their row while it
   fits (1920) and starts the next row when it does not (1280/1440) — on the left either way, never jumping to the
   far edge at one width and under the chips at another. */
.water-quality__register-toolbar[b-dh5pdrq77m] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-12) var(--spacing-16);
    margin: var(--spacing-16) 0;
}

/* The chip set is one control, so it wraps as a unit — same shape as the obligations state filter. */
.water-quality__filters[b-dh5pdrq77m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
}

/* A year's width, on the page's own wrapper (a Fod control's root belongs to the Fod component). */
.water-quality__register-year[b-dh5pdrq77m] {
    flex: 0 1 12rem;
}

.water-quality__register-year > *[b-dh5pdrq77m] {
    width: 100%;
}

/* The range read under a paged list, with the pager at the far end — OperatorsPage's footer. */
.water-quality__pager[b-dh5pdrq77m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    margin-top: var(--spacing-16);
}

.water-quality__range[b-dh5pdrq77m] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

/* A tag says it in words; this block only gives it room. */
.water-quality__flag[b-dh5pdrq77m] {
    display: inline-flex;
    margin: 0 0 var(--spacing-8);
}

/* A tag that follows text in the same cell ("…nr. 44/2025 Prezentat cu întârziere") — it touched the text. */
.water-quality__flag--after[b-dh5pdrq77m] {
    margin: 0 0 0 var(--spacing-8);
}

/* One derogation is one dossier (art. 10(6) letters a)-d) plus its schedule), so it reads as a card:
   without a boundary, two derogations of the same operator run together into one list of facts. Radius 12, the
   card radius of UI-SPEC §5, like the record card it sits in. */
.water-quality__derogation[b-dh5pdrq77m] {
    margin-top: var(--spacing-24);
    padding: var(--spacing-16);
    border: 1px solid var(--color-border-base-subtle);
    border-radius: var(--border-radius-12);
    background: var(--color-background-base-secondary);
    /* Queried by the schedule table's overflow rule below — that rule has to know whether the table
       fits the card, which is not a viewport question (the shell's sidebar eats ~500px of it). */
    container-type: inline-size;
}

/* The derogation's title with its standing (În vigoare / Expirată) beside it. */
.water-quality__derogation-head[b-dh5pdrq77m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8) var(--spacing-12);
}

.water-quality__derogation-head h3[b-dh5pdrq77m] {
    margin: 0;
}

@media (min-width: 768px) {
    .water-quality__derogation[b-dh5pdrq77m] {
        padding: var(--spacing-24);
    }
}

/* MudTable's data cell is h-48 / padding 0 24 / vertical-align middle — sized for ONE LINE of text, which
   is what every other table on the screen holds. This one holds a filing form per unreported period, so
   the period number and its due date floated to the middle of a 200px-tall row, nowhere near the labels
   they belong to, and the row had no vertical padding for the form to sit in. Top-aligned and padded, and
   only inside this card (::deep, because MudTable renders the cells). */
.water-quality__derogation[b-dh5pdrq77m]  .mud-table__td {
    vertical-align: top;
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
}

/* The art. 10(3) filing sits inside a table cell. Three things it has to get right, all of which a live
   pass showed it was getting wrong:

   1. CLEAR OF BOTH ROW RULES. The schedule separates periods with a hairline, and the button sat flush
      against the one below it — so period 4's "record the filing" read as belonging to period 5.
   2. WIDTHS THAT MEAN SOMETHING. Under `flex-direction: row` the DS controls are block-level and each
      claimed the full cell, so the row mode looked exactly like the column mode: a date field as wide as
      the screen above a reference field as wide as the screen. A date gets a date's width; the reference
      takes what is left; the button takes its own.
   3. WRAP, NOT OVERFLOW. The cell narrows with the viewport and the table scrolls horizontally, so the
      three controls wrap onto their own lines rather than forcing the table wider still. */
.water-quality__report-form[b-dh5pdrq77m] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-12) var(--spacing-8);
    margin: var(--spacing-12) 0;
    max-width: 34rem;
}

/* Sized on the page's OWN wrappers, not on the Fod controls: a scoped selector only ever matches elements
   this file renders (CSS isolation), and each control's root belongs to its Fod component. */
.water-quality__report-field > *[b-dh5pdrq77m] {
    width: 100%;
}

/* A date gets a date's width. */
.water-quality__report-field--date[b-dh5pdrq77m] {
    flex: 0 1 11rem;
}

/* The ANSP reference — "scrisoarea nr. 31" and rather longer ones. */
.water-quality__report-field--reference[b-dh5pdrq77m] {
    flex: 1 1 15rem;
}

/* The button takes its own width and sits on the fields' baseline. */
.water-quality__report-field--action[b-dh5pdrq77m] {
    flex: 0 0 auto;
}

/* The filing sits in a table cell, and the date field's calendar is an ABSOLUTELY positioned
   dropdown inside the design-system web component's own shadow root (`mud-date-input`'s
   `.picker-popover`: `position: absolute; z-index: 10`). Shadow DOM does not escape a clipping
   ancestor, so MudTable's `.mud-table__viewport` — `overflow-x: auto`, which forces the block axis
   to `auto` too — cut the calendar off after its first week of days. A z-index cannot undo a clip;
   only an ancestor that stops clipping can. (The card's own `overflow: hidden` clipped it as well;
   it is gone above, and the corners it guarded are guarded by the card's padding and by this
   scroller, neither of which lets the table reach them.)

   Dropped only while the table FITS the card, because the scroller is what keeps a table that does
   not fit from spilling out of the card and widening the page. The condition is the card's own
   inline size, not the viewport's: the shell's sidebar and the page gutters take ~500px, so a
   viewport query would be measuring the wrong box. 42rem = the schedule's widest layout (~606px of
   nowrap header text and the submit button) plus the card's 24px padding, with a little slack. */
@container (min-width: 42rem) {
    .water-quality__derogation[b-dh5pdrq77m]  .mud-table__viewport {
        overflow: visible;
    }
}

/* UI-SPEC §1.3 — the register table is wider than its card at every width up to 1920, so it scrolls sideways
   inside MudTable's viewport; its first column (the reporting year) stays put while it does. ::deep because
   MudTable renders the cells. */
.water-quality__register-table[b-dh5pdrq77m]  thead th:first-child,
.water-quality__register-table[b-dh5pdrq77m]  tbody td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--color-background-base-default);
}

.water-quality__register-table[b-dh5pdrq77m]  thead th:first-child {
    background: var(--color-background-base-secondary);
}

.water-quality__register-table[b-dh5pdrq77m]  .mud-table--zebra tbody tr:nth-child(even) td:first-child {
    background: var(--color-background-base-secondary);
}

/* A record's heading with its filing action at the far end — the action belongs to the record it files. */
.water-quality__section-head[b-dh5pdrq77m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8) var(--spacing-16);
}

/* The two HG651/2023 programmes stack; the second needs the same air as a new section. */
.water-quality__programme + .water-quality__programme[b-dh5pdrq77m] {
    margin-top: var(--spacing-32);
}

/* The act and table a value comes from, under the value — secondary, never the thing read first. */
.water-quality__citation[b-dh5pdrq77m] {
    display: block;
    color: var(--color-text-base-secondary);
}
/* /Pages/Reporting/WaterQualityDerogationFormPage.razor.rz.scp.css */
/* MW-491 — a water-quality filing form's own layout (semantic tokens only, MIS-018 / ADR-016 D5). Fod controls'
   root elements belong to Fod, so they are sized through this file's own wrappers. */

/* UI-SPEC §1.4 — an admin/operator filing form is `page-with-forms`: one 720px column (45rem). Deviation D2
   exempts only the 564 annex grids. */
.water-quality-form[b-x3u3i11v0e] {
    max-width: 45rem;
}

.water-quality-form h2[b-x3u3i11v0e] {
    margin: var(--spacing-24) 0 var(--spacing-8);
}

/* One column at every width (§1.4); fields stack in reading order. */
.water-quality-form__grid[b-x3u3i11v0e] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-16);
}

/* A repeated row (a parameter, a sampling point, a dated activity): its fields share the line, the remove
   action at the end. */
.water-quality-form__row[b-x3u3i11v0e] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8) var(--spacing-16);
    align-items: end;
    margin-bottom: var(--spacing-16);
}

.water-quality-form > * + *[b-x3u3i11v0e] {
    margin-top: var(--spacing-16);
}

@media (min-width: 768px) {
    .water-quality-form__row[b-x3u3i11v0e] {
        grid-template-columns: 2fr 1fr auto;
    }
}
/* /Pages/Reporting/WaterQualityProgrammeFormPage.razor.rz.scp.css */
/* MW-491 — a water-quality filing form's own layout (semantic tokens only, MIS-018 / ADR-016 D5). Fod controls'
   root elements belong to Fod, so they are sized through this file's own wrappers. */

/* UI-SPEC §1.4 — an admin/operator filing form is `page-with-forms`: one 720px column (45rem). Deviation D2
   exempts only the 564 annex grids. */
.water-quality-form[b-104dylrxof] {
    max-width: 45rem;
}

.water-quality-form h2[b-104dylrxof] {
    margin: var(--spacing-24) 0 var(--spacing-8);
}

/* One column at every width (§1.4); fields stack in reading order. */
.water-quality-form__grid[b-104dylrxof] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-16);
}

/* A repeated row (a parameter, a sampling point, a dated activity): its fields share the line, the remove
   action at the end. */
.water-quality-form__row[b-104dylrxof] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8) var(--spacing-16);
    align-items: end;
    margin-bottom: var(--spacing-16);
}

/* What the act asks for, shown under the heading it concerns. */
.water-quality-form__hint[b-104dylrxof] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

/* A locked audit row: the act's own parameter name where the select would be. */
.water-quality-form__parameter-name[b-104dylrxof] {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    margin: 0;
    min-height: var(--spacing-40);
}

.water-quality-form > * + *[b-104dylrxof] {
    margin-top: var(--spacing-16);
}

@media (min-width: 768px) {
    .water-quality-form__row[b-104dylrxof] {
        grid-template-columns: 2fr 1fr auto;
    }
}
/* /Pages/Reporting/WaterQualityRegisterEntryFormPage.razor.rz.scp.css */
/* MW-491 — a water-quality filing form's own layout (semantic tokens only, MIS-018 / ADR-016 D5). Fod controls'
   root elements belong to Fod, so they are sized through this file's own wrappers. */

/* UI-SPEC §1.4 — an admin/operator filing form is `page-with-forms`: one 720px column (45rem). Deviation D2
   exempts only the 564 annex grids. */
.water-quality-form[b-z021yeb1ja] {
    max-width: 45rem;
}

.water-quality-form h2[b-z021yeb1ja] {
    margin: var(--spacing-24) 0 var(--spacing-8);
}

/* One column at every width (§1.4); fields stack in reading order. */
.water-quality-form__grid[b-z021yeb1ja] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-16);
}

/* A repeated row (a parameter, a sampling point, a dated activity): its fields share the line, the remove
   action at the end. */
.water-quality-form__row[b-z021yeb1ja] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8) var(--spacing-16);
    align-items: end;
    margin-bottom: var(--spacing-16);
}

.water-quality-form > * + *[b-z021yeb1ja] {
    margin-top: var(--spacing-16);
}

@media (min-width: 768px) {
    .water-quality-form__row[b-z021yeb1ja] {
        grid-template-columns: 2fr 1fr auto;
    }
}
/* /Pages/Reports/GenerateReportPage.razor.rz.scp.css */
/* MW-476/MIS-109 — the institutional report generator. Scoped CSS: every class below is emitted by this
   component's own markup. MUD tokens only. */

.report-builder[b-pze4idhaj4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    padding: var(--spacing-24);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-base-default);
}

.report-filters[b-pze4idhaj4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-16);
}

.report-field[b-pze4idhaj4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    font-size: var(--font-size-12);
    color: var(--color-text-base-secondary);
}

/* The picker is a grid so a dozen fields stay scannable at any width — a single column would push the
   generate button below the fold on the screen whose whole job is to reach it. */
.report-columns[b-pze4idhaj4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-8);
}

.report-column label[b-pze4idhaj4] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-8);
}

/* FR05.05's type and size, beside the field they describe: they are what an export is laid out from, so the
   person choosing the column is the person who should see them. Recessive, because they are metadata. */
.report-column__meta[b-pze4idhaj4] {
    margin-left: auto;
    font-size: var(--font-size-12);
    color: var(--color-text-base-tertiary, var(--color-text-base-secondary));
    white-space: nowrap;
}

.report-document[b-pze4idhaj4] {
    margin-top: var(--spacing-24);
    padding: var(--spacing-24);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-base-default);
}

/* The letterhead is separated from the table by a rule rather than by space alone: on a printed page the
   header is a different kind of thing from the data, and the reader should see that before reading either. */
.report-document__header[b-pze4idhaj4] {
    padding-bottom: var(--spacing-12);
    border-bottom: var(--border-width-1) solid var(--color-border-base-secondary);
    margin-bottom: var(--spacing-16);
}

/* The same 200 × 80 box the Office files fit the logo into, so the mark is not noticeably larger on screen than
   on paper. */
.report-document__logo[b-pze4idhaj4] {
    display: block;
    max-width: 200px;
    max-height: 80px;
    margin-bottom: var(--spacing-8);
}

.report-document__footer[b-pze4idhaj4] {
    padding-top: var(--spacing-12);
    border-top: var(--border-width-1) solid var(--color-border-base-secondary);
    margin-top: var(--spacing-16);
    color: var(--color-text-base-secondary);
}

.report-table[b-pze4idhaj4] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-12);
}

.report-table th[b-pze4idhaj4],
.report-table td[b-pze4idhaj4] {
    padding: var(--spacing-4) var(--spacing-8);
    border-bottom: var(--border-width-1) solid var(--color-border-base-secondary);
    text-align: left;
}

.report-table th[b-pze4idhaj4] {
    color: var(--color-text-base-secondary);
    white-space: nowrap;
}

/* Numbers right-align — the one piece of presentation the published field type buys the reader for free, and
   the difference between a column that can be compared down the page and one that cannot. */
.report-table__cell--numeric[b-pze4idhaj4] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* MW-477/MIS-110 — the saved-configuration panel and the queued-run panel.

   Both are lists of one-line records with actions on the right, so they share a shape: the row is a flex
   container that wraps, and the actions cluster at the end. Nothing here re-styles a design-system component —
   the buttons and the inputs inside are the library's and are left alone. */

.report-configs[b-pze4idhaj4],
.report-runs[b-pze4idhaj4] {
    padding: var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-8);
    margin-bottom: var(--spacing-16);
}

.report-configs__list[b-pze4idhaj4],
.report-runs__list[b-pze4idhaj4] {
    list-style: none;
    margin: var(--spacing-12) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.report-config[b-pze4idhaj4],
.report-run[b-pze4idhaj4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
    padding: var(--spacing-8) var(--spacing-12);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-4);
}

.report-config__title[b-pze4idhaj4],
.report-run__state[b-pze4idhaj4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
    min-width: 0;
}

.report-config__actions[b-pze4idhaj4],
.report-run__actions[b-pze4idhaj4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
}

/* A badge, not a colour: "shared with the Analyst role" and "somebody else's" are facts a reader has to be able
   to READ, and colour alone would carry them only for readers who can see it. */
.report-config__badge[b-pze4idhaj4],
.report-run__badge[b-pze4idhaj4] {
    padding: 0 var(--spacing-8);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-4);
    font-size: var(--font-size-12);
    color: var(--color-text-base-secondary);
    white-space: nowrap;
}

.report-run__meta[b-pze4idhaj4] {
    font-size: var(--font-size-12);
    color: var(--color-text-base-secondary);
}

/* A run still working is the one the reader is waiting on, so its row is the one that has to be findable in a
   list — a left edge rather than a fill, which would fight the design system's own surfaces. */
.report-run[data-status="queued"][b-pze4idhaj4],
.report-run[data-status="running"][b-pze4idhaj4] {
    border-left-width: var(--border-width-4);
}

.report-run[data-unseen="true"][b-pze4idhaj4] {
    border-left-width: var(--border-width-4);
    border-left-color: var(--color-border-brand-primary, var(--color-border-base-secondary));
}

/* The saved-configuration form. Same wrapping row as the builder's filter band, deliberately NOT the same class:
   these controls name and share a configuration, they do not narrow a set. */
.report-configs__form[b-pze4idhaj4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-16);
}

/* A refusal of the whole configuration rather than of one field. Text is the DS's "on-secondary" danger token, not
   `text-danger-default`: the latter measures 4.0:1 on this fill, under the 4.5:1 UI-SPEC §5 asks for. */
.report-configs__error[b-pze4idhaj4] {
    margin: var(--spacing-16) 0 0;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--border-radius-6);
    background: var(--color-background-danger-secondary);
    color: var(--color-text-danger-on-secondary);
}
/* /Pages/Reports/ReportsIntroEditPage.razor.rz.scp.css */
/* MIS-087 — reports-section intro admin page: page-specific bits only. Header/body/action-row spacing comes
   from the shared `.mud-page__*` main-page pattern (wwwroot/css/main-page.css). */

/* Says where the section's ON/OFF switch actually lives, so nobody looks for it on this screen. */
.reports-intro-hint[b-duuek5y6pa] {
    color: var(--color-text-base-secondary);
    margin-bottom: var(--spacing-16);
}

/* The rich-text field stack inside a language tab. */
.reports-intro-variant[b-duuek5y6pa] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* Caption for the Markdown body — mirrors a MUD field label so it reads with the editor. */
.reports-intro-variant-label[b-duuek5y6pa] {
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base-secondary);
    margin-bottom: calc(var(--spacing-16) * -1 + var(--spacing-4));
}

/* Version-history section, separated from the editor above it. */
.reports-intro-versions[b-duuek5y6pa] {
    margin-top: var(--spacing-32);
}

.reports-intro-versions h2[b-duuek5y6pa] {
    margin-bottom: var(--spacing-16);
}

/* Rendered intro preview inside the modal. */
.reports-intro-preview[b-duuek5y6pa] {
    color: var(--color-text-base-default);
}
/* /Pages/ReportTypes/ReportTypeCreatePage.razor.rz.scp.css */
/* /report-types/new. The 720 px column and the space between fields come from the shared `mud-page__body--form`
   (main-page.css, UI-SPEC §1.4); only the deadline block is this page's own. The draft editor's deadline block has
   its own copy in ReportTypeDetailPage.razor.css: CSS isolation stops each page's rules at that page, which is why
   this form rendered unstyled while it borrowed the detail page's class names. Semantic MUD tokens only
   (SemanticTokenLintTests). */

.report-type-create__deadline h2[b-xl4zstmif6] {
    margin: var(--spacing-8) 0 0;
}

/* The offset and the day are one statement (a deadline): one line while the width allows. */
.report-type-create__deadline-fields[b-xl4zstmif6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-16);
    margin-top: var(--spacing-12);
}

/* The rule in words, then the example date it gives. */
.report-type-create__deadline-preview[b-xl4zstmif6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
    color: var(--color-text-base-secondary);
}
/* /Pages/ReportTypes/ReportTypeDetailPage.razor.rz.scp.css */
/* MW-395 — the report-type screen: header, read-only view of a version, history, draft editor. The blocks and
   forms below are shared with the child components (AttachmentSlotsEditor, CrossCellRulesEditor,
   ReportTypeCompositionView, ReportTypeVersionHistory), so their rules are written through ::deep under the
   page's own wrapper — Blazor's CSS isolation would otherwise stop them at the component boundary and the
   blocks would fall back to block flow (the defect this file was first written to fix). Semantic MUD tokens
   only (SemanticTokenLintTests). */

.report-type-detail__tags[b-bh8qbor4rt],
.report-type-detail__actions[b-bh8qbor4rt] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
}

/* One section per concern (the version read, the history, the draft), separated so the headings read as
   sections rather than as one long column. */
.report-type-section[b-bh8qbor4rt] {
    margin-top: var(--spacing-40);
}

.report-type-section > h2[b-bh8qbor4rt] {
    margin: 0 0 var(--spacing-12);
}

.report-type-editor__heading[b-bh8qbor4rt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-12);
}

.report-type-editor__heading h2[b-bh8qbor4rt] {
    margin: 0;
}

/* One block per editable aspect (annexes, attachments, deadline, cross-checks). */
.report-type-detail[b-bh8qbor4rt]  .report-type-block {
    margin-top: var(--spacing-24);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-block h3 {
    margin: 0 0 var(--spacing-8);
}

/* The add-a-row form: fields then the button that commits them.

   `align-items: flex-end` is the substance, not the alignment nicety it looks like — a FOD field is a label
   stacked over an input, so centring a small button against that pair leaves it floating beside the LABEL.
   Ending them together puts the button on the same baseline as the inputs it acts on.

   It wraps, because the cross-cell sides carry five fields and the sidebar leaves less width than that needs;
   without wrapping they would push the page into horizontal scroll. */
.report-type-detail[b-bh8qbor4rt]  .report-type-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-12);
    margin-top: var(--spacing-12);
}

/* One side of a cross-cell rule, and the format choices of a document: the border groups the repeated fields
   under their own legend — the difference between "two addresses" and "the fields are duplicated". */
.report-type-detail[b-bh8qbor4rt]  .report-type-rule-side,
.report-type-detail[b-bh8qbor4rt]  .report-type-slot-formats {
    margin: var(--spacing-12) 0 0;
    padding: var(--spacing-8) var(--spacing-16) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-rule-side legend,
.report-type-detail[b-bh8qbor4rt]  .report-type-slot-formats legend {
    padding: 0 var(--spacing-8);
    color: var(--color-text-base-secondary);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-slot-formats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-16);
}

/* The row inside a side already sits under the legend's spacing. */
.report-type-detail[b-bh8qbor4rt]  .report-type-rule-side .report-type-add-row {
    margin-top: 0;
}

/* What a refused save said was wrong — a danger panel inside the rules block, where the rule is authored. */
.report-type-detail[b-bh8qbor4rt]  .report-type-rule-issues {
    margin: var(--spacing-12) 0;
    padding: var(--spacing-12) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-danger-default);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-danger-secondary);
    color: var(--color-text-danger-default-aa);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-rule-issues p,
.report-type-detail[b-bh8qbor4rt]  .report-type-rule-issues ul {
    margin: 0;
}

.report-type-detail[b-bh8qbor4rt]  .report-type-unslotted {
    margin-top: var(--spacing-12);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-unslotted li {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
}

/* Two numeric fields, same treatment — the offset and the day are one statement (a deadline) and belong on
   one line while the width allows; the date they give sits right under them. */
.report-type-deadline[b-bh8qbor4rt] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-16);
    margin-top: var(--spacing-12);
}

.report-type-deadline-preview[b-bh8qbor4rt],
.report-type-deadline-preview span[b-bh8qbor4rt] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
    color: var(--color-text-base-secondary);
}

.report-type-reorder-buttons[b-bh8qbor4rt] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
}

/* The version's actions, off the blocks above: "Save draft" and "Publish" apply to the whole version, so they
   must not read as another block's buttons. */
.report-type-actions[b-bh8qbor4rt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-12);
    margin-top: var(--spacing-32);
    padding-top: var(--spacing-16);
    border-top: var(--border-width-1) solid var(--color-border-base-secondary);
}

/* The read-only view: four blocks on a card-like surface, two per row while the width allows. */
.report-type-view[b-bh8qbor4rt] {
    padding: var(--spacing-24);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-base-default);
}

.report-type-view > p[b-bh8qbor4rt] {
    margin: 0 0 var(--spacing-16);
    color: var(--color-text-base-secondary);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-view__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--spacing-24);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-view__block h3 {
    margin: 0 0 var(--spacing-8);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-view__annexes,
.report-type-detail[b-bh8qbor4rt]  .report-type-view__slots,
.report-type-detail[b-bh8qbor4rt]  .report-type-view__rules {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin: 0;
    padding-left: var(--spacing-20);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-view__slots li,
.report-type-detail[b-bh8qbor4rt]  .report-type-view__rules li {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.report-type-detail[b-bh8qbor4rt]  .report-type-history__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}
/* /Pages/ReportTypes/ReportTypePeriodPicker.razor.rz.scp.css */
/* The year and the quarter of an effective-from period, side by side inside the publish / rollback dialogs
   (which render outside the page's wrapper, so the page's styles do not reach here). */
.report-type-period-picker[b-i1cas79jtu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-16);
    margin-top: var(--spacing-16);
}

/* ::deep, because the selects are rendered by other components and carry their scope, not this one's. */
.report-type-period-picker[b-i1cas79jtu]  .fod-select {
    flex: 1 1 10rem;
}
/* /Pages/ReportTypes/ReportTypesPage.razor.rz.scp.css */
/* MW-395 — list cells that state two things: the version a row shows and where it stands, the deadline rule
   and the date it gives. Stacked so each reads as a line of its own; tags wrap beside each other.
   MW-557 (UI-09) — the /templates register's layout (MW-556): a 16 px cell gutter, and the composition stacked
   the same way. The deadline rule keeps a readable measure instead of wrapping a word a line. */
.report-types-search[b-rv5rsannm4] {
    flex: 1 1 320px;
    min-inline-size: 0;
}

.report-types-table[b-rv5rsannm4]  .mud-table__th {
    white-space: normal;
}

.report-types-table[b-rv5rsannm4]  .mud-table__th,
.report-types-table[b-rv5rsannm4]  .mud-table__td {
    padding-inline: var(--spacing-16);
}

.report-types-table__name[b-rv5rsannm4],
.report-types-table__version[b-rv5rsannm4],
.report-types-table__composition[b-rv5rsannm4],
.report-types-table__deadline[b-rv5rsannm4] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.report-types-table__name[b-rv5rsannm4] {
    min-inline-size: 160px;
}

.report-types-table__composition[b-rv5rsannm4],
.report-types-table__deadline[b-rv5rsannm4] {
    min-inline-size: 150px;
}

.report-types-table__nowrap[b-rv5rsannm4] {
    white-space: nowrap;
}

.report-types-table__tags[b-rv5rsannm4] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.report-types-table .text-body-small[b-rv5rsannm4] {
    color: var(--color-text-base-secondary);
}

/* UI-SPEC §1.3: sticky header + sticky first column. MudTable's viewport is a scroll container
   (overflow-x: auto), so a header stuck at `top: 72px` inside it slid DOWN over the first row instead of pinning
   under the shell's 72 px action strip (the MW-556 finding). Where the register fits the column the viewport
   stops scrolling and the header sticks to the page; below it the table scrolls sideways and the name column is
   the one that stays. Six stacked columns need ~920 px, which the main column has from 1400 px on (977 at
   1440, 817 at 1280) — so this register's breakpoint is 1400, not the sidebar's 1248. */
@media (min-width: 1400px) {
    .report-types-table[b-rv5rsannm4]  .mud-table__viewport {
        overflow: visible;
    }

    .report-types-table[b-rv5rsannm4]  thead th {
        position: sticky;
        top: 72px;
        z-index: 2;
        background: var(--color-background-base-default);
    }
}

@media (max-width: 1399.98px) {
    .report-types-table[b-rv5rsannm4]  tbody td:first-child,
    .report-types-table[b-rv5rsannm4]  thead th:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        background: var(--color-background-base-default);
    }

    .report-types-table[b-rv5rsannm4]  .mud-table--zebra tbody tr:nth-child(even) td:first-child {
        background: var(--color-background-base-secondary);
    }
}

.report-types-sr-only[b-rv5rsannm4] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Pages/Roles/RolesPage.razor.rz.scp.css */
/* Edit and Delete of a row stay on one line, like the sections screen's row actions. */
.roles-row-actions[b-c7jrob9zpx] {
    display: flex;
    gap: var(--spacing-8);
    align-items: center;
    white-space: nowrap;
}

.roles-editor[b-c7jrob9zpx] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    min-width: min(32rem, 80vw);
}

/* 26 permissions: two columns keep the checklist inside the dialog without a long scroll. */
.roles-editor__permissions[b-c7jrob9zpx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--spacing-8) var(--spacing-16);
    border: 0;
    margin: 0;
    padding: 0;
}

.roles-editor__permissions legend[b-c7jrob9zpx] {
    grid-column: 1 / -1;
    margin-bottom: var(--spacing-8);
}
/* /Pages/Search/GlobalSearchPage.razor.rz.scp.css */
/* R5-06 (FR06.04) — the global search results: one group per source, a plain list of links under each. */
.global-search__group[b-bmjoczz60c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-32);
}

.global-search__list[b-bmjoczz60c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-search__list li[b-bmjoczz60c] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.global-search__count[b-bmjoczz60c],
.global-search__meta[b-bmjoczz60c] {
    color: var(--color-text-base-secondary);
}
/* /Pages/Sections/SectionsPage.razor.rz.scp.css */
/* The four controls of a row — two reorder chevrons, Edit, Delete — stay on ONE line. `flex-wrap: wrap` was
   here as a narrow-screen safety net, but it fires at ordinary desktop widths too: the actions column is the
   first thing the table squeezes, so Delete dropped under the chevrons and the row read as two rows.
   Wrapping is kept, but only below the width where one line genuinely cannot fit. */
.sections-row-actions[b-5clgrtplwk] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .sections-row-actions[b-5clgrtplwk] {
        flex-wrap: wrap;
    }
}

.sections-name[b-5clgrtplwk] {
    display: inline-block;
}

.sections-editor[b-5clgrtplwk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: min(28rem, 80vw);
}

.sections-name-field[b-5clgrtplwk] {
    padding-block: 0.5rem;
}

.sections-field[b-5clgrtplwk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sections-field__label[b-5clgrtplwk] {
    font-weight: 600;
}

.sections-field__select[b-5clgrtplwk] {
    padding: 0.5rem;
    border: 1px solid var(--color-border-default);
    border-radius: 0.25rem;
    background: var(--color-background-base);
    font: inherit;
}

.sections-versions[b-5clgrtplwk] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}
/* /Pages/Templates/AddAnnexPage.razor.rz.scp.css */
/* MW-564 · UI-SPEC §3.7/§5 (MW-556 /templates patterns): a simple form page — `page-with-forms` 720 column, one card per block
   (radius 12, padding 24, resting shadow-100), section headings at heading-h4. Semantic MUD tokens only. */
.add-annex-form[b-etcm3yr59y] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    max-inline-size: 45rem;
}

.add-annex-card[b-etcm3yr59y] {
    margin: 0;
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
    min-inline-size: 0;
}

/* The card is the group's frame, so the fieldset itself draws none; its legend is the card's heading. */
.add-annex-archetypes[b-etcm3yr59y] {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.add-annex-archetypes > legend[b-etcm3yr59y] {
    margin-bottom: var(--spacing-16);
    padding: 0;
}

.add-annex-archetype[b-etcm3yr59y] {
    padding-block: var(--spacing-4);
}

.add-annex-archetype-preview[b-etcm3yr59y] {
    display: block;
    padding-inline-start: var(--spacing-32);
    color: var(--color-text-base-secondary);
}

.add-annex-fields[b-etcm3yr59y] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.add-annex-fields > h2[b-etcm3yr59y] {
    margin: 0;
}

.add-annex-periodicity[b-etcm3yr59y] {
    margin: 0;
    padding: 0;
    border: 0;
}

.add-annex-periodicity > legend[b-etcm3yr59y] {
    margin-bottom: var(--spacing-8);
    padding: 0;
}

.add-annex-actions[b-etcm3yr59y] {
    display: flex;
    gap: var(--spacing-8);
}
/* /Pages/Templates/StructureEditorPage.razor.rz.scp.css */
.structure-editor-table-head[b-okgwbdqw6n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-16);
}

.structure-editor-table-head h2[b-okgwbdqw6n],
.structure-editor-table-head h3[b-okgwbdqw6n] {
    margin: 0;
}

/* Reorder is staged locally (drag-and-drop or Move up/down) — this bar is the explicit confirm step
   that actually commits the new order to the draft. */
.structure-editor-reorder-bar[b-okgwbdqw6n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
    background-color: var(--color-background-base-secondary);
}

.structure-editor-reorder-bar-actions[b-okgwbdqw6n] {
    display: inline-flex;
    gap: var(--spacing-8);
}

/* The polite live region that names the moved row and its new position (RT-ADMIN-3). It stays in the
   DOM from first render so a screen reader has it registered before the first message; with nothing to
   say it takes no space. Visible when it has something: the same feedback helps a sighted keyboard user. */
.structure-editor-announcement[b-okgwbdqw6n] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.structure-editor-announcement:empty[b-okgwbdqw6n] {
    display: none;
}

/* Computed-rules panel (MIS-053): each rule as a bordered row card, summary on the
   left, edit/detach actions grouped and pinned to the right. */
.structure-editor-rules[b-okgwbdqw6n] {
    margin-top: var(--spacing-24);
}

.structure-editor-rule-list[b-okgwbdqw6n] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.structure-editor-rule[b-okgwbdqw6n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    background-color: var(--color-background-base-secondary);
}

.structure-editor-rule-summary[b-okgwbdqw6n] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-base-default);
}

.structure-editor-rule-actions[b-okgwbdqw6n] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    flex-shrink: 0;
}

.structure-editor-no-rules[b-okgwbdqw6n] {
    margin: 0;
    padding: var(--spacing-16);
    border: var(--border-width-1) dashed var(--color-border-base-secondary);
    border-radius: var(--border-radius-8);
    color: var(--color-text-base-secondary);
}

/* UI-SPEC §5 (MW-556 /templates patterns): one card per block — radius 12, padding 24, resting shadow-100 — with a
   24 px gap between them; table titles at heading-h4. */
.structure-editor-body[b-okgwbdqw6n] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

.structure-editor-card[b-okgwbdqw6n] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
    min-inline-size: 0;
}

/* AC3's standing statement reads as a notice, not as body text floating above the cards. */
.structure-editor-hint[b-okgwbdqw6n] {
    margin: 0;
    padding: var(--spacing-12) var(--spacing-16);
    border-inline-start: var(--border-width-3) solid var(--color-background-brand-default);
    border-radius: 0 var(--border-radius-8) var(--border-radius-8) 0;
    background: var(--color-background-brand-secondary);
}

.structure-editor-legal-basis[b-okgwbdqw6n] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
}

.structure-editor-legal-basis > p[b-okgwbdqw6n] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.structure-editor-legal-basis[b-okgwbdqw6n]  .fod-textfield {
    align-self: stretch;
}

/* MW-556's table fit (TemplatesPage.razor.css): headers wrap between words and a 16 px cell gutter, so at 1280 the
   row name gets the width rather than the reorder and actions columns; a unit stays on one line ("mii kWh"). */
.structure-editor-table[b-okgwbdqw6n]  .mud-table__th {
    white-space: normal;
}

.structure-editor-table[b-okgwbdqw6n]  .mud-table__th,
.structure-editor-table[b-okgwbdqw6n]  .mud-table__td {
    padding-inline: var(--spacing-16);
}

.structure-editor-unit[b-okgwbdqw6n] {
    white-space: nowrap;
}
/* /Pages/Templates/TemplateDetailPage.razor.rz.scp.css */
/* Detail page-specific structure (shared header/body live in main-page.css). MUD tokens only. */

/* Rollback / deadline modal picker: stack the numeric inputs with consistent spacing. */
.template-period-picker[b-u6cr7vfqfc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* MW-556: section heading under the page header (UI-SPEC §5: heading-h4, section gap 40). */
.template-detail__section[b-u6cr7vfqfc] {
    margin-block: var(--spacing-40) var(--spacing-16);
}

.template-detail__tags[b-u6cr7vfqfc] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
}

.template-detail__stack[b-u6cr7vfqfc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.template-detail__muted[b-u6cr7vfqfc] {
    color: var(--color-text-base-secondary);
}

/* MW-556: at 1280 px the seven-column history measured 825 px in an 817 px column. Same remedy as the register
   (TemplatesPage.razor.css, the /drafts precedent): headers wrap between words, 16 px cell gutter here only. */
.template-history[b-u6cr7vfqfc]  .mud-table__th {
    white-space: normal;
}

.template-history[b-u6cr7vfqfc]  .mud-table__th,
.template-history[b-u6cr7vfqfc]  .mud-table__td {
    padding-inline: var(--spacing-16);
}
/* /Pages/Templates/TemplateDiffPage.razor.rz.scp.css */
/* UI-SPEC §5 (MW-556 /templates patterns): the changes and the publish step as two cards — radius 12, padding 24,
   resting shadow-100 — 24 px apart; table cells 12×16, header row on the secondary surface. MUD tokens only. */
.template-diff[b-0m4vykj8s8] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

.template-diff__card[b-0m4vykj8s8] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
    min-inline-size: 0;
    overflow-x: auto;
}

.template-diff__card > h2[b-0m4vykj8s8] {
    margin: 0 0 var(--spacing-16);
}

.template-diff__card > p[b-0m4vykj8s8] {
    margin: 0 0 var(--spacing-16);
}

.diff-table[b-0m4vykj8s8] {
    width: 100%;
    border-collapse: collapse;
}

.diff-table th[b-0m4vykj8s8],
.diff-table td[b-0m4vykj8s8] {
    padding: var(--spacing-12) var(--spacing-16);
    text-align: left;
    vertical-align: top;
}

.diff-table thead th[b-0m4vykj8s8] {
    background-color: var(--color-background-base-secondary);
    color: var(--color-text-base-secondary);
    border-bottom: var(--border-width-1) solid var(--color-border-base-default);
}

.diff-row td[b-0m4vykj8s8] {
    border-bottom: var(--border-width-1) solid var(--color-border-base-default);
}

.diff-row:last-child td[b-0m4vykj8s8] {
    border-bottom: none;
}

/* Year, quarter and note side by side, the button aligned with the inputs rather than the labels. */
.diff-publish[b-0m4vykj8s8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-16);
}

.diff-publish > [data-testid="template-publish-note"][b-0m4vykj8s8] {
    flex: 2 1 20rem;
}

.diff-publish[b-0m4vykj8s8]  mud-button {
    flex: 0 0 auto;
}
/* /Pages/Templates/TemplatePreviewPage.razor.rz.scp.css */
/* MW-386/MIS-045 — the FR22.01 export bar above the rendered form.
   It had no stylesheet at all, so the controls sat flush and the button touched the period field.
   Reported from the running app.

   ::deep on every child rule, and that is load-bearing: .fod-select, .fod-textfield and <mud-button> are
   rendered by FOD's own components, so they carry THAT library's scope id and not this page's. Without
   ::deep the rules compile, ship, and match nothing — which is exactly what the first attempt did: the
   section became a flex row (that element is ours) while every sizing rule below was silently inert, so the
   period field stretched the full width.

   Tokens only, no literal fallbacks: SemanticTokenLintTests forbids a hex colour in component CSS, and it
   was right to — the first version invented --color-border-neutral-subtle and propped it up with #e0e0e0,
   which would have rendered a grey that no theme owns and that dark mode could not move. */

/* UI-SPEC §5 (MW-556 /templates patterns): the export bar and the rendered form are two cards — radius 12,
   padding 24, resting shadow-100 — 24 px apart. */
.template-preview[b-xwnn1nyh4r] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

.template-preview__export[b-xwnn1nyh4r],
.template-preview__document[b-xwnn1nyh4r] {
    background: var(--color-background-base-default);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    box-shadow: var(--drop-shadow-100);
    padding: var(--spacing-24);
    min-inline-size: 0;
}

.template-preview__export[b-xwnn1nyh4r] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;   /* labels sit above the controls; align on the inputs, not the labels */
    gap: var(--spacing-16);
}

/* Takes the whole first line: the bar is a flex row, so without this the heading would sit as one more
   item beside the pickers it is supposed to introduce. */
.template-preview__export-head[b-xwnn1nyh4r] {
    flex: 1 0 100%;
}

.template-preview__export-head h2[b-xwnn1nyh4r] {
    margin: 0 0 var(--spacing-4);
}

.template-preview__export-head p[b-xwnn1nyh4r] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

/* The pickers carry long Romanian labels ("Operatorul de servicii"), so they need real width. Basis rather
   than a fixed width, so a narrow window wraps the bar instead of overflowing the page. */
.template-preview__export[b-xwnn1nyh4r]  .fod-select {
    flex: 1 1 18rem;
    min-width: 12rem;
    max-width: 26rem;
}

/* The period is short and fixed-format — it must not grow to fill the row. */
.template-preview__export[b-xwnn1nyh4r]  .fod-textfield {
    flex: 0 0 14rem;
    min-width: 10rem;
}

/* MW-600 (F04): the three export buttons are one item of the bar and never split across rows — "Export PDF"
   wrapped onto a row of its own. The group as a whole may still move to the next row on a narrow window. */
.template-preview__export-actions[b-xwnn1nyh4r] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--spacing-8);
}

/* The button aligns with the inputs, never stretches, and keeps clear of the field beside it. */
.template-preview__export[b-xwnn1nyh4r]  mud-button {
    flex: 0 0 auto;
    margin-block-end: var(--spacing-4);
}

/* A refusal is a blocking message: it takes the full row under the controls rather than squeezing in
   beside them, so a two-line explanation stays readable. */
.template-preview__export[b-xwnn1nyh4r]  .fod-inline-message,
.template-preview__export[b-xwnn1nyh4r]  mud-inline-message {
    flex: 1 0 100%;
}

/* MW-600 (AC3): the demo-data switch takes a line of its own under the pickers, and the tag naming the figures as
   demo data sits above the form it qualifies. */
.template-preview__export-demo[b-xwnn1nyh4r] {
    flex: 1 0 100%;
}

.template-preview__demo-tag[b-xwnn1nyh4r] {
    margin: 0 0 var(--spacing-16);
}
/* /Pages/Templates/TemplatesPage.razor.rz.scp.css */
/* MW-556 (UI-08) — the /templates register. At 1440 px the old table measured 1103 px in a 977 px column:
   the "Deschide" action sat clipped in the scroll viewport and "Denumire" squeezed to 134 px, four lines a row.
   The code now rides under the name instead of in a column of its own, and the cell gutter drops to 16 px on
   this register only (the /drafts precedent, MyDraftsPage.razor.css); MudTable's own spec is untouched. */

.templates-search[b-b30owl10vk] {
    flex: 1 1 320px;
    min-inline-size: 0;
}

.templates-table[b-b30owl10vk]  .mud-table__th {
    white-space: normal;
}

.templates-table[b-b30owl10vk]  .mud-table__th,
.templates-table[b-b30owl10vk]  .mud-table__td {
    padding-inline: var(--spacing-16);
}

/* UI-SPEC §1.3: sticky header + sticky first column. A sticky element sticks to its nearest scroll container, and
   MudTable's viewport is one (overflow-x: auto) — so `top: 72px` there pushed the header DOWN over the first row
   instead of pinning it under the shell's 72 px action strip. Where the register fits the column (≥ 1248 px, the
   full sidebar's breakpoint) the viewport stops being a scroll container and the header sticks to the page;
   below it the table scrolls sideways and the name column is the one that stays. */
@media (min-width: 1248px) {
    .templates-table[b-b30owl10vk]  .mud-table__viewport {
        overflow: visible;
    }

    .templates-table[b-b30owl10vk]  thead th {
        position: sticky;
        top: 72px;
        z-index: 2;
        background: var(--color-background-base-default);
    }
}

@media (max-width: 1247.98px) {
    .templates-table[b-b30owl10vk]  tbody td:first-child,
    .templates-table[b-b30owl10vk]  thead th:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        background: var(--color-background-base-default);
    }

    .templates-table[b-b30owl10vk]  .mud-table--zebra tbody tr:nth-child(even) td:first-child {
        background: var(--color-background-base-secondary);
    }
}

.templates-table__name[b-b30owl10vk],
.templates-table__stack[b-b30owl10vk] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.templates-table__name[b-b30owl10vk] {
    min-inline-size: 180px;
}

/* The version line never breaks ("v1 · 4 versiuni"); the period under it may. */
.templates-table__stack > :first-child[b-b30owl10vk],
.templates-table__code[b-b30owl10vk] {
    white-space: nowrap;
}

.templates-table__code[b-b30owl10vk],
.templates-table__muted[b-b30owl10vk] {
    color: var(--color-text-base-secondary);
}

.templates-sr-only[b-b30owl10vk] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Pages/Terms/TermsEditPage.razor.rz.scp.css */
/* MIS-062 — Terms admin page: page-specific bits only. Header/body/action-row spacing comes from the
   shared `.mud-page__*` main-page pattern (wwwroot/css/main-page.css). */

/* The rich-text field stack inside a language tab. */
.terms-variant[b-tv06nnzuqg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* Caption for the Markdown body — mirrors a MUD field label so it reads with the editor. */
.terms-variant-label[b-tv06nnzuqg] {
    font-size: var(--font-size-14);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-base-secondary);
    margin-bottom: calc(var(--spacing-16) * -1 + var(--spacing-4));
}

/* Version-history section, separated from the editor above it. */
.terms-versions[b-tv06nnzuqg] {
    margin-top: var(--spacing-32);
}

.terms-versions h2[b-tv06nnzuqg] {
    margin-bottom: var(--spacing-16);
}

/* Rendered Terms preview inside the modal. */
.terms-preview[b-tv06nnzuqg] {
    color: var(--color-text-base-default);
}
/* /Rendering/AnnexTableRenderer.razor.rz.scp.css */
/* Wide-annex grid. Semantic MUD tokens only (SemanticTokenLintTests): no hex, no --color-palette-*. */

/* MW-595 AC2: the PAGE scrolls the grid vertically; this box only scrolls sideways (overflow-y: hidden with no
   height cap never clips, the box grows with the table). It is still the scroll container of every sticky cell,
   so the pinned code/label columns work and a sticky thead could never reach the page — the column header that
   follows the page is the .annex-head overlay below, kept in step by attachGrid (annex-grid-caret-interop.js). */
.annex-scroll[b-za5kp0o1p4] {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

.annex-scroll:focus-visible[b-za5kp0o1p4] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: calc(-1 * var(--border-width-2));
}

.annex-table[b-za5kp0o1p4] {
    border-collapse: collapse;
    width: 100%;
}

/* MW-595 AC2: the visible title sits above the grid, outside the scroller, so the scroller's content starts with the
   real thead the pinned .annex-head clone overlays. The <caption> stays as the table's accessible name, visually
   hidden (mis-visually-hidden, app.css). */
.annex-title[b-za5kp0o1p4] {
    margin: 0;
    padding: 8px 0;
    color: var(--color-text-base-default);
}

/* Its own stacking context, so the pinned header (z-index 3 inside it) can never paint over the shell's top bar or
   the editor's tabs row (both z-index 1) on any page that hosts the grid. */
.annex-grid[b-za5kp0o1p4] {
    isolation: isolate;
}

/* The pinned column header: empty in the markup; attachGrid fills it with a clone of the real thead and sets the
   three custom properties. Its negative margin lays it over the real thead at rest, its height keeps it from
   hanging past the grid's end. Without JS (first paint, bUnit) the height is 0 and the real thead shows. */
.annex-head[b-za5kp0o1p4] {
    position: sticky;
    top: var(--annex-sticky-top, 0px);
    z-index: 3;
    height: var(--annex-head-h, 0px);
    margin-bottom: calc(-1 * var(--annex-head-h, 0px));
    overflow: hidden;
    pointer-events: none;
}

.annex-table th[b-za5kp0o1p4],
.annex-table td[b-za5kp0o1p4] {
    border: var(--border-width-0-5) solid var(--color-border-base-default);
    padding: 6px 12px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.annex-table thead th[b-za5kp0o1p4] {
    background: var(--color-background-base-tertiary);
    color: var(--color-text-base-default);
}

/* MW-595 AC1: labels and column headers wrap; the code, unit and figures do not. One element more specific than the
   nowrap rule above, which used to win over a bare .annex-indicator and kept every label on one 721 px line. Unwrapped,
   the long period headers ("Perioada corespunzătoare a anului precedent…") also set the value columns' width. */
.annex-table td.annex-indicator[b-za5kp0o1p4],
.annex-table thead th[b-za5kp0o1p4] {
    white-space: normal;
}

/* Opaque header: with border-collapse: collapse the <thead>/<tr> boxes are transparent by default, so the 1px
   collapsed-border seam between two header rows would let body rows show through the pinned .annex-head clone.
   Painting thead AND every header row/cell closes those gaps. */
.annex-table thead[b-za5kp0o1p4],
.annex-table thead tr[b-za5kp0o1p4] {
    background: var(--color-background-base-tertiary);
}

.annex-group-th[b-za5kp0o1p4] {
    text-align: center;
}

/* MW-595 AC1/AC3: the code AND the label stay pinned while a wide annex scrolls sideways (F11 #1: with only the code
   pinned, the label slid under it). The code column has a fixed width so the label knows where to pin without JS;
   attachGrid (annex-grid-caret-interop.js) measures the real width into --annex-label-left. Sticky cells need an
   opaque surface: these single-class rules paint the data rows, and the heading/parent rules below (one element
   more specific) repaint them. A collapsed border does not travel with a sticky cell, so the label column's right
   edge is an inset shadow. Neither pinned cell paints the device pixel on their shared edge (at rest the table's own
   border shows there); scrolled, the unit text passing beneath showed through it as a tick on every row. The label
   therefore pins one pixel over the code cell: its unpainted edge pixel lands on the code's opaque background. */
.annex-rowlabel[b-za5kp0o1p4],
.annex-meta-th--code[b-za5kp0o1p4] {
    position: sticky;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 5rem;
    min-width: 5rem;
}

.annex-indicator[b-za5kp0o1p4],
.annex-meta-th--label[b-za5kp0o1p4] {
    position: sticky;
    left: calc(var(--annex-label-left, 5rem) - var(--border-width-1));
    z-index: 1;
    min-width: 16rem;
    box-shadow: inset calc(-1 * var(--border-width-1)) 0 0 var(--color-border-base-secondary);
}

.annex-meta-th--code[b-za5kp0o1p4],
.annex-meta-th--label[b-za5kp0o1p4] {
    z-index: 2;
}

.annex-rowlabel[b-za5kp0o1p4] {
    background: var(--color-background-base-default);
    color: var(--color-text-base-default);
}

.annex-indicator[b-za5kp0o1p4] {
    background: var(--color-background-base-default);
    color: var(--color-text-base-secondary);
}

@media (max-width: 37.5rem) {
    .annex-indicator[b-za5kp0o1p4],
    .annex-meta-th--label[b-za5kp0o1p4] {
        min-width: 10rem;
    }
}

/* MW-595 AC4: the paper form's hierarchy (AnnexRowHierarchy, data-level on the row). Only the label moves — one
   --spacing-16 step per level on top of the cell's own 12px padding (.annex-table td above); the code and the
   value cells stay aligned. Deeper rows are clamped to level 5 in the markup. */
.annex-row[data-level="1"] .annex-indicator[b-za5kp0o1p4] {
    padding-left: calc(12px + var(--spacing-16));
}

.annex-row[data-level="2"] .annex-indicator[b-za5kp0o1p4] {
    padding-left: calc(12px + 2 * var(--spacing-16));
}

.annex-row[data-level="3"] .annex-indicator[b-za5kp0o1p4] {
    padding-left: calc(12px + 3 * var(--spacing-16));
}

.annex-row[data-level="4"] .annex-indicator[b-za5kp0o1p4] {
    padding-left: calc(12px + 4 * var(--spacing-16));
}

.annex-row[data-level="5"] .annex-indicator[b-za5kp0o1p4] {
    padding-left: calc(12px + 5 * var(--spacing-16));
}

/* MW-595 AC1: value columns are compact and fixed, so the label column takes whatever width is left. 9rem holds
   "1 234 567,8" plus the unit suffix inside FodInput's Small box; the leaf headers wrap to the same width. */
.annex-cell[b-za5kp0o1p4],
.annex-col-th[b-za5kp0o1p4] {
    width: 9rem;
    min-width: 9rem;
}

.annex-cell[b-za5kp0o1p4] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-base-secondary);
}

/* MW-595 AC5: the typed number sits right-aligned in its box like every other figure in the column. The native
   <input> is FodInput's, rendered without this component's b-* scope attribute, so only a ::deep selector reaches it.
   AC1: width 0 drops the input's intrinsic size=20 width (~180 px), which kept a value column from ever being
   narrower; it still grows to fill its flex wrapper. */
.annex-cell[b-za5kp0o1p4]  .fod-input-control {
    width: 0;
    min-width: 0;
    flex: 1 1 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The decimal hint ("0,0") only while the cell has focus: beside the unit suffix an empty cell otherwise read
   "0,0 mii m³", an invented zero. */
.annex-cell[b-za5kp0o1p4]  .fod-input-control:not(:focus)::placeholder {
    color: transparent;
}

/* Derived by the system, never typed — visually distinct, non-editable.
   RT-LIFE-5: --color-text-base-tertiary-aa, not --color-text-base-tertiary — the muted role fails AA on
   these two tinted surfaces (4.23:1 and 4.08:1), and these cells carry the annex's computed totals. See
   local-tokens.css for the token and AnnexTableRendererContrastTests for the measured pairs. */
.cell-computed[b-za5kp0o1p4] {
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-tertiary-aa);
}

.cell-blocked[b-za5kp0o1p4] {
    background: var(--color-background-base-tertiary);
    color: var(--color-text-base-tertiary-aa);
    text-align: center;
}

.annex-section-th[b-za5kp0o1p4] {
    text-align: left;
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-default);
}

.annex-row--heading th[b-za5kp0o1p4],
.annex-row--heading td[b-za5kp0o1p4] {
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-default);
}

/* MW-595 AC4: parent rows (the sum_children targets) read as section headers, like the heading rows above. Their
   figures are the engine's read-only totals, so those carry the weight; a blocked cell on a parent row (Anexa 4/5's
   account column) keeps the blocked look. */
.annex-row--parent th[b-za5kp0o1p4],
.annex-row--parent td:not(.cell-blocked)[b-za5kp0o1p4] {
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-default);
}

.annex-row--heading .annex-indicator[b-za5kp0o1p4],
.annex-row--parent .annex-indicator[b-za5kp0o1p4] {
    font-weight: 600;
}

.annex-row--parent .cell-computed[b-za5kp0o1p4] {
    color: var(--color-text-base-default);
    font-weight: 600;
}

/* "Total calculat automat" under a parent row's label: muted, in the AA-corrected tertiary role on the same secondary
   surface AnnexTableRendererContrastTests measures for the computed cells. */
.annex-total-hint[b-za5kp0o1p4] {
    display: block;
    font-weight: 400;
    color: var(--color-text-base-tertiary-aa);
}

/* MIS-065 AC11: the field-level validation message, rendered inside its own cell rather than as a
   page-level banner — a 46-column annex has no usable "the form has errors" summary. Tokens are the
   design system's own danger/warning set (same ones MudInputSearch's inline message uses), so the grid
   agrees with every other validated input in the app. */
.annex-cell-message[b-za5kp0o1p4] {
    display: block;
    margin-top: 0.125rem;
    text-align: left;
    white-space: normal;   /* wraps inside the fixed value column instead of widening it */
    font-size: 0.75rem;
    line-height: 1.2;
}

/* MIS-077 AC4: --color-text-danger-default's dark-theme value measures ~4.44:1 against the dark
   background by the WCAG relative-luminance formula — a hair under the 4.5:1 small-text AA floor (this
   text is 0.75rem). --color-text-danger-default-aa (local-tokens.css) is the same token corrected
   per-theme for exactly this kind of dense/small text, without changing the base token other consumers
   (MudInputSearch) rely on. */
.annex-cell-message--error[b-za5kp0o1p4] {
    color: var(--color-text-danger-default-aa);
}

.annex-cell-message--warning[b-za5kp0o1p4] {
    color: var(--color-text-warning-default);
}

/* RT-LIFE-8: the table-level parse failure (role="alert", emitted above the grid when the definition's
   cell payload cannot be read). It had no rule at all and rendered in ordinary body colour, so only the
   wording marked it as a failure.
   Same danger treatment .annex-cell-message--error gets, and deliberately the SAME token rather than a
   tinted banner: the dark sheet keeps --color-background-danger-secondary at its light-theme value, so
   painting danger text onto it is the very pair RT-LIFE-6 measured at 2:1. Left rule + weight carry the
   severity for anyone who cannot resolve it from colour (WCAG 1.4.1); the surface stays the page's own. */
.annex-parse-error[b-za5kp0o1p4] {
    margin: 0 0 var(--spacing-8);
    padding-left: var(--spacing-8);
    border-left: var(--border-width-2) solid var(--color-border-danger-default);
    color: var(--color-text-danger-default-aa);
    font-weight: 600;
}

/* MW-596: the paste summary's live region stays in the DOM; it takes no room until a paste fills it. */
.annex-paste-status[b-za5kp0o1p4] {
    margin: 0 0 var(--spacing-8);
}

.annex-paste-status:empty[b-za5kp0o1p4] {
    display: none;
}

/* The label carries the severity for anyone who cannot resolve it from colour alone (WCAG 1.4.1) —
   visible text, not an aria-only string, because the message sits in a dense numeric grid. */
.annex-cell-message-label[b-za5kp0o1p4] {
    display: block;
    font-weight: 600;
}

/* List-cell <select>/<input list> render as plain native controls (see AnnexTableRenderer.razor
   ListCellEditor comment — FodSelect's Clearable mode was reverted, keyboard-nav needs light-DOM
   <option>s). Dimensions match FodInput's own Small-size wrapper exactly (fod-input-wrapper--sm in
   Egov.FOD.UIComponents' FodInput.razor.rz.scp.css: height 32px, padding 0 8px, 14px text; plus the wrapper's
   8px radius and 1px border) — the numeric cells right next to these ARE FodInput at InputSize Small (MW-595 AC5),
   so anything looser reads as two different controls. */
.annex-cell-input[b-za5kp0o1p4] {
    box-sizing: border-box;
    width: 100%;
    min-width: 8rem;
    height: var(--spacing-32, 32px);
    padding: 0 var(--spacing-8, 8px);
    border: var(--border-width-1, 1px) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8, 8px);
    background: var(--color-background-base-default);
    color: var(--color-text-base-default);
    font: inherit;
    font-size: var(--font-size-14, 14px);
}

select.annex-cell-input[b-za5kp0o1p4] {
    appearance: none;
    padding-right: 24px;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-base-secondary) 50%),
        linear-gradient(135deg, var(--color-text-base-secondary) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.annex-cell-input:focus-visible[b-za5kp0o1p4] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: -1px;
}

/* An invalid cell's own border, so the offending input is findable without reading every message. The list-cell
   <select>/<input list> carry the class themselves. The numeric cell is FodInput's: its native <input> has no b-*
   scope attribute, so only a ::deep selector reaches it (the former `.annex-cell input[aria-invalid]` never matched),
   and it is borderless — the visible box is FodInput's wrapper. FodInput's Error already marks that wrapper
   fod-input-wrapper--destructive in the FOD palette (--red-500); this gives it the list cells' semantic danger token,
   so both kinds of cell read alike in either theme. */
.annex-cell-input[aria-invalid="true"][b-za5kp0o1p4],
.annex-cell[b-za5kp0o1p4]  .fod-input-wrapper:has(> input[aria-invalid="true"]) {
    border-color: var(--color-border-danger-default);
}

/* MW-597 AC4: the row's "?" — a small round disclosure button after the label; the explanation opens under it. */
.annex-row-help-toggle[b-za5kp0o1p4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: var(--spacing-4);
    padding: 0;
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: 50%;
    background: var(--color-background-base-default);
    color: var(--color-text-base-default);
    vertical-align: middle;
    cursor: pointer;
}

.annex-row-help-toggle[aria-expanded="true"][b-za5kp0o1p4] {
    border-color: var(--color-border-focus);
}

.annex-row-help-toggle:focus-visible[b-za5kp0o1p4] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 1px;
}

.annex-row-help[b-za5kp0o1p4] {
    display: block;
    margin-top: 0.25rem;
    font-weight: 400;
    color: var(--color-text-base-secondary);
}

.annex-row-help[hidden][b-za5kp0o1p4] {
    display: none;
}

/* MW-597 AC5: the table's progress line under its title — the count, the open-rows filter and the next-empty jump. It
   wraps on a narrow editor panel rather than pushing the grid sideways. */
.annex-progress[b-za5kp0o1p4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8) var(--spacing-16);
    padding: 0 0 8px;
}

.annex-progress-count[b-za5kp0o1p4] {
    margin: 0;
    color: var(--color-text-base-secondary);
    font-variant-numeric: tabular-nums;
}

/* MW-597 AC1/AC2: where the previous-year column comes from, a prefilled value's "corectează" link-button under it,
   and the tag a corrected value carries. */
.annex-previous-year-note[b-za5kp0o1p4] {
    margin: 0 0 8px;
    color: var(--color-text-base-secondary);
}

.annex-cell-correct[b-za5kp0o1p4] {
    display: block;
    margin-top: 0.125rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-brand-default);
    text-decoration: underline;
    cursor: pointer;
}

.annex-cell-correct:focus-visible[b-za5kp0o1p4] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 1px;
}

.annex-cell-corrected[b-za5kp0o1p4] {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-base-secondary);
}
/* /Rendering/CuatmLocalityPicker.razor.rz.scp.css */
/* The box is a NATIVE input (a datalist combobox has no design-system equivalent — see the component's own
   header), so it carries no DS styling of its own and used to render as the browser default beside the
   Fod fields above it. These are the same tokens AnnexTableRenderer's native cell input uses, which is
   what makes the two native inputs in the app agree with the DS text field rather than with each other. */
.cuatm-locality-picker__label[b-ptrixxafz7] {
    display: block;
    margin-bottom: var(--spacing-4, 4px);
}

.cuatm-locality-picker__input[b-ptrixxafz7] {
    box-sizing: border-box;
    width: 100%;
    height: var(--spacing-48, 48px);
    padding: 0 var(--spacing-16, 16px);
    border: var(--border-width-1, 1px) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8, 8px);
    background: var(--color-background-base-default);
    color: var(--color-text-base-default);
    font: inherit;
}

.cuatm-locality-picker__input:focus-visible[b-ptrixxafz7] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: -1px;
}

/* A refused entry carries its own border, so the field is findable without reading the message. */
.cuatm-locality-picker__input[aria-invalid="true"][b-ptrixxafz7] {
    border-color: var(--color-border-danger-default);
}

/* Read-only is the catalog-unavailable state, not a disabled control: the stored code stays readable and
   selectable, and the muted surface says it cannot be edited. */
.cuatm-locality-picker__input[readonly][b-ptrixxafz7] {
    background: var(--color-background-base-secondary);
    color: var(--color-text-base-secondary);
}

/* The catalog-unavailable notice is not the operator's mistake — muted body text, not danger. */
.cuatm-locality-picker__hint[b-ptrixxafz7] {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-text-base-secondary);
}

/* The refusal message. Same danger token and dense-text size as AnnexTableRenderer's inline cell message;
   --color-text-danger-default-aa is the per-theme AA-corrected variant required at this size. */
.cuatm-locality-picker__error[b-ptrixxafz7] {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-text-danger-default-aa);
}
/* /Rendering/FisaRenderer.razor.rz.scp.css */
/* Foaie-titlu metadata sheet. Semantic MUD tokens only (SemanticTokenLintTests): no hex, no --color-palette-*. */

.fisa-fields[b-anhwwn1es2] {
    display: grid;
    gap: var(--border-width-0-5);          /* hairline gap collapses into the row rules below */
    margin: 0 0 var(--spacing-24);
    padding: var(--spacing-4) var(--spacing-20);
    border: var(--border-width-0-5) solid var(--color-border-base-default);
    border-radius: var(--border-radius-12);
    background: var(--color-background-base-default);
    container-type: inline-size;
}

/* MW-592 (AC2/AC3): a 22rem label track left the inputs 45 px wide (the date 0) in the ~490 px sheet the editor
   leaves at 1280 px. The value keeps 16rem; a sheet under 27rem (10 + 1 + 16) puts each label above its value. */
.fisa-field[b-anhwwn1es2] {
    display: grid;
    grid-template-columns: minmax(10rem, 22rem) minmax(16rem, 1fr);
    align-items: baseline;
    gap: var(--spacing-16);
    padding: var(--spacing-8) 0;
    border-bottom: var(--border-width-0-5) solid var(--color-border-base-subtle);
}

.fisa-field:last-child[b-anhwwn1es2] {
    border-bottom: 0;
}

.fisa-label[b-anhwwn1es2] {
    margin: 0;
    color: var(--color-text-base-secondary);
}

.fisa-value[b-anhwwn1es2] {
    margin: 0;
    min-width: 0;
    color: var(--color-text-base-default);
}

/* A read-only value, or empty space where none is held. MW-600 AC3: no paper fill-in rule — the preview is
   what the export produces, and the export draws none. The height keeps an empty line as tall as a filled one. */
.fisa-slot[b-anhwwn1es2],
.fisa-prefill[b-anhwwn1es2] {
    display: block;
    min-height: 1.25rem;
}

/* UI-03b/G9: a value the system already knows. Weighted so the title page reads as answered rather than
   as a form waiting for input. Not a disabled input — there is nothing to type here. */
.fisa-prefill[b-anhwwn1es2] {
    font-weight: 600;
    color: var(--color-text-base-default);
}

.fisa-flag-option[b-anhwwn1es2] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-6);
    margin-right: var(--spacing-16);
    color: var(--color-text-base-default);
}

.fisa-flag-box[b-anhwwn1es2] {
    display: inline-block;
    width: var(--icon-size-16);
    height: var(--icon-size-16);
    border: var(--border-width-1) solid var(--color-border-base-strong);
    border-radius: var(--border-radius-4);
    background: var(--color-background-base-default);
}

/* MW-517: a line's own validation message sits under its control, like an annex cell's. */
.fisa-field-message[b-anhwwn1es2] {
    display: block;
    margin-top: var(--spacing-4);
}

/* MW-592 (F10, AC3): an editable line is as wide as what it holds, left-aligned in the value column — a phone
   number or a date is short, an e-mail address (~30 characters) somewhat longer, while the names and the
   licensed activity are not capped. Sized on .fisa-control, this component's own wrapper: the FOD elements
   inside carry no FisaRenderer scope attribute, so a rule written against them would never apply. */
.fisa-field[data-field-type="Phone"] .fisa-control[b-anhwwn1es2],
.fisa-field[data-field-type="Period"] .fisa-control[b-anhwwn1es2] {
    max-width: 14rem;
}

.fisa-field[data-field-type="Email"] .fisa-control[b-anhwwn1es2] {
    max-width: 24rem;
}

@container (max-width: 27rem) {
    .fisa-field[b-anhwwn1es2] {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
}
/* /Rendering/SraAddressPicker.razor.rz.scp.css */
/* Both boxes here are NATIVE inputs (a cadastral key and a free-text address have no design-system
   equivalent — same situation CuatmLocalityPicker documents), so they carry no DS styling of their own
   and used to render as browser defaults inside foaie-titlu's ruled metadata sheet. These are the same
   tokens CuatmLocalityPicker and AnnexTableRenderer's native cell input use, which is what makes every
   native input in the app agree with the DS text field rather than each with its own browser.
   Semantic MUD tokens only (SemanticTokenLintTests): no hex, no --color-palette-*. */
.sra-address-picker[b-jky716zj15] {
    display: grid;
    gap: var(--spacing-4);
    min-width: 0;
}

/* min-width:0 is load-bearing, not defensive: as a GRID ITEM this row's automatic minimum size is its
   min-content, into which the cadastral input contributes its intrinsic ~20-character width — the row
   then floors ~58px wider than the Fisa value column and scrolls the whole title sheet sideways.
   Measured on the running app; the same applies to the address input below, also a grid item. */
.sra-picker-lookup-row[b-jky716zj15] {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    min-width: 0;
}

.sra-picker-cadastral[b-jky716zj15],
.fisa-address-input[b-jky716zj15] {
    box-sizing: border-box;
    height: var(--spacing-48);
    padding: 0 var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-default);
    color: var(--color-text-base-default);
    font: inherit;
}

/* A cadastral number is a fixed-width key, not prose — matched to the short-value fields the sheet
   already caps (Idno/Period/Number) so the lookup row does not read as a second full-width address. */
.sra-picker-cadastral[b-jky716zj15] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 14rem;
}

.fisa-address-input[b-jky716zj15] {
    width: 100%;
    min-width: 0;
}

.sra-picker-cadastral:focus-visible[b-jky716zj15],
.fisa-address-input:focus-visible[b-jky716zj15] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: -1px;
}

/* The lookup label is two words in ro and must not wrap mid-phrase when the sheet narrows; the button
   itself is the global .mud-button so its fill, hover and disabled states stay in one place. */
.sra-picker-lookup[b-jky716zj15] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Lookup outcome. None of the three is an error — an outage or a missing record still leaves manual
   entry open (NFR76) — so no danger token appears here: confirmed is positive, unavailable is a
   warning, and no-match is plain secondary text. Dense size matches CuatmLocalityPicker's hint. */
.sra-picker-status[b-jky716zj15] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-text-base-secondary);
}

.sra-picker-status[data-outcome="Found"][b-jky716zj15] {
    color: var(--color-text-positive-default);
}

.sra-picker-status[data-outcome="RegistryUnavailable"][b-jky716zj15] {
    color: var(--color-text-warning-default);
}

@media (max-width: 40rem) {
    .sra-picker-lookup-row[b-jky716zj15] {
        flex-wrap: wrap;
    }

    .sra-picker-cadastral[b-jky716zj15] {
        flex: 1 1 100%;
    }
}
/* /Rendering/SrpIdentityPicker.razor.rz.scp.css */
/* Native inputs, same reason as SraAddressPicker directly above it in the sheet: an IDNP key and a
   free-text name have no design-system equivalent, so they carry no DS styling of their own and
   rendered as browser defaults inside foaie-titlu's ruled metadata sheet. Deliberately the same tokens
   and geometry as the SRA picker — the two sit in adjacent rows of the SAME form, so any divergence
   between them reads as a bug rather than a distinction.
   Semantic MUD tokens only (SemanticTokenLintTests): no hex, no --color-palette-*. */
.srp-identity-picker[b-skm1zv9o5e] {
    display: grid;
    gap: var(--spacing-4);
    min-width: 0;
}

/* min-width:0 is load-bearing — see the same comment in SraAddressPicker.razor.css: as a grid item this
   row's automatic minimum is its min-content, which the IDNP input's intrinsic width inflates until the
   title sheet scrolls sideways. */
.srp-picker-lookup-row[b-skm1zv9o5e] {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    min-width: 0;
}

.srp-picker-idnp[b-skm1zv9o5e],
.fisa-conducator-input[b-skm1zv9o5e] {
    box-sizing: border-box;
    height: var(--spacing-48);
    padding: 0 var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-default);
    border-radius: var(--border-radius-8);
    background: var(--color-background-base-default);
    color: var(--color-text-base-default);
    font: inherit;
}

/* An IDNP is a fixed 13-digit key — same cap as the SRA picker's cadastral box so the two lookup rows
   line up down the sheet instead of each sizing to its own placeholder. */
.srp-picker-idnp[b-skm1zv9o5e] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 14rem;
}

.fisa-conducator-input[b-skm1zv9o5e] {
    width: 100%;
    min-width: 0;
}

.srp-picker-idnp:focus-visible[b-skm1zv9o5e],
.fisa-conducator-input:focus-visible[b-skm1zv9o5e] {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: -1px;
}

.srp-picker-lookup[b-skm1zv9o5e] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Lookup outcome. No match is not the operator's mistake — manual entry stays open (NFR75), same
   degradation rule as the SRA picker — so plain secondary text, never a danger token. */
.srp-picker-status[b-skm1zv9o5e] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-text-base-secondary);
}

.srp-picker-status[data-outcome="found"][b-skm1zv9o5e] {
    color: var(--color-text-positive-default);
}

@media (max-width: 40rem) {
    .srp-picker-lookup-row[b-skm1zv9o5e] {
        flex-wrap: wrap;
    }

    .srp-picker-idnp[b-skm1zv9o5e] {
        flex: 1 1 100%;
    }
}
/* /Shell/ShellHeaderActions.razor.rz.scp.css */
/* MIS-021 + ADR-016 + F1 shell (Figma) — the content column's banner: greeting + role chip at the start, then the
   global search, the bell and the help button at the end of .app-shell__topbar. */
.shell-auth[b-pa2des1o2j] {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
}

/* F1 shell — "Bună ziua, {Name}!" and the role chip on one line. margin-right: auto keeps the controls at the row's
   end; min-width: 0 lets a long name truncate instead of pushing the row past the column (NFR15). */
.shell-greeting[b-pa2des1o2j] {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: var(--spacing-12);
    min-width: 0;
    margin-right: auto;
}

.shell-greeting__text[b-pa2des1o2j] {
    margin: var(--spacing-0);
    overflow: hidden;
    color: var(--color-text-base-default);
    font-size: var(--font-size-18);
    line-height: var(--line-height-24);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-greeting__role[b-pa2des1o2j] {
    flex: none;
}

/* UI-02 / ADR-016 — the 40x40 help icon-button. ::deep because the button is the design system's own
   element, not this component's markup, so CSS isolation never stamps its attribute on it. */
.shell-auth[b-pa2des1o2j]  .shell-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-40);
    height: var(--spacing-40);
    padding: var(--spacing-0);
}

/* R5-06 (FR06.04) — the global search sits after the greeting, ahead of the bell and help. Shrinks before
   anything else does. min-width: 0 lets it go below its content (NFR15/R5-10). The input's placeholder truncates
   at its end. */
.shell-search[b-pa2des1o2j] {
    flex: 0 1 400px;
    min-width: 0;
}

.shell-search[b-pa2des1o2j]  .mud-input__control {
    text-overflow: ellipsis;
}

/* NFR15 (R5-10): below 768 the banner wraps (AppShellLayout.razor.css) — the greeting takes its own line and the
   search the rest of the next one, beside the bell and help. */
@media (max-width: 767px) {
    .shell-search[b-pa2des1o2j] {
        flex-grow: 1;
    }

    .shell-greeting[b-pa2des1o2j] {
        flex-basis: 100%;
        padding-top: var(--spacing-12);
    }
}
/* /Shell/ShellNotificationsBell.razor.rz.scp.css */
/* MW-496 + ADR-016 — the 40x40 notifications icon-button with its unread count at the top-right corner. The
   wrapper is this component's own element, so it carries the positioning context; the button is the design
   system's, reached with ::deep (the help button's rule in ShellHeaderActions.razor.css, same reason). */
.shell-bell[b-yqf3k7ym9t] {
    position: relative;
    display: inline-flex;
}

.shell-bell[b-yqf3k7ym9t]  .shell-bell__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-40);
    height: var(--spacing-40);
    padding: var(--spacing-0);
}

/* Over the button, not inside its 40x40: the count must not shrink the target or push the icon off centre.
   pointer-events: none so a click on the badge is a click on the button underneath. */
.shell-bell__count[b-yqf3k7ym9t] {
    position: absolute;
    top: var(--spacing-0);
    right: var(--spacing-0);
    display: inline-flex;
    pointer-events: none;
}
/* /Shell/ShellUserCard.razor.rz.scp.css */
/* F1 shell (Figma) — the rail's user card under the brand: a full-width row on surface-secondary holding the
   account menu's trigger. Semantic MUD tokens only (MIS-018 lint). */
.shell-user-card[b-w3ydnmdh2h] {
    padding: var(--spacing-0) var(--spacing-16) var(--spacing-16);
}

.shell-user-card[b-w3ydnmdh2h]  .mud-menu__trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    width: 100%;
    padding: var(--spacing-12);
    border-radius: var(--border-radius-8);
    background-color: var(--color-background-base-secondary);
    text-align: start;
}

.shell-user-card[b-w3ydnmdh2h]  .mud-menu__trigger:hover {
    background-color: var(--color-background-base-secondary-hover);
}

.shell-user-card__text[b-w3ydnmdh2h] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.shell-user-card__name[b-w3ydnmdh2h] {
    overflow: hidden;
    color: var(--color-text-base-default);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-user-card__org[b-w3ydnmdh2h] {
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-12);
    line-height: var(--line-height-16);
}

.shell-user-card__chevron[b-w3ydnmdh2h] {
    flex: none;
}

/* The open panel's own line: who the account is, above the roles. */
.shell-user-card__panel-header[b-w3ydnmdh2h] {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-8) var(--spacing-16);
}

.shell-user-card__panel-name[b-w3ydnmdh2h] {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-base-default);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The menu button's purpose, for assistive tech only — the visible text is the name and role. */
.shell-user-card__menu-label[b-w3ydnmdh2h] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* User avatar — the session carries no photo, so initials, or MUD's icon fallback without a name. Sized
   to the design system's medium avatar. */
.shell-avatar[b-w3ydnmdh2h] {
    flex: none;
    box-sizing: content-box;
    width: var(--icon-size-24);
    height: var(--icon-size-24);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-full);
    background-color: var(--color-background-brand-secondary);
    color: var(--color-text-brand-default);
}

/* Same circle; the letters take the design system's avatar-initials type at medium size. */
.shell-avatar--initials[b-w3ydnmdh2h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--avatar-initials-font-family);
    font-weight: var(--avatar-initials-font-weight);
    font-size: var(--avatar-initials-font-size-md);
    line-height: var(--avatar-initials-line-height-md);
}