/* ── Widget rail ──────────────────────────────────────────────────────────
   The Live wall's right-hand rail (WidgetRail.razor). A scrollable stack of
   "top" widgets above a pinned "bottom" widget; the rail fills the drawer height
   so the top region scrolls when many rooms overflow while the bottom widget
   (storage) stays in view. Everything else inside a widget is built from MudBlazor
   components (MudStack/MudText/MudIcon/MudChart) — only the genuinely structural
   rules with no MudBlazor equivalent live here, to keep the look unified. */
.widget-rail {
    height: calc(100vh - var(--mud-appbar-height, 64px) - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.widget-rail__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.widget-rail__pinned {
    flex: 0 0 auto;
    border-top: 1px solid var(--mud-palette-divider);
}

.rooms-widget {
    padding-bottom: 8px;
}

/* Room row: MudStack handles layout; these add the clickable-row affordances that
   have no MudBlazor equivalent (hover, the clickable name area's cursor/truncation). */
.rooms-widget__item {
    border-radius: 8px;
    transition: background 0.1s ease;
}

.rooms-widget__item:hover {
    background: var(--mud-palette-table-hover);
}

.rooms-widget__name {
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.rooms-widget__audio-name {
    max-width: 45%;
}

/* Footer bulk actions (Show all / Mute all) under the room list. */
.rooms-widget__footer {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    margin-top: 4px;
}

/* Single-line ellipsis utility. The codebase already references `text-truncate`
   (room/camera names) but never defined it, so long names wrapped — define it once
   here. Needs min-width:0 to actually shrink inside a flex row. */
.text-truncate {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The doughnut's centre %-overlay. MudChart has no built-in centre label, so this
   is the one place a positioned overlay is unavoidable; the text inside is MudText. */
.storage-widget__chart {
    position: relative;
    display: flex;
    justify-content: center;
}

.storage-widget__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}