/* ── Shared UI components (Components/Ui) ──────────────────────────────────────
   Styled with the Aurum theme kit's semantic tokens only: no raw colours, so every theme and density works. */

.wm-spacer { flex: 1 1 auto; }

.wm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── StatusChip ──────────────────────────────────────────────────────────── */
.wm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--chip-py) var(--chip-px);
    border-radius: var(--r-chip);
    font-size: var(--fz-chip);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--st-neutral-bg);
    color: var(--st-neutral-fg);
}

.wm-chip--mono { font-family: var(--font-mono); font-size: var(--fz-xs); }
.wm-chip--run  { background: var(--st-run-bg);  color: var(--st-run-fg); }
.wm-chip--wait { background: var(--st-wait-bg); color: var(--st-wait-fg); }
.wm-chip--ok   { background: var(--st-ok-bg);   color: var(--st-ok-fg); }
.wm-chip--fail { background: var(--st-fail-bg); color: var(--st-fail-fg); }
.wm-chip--idle { background: var(--st-idle-bg); color: var(--st-idle-fg); }
.wm-chip--info { background: var(--st-info-bg); color: var(--st-info-fg); }

.wm-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.wm-chip--run .wm-chip-dot  { background: var(--st-run-dot); animation: wm-pulse 1.4s ease-in-out infinite; }
.wm-chip--wait .wm-chip-dot { background: var(--st-wait-dot); }

.wm-chip-icon.mud-icon-root { width: 14px; height: 14px; }

/* ── KpiTile ─────────────────────────────────────────────────────────────── */
.wm-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: var(--kpi-pad);
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    box-shadow: var(--shadow-card);
    color: var(--fg-1);
}

.wm-kpi-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fz-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--fg-2);
}

.wm-kpi-icon.mud-icon-root { width: 16px; height: 16px; }

.wm-kpi-value {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: calc(var(--kpi-fz) * var(--display-scale, 1));
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--fg-display);
}

.wm-kpi-note { font-size: var(--fz-md); color: var(--fg-2); }
[data-density="compact"] .wm-kpi-note { display: none; }

.wm-kpi--ok .wm-kpi-value   { color: var(--st-ok-fg); }
.wm-kpi--wait .wm-kpi-value { color: var(--st-wait-fg); }
.wm-kpi--fail .wm-kpi-value { color: var(--st-fail-fg); }

/* ── PageHeader ──────────────────────────────────────────────────────────── */
.wm-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap-block);
    flex-wrap: wrap;
    margin-bottom: var(--gap-page);
}

.wm-page-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-case);
    font-size: calc(var(--h1-fz) * var(--display-scale, 1));
    line-height: 1.1;
    color: var(--fg-display);
}

/* App.razor's FocusOnNavigate moves focus to this heading after each navigation (for screen readers). It is not
   interactive, so the browser's focus ring around it is only noise. */
.wm-page-title:focus,
.wm-page-title:focus-visible { outline: none; }

.wm-page-sub {
    margin: 6px 0 0;
    max-width: 80ch;
    font-size: var(--fz-base);
    line-height: var(--lh-body);
    color: var(--fg-2);
}

.wm-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.wm-panel {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    padding: var(--card-pad);
    color: var(--fg-1);
}

.wm-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--gap-block);
}

.wm-panel-icon.mud-icon-root { color: var(--fg-3); }

.wm-panel-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: calc(var(--h2-fz) * var(--display-scale, 1));
    color: var(--fg-display);
}

/* ── EmptyState ──────────────────────────────────────────────────────────── */
.wm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
    background: var(--bg-surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-card);
    color: var(--fg-2);
}

.wm-empty-icon.mud-icon-root { width: 40px; height: 40px; color: var(--fg-3); }
.wm-empty-title { font-weight: 600; color: var(--fg-1); }
.wm-empty-msg { max-width: 60ch; font-size: var(--fz-md); }

/* ── NodeTrack ───────────────────────────────────────────────────────────── */
.wm-track {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.wm-track--md .wm-node { flex: 1 1 0; }
.wm-track--sm { align-items: center; gap: 4px; }
.wm-track--sm .wm-node { flex: 0 0 auto; flex-direction: row; }

/* connector to the previous node */
.wm-track--md .wm-node + .wm-node::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--line-strong);
    z-index: 0;
}

.wm-track--md .wm-node--done + .wm-node::before,
.wm-track--md .wm-node--done + .wm-node--end::before { background: var(--bar-ok); }

.wm-track--sm .wm-node + .wm-node::before {
    content: "";
    width: 8px;
    height: 2px;
    margin-right: 4px;
    background: var(--line-strong);
}

.wm-node-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--fg-3);
    background: var(--bg-surface);
    color: var(--fg-on-accent);
}

.wm-track--sm .wm-node-dot { width: 12px; height: 12px; border-width: 2px; }
.wm-node-dot .mud-icon-root { width: 12px; height: 12px; }
.wm-track--sm .wm-node-dot .mud-icon-root { width: 8px; height: 8px; }

.wm-node--done .wm-node-dot { background: var(--bar-ok); border-color: var(--bar-ok); }
.wm-node--now .wm-node-dot  { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.wm-node--wait .wm-node-dot { background: var(--st-wait-bg); border-color: var(--st-wait-dot); color: var(--st-wait-fg); }
.wm-node--fail .wm-node-dot { background: var(--bar-fail); border-color: var(--bar-fail); box-shadow: 0 0 0 4px var(--st-fail-bg); }
.wm-node--end .wm-node-dot  { color: var(--fg-3); }
.wm-node--end.wm-node--done .wm-node-dot { color: var(--fg-on-accent); }

.wm-node-text { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 100%; }
.wm-node-label { font-size: var(--fz-md); font-weight: 500; color: var(--fg-1); overflow-wrap: anywhere; }
.wm-node--now .wm-node-label { color: var(--accent-soft-fg); font-weight: 600; }
.wm-node--upcoming .wm-node-label { color: var(--fg-2); }
.wm-node--fail .wm-node-label { color: var(--down); }
.wm-node-sub { font-family: var(--font-mono); font-size: var(--fz-2xs); color: var(--fg-2); }
[data-density="compact"] .wm-node-sub { display: none; }

/* ── Toolbar and list rows (filters above a log/list) ─────────────────────── */
.wm-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-block);
    padding: var(--card-pad);
    margin-bottom: var(--gap-block);
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}

.wm-toolbar .wm-grow { flex: 1 1 280px; min-width: 0; }
.wm-toolbar .wm-fixed { flex: 0 0 200px; }

.wm-row {
    margin-bottom: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    color: var(--fg-1);
}

.wm-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--cell-py) 16px;
    cursor: pointer;
}

.wm-row-head:hover { background: var(--bg-row-hover); }

/* A responsive row of KpiTiles */
.wm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gap-block);
}

/* ── ChoiceChip (selectable pill) ──────────────────────────────────────────── */
.wm-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--chip-py) calc(var(--chip-px) + 4px);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-chip);
    background: var(--bg-surface);
    color: var(--fg-1);
    font: inherit;
    font-size: var(--fz-md);
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}

.wm-choice:hover:not(:disabled) { background: var(--bg-row-hover); }
.wm-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wm-choice:disabled { opacity: .5; cursor: default; }

.wm-choice--on,
.wm-choice--on:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-soft-fg);
    font-weight: 600;
}

.wm-choice-icon.mud-icon-root { width: 14px; height: 14px; }

/* ── Split view: a list beside a sticky detail pane ───────────────────────── */
.wm-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-block);
    align-items: start;
}

.wm-split-detail { order: -1; }

@media (min-width: 1280px) {
    .wm-split--open { grid-template-columns: minmax(0, 1fr) minmax(380px, 42%); }
    .wm-split-detail {
        order: 0;
        position: sticky;
        top: 0;
        max-height: calc(100dvh - 220px);
        overflow: auto;
    }
}

.wm-row--selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.wm-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--gap-block);
}

.wm-detail-title { font-weight: 600; color: var(--fg-display); }

/* A wider detail pane for dense content (e.g. a grants matrix). */
@media (min-width: 1280px) {
    .wm-split--open.wm-split--wide { grid-template-columns: minmax(0, 1fr) minmax(520px, 56%); }
}

.wm-tr--selected td { background: var(--accent-soft); }

/* ── Dashboard: one card per topic in a masonry ─────────────────────────────────
   Column-width, not a fixed column count: the cards flow into as many columns as fit and pack without gaps, so a five-topic dashboard
   sits on one screen on a normal display. Put each topic in <Panel Class="dash-card"> inside <div class="dash-masonry">, and its tiles
   in <div class="wm-kpi-row wm-kpi-row--card"> (smaller tiles, more per row, so a card stays short). */
.dash-masonry {
    column-width: 300px;
    column-gap: var(--gap-block);
}

.dash-masonry > .dash-card {
    break-inside: avoid;
    margin-bottom: var(--gap-block);
}

.wm-kpi-row--card { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

/* ── LinkTile: a KpiTile that is a link ─────────────────────────────────────────── */
.wm-kpi-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--r-card);
}

.wm-kpi-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Status tones as text or icon colour (same tones as StatusChip) ─────────────────
   For a status-coloured icon use <MudIcon Color="Color.Default" Class="tone-ok" />. The Color.Default matters: MudIcon's own default,
   Color.Inherit, adds .mud-inherit-text, which is `color: inherit !important` and would beat these rules. */
.tone-ok,   .mud-icon-root.tone-ok   { color: var(--st-ok-fg); }
.tone-wait, .mud-icon-root.tone-wait { color: var(--st-wait-fg); }
.tone-fail, .mud-icon-root.tone-fail { color: var(--st-fail-fg); }
.tone-info, .mud-icon-root.tone-info { color: var(--st-info-fg); }
.tone-idle, .mud-icon-root.tone-idle { color: var(--st-idle-fg); }

/* A column that stays visible when a wide table scrolls sideways (row actions). Use the kit's tokens, not MudBlazor palette variables. */
.sticky-actions {
    position: sticky;
    right: 0;
    background-color: var(--bg-surface);
    border-left: 1px solid var(--line);
}