/* ---------------------------------------------------------------------------------------------
   Compact ("annunciator panel") layout for phones.

   Every rule below is scoped to .em-compact, which MainLayout only emits at Breakpoint.Xs, so the
   desktop and tablet layouts are provably unaffected by this file. The one exception is
   .em-bottomnav, which is position: fixed and is only rendered in the same compact branch.

   Colors come from the MudBlazor palette variables so light/dark and the admin-configured primary
   all keep working with no extra plumbing.
   --------------------------------------------------------------------------------------------- */

.em-compact {
    --em-rail: 4px;
    --em-rail-attn: 6px;
    --em-gap: 10px;
    --em-bottomnav-h: 56px;

    /* Clear the fixed bottom bar plus the iOS home indicator. */
    padding-bottom: calc(var(--em-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 8px);
}

/* Machine-emitted values: response times, countdowns, timestamps, counts. Tabular figures are what
   let a scanning roster of numbers line up into an actual column. */
.em-compact .em-num,
.em-bottomnav .em-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ---- verdict ------------------------------------------------------------------------------- */

.em-compact .em-verdict {
    padding: 4px 4px 14px;
}

.em-compact .em-verdict-head {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.em-compact .em-verdict-sub {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.em-compact .em-verdict-error .em-verdict-head { color: var(--mud-palette-error); }
.em-compact .em-verdict-warning .em-verdict-head { color: var(--mud-palette-warning); }
.em-compact .em-verdict-success .em-verdict-head { color: var(--mud-palette-success); }
.em-compact .em-verdict-neutral .em-verdict-head { color: var(--mud-palette-text-secondary); }

/* ---- filter strip -------------------------------------------------------------------------- */

.em-compact .em-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Bleed to the screen edges so a cut-off chip reads as "there is more this way". */
    margin: 0 -8px;
    padding: 0 12px 10px;
    -webkit-overflow-scrolling: touch;
}

.em-compact .em-strip::-webkit-scrollbar { display: none; }

.em-compact .em-chip {
    flex: 0 0 auto;
    display: inline-flex;
    /* Baseline, so the smaller count sits on the label's baseline instead of being centered in its
       own shorter box (which floats it ~2px high). Baseline alignment only looks right when there
       is no vertical slack to park the group against, so the pill's height comes from symmetric
       padding, not from min-height: 9px + a 13px line box + 1px borders = 33px. min-height stays
       only as a touch-target floor. */
    align-items: baseline;
    gap: 5px;
    min-height: 32px;
    padding: 9px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    /* After the font shorthand, which would otherwise reset it. */
    line-height: 1;
    cursor: pointer;
}

.em-compact .em-chip:disabled {
    opacity: 0.45;
    cursor: default;
}

.em-compact .em-chip-n {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.em-compact .em-chip-on {
    /* Ring in the accent color plus a matching tint: legible as "selected" in all six variants,
       including the neutral All chip, where a plain grey wash was invisible. */
    border-color: currentColor;
    font-weight: 500;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.em-compact .em-chip-on.em-chip-error { color: var(--mud-palette-error); background: var(--mud-palette-error-hover); }
.em-compact .em-chip-on.em-chip-warning { color: var(--mud-palette-warning); background: var(--mud-palette-warning-hover); }
.em-compact .em-chip-on.em-chip-success { color: var(--mud-palette-success); background: var(--mud-palette-success-hover); }
.em-compact .em-chip-on .em-chip-n { color: inherit; }

/* ---- section header ------------------------------------------------------------------------ */

.em-compact .em-section {
    position: sticky;
    top: var(--mud-appbar-height, 56px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.em-compact .em-section-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.em-compact .em-section-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.em-compact .em-section-icon { margin-left: -2px; }

.em-compact .em-section-count {
    margin-left: auto;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* ---- rail row ------------------------------------------------------------------------------ */

.em-compact .em-row {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 44px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.em-compact .em-rail {
    flex: 0 0 var(--em-rail);
    width: var(--em-rail);
}

.em-compact .em-row-attn {
    background: var(--mud-palette-error-hover);
}

.em-compact .em-row-attn .em-rail {
    flex-basis: var(--em-rail-attn);
    width: var(--em-rail-attn);
}

.em-compact .em-row-attn.em-accent-warning,
.em-compact .em-row-attn.em-accent-secondary {
    background: var(--mud-palette-warning-hover);
}

.em-compact .em-row-attn.em-accent-default {
    background: var(--mud-palette-action-default-hover);
}

.em-compact .em-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 7px var(--em-gap);
}

.em-compact .em-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.em-compact .em-row-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
}

.em-compact .em-row-trailing {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.em-compact .em-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The error string is the one piece of free text worth letting wrap onto a second line. */
.em-compact .em-msg {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.em-compact .em-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Numbers sit in a slot pinned to the right so they form a column down the roster. */
.em-compact .em-row-meta .em-slot {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
}

.em-compact .em-row-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    font-size: 0.75rem;
    line-height: 1.35;
}

/* Actions sit bottom-right of an attention row: the thumb rests there, and it keeps the error
   text on the reading edge. */
.em-compact .em-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.em-compact .em-row-tap { cursor: pointer; }

.em-compact .em-row-tap:focus-visible,
.em-compact .em-row-link:focus-visible::after {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* The row title as a link: it looks like the plain title, but its ::after is stretched over the
   whole .em-row (which is position: relative), making the entire card one tap target. */
.em-compact .em-row-link {
    color: inherit;
    text-decoration: none;
}

.em-compact .em-row-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Everything actionable has to sit above that overlay, or a tap on Acknowledge or check-now would
   navigate instead of firing the button. */
.em-compact .em-row-trailing,
.em-compact .em-row-actions {
    position: relative;
    z-index: 1;
}

.em-compact .em-state { font-weight: 500; }
.em-compact .em-accent-error .em-state { color: var(--mud-palette-error); }
.em-compact .em-accent-warning .em-state { color: var(--mud-palette-warning); }
.em-compact .em-accent-success .em-state { color: var(--mud-palette-success); }

/* Keep the countdown ring from the desktop table usable at this size. */
.em-compact .em-row .countdown-ring { transform: scale(0.85); }

/* ---- filter panel -------------------------------------------------------------------------- */

.em-compact .em-filters {
    margin-bottom: 12px;
}

.em-compact .em-filters-toggle {
    justify-content: space-between;
}

.em-compact .em-filters-body {
    padding-top: 12px;
}

.em-compact .em-filters-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 0 8px;
}

/* ---- table shell --------------------------------------------------------------------------- */
/* A MudTable kept only for its server-side paging: the header carries no information once each
   row is a self-describing rail row, and the cell must not add padding around it. */

.em-compact .em-table {
    background: transparent;
}

.em-compact .em-table thead {
    display: none;
}

.em-compact .em-table .em-cell {
    padding: 0;
    border-bottom: 0;
}

.em-compact .em-table .mud-table-row:hover {
    background: transparent;
}

/* The stock pager wants ~568px: gutters, a "Rows per page:" caption, the size select, the range
   text and four 48px arrows. Drop the caption (the select right beside it shows the number), let
   the row wrap, and tighten the arrows so it fits 380px without a horizontal scrollbar. */

.em-compact .em-table .mud-table-pagination-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
    padding: 6px 0;
    row-gap: 4px;
    /* Space the groups out here rather than with an auto margin on the actions block: an auto
       margin over-constrains this line and Chrome resolves it by pushing the block past the
       container's edge (it reports the overflow as a negative used margin-right). */
    justify-content: space-between;
    overflow: hidden;
}

.em-compact .em-table .mud-table-pagination-spacer,
.em-compact .em-table .mud-table-pagination-information {
    display: none;
}

/* Four arrows plus the page-size select do not fit 380px, and MudBlazor gives this block a
   negative end margin that pushes it past the toolbar. Reset both the physical and the logical
   property, and drop the first/last arrows: rows are newest-first, so "last page" is the oldest
   entry — the least useful jump on a phone. Prev/next stay. */

.em-compact .em-table .mud-table-pagination-actions {
    margin: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.em-compact .em-table .mud-table-pagination-first-button,
.em-compact .em-table .mud-table-pagination-last-button {
    display: none;
}

.em-compact .em-table .mud-table-pagination-actions .mud-icon-button {
    padding: 6px;
}

/* ---- failure timeline ---------------------------------------------------------------------- */

.em-compact .em-timeline-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
}

.em-compact .em-timeline-head:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* A group's color, inline in a meta line. Same 8px dot as the section headers use. */
.em-compact .em-dot {
    flex: 0 0 auto;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* A recorded field change in the audit log: "Interval: 60 → 30". */
.em-compact .em-change {
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* Log messages are the one place where the whole string matters, so they wrap instead of clamping. */
.em-compact .em-log-msg {
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* ---- topology tier list -------------------------------------------------------------------- */
/* Echoes the chip drawn in the top-right of each SVG node card. */

.em-compact .em-node-chip {
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ---- bottom navigation --------------------------------------------------------------------- */

.em-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.em-bottomnav .em-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
    /* The active marker is a top edge, echoing the row rails rather than adding a new device. */
    box-shadow: inset 0 2px 0 0 transparent;
}

.em-bottomnav .em-tab-on {
    color: var(--mud-palette-primary);
    box-shadow: inset 0 2px 0 0 var(--mud-palette-primary);
}

.em-bottomnav .em-tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* ---- drawer ---------------------------------------------------------------------------------
   The "More" tab makes the drawer a primary phone surface. Its version caption is one long
   unbreakable token (v… plus the full commit hash) that is wider than the 240px drawer and forces
   a horizontal scrollbar, so let it wrap here. The drawer is outside .em-compact, hence the media
   query rather than the class.
   --------------------------------------------------------------------------------------------- */

@media (max-width: 599.98px) {
    .mud-drawer .mud-typography-caption {
        overflow-wrap: anywhere;
    }
}