/*
 * Global copy of the System Overview *widget-internal* styles.
 *
 * The dashboard (SystemOverview.razor) carries its own scoped copy of these rules
 * (`.sov-page ::deep .X`). The configurable widgets are also rendered on the
 * /systemoverview/customize editor page, which is a different component and therefore
 * outside that scope — so these globals style the widgets there too. Selectors are the
 * bespoke `.sov-*` / `.ctrl-*` classes used only by these widgets, so global scope is safe.
 * Keep in sync with the widget-internal section of SystemOverview.razor.css.
 */

:root {
    --sov-navy: var(--cas-ink);
    --sov-blue: var(--cas-navy-700);
    --sov-cyan: var(--cas-signal-cyan);
    --sov-surface: var(--cas-surface);
    --sov-border: var(--cas-line);
}

/* ── Chart widgets ───────────────────────────────────────────────── */
.sov-chart-panel { min-height: 180px; }

/* Recent activity: stack alerts then let the bar chart fill the rest of the panel. */
.sov-recent-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.sov-recent-chart {
    flex: 1 1 auto;
    min-height: 150px;
}

.sov-chart-host {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.sov-chart-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

/* ── Panel shell ─────────────────────────────────────────────────── */
.sov-panel {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cas-line);
    border-radius: 4px;
    background: var(--sov-surface);
    box-shadow: var(--cas-shadow-card);
}

.sov-panel--fill { height: 100%; }

.sov-panel-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--cas-line);
    color: var(--sov-blue);
    background: rgba(0, 0, 0, .02);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sov-panel-header > .mud-icon-root { color: var(--sov-blue); }

.sov-panel-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sov-panel-link {
    color: var(--sov-blue);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.sov-panel-link::after { content: "  ->"; }

.sov-panel-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.sov-panel-body--scroll { overflow-y: auto; }
.sov-panel-body--pad { padding: 14px; }
.sov-storage-panel .sov-panel-body--pad { padding: 10px; }
.sov-panel-progress { height: 3px !important; }

/* ── Badges / notes ──────────────────────────────────────────────── */
.sov-mini-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(30,58,95,.08);
    color: var(--sov-blue);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.sov-mini-badge--warn {
    background: var(--cas-warning-soft);
    color: var(--cas-warning-deep);
}

.sov-header-note {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.sov-header-note--danger { color: var(--mud-palette-error); }

/* ── List stacks (events / alarms) ───────────────────────────────── */
.sov-list-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.sov-event-row,
.sov-alarm-row,
.ctrl-card {
    border: 1px solid rgba(30,58,95,.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--cas-shadow-card);
}

.sov-event-row {
    display: grid;
    grid-template-columns: minmax(132px, auto) minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    font-size: .8rem;
}

.sov-event-time {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(30,58,95,.08);
    color: var(--sov-blue);
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
}

.sov-event-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.sov-event-meta {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    white-space: nowrap;
}

.sov-event-controller {
    color: var(--sov-blue);
    font-weight: 600;
}

.sov-event-profile {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sov-alarm-row {
    display: flex;
    overflow: hidden;
    cursor: pointer;
}

.sov-alarm-row--critical { box-shadow: 0 4px 12px rgba(198, 40, 40, .16); }

.sov-alarm-accent {
    width: 5px;
    flex: 0 0 auto;
}

.sov-alarm-content {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
}

.sov-alarm-main { min-width: 0; }

.sov-alarm-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
    font-weight: 600;
}

.sov-alarm-sub {
    display: flex;
    gap: 9px;
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.sov-alarm-badge {
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
}

/* ── Empty states ────────────────────────────────────────────────── */
.sov-empty-state {
    height: 100%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 18px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.sov-empty-state .mud-icon-root {
    color: rgba(30,58,95,.34);
    font-size: 34px;
}

.sov-empty-state span {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.sov-empty-state small { color: var(--mud-palette-text-secondary); }

.sov-empty-state--compact {
    min-height: 76px;
    padding: 10px;
}

/* ── Controllers panel ───────────────────────────────────────────── */
.sov-ctrl-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sov-border);
    background: rgba(30,58,95,.025);
}

.ctrl-filter-chips {
    display: flex;
    gap: 7px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sov-border);
    background: #fff;
}

.ctrl-filter-chip {
    border: 1px solid rgba(30,58,95,.16);
    border-radius: 999px;
    background: rgba(30,58,95,.04);
    color: var(--sov-blue);
    padding: 4px 11px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
}

.ctrl-filter-chip.active {
    background: var(--sov-blue);
    color: #fff;
    border-color: var(--sov-blue);
}

.ctrl-filter-chip.alarm-chip.active {
    background: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
}

.ctrl-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 10px;
    padding: 11px 12px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.ctrl-card:hover,
.ctrl-card.selected {
    transform: translateY(-1px);
    border-color: rgba(30,58,95,.32);
    box-shadow: 0 4px 12px rgba(15, 32, 39, .12);
}

.ctrl-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ctrl-card-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 600;
}

.ctrl-card-status-label {
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ctrl-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.ctrl-card-meta-item,
.ctrl-slave-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ctrl-slaves-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 5px;
    padding: 8px 0 0 18px;
    border-top: 1px dashed rgba(30,58,95,.16);
}

.ctrl-slave-row {
    justify-content: space-between;
    font-size: .72rem;
}

/* ── Storage / capacity ──────────────────────────────────────────── */
.sov-capacity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
}

.sov-capacity-grid--single { grid-template-columns: 1fr; }

.sov-capacity-block {
    display: grid;
    grid-template-columns: minmax(94px, .75fr) minmax(0, 1.25fr);
    align-items: center;
    min-width: 0;
    column-gap: 12px;
    row-gap: 5px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(30,58,95,.1);
    background: var(--cas-surface);
    overflow: hidden;
}

.sov-capacity-title {
    color: var(--mud-palette-text-secondary);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sov-capacity-block strong {
    color: var(--sov-blue);
    font-size: clamp(.88rem, 1.2vw, 1rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sov-capacity-block .mud-progress-linear {
    grid-column: 2;
    min-width: 0;
}

.sov-capacity-block small { color: var(--mud-palette-text-secondary); }

/* ── Favorites / quick links ─────────────────────────────────────── */
.sov-quicklinks-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
}

.sov-quicklink-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(30,58,95,.12);
    border-radius: 8px;
    background: var(--cas-surface);
    color: var(--sov-blue);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--cas-shadow-card);
    text-align: left;
}

.sov-quicklink-btn:hover {
    border-color: rgba(30,58,95,.28);
    box-shadow: 0 4px 12px rgba(15, 32, 39, .12);
    transform: translateY(-1px);
}

/* ── Status dots ─────────────────────────────────────────────────── */
.status-dot-ok { color: var(--mud-palette-success) !important; }
.status-dot-error { color: var(--mud-palette-error) !important; }
.status-dot-warn { color: var(--mud-palette-warning) !important; }
.status-dot-neutral { color: var(--mud-palette-info) !important; }

/* ── Occupancy widget ────────────────────────────────────────────── */
.sov-occupancy-panel { padding: 12px; }

.sov-occupancy-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sov-occupancy-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(30,58,95,.1);
    border-radius: 8px;
    background: var(--cas-surface);
}

.sov-occupancy-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sov-occupancy-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    color: var(--sov-blue);
}

.sov-occupancy-count {
    flex: 0 0 auto;
    font-size: .9rem;
    font-weight: 700;
    color: var(--sov-blue);
}

.sov-occupancy-count--over { color: var(--mud-palette-error); }

/* ── KPI cards ───────────────────────────────────────────────────── */
.sov-kpi-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 108px;
    padding: 16px;
    border: 1px solid var(--cas-line);
    border-radius: 4px;
    background: var(--sov-surface);
    color: var(--mud-palette-text-primary);
    text-align: left;
    box-shadow: var(--cas-shadow-card);
    overflow: hidden;
}

button.sov-kpi-card {
    cursor: pointer;
}

button.sov-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 32, 39, .12);
}

.sov-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--kpi-color, var(--sov-blue));
}

.sov-kpi-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    color: var(--kpi-color, var(--sov-blue));
    background: color-mix(in srgb, var(--kpi-color, var(--sov-blue)) 12%, white);
}

.sov-kpi-icon .mud-icon-root { font-size: 25px; }

.sov-kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sov-kpi-label {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sov-kpi-content strong {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -.05em;
}

.sov-kpi-content small {
    margin-top: 5px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sov-kpi-card--primary { --kpi-color: var(--mud-palette-primary); }
.sov-kpi-card--success { --kpi-color: var(--mud-palette-success); }
.sov-kpi-card--warning { --kpi-color: var(--mud-palette-warning); }
.sov-kpi-card--danger { --kpi-color: var(--mud-palette-error); }
.sov-kpi-card--info { --kpi-color: var(--mud-palette-info); }
.sov-kpi-card--neutral { --kpi-color: var(--cas-muted); }

/* ── Software components bar ─────────────────────────────────────── */
.sov-components-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 5px 12px;
    border: 1px solid var(--cas-line);
    border-radius: 4px;
    background: var(--sov-surface);
    box-shadow: var(--cas-shadow-card);
}

.sov-components-bar-label {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: var(--sov-blue);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sov-components-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sov-components-bar-title .mud-icon-root {
    font-size: 16px;
}

.sov-components-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
}

.sov-components-summary .mud-icon-root {
    font-size: 13px;
}

.sov-components-summary--ok {
    color: var(--mud-palette-success);
    background: rgba(46, 125, 50, .10);
}

.sov-components-summary--warn {
    color: var(--mud-palette-warning);
    background: rgba(237, 108, 2, .12);
}

.sov-components-grid {
    flex: 1 1 auto;
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.sov-component-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid rgba(30, 58, 95, .12);
    border-radius: 4px;
    background: var(--cas-surface);
}

/* The fixed footprint belongs to the horizontally-scrolling strip, not to the tile itself. A grid
   item with an explicit width does not shrink to its track, so leaving this on the bare class made
   the tiles overflow any narrower container that reuses them (the login panel's two-column grid). */
.sov-components-grid > .sov-component-tile {
    flex: 0 0 auto;
    width: 184px;
    height: 46px;
}

.sov-component-tile--ok {
    border-left: 3px solid var(--mud-palette-success);
}

.sov-component-tile--warn {
    border-left: 3px solid var(--mud-palette-warning);
}

.sov-component-tile--error {
    border-left: 3px solid var(--mud-palette-error);
}

.sov-component-tile--neutral {
    border-left: 3px solid var(--cas-faint);
}

.sov-component-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(30, 58, 95, .07);
    color: var(--sov-blue);
}

.sov-component-icon .mud-icon-root {
    font-size: 15px;
}

.sov-component-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.sov-component-name {
    font-size: .74rem;
    font-weight: 600;
    color: var(--sov-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sov-component-copy small {
    color: var(--mud-palette-text-secondary);
    font-size: .64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sov-component-status {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
}

.sov-component-tile--ok .sov-component-status { color: var(--mud-palette-success); }
.sov-component-tile--warn .sov-component-status { color: var(--mud-palette-warning); }
.sov-component-tile--error .sov-component-status { color: var(--mud-palette-error); }
.sov-component-tile--neutral .sov-component-status { color: var(--cas-muted); }

/* In the customize editor the panel title bar eats into the fixed-height cell;
   slim the bar padding so the tile row isn't clipped. */
.sov-gs-body .sov-components-bar {
    padding: 3px 10px;
}