/* AVD Manager's own additions on top of the UI kit (app.css = shell, ui.css = shared components). Token colours only: no raw colour
   values here, so everything follows every theme and density. */

/* ── Background-activity drawer ───────────────────────────────────────────────
   A persistent right-hand drawer that floats below the top bar, like the workspace panel. The kit's top bar keeps its own
   width (it does not resize for a right-hand drawer), so the drawer starts under it instead of full height. MudBlazor still
   gives the content a right margin equal to the drawer width while the drawer is open. */
/* Specificity note: MudBlazor positions a persistent right drawer with .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right (height 100%) and
   .mud-drawer--open (right 0), which outrank a plain .app-activity.mud-drawer. Matching those classes here is what lets the drawer float with
   a gap and keep all four rounded corners; without it the drawer ran to the bottom and right edges and its corners were cut off. */
.mud-drawer.app-activity.mud-drawer-persistent.mud-drawer-pos-right {
    top: calc(var(--mud-appbar-height, 64px) + 2 * var(--gap-shell));
    height: calc(100% - var(--mud-appbar-height, 64px) - 3 * var(--gap-shell));
    border: 1px solid var(--line);
    border-radius: var(--r-chrome);
    background: var(--bg-surface);
    color: var(--fg-1);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.mud-drawer.app-activity.mud-drawer-persistent.mud-drawer-pos-right.mud-drawer--open {
    right: var(--gap-shell);
}

/* Closed: parked off-screen with nothing of its shadow or border showing at the edge of the page. */
.mud-drawer.app-activity.mud-drawer-persistent.mud-drawer-pos-right.mud-drawer--closed {
    box-shadow: none;
    border-color: transparent;
}

.app-activity .mud-drawer-content {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Leave a gap between the workspace panel and the open activity drawer. */
.mud-layout.mud-drawer-open-persistent-right .mud-main-content {
    padding-right: calc(2 * var(--gap-shell));
}

/* ── Clickable KPI tile ───────────────────────────────────────────────────────
   A KpiTile that navigates (the dashboard principle: every metric links to the page that shows its detail). A real button, so it
   is keyboard-operable; the reset keeps the tile's own look. */
.wm-kpi-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--r-card);
}

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

/* Stack the dashboard's panels with the kit's block gap. */
.dash-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-block);
}

.dash-asof {
    color: var(--fg-3);
    font-size: var(--fz-xs);
}

/* ── Small layout helpers shared by the pages (token values only) ───────────── */
.section-gap { margin: calc(var(--gap-block) * 1.5) 0 var(--gap-block); }

.panel-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-block);
    margin-bottom: var(--gap-block);
}

/* The panel a deep link (?groupId=...) points at. */
.panel-hit {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-card);
}

.row-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entity-name { font-weight: 600; color: var(--fg-display); }
.cell-sub { display: block; color: var(--fg-3); font-size: var(--fz-xs); }
.muted { color: var(--fg-3); }

/* ── Split-view row and detail content ──────────────────────────────────────── */
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; color: var(--fg-1); overflow-wrap: anywhere; }
.row-sub {
    color: var(--fg-3);
    font-size: var(--fz-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Label / value pairs in a detail pane. */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 var(--gap-block); }
.facts dt { color: var(--fg-3); font-size: var(--fz-xs); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts-label { color: var(--fg-3); font-size: var(--fz-xs); margin: var(--gap-block) 0 4px; }

.json-pre {
    margin: 0;
    padding: 8px 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A chip that is also a link. */
.chip-link { text-decoration: none; color: inherit; border-radius: var(--r-tile); }
.chip-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Pools table ─────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; max-width: 100%; }

/* The row-actions column stays visible when the wide table scrolls sideways. */
.sticky-actions {
    position: sticky;
    right: 0;
    background-color: var(--bg-surface);
    border-left: 1px solid var(--line);
}

.cell-flex { display: flex; align-items: center; gap: 4px; }

/* One line with an ellipsis (full name on hover) - a long name used to wrap into a tall column. */
.ruleset-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Ready to go live?" checklist: the icon takes the status tone, the text says what it means. */
.golive-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.golive-row .mud-icon-root { margin-top: 2px; }
.mud-icon-root.golive-ok { color: var(--st-ok-fg); }
.mud-icon-root.golive-block { color: var(--st-fail-fg); }
.mud-icon-root.golive-warn { color: var(--st-wait-fg); }
.mud-icon-root.golive-info { color: var(--st-info-fg); }

/* ── Status tones as text / icon colour (token values; same tones as StatusChip) ── */
/* On a MudIcon, also pass Color="Color.Default": the 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); }

/* ── Header liveness pill ───────────────────────────────────────────────────── */
.pill-button {
    padding: 0;
    margin-right: 12px;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
}
.pill-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill-row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fz-xs); }

/* A needs-attention row in the activity drawer. */
.activity-attention.mud-paper-outlined { border-color: var(--st-fail-dot); }

/* ── Dashboard: a masonry of one card per topic ──────────────────────────────────
   Column-width, not a fixed column count (skill: references/ui-patterns.md, "Cards"): the cards flow into as many columns as fit
   and pack without gaps, so the whole dashboard sits on one screen on a normal display. */
.dash-masonry {
    column-width: 300px;
    column-gap: var(--gap-block);
}

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

/* Smaller tiles inside a card: more per row, so a card stays short. */
.wm-kpi-row--card { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }