.devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 400px));
    gap: var(--rg-space-4);
    align-items: stretch;
}

.devices-tile-link {
    display: block;
    min-width: 0;
    min-height: 44px;
    color: var(--mud-palette-text-primary);
    border-radius: var(--rg-shape-card);
}

.devices-tile-link:focus-visible {
    outline: var(--rg-focus-ring);
    outline-offset: var(--rg-focus-ring-offset);
}

.devices-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 244px;
    padding: var(--rg-space-5);
    border-radius: var(--rg-shape-card);
    background: var(--device-appearance-container, var(--mud-palette-surface));
    transition: background-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.devices-tile-chevron {
    position: absolute;
    top: var(--rg-space-5);
    right: var(--rg-space-5);
    color: var(--mud-palette-text-secondary);
    transition: color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.devices-tile-link:hover .devices-tile-chevron,
.devices-tile-link:focus-visible .devices-tile-chevron {
    color: var(--mud-palette-text-primary);
}

.devices-tile-link:hover .devices-tile {
    background: var(--rg-state-hover);
}

.devices-tile-link:active .devices-tile {
    background: var(--rg-state-selected);
}

.devices-tile-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--rg-space-4);
    border-radius: var(--rg-shape-control);
    color: var(--mud-palette-text-primary);
    background: var(--rg-surface-raised);
}

.devices-tile-icon .mud-icon-root {
    font-size: 1.75rem;
}

.devices-tile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.devices-tile-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--rg-space-1);
    min-height: var(--rg-control-height-sm);
    padding-inline: var(--rg-space-3);
    margin-top: var(--rg-space-2);
    border-radius: var(--rg-shape-pill);
    background: var(--rg-surface-container-nested);
}

.devices-tile-status.is-online {
    color: var(--rg-status-success-text);
    background: var(--rg-status-success-container);
}

.devices-tile-status.is-offline {
    color: var(--mud-palette-text-secondary);
}

.devices-tile-status.is-checking {
    color: var(--rg-status-info-text);
    background: var(--rg-status-info-container);
}

.devices-tile-status .mud-typography {
    color: inherit;
    font-weight: var(--rg-font-weight-medium);
}

.devices-tile-description {
    display: -webkit-box;
    min-height: 3em;
    max-height: 3em;
    margin-top: var(--rg-space-3);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.devices-tile-description.is-empty {
    visibility: hidden;
}

.devices-tile-location {
    display: flex;
    align-items: center;
    gap: var(--rg-space-1);
    min-width: 0;
    min-height: 20px;
    margin-top: auto;
    color: var(--mud-palette-text-secondary);
}

.devices-tile-location .mud-icon-root {
    flex: 0 0 auto;
}

.devices-tile-location .mud-typography {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.devices-tile-location.is-empty {
    visibility: hidden;
}

/* MudPaper and MudStack render outside the page component's CSS scope. */
.device-settings-page .device-settings-section {
    padding: var(--rg-space-5);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-workspace-panel);
}

@media (max-width: 599.98px) {
    .device-settings-page .device-settings-section {
        padding: var(--rg-space-4);
    }

    .device-settings-page .device-settings-actions {
        flex-direction: column;
    }

    .device-settings-page .device-settings-actions > * {
        width: 100%;
    }
}