.device-dashboard-header {
    display: grid;
    gap: var(--rg-space-2);
}

.device-dashboard-identity-copy {
    min-width: 0;
}

.device-dashboard-description {
    max-width: 64ch;
    margin-top: var(--rg-space-2);
}

.device-dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rg-space-3);
    margin-bottom: var(--rg-space-3);
}

.device-dashboard-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 112px));
    gap: var(--rg-space-4);
}

.device-dashboard-app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rg-space-2);
    padding: 0;
    background: transparent;
}

.device-dashboard-app-menu {
    position: absolute;
    top: var(--rg-space-1);
    right: var(--rg-space-1);
    z-index: 1;
    opacity: 0;
    transition: opacity var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.device-dashboard-app-card:hover .device-dashboard-app-menu,
.device-dashboard-app-card:focus-within .device-dashboard-app-menu {
    opacity: 1;
}

@media (hover: none) {
    .device-dashboard-app-menu {
        opacity: 1;
    }
}

.device-dashboard-app-link {
    display: block;
    min-width: 0;
    border-radius: var(--rg-shape-card);
    color: var(--mud-palette-text-primary);
}

.device-dashboard-app-link:focus-visible {
    outline: var(--rg-focus-ring);
    outline-offset: var(--rg-focus-ring-offset);
}

.device-dashboard-app-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    padding: var(--rg-space-3);
    overflow: hidden;
    border-radius: var(--rg-shape-app-tile);
    background: var(--rg-surface-container);
    box-shadow: var(--rg-shadow-app-icon);
    transition: background-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.device-dashboard-app-link:hover .device-dashboard-app-icon,
.device-dashboard-app-link:focus-visible .device-dashboard-app-icon {
    background: var(--rg-state-selected);
}

.device-dashboard-app-artwork {
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-primary);
}

.device-dashboard-app-artwork svg {
    width: 68px;
    height: 68px;
}

.device-dashboard-app-artwork > .mud-icon-root {
    font-size: 2.5rem;
}

.device-dashboard-app-name {
    min-width: 0;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-weight: var(--rg-font-weight-medium);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-dashboard-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.35fr);
    align-items: start;
    gap: var(--rg-space-4);
}

.device-dashboard-service-column {
    display: grid;
    gap: var(--rg-space-4);
}

.device-dashboard-panel {
    min-width: 0;
    min-height: 0;
    padding: var(--rg-space-5);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-workspace-panel);
    box-shadow: var(--rg-shadow-workspace-panel);
}

.device-dashboard-applications {
    min-width: 0;
}

/* Overview composition: four compact stats, two service cards, then app tiles. */
.device-dashboard-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--rg-space-4);
}

.device-dashboard-service-grid > :only-child {
    grid-column: 1 / -1;
}

.device-dashboard-metrics-link,
.device-dashboard-network-overview {
    display: block;
    border-radius: var(--rg-shape-control);
    color: var(--mud-palette-text-primary);
}

.device-dashboard-metrics-link:focus-visible,
.device-dashboard-network-overview:focus-visible {
    outline: var(--rg-focus-ring);
    outline-offset: var(--rg-focus-ring-offset);
}

.device-dashboard-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rg-space-4);
}

.device-dashboard-metric-state {
    grid-column: 1 / -1;
}

.device-dashboard-vital {
    display: grid;
    gap: var(--rg-space-2);
    min-width: 0;
    min-height: 104px;
    padding: var(--rg-space-3);
    overflow: hidden;
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-workspace-panel);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--rg-shadow-workspace-panel);
}

.device-dashboard-vital-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rg-space-2);
    min-width: 0;
}

.device-dashboard-vital-label > :last-child {
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-dashboard-vital > strong {
    display: block;
    color: var(--mud-palette-text-primary);
    font-size: var(--rg-type-title-large-size);
    font-weight: var(--rg-font-weight-strong);
    font-variant-numeric: tabular-nums;
    line-height: var(--rg-type-title-large-line-height);
}

.device-dashboard-vital-link {
    display: block;
    min-width: 0;
}

.device-dashboard-vital-link:focus-visible {
    outline: var(--rg-focus-ring);
    outline-offset: var(--rg-focus-ring-offset);
}

.device-dashboard-network-rate {
    display: inline-flex;
    align-items: center;
    gap: var(--rg-space-1);
}

.device-dashboard-network-arrow {
    display: inline-flex;
    flex: 0 0 auto;
}

.device-dashboard-network-arrow.is-download {
    color: var(--rg-status-success-text);
}

.device-dashboard-network-arrow.is-upload {
    color: var(--rg-status-error-text);
}

.device-dashboard-subsystem {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-3);
}

.device-dashboard-subsystem-copy,
.device-dashboard-row-copy {
    min-width: 0;
}

.device-dashboard-peer-list {
    display: grid;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.device-dashboard-peer-row,
.device-dashboard-backup-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rg-space-3);
    min-width: 0;
    min-height: 64px;
    padding-block: var(--rg-space-3);
}

.device-dashboard-peer-row + .device-dashboard-peer-row,
.device-dashboard-backup-row + .device-dashboard-backup-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.device-dashboard-peer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rg-space-1);
}

.device-dashboard-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--rg-space-2);
}

.device-dashboard-card-actions {
    justify-content: flex-start;
    padding-top: var(--rg-space-2);
}

.device-dashboard-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(6rem, 0.8fr);
    align-items: center;
    gap: var(--rg-space-3);
    min-width: 0;
    min-height: 112px;
    padding: var(--rg-space-3);
    overflow: hidden;
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-raised);
}

.device-dashboard-metric-copy {
    display: flex;
    align-items: center;
    gap: var(--rg-space-3);
    min-width: 0;
    overflow: hidden;
}

.device-dashboard-metric-copy > div {
    min-width: 0;
    overflow: hidden;
}

.device-dashboard-metric-copy strong {
    display: block;
    color: var(--mud-palette-text-primary);
    font-size: var(--rg-type-title-large-size);
    font-weight: var(--rg-font-weight-strong);
    font-variant-numeric: tabular-nums;
    line-height: var(--rg-type-title-large-line-height);
}

.device-dashboard-sparkline {
    width: 100%;
    height: 56px;
    min-width: 0;
    overflow: visible;
}

.device-dashboard-sparkline polyline {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.device-dashboard-metric-detail {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-dashboard-storage-capacity {
    display: grid;
    grid-column: 1 / -1;
    gap: var(--rg-space-3);
    min-width: 0;
    padding: var(--rg-space-3);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-raised);
}

.device-dashboard-storage-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rg-space-4);
}

.device-dashboard-storage-heading > div {
    min-width: 0;
}

.device-dashboard-storage-heading strong {
    flex: 0 0 auto;
    color: var(--mud-palette-text-primary);
    font-size: var(--rg-type-title-medium-size);
    font-variant-numeric: tabular-nums;
}

.device-dashboard-storage-progress {
    width: 100%;
}

.device-dashboard-network-overview {
    display: grid;
    gap: var(--rg-space-2);
    padding-top: var(--rg-space-4);
    border-top: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

.device-dashboard-network-status {
    display: flex;
    align-items: center;
    gap: var(--rg-space-2);
}

.device-dashboard-network-indicator {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
}

.device-dashboard-network-indicator.is-connected {
    background: var(--mud-palette-success);
}

.device-dashboard-network-overview .mud-chart {
    min-height: 88px;
}

.device-dashboard-network-overview .mud-charts-grid,
.device-dashboard-network-overview .mud-charts-xaxis,
.device-dashboard-network-overview .mud-charts-yaxis {
    display: none;
}

.device-dashboard-network-speeds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rg-space-2);
    color: var(--mud-palette-text-secondary);
    font-size: var(--rg-type-label-small-size);
}

.device-dashboard-network-speeds span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-space-1);
    min-width: 0;
}

.device-dashboard-network-speeds strong {
    grid-column: 1 / -1;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.device-dashboard-network-speeds .is-download > .mud-icon-root {
    color: var(--rg-status-success-text);
}

.device-dashboard-network-speeds .is-upload > .mud-icon-root {
    color: var(--rg-status-error-text);
}

.device-dashboard-services {
    padding-bottom: 0;
}

.device-dashboard-service-list {
    display: grid;
}

.device-dashboard-service-item {
    min-width: 0;
    padding-block: var(--rg-space-4);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.device-dashboard-service-item:first-child {
    border-top: 0;
}

.device-dashboard-status-row,
.device-dashboard-unavailable {
    display: flex;
    align-items: center;
    gap: var(--rg-space-3);
    min-height: 72px;
}

.device-dashboard-status-row > .mud-icon-root {
    color: var(--mud-palette-action-default);
    font-size: 2rem;
}

.device-dashboard-status-row.is-enabled > .mud-icon-root {
    color: var(--rg-status-success-text);
}

.device-dashboard-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rg-space-3);
}

.device-dashboard-fact .mud-typography:last-child {
    text-align: right;
}

.device-dashboard-progress-skeleton {
    border-radius: var(--rg-shape-pill);
}

.device-dashboard-loading .mud-skeleton {
    max-width: 100%;
}

.device-dashboard-action-skeleton {
    border-radius: var(--rg-shape-control);
}

.device-dashboard-content-skeleton {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rg-space-3);
    min-height: 64px;
}

.device-dashboard-content-skeleton-copy {
    display: grid;
    gap: var(--rg-space-1);
    min-width: 0;
}

.device-dashboard-app-skeleton-icon {
    border-radius: var(--rg-shape-app-tile);
    background: var(--rg-surface-container);
}

.device-dashboard-app-skeleton-name {
    margin-inline: auto;
    border-radius: var(--rg-shape-pill);
}

@media (max-width: 1099.98px) {
    .device-dashboard-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .device-dashboard-service-grid,
    .device-dashboard-metric-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rg-space-4);
    }

    .device-dashboard-metric {
        grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.75fr);
    }

}

@media (max-width: 389.98px) {
    .device-dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .device-dashboard-panel {
        padding: var(--rg-space-4);
    }

    .device-dashboard-metric {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599.98px) {
    .devices-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}