/* MW-472/MIS-105 — the operator dashboard's widget family. MUD tokens only (spacing/radius/border/color
   roles), like every other MISWSSP.Web surface.

   WHY THIS IS A GLOBAL SHEET AND NOT SCOPED CSS. Blazor CSS isolation stamps its `b-<hash>` attribute on the
   markup of ONE component, so a rule in Dashboard.razor.css can only ever match Dashboard.razor's own
   elements. The frame classes below (.dashboard-slot, .dashboard-widget) are emitted by WidgetSlotView, and
   the content classes by four separate widget components — the sheet in Dashboard.razor.css had been
   describing markup it could never reach since MIS-021, which is why the slots rendered unstyled.
   These classes are one visual family used by five components, well past the rule-of-three, and isolation
   has no way to share; a global sheet is the honest home. Anything a single widget alone owns stays in that
   widget's own .razor.css. */

/* ---- the frame: a dashboard region and one widget card inside it (emitted by WidgetSlotView) ---- */

/* --spacing-24, matching the gap BETWEEN regions (.dashboard-regions) and between the grid's columns
   (.dashboard-grid). MIS-021 set 16px here while both of those are 24, so a card sat closer to the card below
   it than to the one beside it and closer than the alert region above — three values for one rhythm. One
   value, so every gap on the dashboard is the same gap. */
.dashboard-slot {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

.dashboard-slot__empty {
    padding: var(--spacing-24);
    border: var(--border-width-1) dashed var(--color-border-base-secondary);
    border-radius: var(--border-radius-12);
    color: var(--color-text-base-secondary);
    background-color: var(--color-background-base-secondary);
    text-align: center;
}

.dashboard-widget {
    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);
}

.dashboard-widget h3 {
    margin: 0 0 var(--spacing-16) 0;
}

.dashboard-widget__more {
    margin-top: var(--spacing-16);
    color: var(--color-text-base-secondary);
}

/* ---- state tiles: counts over the operator's whole set, and the widget's own filter control ---- */

.dashboard-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

.dashboard-tile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    min-width: 96px;
    padding: var(--spacing-12) var(--spacing-16);
    border: var(--border-width-1) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-8);
    background-color: var(--color-background-base-secondary);
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.dashboard-tile:hover {
    border-color: var(--color-border-brand-default);
}

/* The selected tile is marked by more than colour — aria-pressed carries it for AT, and the border weight
   carries it for a reader who cannot distinguish the accent (NFR accessibility, WCAG 1.4.1). */
.dashboard-tile--selected {
    border-color: var(--color-border-brand-default);
    border-width: var(--border-width-2);
    background-color: var(--color-background-brand-secondary);
}

.dashboard-tile__count {
    font-weight: 600;
    font-size: var(--font-size-24, 1.5rem);
    line-height: 1.2;
}

.dashboard-tile__label {
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-12, 0.75rem);
}

/* ---- the row list shared by the reports, notifications and documents widgets ---- */

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-list__item + .dashboard-list__item {
    border-top: var(--border-width-1) solid var(--color-border-base-secondary);
}

.dashboard-list__link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    width: 100%;
    padding: var(--spacing-8) 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.dashboard-list__link:hover .dashboard-list__title {
    text-decoration: underline;
}

.dashboard-list__title {
    font-weight: 500;
}

.dashboard-list__meta {
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-12, 0.75rem);
}

/* A send that never left. Colour is the emphasis, the word itself is the information. */
.dashboard-list__flag {
    margin-left: var(--spacing-8);
    color: var(--color-text-danger-default, #b3261e);
    font-weight: 600;
}

/* MW-496 (EP-505 "read/unread") — a line that arrived after the reader last marked the feed read. The word
   carries the state; weight and colour only make it findable at a glance. */
.dashboard-list__item--unread .dashboard-list__title {
    font-weight: 600;
}

.dashboard-list__new {
    margin-right: var(--spacing-8);
    color: var(--color-text-brand-default);
    font-weight: 600;
}

/* MW-496 — the card's footer: "Vezi toate" to the whole feed, then "Marchează ca citite" while anything is
   unread. One row that wraps, so the pair never pushes the card wider than its column. */
.dashboard-notifications__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-16);
    margin-top: var(--spacing-16);
}

/* ---- FR04.04 alerts, UI-02: the "Termene și restanțe" tables ------------------------------------------
   The stacked-span alert LIST that used to live here is gone: both alert regions are MudTables now
   (UI-SPEC §3.1 row 2), so .dashboard-alert* described markup nothing emits any more. What is left is the
   two rules the tables need and the design system does not carry.

   Global rather than scoped for the reason this sheet's header records: two widget components emit these
   classes and CSS isolation cannot reach across components. */

/* The qualifying sentence under a table cell's main fact ("restant cu 5 zile" under the deadline). */
.dashboard-table__note {
    display: block;
    color: var(--color-text-base-secondary);
}

/* MW-502: the identifiers under an operator's NAME — its abbreviation and its IDNO (UI-SPEC §4). Secondary
   by design: the name is what the reader reads, the fiscal code is what they quote to the registry. Emitted
   by all four ANRE widgets, so it is global for this sheet's own reason. */
.dashboard-operator__code {
    display: block;
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-12, 0.75rem);
}

/* The table's <caption> repeats the widget card's own <h3> title. It stays IN the accessibility tree — a
   data table with no caption is an unlabelled one for a screen reader — but is hidden visually, because the
   heading directly above it already says the same words. Clipped rather than display:none, which would take
   it out of the tree as well. */
.dashboard-widget .mud-table__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- KPI tiles ---- */

.dashboard-kpis {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-12);
    border-left: var(--border-width-2) solid var(--color-border-base-secondary);
    border-radius: var(--border-radius-4);
    background-color: var(--color-background-base-secondary);
}

/* A verdict is never colour alone: the figure, its unit and the cited regulation point are all on the tile,
   so the accent only emphasises what the text already says (WCAG 1.4.1). */
.dashboard-kpi--breached {
    border-left-color: var(--color-border-danger-default, #b3261e);
}

.dashboard-kpi--compliant {
    border-left-color: var(--color-border-success-default, #1b7a3e);
}

.dashboard-kpi__name {
    font-weight: 500;
}

.dashboard-kpi__value {
    font-weight: 600;
    font-size: var(--font-size-20, 1.25rem);
}

.dashboard-kpi__meta {
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-12, 0.75rem);
}

/* ---- MW-474/MIS-107: the ANRE dashboard's three lists ----------------------------------------------
   Here rather than in a .razor.css for the reason MIS-105 recorded: CSS isolation stamps its attribute on
   ONE component's own elements, and these rules are shared by four widgets. The charts themselves are
   Mud.Blazor components and bring their own scoped styles. */

.dashboard-sector-operators,
.dashboard-decisions,
.dashboard-sector-kpis {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.dashboard-sector-operator__link,
.dashboard-decision__link {
    display: flex;
    width: 100%;
    text-align: start;
    background: none;
    border: none;
    padding: var(--spacing-8);
    border-radius: var(--border-radius-4);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.dashboard-sector-operator__link {
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.dashboard-decision__link {
    flex-direction: column;
    gap: var(--spacing-4);
}

.dashboard-sector-operator__link:hover,
.dashboard-decision__link:hover {
    background-color: var(--color-background-base-secondary);
}

.dashboard-sector-operator__link:focus-visible,
.dashboard-decision__link:focus-visible {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}

.dashboard-sector-operator__count {
    font-weight: 600;
}

.dashboard-decision__meta {
    color: var(--color-text-base-secondary);
    font-size: var(--font-size-12, 0.75rem);
}

/* The KPI rows are bars with their own legends, so they need breathing room between them rather than a
   card each — a border per row would compete with the marks it surrounds. */
.dashboard-sector-kpis {
    gap: var(--spacing-16);
}

/* ---- MW-475/MIS-108: the Head's oversight widgets ---- */

/* The rows that need action, under the distribution bar. A line per obligation rather than a card each: the
   bar above already frames them, and a border per row would compete with the marks it surrounds (the rule the
   KPI rows follow). */
.dashboard-compliance-rows {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.dashboard-compliance-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-8);
    font-size: var(--font-size-12, 0.75rem);
}

.dashboard-compliance-row__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-compliance-row__period,
.dashboard-compliance-row__days {
    flex: none;
    color: var(--color-text-base-secondary);
}

.dashboard-compliance-link {
    display: inline-block;
    margin-top: var(--spacing-12);
    color: var(--color-text-brand-default);
}

.dashboard-compliance-link:focus-visible {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Sparklines need vertical room between them for the same reason the KPI bars do — each carries its own
   caption and axis, and a tight stack reads as one chart. */
.dashboard-trends {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* ---- UI-02 (UI-SPEC §3.1 row 1): the KPI tile row ------------------------------------------------------
   Here rather than in a .razor.css for the reason MIS-105 recorded: three widgets (operator / Head / ANRE)
   emit these classes, and CSS isolation stamps its attribute on ONE component's own elements. The tiles
   themselves are mis-stat-tile, which owns its surface in its own isolated sheet. */

/* The stats row is a STRIP, not a card. Its tiles already carry a border, a radius and a white surface, so
   the widget frame around them would be a second border for one thing — the only place on the dashboard
   where the frame is dropped, and it is dropped by REGION rather than by widget so a later tile row inherits
   the same treatment. */
.dashboard-slot[data-slot="stats"] .dashboard-widget {
    padding: 0;
    border: 0;
    background-color: transparent;
}

/* auto-fit, so the row is four tiles wide on a desktop and folds to two and then one without a breakpoint
   of its own — the tile count differs per role, and a fixed column count would leave a gap for whichever
   role has one tile fewer. */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-24);
}

/* ---- MW-526 (UC19 · FR19.01): the four administration blocks ---------------------------------------------
   Here rather than in per-widget .razor.css files, for the reason recorded above: these four widgets sit in
   one slot and share a reading rhythm, and CSS isolation stamps its attribute on ONE component's elements,
   so a shared rule would have to be written four times to look like one thing. */

/* The catalog card is a definition list: a label the reader scans and a figure they read. Grid rather than
   a flex row so the figures line up across the three rows however long the labels get in ru. */
.dashboard-catalog {
    margin: 0;
    display: grid;
    gap: var(--spacing-12);
}

.dashboard-catalog__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--spacing-12);
}

.dashboard-catalog__row dt {
    color: var(--color-text-secondary);
}

.dashboard-catalog__row dd {
    margin: 0;
    text-align: right;
}

/* The secondary clause of a figure ("of which 7 deprecated") on its own line: it qualifies the number above
   it rather than competing with it. */
.dashboard-catalog__detail {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-desktop-body-small-size, 0.875rem);
}

.dashboard-catalog__links {
    margin-top: var(--spacing-16);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-16);
}

/* ---- MW-527: the analyst's cards -------------------------------------------------------------------------
   Here rather than in per-widget .razor.css files, for the reason recorded at the top of this sheet: five
   widgets share one reading rhythm, and CSS isolation stamps its attribute on ONE component's elements. The
   sector chart this dashboard also registers is the authority's card and keeps the rules above. */

/* Four lists, one rhythm. A row per item rather than a card each: the widget frame already surrounds them,
   and a border per row would compete with it (the rule the ANRE and Head lists follow). */
.dashboard-configs,
.dashboard-runs,
.dashboard-links,
.dashboard-recent-reports {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

/* baseline, not center: a row mixes body text with a small-text badge and a timestamp, and centring would
   float the small text off the line the name sits on. wrap, because the ru labels are the longest and a
   narrow Primary column has to fold rather than scroll. */
.dashboard-config,
.dashboard-run,
.dashboard-recent-report {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-8);
}

/* The name takes the room, and everything after it is a qualification that keeps its own width. */
.dashboard-config__name,
.dashboard-recent-report__link {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-run__status {
    font-weight: 600;
}

/* A badge carries a word, so it reads without the colour; the tint is emphasis only. */
.dashboard-config__badge,
.dashboard-run__badge {
    flex: none;
    padding: 0 var(--spacing-8);
    border-radius: var(--border-radius-4);
    color: var(--color-text-base-secondary);
    background-color: var(--color-background-base-secondary);
}

.dashboard-run__queued,
.dashboard-run__meta,
.dashboard-recent-report__state,
.dashboard-recent-report__at {
    flex: none;
    color: var(--color-text-base-secondary);
}

/* The one-sentence answer to the queue button, under the list it was pressed in. */
.dashboard-config__notice {
    margin: var(--spacing-12) 0 0;
    color: var(--color-text-base-secondary);
}

/* The way through to the full screen, on every card that summarises one — the treatment the compliance card
   established, so a reader recognises it as the same affordance wherever it appears. */
.dashboard-freshness__link,
.dashboard-config__link,
.dashboard-run__link,
.dashboard-recent-report__all {
    display: inline-block;
    margin-top: var(--spacing-12);
    color: var(--color-text-brand-default);
}

.dashboard-freshness__link:focus-visible,
.dashboard-config__link:focus-visible,
.dashboard-run__link:focus-visible,
.dashboard-recent-report__all:focus-visible {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}

/* The freshness card is two lines and a link: the date carries the card, the notice qualifies it. */
.dashboard-freshness__at {
    margin: 0;
}

.dashboard-freshness__placeholder {
    margin: var(--spacing-8) 0 0;
    color: var(--color-text-base-secondary);
}

/* The facts under a distribution bar are a list of qualifications, not a second chart — flat, quiet, and
   never bulleted, because each line is a caption for the bar above it. */
.dashboard-users__facts,
.dashboard-content__facts {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    color: var(--color-text-secondary);
}

.dashboard-users__link,
.dashboard-content__link {
    display: inline-block;
    margin-top: var(--spacing-16);
}

.dashboard-users__link:focus-visible,
.dashboard-content__link:focus-visible,
.dashboard-notifications__link:focus-visible {
    outline: var(--border-width-2) solid var(--color-border-focus);
    outline-offset: 2px;
}

/* One send per row: what happened, to whom, how it went, when. Four columns so the outcome column lines up
   down the card — a failure the eye has to hunt for is a failure nobody acts on. */
.dashboard-notifications {
    list-style: none;
    margin: var(--spacing-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.dashboard-notifications__row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: var(--spacing-12);
    font-size: var(--text-desktop-body-small-size, 0.875rem);
}

.dashboard-notifications__operator,
.dashboard-notifications__when {
    color: var(--color-text-secondary);
}

/* The status carries a colour AND its own word — colour is never the only carrier (MudChartTone's rule). */
.dashboard-notifications__row[data-failed="true"] .dashboard-notifications__status {
    color: var(--color-text-danger, #d92d20);
    font-weight: 600;
}

.dashboard-notifications__note {
    margin-top: var(--spacing-16);
    color: var(--color-text-secondary);
}

/* The role headcount is a LIST, not a distribution bar: MudChartTone is a closed status palette, a role is
   not a verdict, and a bar whose every segment is the same grey carries no information the legend did not
   already carry. Two columns so the counts line up down the card. */
.dashboard-users__roles {
    margin: var(--spacing-12) 0 0;
    display: grid;
    gap: var(--spacing-4);
}

.dashboard-users__role {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--spacing-12);
}

.dashboard-users__role dt {
    color: var(--color-text-secondary);
}

.dashboard-users__role dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ---- MW-577: the Administrator's cards --------------------------------------------------------------------
   Here rather than in per-widget .razor.css files, for the reason recorded at the top of this sheet. The two
   new cards reuse .dashboard-catalog outright — they sit in the same slot as the MW-526 blocks and state the
   same kind of fact, and a second visual grammar for it would read as noise. Only the lifecycle breakdown
   needs a rule of its own. */

/* The report-state breakdown under "Reports and Metrics": chips that wrap, because the number of states a
   platform holds is unknown and the ru labels are the longest. */
.dashboard-states {
    list-style: none;
    margin: var(--spacing-16) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.dashboard-state {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-8);
    padding: var(--spacing-4) var(--spacing-8);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-8, 8px);
}

.dashboard-state > :first-child {
    color: var(--color-text-secondary);
}

.dashboard-state > :last-child {
    font-variant-numeric: tabular-nums;
}