/* ========================================
   FRONTEND POLISH AND RESPONSIVE SAFETY
   Final shared overrides loaded after page-specific CSS.
   ======================================== */

:root {
    --page-gutter-desktop: 1rem;
    --page-gutter-tablet: 0.85rem;
    --page-gutter-mobile: 0.55rem;
    --page-gutter-small: 0.4rem;
    --page-bottom-safe: max(1rem, env(safe-area-inset-bottom));
    --fab-size: 56px;
    --fab-size-mobile: 48px;
    --fab-inset: max(1rem, calc(env(safe-area-inset-right) + 1rem), calc(env(safe-area-inset-bottom) + 1rem));
    --fab-inset-mobile: max(0.75rem, calc(env(safe-area-inset-right) + 0.75rem), calc(env(safe-area-inset-bottom) + 0.75rem));
    --card-gap: 0.8rem;
    --card-gap-mobile: 0.65rem;
    --surface-radius: 8px;
    --surface-padding: 1rem;
    --surface-padding-mobile: 0.7rem;
    --dialog-radius: 12px;
    --dialog-header-background: linear-gradient(135deg, var(--surface-solid-accent, #0d2c31) 0%, #10242b 100%);
    --dialog-border: rgba(var(--color-primary-rgb), 0.26);
    --dialog-shadow: 0 24px 64px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.025);
    --dialog-backdrop: rgba(2, 8, 12, 0.72);
    --motion-standard: 180ms cubic-bezier(0.2, 0, 0, 1);
    --motion-enter: 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
#app,
.app-container,
.app-layout,
.app-main {
    max-width: 100%;
    overflow-x: clip;
}

body {
    overscroll-behavior-x: none;
    text-rendering: optimizeLegibility;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

button,
input,
select,
textarea,
.e-control,
.e-btn,
.e-input,
.e-input-group {
    min-width: 0;
}

/* Keep icon + text buttons readable without shifting icon-only buttons. */
:where(button, .e-btn, .btn, a[role="button"], .mud-button-root, .mud-button-label):has(> :is(i, span)[class^="fa"], > :is(i, span)[class*=" fa-"], > .e-btn-icon, > .mud-icon-root) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

:where(button, .e-btn, .btn, a[role="button"], .mud-button-root, .mud-button-label):has(> :is(i, span)[class^="fa"], > :is(i, span)[class*=" fa-"], > .e-btn-icon, > .mud-icon-root) > :is(i, span)[class^="fa"],
:where(button, .e-btn, .btn, a[role="button"], .mud-button-root, .mud-button-label):has(> :is(i, span)[class^="fa"], > :is(i, span)[class*=" fa-"], > .e-btn-icon, > .mud-icon-root) > :is(i, span)[class*=" fa-"],
:where(button, .e-btn, .btn, a[role="button"], .mud-button-root, .mud-button-label):has(> :is(i, span)[class^="fa"], > :is(i, span)[class*=" fa-"], > .e-btn-icon, > .mud-icon-root) > :is(.e-btn-icon, .mud-icon-root) {
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
}

.app-content {
    scrollbar-gutter: stable;
    padding-bottom: var(--page-bottom-safe);
}

.app-content--map {
    padding: 0 !important;
    scrollbar-gutter: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.lbsa-container,
.lbsa-container-fluid,
.page-transition-wrapper,
.page-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.lbsa-container-fluid:not(.lbsa-container-fluid--map) {
    padding-left: var(--page-gutter-desktop);
    padding-right: var(--page-gutter-desktop);
}

/* Page shells */
:is(
    .admin-container,
    .admin-invite-container,
    .add-organization-page,
    .batteries-summary-container,
    .battery-calibration-container,
    .battery-detail-container,
    .bms-firmware-container,
    .collaboration-container,
    .device-control-container,
    .device-requests-page,
    .devices-page,
    .esp-firmware-container,
    .gmail-auth-page,
    .link-monitor-container,
    .live-monitor-container,
    .notification-settings-container,
    .notifications-page,
    .organization-container,
    .organizations-page,
    .profile-container,
    .register-container,
    .sessions-container,
    .site-edit-container,
    .sites-container,
    .wifi-config-container
) {
    width: 100%;
    max-width: min(100%, 1720px);
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
    box-sizing: border-box;
}

/* Surfaces and cards */
:is(
    .e-card,
    .card,
    .card-custom,
    .dark-card,
    .header-card,
    .stats-card,
    .stats-overview,
    .filter-section,
    .professional-filter,
    .section-card,
    .site-card,
    .org-card,
    .user-card,
    .device-card,
    .firmware-card,
    .session-card,
    .template-item,
    .notification-item,
    .warning-card,
    .connection-status-card,
    .wifi-config-card,
    .connected-device-card,
    .device-status-card,
    .commands-card,
    .battery-card,
    .collaboration-card,
    .info-card,
    .info-box,
    .item-card
) {
    border-radius: var(--surface-radius) !important;
    max-width: 100%;
    min-width: 0;
}

:is(
    .e-card,
    .card,
    .card-custom,
    .header-card,
    .stats-card,
    .stats-overview,
    .filter-section,
    .professional-filter,
    .section-card,
    .site-card,
    .org-card,
    .user-card,
    .device-card,
    .firmware-card,
    .session-card,
    .notification-item,
    .warning-card,
    .connection-status-card,
    .wifi-config-card,
    .connected-device-card,
    .device-status-card,
    .commands-card
) {
    margin-bottom: var(--card-gap);
}

.battery-overview-card > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.battery-detail-container .e-card-content > div[style*="display: flex"] {
    min-width: 0;
}

.device-control-container .header-text,
.wifi-config-container .header-text {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

:is(
    .e-card,
    .item-card,
    .site-card,
    .org-card,
    .user-card,
    .device-card,
    .firmware-card,
    .session-card,
    .notification-item
) {
    transition:
        border-color var(--motion-standard),
        background-color var(--motion-standard),
        box-shadow var(--motion-standard),
        transform var(--motion-standard);
}

@media (hover: hover) and (pointer: fine) {
    :is(.e-card, .item-card, .site-card, .org-card, .user-card, .device-card, .firmware-card, .session-card):hover {
        transform: translateY(-1px);
    }
}

.page-header,
.sites-header,
.section-header,
.card-header-custom,
.device-card-header,
.site-card-header,
.firmware-header,
.group-header,
.connected-header {
    min-width: 0;
}

/* Shared page identity treatment. Page-specific styles load earlier and keep their layout. */
:is(
    .page-header,
    .sites-header,
    .settings-page-header,
    .page-header-card,
    .devices-page > .stats-overview,
    .deleted-devices-hero,
    .collaboration-header,
    .sessions-header,
    .requests-header,
    .site-edit-header
) {
    margin: 0 0 0.85rem !important;
    padding: 0.78rem 0.95rem !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.18) !important;
    border-left: 3px solid var(--color-primary) !important;
    border-radius: var(--surface-radius) !important;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.09), rgba(255, 255, 255, 0.025)) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18) !important;
}

.page-header-card .page-header {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(
    .page-header,
    .sites-header,
    .settings-page-header,
    .page-header-card,
    .devices-page > .stats-overview,
    .deleted-devices-hero,
    .collaboration-header,
    .sessions-header,
    .requests-header,
    .site-edit-header
) :is(h1, h2, .page-title, .requests-title) {
    margin: 0 !important;
    color: var(--color-primary-light) !important;
    font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
}

:is(
    .page-header,
    .sites-header,
    .settings-page-header,
    .page-header-card,
    .devices-page > .stats-overview,
    .deleted-devices-hero,
    .collaboration-header,
    .sessions-header,
    .requests-header,
    .site-edit-header
) :is(h1, h2, .page-title, .requests-title) i {
    color: var(--color-primary) !important;
}

:is(
    .page-header,
    .sites-header,
    .settings-page-header,
    .page-header-card,
    .devices-page > .stats-overview,
    .deleted-devices-hero,
    .collaboration-header,
    .sessions-header,
    .requests-header,
    .site-edit-header
) p {
    margin: 0.3rem 0 0 !important;
    color: var(--text-secondary) !important;
    line-height: 1.45;
}

.header-card {
    border-color: rgba(var(--color-primary-rgb), 0.18) !important;
    border-left: 3px solid var(--color-primary) !important;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.075), rgba(255, 255, 255, 0.02)) !important;
}

.section-header :is(h2, h3, h4),
.connected-header :is(h2, h3, h4) {
    color: var(--color-primary-light) !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em;
}

.section-header > i,
.connected-header > i {
    color: var(--color-primary) !important;
}

.page-header h1,
.sites-header h1,
.page-title,
.section-header h3,
.header-text h1,
.app-header h2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.page-header:focus,
.page-header:focus-visible,
.page-header h1:focus,
.page-header h1:focus-visible,
.sites-header:focus,
.sites-header:focus-visible,
.sites-header h1:focus,
.sites-header h1:focus-visible,
.section-header:focus,
.section-header:focus-visible,
.section-header h3:focus,
.section-header h3:focus-visible,
.header-card:focus,
.header-card:focus-visible,
.header-text h1:focus,
.header-text h1:focus-visible,
.live-monitor-title:focus,
.live-monitor-title:focus-visible,
.page-title:focus,
.page-title:focus-visible {
    outline: none !important;
}

.header-actions,
.form-actions,
.modal-actions,
.button-group,
.upload-actions,
.package-actions,
.legacy-actions,
.device-actions,
.binding-actions,
.session-actions,
.test-actions {
    min-width: 0;
    flex-wrap: wrap;
}

/* Data-heavy component controls */
.e-grid,
.e-gridcontent,
.e-content,
.e-table,
.e-listview,
.e-dialog,
.e-dlg-content {
    max-width: 100%;
}

.e-grid .e-gridcontent,
.e-grid .e-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.e-grid .e-headercell,
.e-grid .e-rowcell {
    overflow-wrap: anywhere;
}

/* Floating actions: keep every FAB fully inside the viewport and away from device safe areas. */
:is(
    #scanFab,
    #refreshFab,
    .floating-toggle-btn,
    .floating-toggle-btn-monitor,
    .floating-refresh-btn,
    .e-fab.e-btn.e-fab-fixed
) {
    position: fixed !important;
    inset: auto var(--fab-inset) var(--fab-inset) auto !important;
    width: var(--fab-size);
    height: var(--fab-size);
    min-width: var(--fab-size);
    min-height: var(--fab-size);
    margin: 0 !important;
    z-index: 1200 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.floating-refresh-btn {
    border: 1px solid rgba(0, 188, 212, 0.55);
    border-radius: 50%;
    background: linear-gradient(135deg, #00bcd4 0%, #00acc1 100%);
    color: #001014;
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.35);
    transition: transform var(--motion-standard), box-shadow var(--motion-standard), opacity var(--motion-standard);
}

.floating-refresh-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 10px 28px rgba(0, 188, 212, 0.45);
}

.floating-refresh-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.floating-refresh-btn.refreshing i {
    animation: frontend-polish-spin 0.9s linear infinite;
}

@keyframes frontend-polish-spin {
    to {
        transform: rotate(360deg);
    }
}

.battery-detail-container {
    padding-bottom: calc(var(--fab-size) + var(--fab-inset) + 1rem);
}

/* Dialogs: keep mobile dialogs inside the viewport unless a page opted into fullscreen. */
.e-dlg-container {
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
}

.e-dialog:not(.module-view-modal):not(.cell-view-modal) {
    max-width: calc(100vw - 1rem) !important;
}

.e-dialog .e-dlg-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.lbsa-mobile-dialog-host {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    pointer-events: none;
    overscroll-behavior: contain;
}

.lbsa-mobile-dialog-overlay {
    position: absolute;
    inset: 0;
    background: var(--dialog-backdrop);
    backdrop-filter: blur(5px) saturate(0.75);
    pointer-events: auto;
    animation: lbsa-dialog-backdrop-in var(--motion-enter) both;
}

.lbsa-mobile-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--dialog-border);
    border-radius: var(--dialog-radius);
    box-shadow: var(--dialog-shadow);
    overflow: hidden;
    pointer-events: auto;
    animation: lbsa-dialog-in var(--motion-enter) both;
    isolation: isolate;
}

@keyframes lbsa-dialog-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lbsa-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lbsa-mobile-dialog-close {
    position: absolute;
    top: 0.55rem;
    right: 0.65rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.24);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: background-color var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard), transform var(--motion-standard);
}

.lbsa-mobile-dialog-close:hover {
    background: rgba(var(--color-primary-rgb), 0.2);
    border-color: rgba(var(--color-primary-rgb), 0.5);
    color: #fff;
    transform: translateY(-1px);
}

.lbsa-mobile-dialog-close:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.lbsa-mobile-dialog-header {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100% !important;
    box-sizing: border-box;
    min-height: 56px;
    display: flex;
    align-items: center;
    background: var(--dialog-header-background);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.22);
    padding: 0.8rem 3.75rem 0.8rem 1.15rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.lbsa-mobile-dialog-header > * {
    width: 100%;
    min-width: 0;
}

.lbsa-mobile-dialog-header :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

.lbsa-mobile-dialog-header i {
    flex: 0 0 auto;
    color: var(--color-primary-light);
    font-size: 1.05rem;
}

.lbsa-mobile-dialog-header :is(.danger, .text-danger, .delete-modal-header) i,
.lbsa-mobile-dialog-header i.text-danger {
    color: var(--color-danger) !important;
}

.lbsa-mobile-dialog-header :is(.text-warning, .warning) i,
.lbsa-mobile-dialog-header i.text-warning {
    color: var(--color-warning) !important;
}

.lbsa-mobile-dialog-header :is(.text-success, .success) i,
.lbsa-mobile-dialog-header i.text-success {
    color: var(--color-success) !important;
}

.lbsa-mobile-dialog-header > :is(
    .dialog-header,
    .modal-header,
    .modal-header-custom,
    .modal-header-gradient,
    .modern-modal-header,
    .firmware-modal-header,
    .device-group-modal-header,
    .delete-modal-header,
    .name-modal-header,
    .friendly-name-modal-header,
    .request-dialog-header,
    .direct-connect-setup-dialog-header,
    .remote-access-dialog-header,
    .cluster-energy-header,
    .system-config-modal-header,
    .dc-coupled-restart-header
) {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.lbsa-mobile-dialog-header > .modern-modal-header::before {
    content: none !important;
    display: none !important;
}

.lbsa-mobile-dialog-header > :is(
    .dialog-header,
    .modal-header,
    .modal-header-custom,
    .modal-header-gradient,
    .modern-modal-header,
    .firmware-modal-header,
    .device-group-modal-header,
    .delete-modal-header,
    .name-modal-header,
    .friendly-name-modal-header,
    .request-dialog-header,
    .direct-connect-setup-dialog-header,
    .remote-access-dialog-header,
    .cluster-energy-header,
    .system-config-modal-header,
    .dc-coupled-restart-header
) :is(h5, h4, span) {
    min-width: 0;
}

.lbsa-mobile-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 1.1rem 1.2rem;
    line-height: 1.5;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.lbsa-mobile-dialog-content > :first-child {
    margin-top: 0;
}

.lbsa-mobile-dialog-content > :last-child {
    margin-bottom: 0;
}

.lbsa-mobile-dialog > .lbsa-mobile-dialog-content:has(> .lbsa-mobile-dialog-header) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.lbsa-mobile-dialog > .lbsa-mobile-dialog-content:has(> .lbsa-mobile-dialog-header) > .lbsa-mobile-dialog-header {
    width: 100% !important;
    align-self: stretch;
    box-sizing: border-box;
}

.lbsa-mobile-dialog > .lbsa-mobile-dialog-content:has(> .lbsa-mobile-dialog-header) > .lbsa-mobile-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.85rem 1.05rem;
}

.lbsa-mobile-dialog > .lbsa-mobile-dialog-content:has(> .lbsa-mobile-dialog-header) > .lbsa-mobile-dialog-footer {
    padding: 0.8rem 1.25rem;
}

.lbsa-mobile-dialog-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--color-primary) 8%);
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.16);
    padding: 0.85rem 1.2rem;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.12);
}

.lbsa-mobile-dialog-footer > :is(.modal-actions, .form-actions, .request-dialog-actions, .dialog-actions, .button-group) {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    width: 100%;
    margin: 0 !important;
}

/* System configuration and TOU dialogs */
.system-config-dialog.e-dialog,
.lbsa-mobile-dialog.system-config-dialog {
    background: var(--bg-secondary) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.22) !important;
    border-radius: var(--surface-radius) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

.system-config-dialog.e-dialog .e-dlg-header-content,
.lbsa-mobile-dialog.system-config-dialog .lbsa-mobile-dialog-header {
    background: var(--surface-solid-accent, #0d2c31) !important;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.18) !important;
    padding: 0.72rem 3.75rem 0.72rem 1.05rem !important;
}

.system-config-dialog.e-dialog .e-dlg-header,
.lbsa-mobile-dialog.system-config-dialog .lbsa-mobile-dialog-header {
    width: 100%;
    background: var(--surface-solid-accent, #0d2c31) !important;
    background-color: var(--surface-solid-accent, #0d2c31) !important;
    box-shadow: none !important;
}

.system-config-dialog.e-dialog .e-dlg-content,
.lbsa-mobile-dialog.system-config-dialog .lbsa-mobile-dialog-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    padding: 0.85rem 1.05rem !important;
}

.system-config-dialog.e-dialog .e-footer-content,
.lbsa-mobile-dialog.system-config-dialog .lbsa-mobile-dialog-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.16) !important;
    padding: 0.8rem 1.25rem !important;
}

.system-config-modal-header {
    width: min(100%, calc(100% - 2.2rem));
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.system-config-modal-header i {
    color: var(--color-primary-light) !important;
    font-size: 1.1rem;
}

.system-config-title-block {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.1rem;
}

.system-config-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.system-config-subtitle {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-config-content {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: 100%;
    min-height: 0;
}

.system-config-loading-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.16);
    border-radius: var(--surface-radius);
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--text-secondary);
    flex: 0 0 auto;
}

.system-config-skeleton-block {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--surface-radius) - 3px);
    background: rgba(255, 255, 255, 0.09);
}

.system-config-skeleton-block::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    animation: systemConfigSkeletonShimmer 1.35s ease-in-out infinite;
}

@keyframes systemConfigSkeletonShimmer {
    100% {
        transform: translateX(100%);
    }
}

.system-config-toolbar--skeleton {
    pointer-events: none;
}

.system-config-skeleton-tab {
    width: 156px;
    height: 30px;
}

.system-config-skeleton-status {
    width: 78px;
    height: 26px;
    border-radius: 999px;
}

.system-config-skeleton-message {
    width: min(260px, 34vw);
    height: 16px;
}

.system-config-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    flex: 0 0 auto;
}

.system-config-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.25rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.18);
    border-radius: var(--surface-radius);
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.system-config-tab,
.cluster-tab {
    appearance: none;
    border: 0;
    font: inherit;
}

.system-config-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 36px;
    min-width: 0;
    padding: 0.48rem 0.8rem;
    border-radius: calc(var(--surface-radius) - 2px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.2;
    transition: background-color var(--motion-standard), color var(--motion-standard), box-shadow var(--motion-standard);
    white-space: nowrap;
}

.system-config-tab:hover {
    background: rgba(var(--color-primary-rgb), 0.09);
    color: var(--text-primary);
}

.system-config-tab.active {
    background: rgba(var(--color-primary-rgb), 0.18);
    color: var(--color-primary-light);
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.3);
}

.system-config-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    max-width: 100%;
    padding: 0.24rem 0.65rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.09);
    color: var(--color-primary-light);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.system-config-status.pending,
.system-config-status.dirty,
.system-config-status.unsynced {
    border-color: rgba(var(--color-warning-rgb), 0.38);
    background: rgba(var(--color-warning-rgb), 0.12);
    color: #ffbd59;
}

.system-config-status.error,
.system-config-status.failed {
    border-color: rgba(var(--color-danger-rgb), 0.42);
    background: rgba(var(--color-danger-rgb), 0.13);
    color: #ff8a80;
}

.system-config-status.synced,
.system-config-status.success {
    border-color: rgba(var(--color-success-rgb), 0.36);
    background: rgba(var(--color-success-rgb), 0.13);
    color: #81c784;
}

.system-config-sync-state {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: 0;
    flex: 1 1 auto;
}

.system-config-status-message {
    min-width: 0;
    max-width: min(34rem, 54vw);
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-config-grid {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 0.15rem;
    scrollbar-color: rgba(var(--color-primary-rgb), 0.35) rgba(255, 255, 255, 0.04);
    scrollbar-width: thin;
}

.system-config-aux-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(69, 177, 255, 0.28);
    border-radius: 0.75rem;
    background: rgba(23, 94, 153, 0.12);
}

.system-config-aux-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.7rem;
}

.system-config-aux-heading > i {
    color: #45b1ff;
    font-size: 1.35rem;
}

.system-config-aux-heading strong,
.system-config-aux-heading span {
    display: block;
}

.system-config-aux-heading strong {
    color: #eef7ff;
    font-size: 0.92rem;
}

.system-config-aux-heading span {
    margin-top: 0.15rem;
    color: rgba(223, 235, 247, 0.62);
    font-size: 0.73rem;
}

.system-config-aux-select {
    width: 100%;
}

.system-config-vsd-scan-notice,
.system-config-vsd-scan-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-top: -0.25rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 0.72rem;
    background: linear-gradient(110deg, rgba(13, 148, 136, 0.1), rgba(15, 23, 42, 0.34));
    animation: system-config-vsd-action-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.system-config-vsd-scan-notice {
    justify-content: flex-start;
}

.system-config-vsd-scan-notice > div,
.system-config-vsd-scan-action > div {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

.system-config-vsd-scan-notice strong,
.system-config-vsd-scan-action strong {
    color: #e6fffb;
    font-size: 0.8rem;
}

.system-config-vsd-scan-notice span,
.system-config-vsd-scan-action span {
    color: rgba(204, 251, 241, 0.66);
    font-size: 0.72rem;
}

.system-config-vsd-scan-icon {
    display: grid;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.14);
    color: #5eead4 !important;
}

.system-config-vsd-scan-icon i {
    animation: system-config-vsd-radar 2.4s linear infinite;
}

.system-config-vsd-scan-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.35rem;
    padding: 0.5rem 0.78rem;
    border: 1px solid rgba(45, 212, 191, 0.45);
    border-radius: 0.62rem;
    background: rgba(13, 148, 136, 0.14);
    color: #ccfbf1;
    font-weight: 700;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.system-config-vsd-scan-button:hover:not(:disabled) {
    border-color: rgba(94, 234, 212, 0.75);
    background: rgba(13, 148, 136, 0.26);
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.18);
    transform: translateY(-1px);
}

.system-config-vsd-scan-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

@keyframes system-config-vsd-action-enter {
    from { opacity: 0; transform: translateY(-0.35rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes system-config-vsd-radar {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .system-config-aux-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .system-config-vsd-scan-action {
        align-items: stretch;
        flex-direction: column;
    }

    .system-config-vsd-scan-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .system-config-vsd-scan-notice,
    .system-config-vsd-scan-action,
    .system-config-vsd-scan-icon i {
        animation: none;
    }
}

.battery-config-soc-override {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--color-warning-rgb), 0.32);
    border-radius: var(--surface-radius);
    background: rgba(var(--color-warning-rgb), 0.07);
}

.battery-config-soc-override__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--text-primary);
}

.battery-config-soc-override__heading > i {
    margin-top: 0.15rem;
    color: #ffbd59;
}

.battery-config-soc-override__heading > div {
    display: grid;
    gap: 0.15rem;
}

.battery-config-soc-override__heading span,
.battery-config-soc-override__message {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

.battery-config-soc-override__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.battery-config-soc-override__controls label {
    font-size: 0.82rem;
    font-weight: 600;
}

.battery-config-soc-override__controls input {
    width: 7rem;
    min-height: 36px;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.24);
    border-radius: var(--surface-radius);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
}

.battery-config-device-security {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 0.65rem;
    background: rgba(14, 116, 144, 0.08);
}

.battery-config-device-security__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.battery-config-device-security__heading > i {
    color: #38bdf8;
    font-size: 1.25rem;
}

.battery-config-device-security__heading > div {
    display: grid;
    gap: 0.15rem;
}

.battery-config-device-security__heading span,
.battery-config-device-security__action > span,
.battery-config-device-security__message {
    color: var(--text-muted, #9ca3af);
    font-size: 0.8rem;
}

.battery-config-device-security__levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.battery-config-device-security__level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
}

.battery-config-device-security__level strong {
    color: #7dd3fc;
    text-align: right;
}

.battery-config-device-security__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 640px) {
    .battery-config-device-security__levels {
        grid-template-columns: 1fr;
    }

    .battery-config-device-security__action {
        align-items: stretch;
        flex-direction: column;
    }
}

.direct-connect-password-panel {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.18);
}

.direct-connect-password-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
}

.direct-connect-password-status {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 500;
}

.direct-connect-password-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.direct-connect-password-input {
    min-height: 40px;
    width: 100%;
    border: 1px solid rgba(var(--color-primary-rgb), 0.24);
    border-radius: var(--surface-radius);
    padding: 8px 10px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.system-config-grid--loading {
    overflow: hidden;
}

.system-config-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
    align-items: center;
    gap: 0.65rem;
    padding: 0.52rem 0.72rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.12);
    border-radius: var(--surface-radius);
    background: rgba(255, 255, 255, 0.035);
}

.system-config-skeleton-row {
    pointer-events: none;
}

.system-config-skeleton-register {
    width: 48px;
    height: 22px;
    border-radius: 999px;
}

.system-config-skeleton-label {
    width: min(220px, 44vw);
    height: 18px;
}

.system-config-skeleton-field {
    width: 100%;
    height: 36px;
}

.system-config-setting-row--compound {
    align-items: center;
}

.system-config-setting-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: var(--text-primary);
    font-weight: 500;
}

.system-config-setting-label-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.system-config-setting-label-copy small {
    max-width: 42rem;
    color: var(--text-muted);
    font-size: 0.71rem;
    font-weight: 400;
    line-height: 1.35;
}

.setting-register,
.setting-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--color-primary-rgb), 0.18);
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary-light);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.setting-register {
    min-width: 2.25rem;
    padding: 0.16rem 0.45rem;
}

.system-config-setting-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.system-config-setting-value--toggles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 0;
}

.shared-setting-switch {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.52rem;
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 0.28rem 0.42rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.12);
    border-radius: calc(var(--surface-radius) - 2px);
    background: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
    cursor: pointer;
}

.shared-setting-switch--state {
    justify-content: flex-end;
    width: 100%;
    border-color: transparent;
    background: transparent;
    padding: 0;
}

.shared-setting-switch-state {
    min-width: 4.7rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
}

.setting-unit {
    min-width: 2rem;
    padding: 0.2rem 0.5rem;
}

.tou-config-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.tou-config-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 0.65rem;
    align-items: stretch;
    flex: 0 0 auto;
}

.tou-enable-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0.48rem 0.7rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.14);
    border-radius: var(--surface-radius);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    cursor: pointer;
}

.tou-cluster-dc-row {
    min-height: 38px;
    padding-block: 0.45rem;
}

.tou-enable-row > span:not(.tou-toggle),
.tou-zone-enabled > span:not(.tou-toggle) {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.tou-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    opacity: 0;
}

.tou-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    transition: background-color var(--motion-standard), border-color var(--motion-standard), box-shadow var(--motion-standard);
}

.tou-toggle::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #b8bec9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
    transform: translate(0, -50%);
    transition: transform var(--motion-standard), background-color var(--motion-standard);
}

.system-config-dialog .tou-toggle-input:checked + .tou-toggle {
    border-color: rgba(0, 188, 212, 0.68) !important;
    background-color: rgba(0, 188, 212, 0.42) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 188, 212, 0.18), 0 0 0 2px rgba(0, 188, 212, 0.08) !important;
}

.system-config-dialog label:has(.tou-toggle-input:checked) .tou-toggle {
    border-color: rgba(0, 188, 212, 0.68) !important;
    background-color: rgba(0, 188, 212, 0.42) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 188, 212, 0.18), 0 0 0 2px rgba(0, 188, 212, 0.08) !important;
}

.system-config-dialog .tou-toggle-input:checked + .tou-toggle::after {
    left: 27px !important;
    background: #4dd0e1 !important;
    transform: translateY(-50%) !important;
}

.system-config-dialog label:has(.tou-toggle-input:checked) .tou-toggle::after {
    left: 27px !important;
    background: #4dd0e1 !important;
    transform: translateY(-50%) !important;
}

.tou-toggle-input:focus-visible + .tou-toggle {
    border-color: rgba(var(--color-primary-rgb), 0.85);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}

.tou-toggle-input:disabled + .tou-toggle {
    cursor: not-allowed;
    opacity: 0.55;
}

.tou-mode-field,
.tou-time-field,
.tou-soc-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.tou-mode-field {
    box-sizing: border-box;
    justify-content: flex-end;
    overflow: visible;
    padding: 0.18rem 0.55rem 0;
}

.tou-mode-field > label,
.tou-time-field > label,
.tou-soc-field > label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
}

.system-config-dialog .tou-mode-field .e-input-group,
.system-config-dialog .tou-mode-field .e-control-wrapper,
.system-config-dialog .tou-time-field .e-input-group,
    .system-config-dialog .tou-time-field .e-control-wrapper,
    .system-config-dialog .system-config-setting-value .e-input-group,
    .system-config-dialog .system-config-setting-value .e-control-wrapper {
    width: 100% !important;
    min-height: 36px !important;
    border-color: rgba(var(--color-primary-rgb), 0.18) !important;
    border-radius: calc(var(--surface-radius) - 2px) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.system-config-dialog .e-input,
.system-config-dialog .e-input-group input,
.system-config-dialog .e-control-wrapper input {
    box-sizing: border-box !important;
    color: var(--text-primary) !important;
    padding-left: 0.6rem !important;
    padding-right: 2.05rem !important;
    text-indent: 0 !important;
}

.system-config-dialog .e-input-group:focus-within,
.system-config-dialog .e-control-wrapper:focus-within {
    border-color: rgba(var(--color-primary-rgb), 0.45) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12) !important;
}

.system-config-dialog .e-input-group-icon,
.system-config-dialog .e-ddl-icon,
.system-config-dialog .e-time-icon {
    color: var(--color-primary-light) !important;
    min-width: 2rem !important;
    width: 2rem !important;
}

.system-config-dialog .mud-tou-time-picker {
    display: block;
    width: 100%;
    height: 36px;
    min-height: 36px;
}

.system-config-dialog .mud-tou-time-picker .mud-input-control,
.system-config-dialog .mud-tou-time-picker .mud-input-control-input-container,
.system-config-dialog .mud-tou-time-picker .mud-input {
    width: 100%;
    height: 36px;
    min-height: 36px;
    margin: 0;
}

.system-config-dialog .mud-tou-time-picker .mud-input {
    border-radius: calc(var(--surface-radius) - 2px);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-primary) !important;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    padding: 0 2rem 0 0 !important;
}

.system-config-dialog .mud-tou-time-picker input.mud-input-root {
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    padding: 8px 0 8px 0.6rem !important;
    cursor: pointer;
}

.system-config-dialog .mud-tou-time-picker .mud-input-outlined-border {
    height: 36px;
    border-color: rgba(var(--color-primary-rgb), 0.18) !important;
    border-radius: calc(var(--surface-radius) - 2px) !important;
}

.system-config-dialog .mud-tou-time-picker .mud-input:hover .mud-input-outlined-border,
.system-config-dialog .mud-tou-time-picker .mud-input:focus-within .mud-input-outlined-border {
    border-color: rgba(var(--color-primary-rgb), 0.45) !important;
}

.system-config-dialog .mud-tou-time-picker .mud-input:focus-within .mud-input-outlined-border {
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12);
}

.system-config-dialog .mud-tou-time-picker .mud-input-adornment {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 2rem;
    height: 36px;
    margin: 0;
}

.system-config-dialog .mud-tou-time-picker .mud-input-adornment-icon-button {
    width: 2rem;
    height: 36px;
    min-width: 2rem;
    padding: 0;
    margin: 0;
    color: var(--color-primary-light) !important;
}

.system-config-dialog .mud-tou-time-picker .mud-icon-root {
    width: 18px;
    height: 18px;
    color: var(--color-primary-light) !important;
}

.cluster-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.35rem;
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 0.1rem 0;
    scrollbar-width: thin;
}

.cluster-tabs::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.cluster-tabs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.cluster-tabs::-webkit-scrollbar-thumb {
    background: rgba(var(--color-primary-rgb), 0.35);
    border-radius: 999px;
}

.cluster-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.16);
    border-radius: calc(var(--surface-radius) - 2px);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.2;
    transition: background-color var(--motion-standard), border-color var(--motion-standard), color var(--motion-standard);
    white-space: nowrap;
}

.cluster-tab > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cluster-tab:hover {
    border-color: rgba(var(--color-primary-rgb), 0.32);
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--text-primary);
}

.cluster-tab.active {
    border-color: rgba(var(--color-primary-rgb), 0.48);
    background: rgba(var(--color-primary-rgb), 0.16);
    color: var(--color-primary-light);
}

.cluster-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.tou-zone-grid {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 0.15rem;
    scrollbar-color: rgba(var(--color-primary-rgb), 0.35) rgba(255, 255, 255, 0.04);
    scrollbar-width: thin;
}

.system-config-grid::-webkit-scrollbar,
.tou-zone-grid::-webkit-scrollbar {
    width: 8px;
}

.system-config-grid::-webkit-scrollbar-track,
.tou-zone-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.system-config-grid::-webkit-scrollbar-thumb,
.tou-zone-grid::-webkit-scrollbar-thumb {
    background: rgba(var(--color-primary-rgb), 0.35);
    border-radius: 999px;
}

.tou-zone-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.48fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem;
    padding: 0.52rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--surface-radius);
    background: rgba(255, 255, 255, 0.035);
}

.cluster-tou-skeleton-toggle {
    width: 160px;
    height: 28px;
}

.tou-zone-skeleton-row {
    pointer-events: none;
}

.tou-zone-skeleton-title {
    width: 120px;
    height: 24px;
}

.tou-zone-skeleton-field {
    width: 100%;
    height: 36px;
}

.tou-zone-row.enabled {
    border-color: rgba(var(--color-primary-rgb), 0.22);
    background: rgba(var(--color-primary-rgb), 0.055);
}

.tou-zone-row.tou-zone-row--current {
    position: relative;
    border-color: rgba(255, 193, 7, 0.58);
    background: rgba(255, 193, 7, 0.08);
    box-shadow: inset 3px 0 0 rgba(255, 193, 7, 0.85);
}

.tou-zone-row.tou-zone-row--active-now {
    border-color: rgba(76, 175, 80, 0.7);
    background: rgba(76, 175, 80, 0.12);
    box-shadow: inset 3px 0 0 rgba(76, 175, 80, 0.9);
}

.tou-zone-enabled {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    cursor: pointer;
}

.tou-current-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.25rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.tou-current-badge--active {
    border: 1px solid rgba(76, 175, 80, 0.68);
    background: rgba(76, 175, 80, 0.22);
    color: #6ee27b;
}

.tou-current-badge--inactive {
    border: 1px solid rgba(255, 193, 7, 0.68);
    background: rgba(255, 193, 7, 0.18);
    color: #ffc107;
}

.cluster-power-dialog .cluster-power-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

.cluster-power-dialog .cluster-power-choice-grid .e-btn,
.cluster-power-dialog .cluster-power-choice-grid .lbsa-btn {
    min-height: 2.5rem;
    justify-content: center;
}

@media (max-width: 520px) {
    .direct-connect-password-fields {
        grid-template-columns: 1fr;
    }

    .cluster-power-dialog .cluster-power-choice-grid {
        grid-template-columns: 1fr;
    }

    .lbsa-mobile-dialog-content :is(.modal-actions, .form-actions, .request-dialog-actions, .dialog-actions, .button-group) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .lbsa-mobile-dialog-content :is(.modal-actions, .form-actions, .request-dialog-actions, .dialog-actions, .button-group) > :is(button, .e-btn, .mud-button-root) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
        justify-content: center;
    }
}

.vsd-start-dialog {
    overflow: hidden;
    border: 1px solid rgba(39, 216, 199, 0.3) !important;
    border-radius: 12px !important;
    background: #10181c !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(39, 216, 199, 0.05) !important;
}

.vsd-start-dialog .e-dlg-header-content {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgba(39, 216, 199, 0.16) !important;
    background: linear-gradient(135deg, rgba(39, 216, 199, 0.13), rgba(39, 216, 199, 0.025)) !important;
}

.vsd-start-dialog .e-dlg-content {
    padding: 0 1.25rem 1.25rem !important;
    background: #10181c !important;
}

.vsd-start-dialog .e-footer-content {
    padding: 0.9rem 1.25rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: #0c1418 !important;
}

.vsd-start-dialog .dialog-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #78eee2;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.vsd-start-dialog .command-content {
    padding: 1.25rem 0 0;
}

.vsd-start-hero {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.15rem;
}

.vsd-start-hero__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(39, 216, 199, 0.36);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(39, 216, 199, 0.2), rgba(39, 216, 199, 0.07));
    color: #7ff6e9;
    font-size: 1.15rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.vsd-start-hero > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.vsd-start-hero__eyebrow {
    color: #56cfc3;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.vsd-start-hero strong {
    color: #f3f8f8;
    font-size: 1.18rem;
    line-height: 1.2;
}

.vsd-start-hero small {
    color: #91a6aa;
    font-size: 0.78rem;
}

.vsd-motion-warning-box {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem;
    margin: 0 0 0.8rem;
    border: 1px solid rgba(255, 177, 66, 0.34);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 167, 38, 0.12), rgba(255, 167, 38, 0.045));
}

.vsd-motion-warning-box__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 167, 38, 0.14);
    color: #ffc066;
    font-size: 1rem;
}

.vsd-motion-warning-box strong,
.vsd-control-summary strong {
    display: block;
    margin-bottom: 0.22rem;
    color: #f4f7f7;
    font-size: 0.84rem;
}

.vsd-motion-warning-box p,
.vsd-control-summary p {
    margin: 0;
    color: #aebdc0;
    font-size: 0.78rem;
    line-height: 1.48;
}

.vsd-control-summary {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.vsd-control-summary > i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(39, 216, 199, 0.09);
    color: #62dcd0;
    font-size: 0.95rem;
}

.vsd-start-dialog .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.vsd-start-dialog .dialog-footer .e-btn {
    min-width: 116px;
    min-height: 38px;
    justify-content: center;
    border-radius: 7px;
    font-weight: 800;
}

.vsd-frequency-dialog .lbsa-mobile-dialog-content {
    border-color: rgba(45, 212, 191, 0.3);
    background: #0d171c;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(45, 212, 191, 0.08);
}

.vsd-frequency-dialog .lbsa-mobile-dialog-header {
    border-bottom-color: rgba(45, 212, 191, 0.18);
    background: linear-gradient(135deg, rgba(13, 62, 66, 0.96), rgba(12, 32, 39, 0.98));
}

.vsd-frequency-dialog__header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #8af3e8;
    font-size: 1rem;
    font-weight: 800;
}

.vsd-frequency-dialog__content {
    display: grid;
    gap: 1rem;
    padding: 0.2rem 0;
}

.vsd-frequency-dialog__hero {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
}

.vsd-frequency-dialog__hero > div {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

.vsd-frequency-dialog__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(45, 212, 191, 0.36);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.2), rgba(13, 148, 136, 0.06));
    color: #99f6e4;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(13, 148, 136, 0.08);
}

.vsd-frequency-dialog__hero span:not(.vsd-frequency-dialog__icon) {
    color: #56cfc3;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.vsd-frequency-dialog__hero strong {
    overflow: hidden;
    color: #f5fbfb;
    font-size: 1.08rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vsd-frequency-dialog__hero small {
    color: #91a6aa;
    font-size: 0.72rem;
}

.vsd-frequency-dialog__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.vsd-frequency-dialog__stats > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.44);
}

.vsd-frequency-dialog__stats span {
    color: #7d969b;
    font-size: 0.64rem;
}

.vsd-frequency-dialog__stats strong {
    color: #e8f5f4;
    font-size: 0.83rem;
    white-space: nowrap;
}

.vsd-frequency-dialog__field {
    display: grid;
    gap: 0.4rem;
    color: #b9cbce;
    font-size: 0.72rem;
    font-weight: 700;
}

.vsd-frequency-dialog__field-help {
    color: #82979b;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.4;
}

.vsd-frequency-dialog__field-help span {
    display: block;
}

.vsd-frequency-dialog__input-shell:has(input:disabled) {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(30, 41, 59, 0.3);
    opacity: 0.72;
}

.vsd-frequency-dialog__input-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(45, 212, 191, 0.36);
    border-radius: 10px;
    background: #081216;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.vsd-frequency-dialog__input-shell:focus-within {
    border-color: rgba(94, 234, 212, 0.84);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

.vsd-frequency-dialog__input-shell input {
    min-width: 0;
    padding: 0.78rem 0.85rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f0fdfa;
    font-size: 1.05rem;
    font-weight: 800;
}

.vsd-frequency-dialog__input-shell > span {
    padding: 0.78rem 0.85rem;
    border-left: 1px solid rgba(148, 163, 184, 0.12);
    color: #63dacc;
    font-size: 0.75rem;
    font-weight: 800;
}

.vsd-frequency-dialog__validation,
.vsd-frequency-dialog__note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    padding: 0.72rem 0.8rem;
    border-radius: 9px;
    font-size: 0.73rem;
    line-height: 1.45;
}

.vsd-frequency-dialog__validation {
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.16);
    color: #fecaca;
}

.vsd-frequency-dialog__note {
    border: 1px solid rgba(245, 158, 11, 0.22);
    background: rgba(120, 53, 15, 0.1);
    color: #c9bda8;
}

.vsd-frequency-dialog__note i {
    margin-top: 0.15rem;
    color: #fbbf24;
}

.vsd-frequency-dialog__note p {
    margin: 0;
}

.vsd-frequency-dialog .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

@media (max-width: 520px) {
    .vsd-frequency-dialog__stats {
        grid-template-columns: 1fr;
    }
}

.tou-zone-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.72fr);
    gap: 0.5rem;
    min-width: 0;
}

.tou-time-fields,
.tou-soc-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    min-width: 0;
}

.tou-soc-input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
}

.tou-soc-input {
    width: 100%;
}

.system-config-dialog .tou-soc-input .mud-input-control,
.system-config-dialog .tou-soc-input .mud-input-control-input-container,
.system-config-dialog .tou-soc-input .mud-input {
    width: 100%;
    height: 36px;
    min-height: 36px;
    margin: 0;
}

.system-config-dialog .tou-soc-input .mud-input {
    border-radius: calc(var(--surface-radius) - 2px);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-primary) !important;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
}

.system-config-dialog .tou-soc-input input.mud-input-root {
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    padding: 8px 0.55rem !important;
}

.system-config-dialog .tou-soc-input .mud-input-outlined-border {
    height: 36px;
    border-color: rgba(var(--color-primary-rgb), 0.18) !important;
    border-radius: calc(var(--surface-radius) - 2px) !important;
}

.system-config-dialog .tou-soc-input .mud-input:hover .mud-input-outlined-border,
.system-config-dialog .tou-soc-input .mud-input:focus-within .mud-input-outlined-border {
    border-color: rgba(var(--color-primary-rgb), 0.45) !important;
}

.tou-soc-input-wrap > span {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.system-config-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
}

.system-config-footer .e-btn {
    min-height: 38px;
    border-radius: calc(var(--surface-radius) - 2px) !important;
    font-weight: 600;
    white-space: normal;
}

.system-config-cancel.e-btn {
    color: var(--text-secondary) !important;
}

.system-config-cancel.e-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.system-config-save.e-btn {
    border-color: rgba(var(--color-success-rgb), 0.85) !important;
    background: var(--color-success) !important;
    color: #061006 !important;
}

.system-config-save.e-btn:disabled {
    opacity: 0.7;
}

.dc-coupled-restart-dialog .lbsa-mobile-dialog-content {
    padding: 1.1rem 1.25rem;
}

.dc-coupled-restart-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
}

.dc-coupled-restart-content {
    display: grid;
    gap: 0.75rem;
    color: var(--text-secondary);
}

.dc-coupled-restart-content h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.dc-coupled-restart-content p {
    margin: 0;
    line-height: 1.45;
}

.dc-coupled-restart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    width: 100%;
}

/* Desktop density: favor useful information over repeated framing and gutters. */
@media (min-width: 769px) {
    :is(
        .batteries-summary-container,
        .collaboration-container,
        .device-control-container,
        .device-requests-page,
        .devices-page,
        .link-monitor-container,
        .notification-settings-container,
        .notifications-page,
        .organization-container,
        .profile-container,
        .sessions-container,
        .site-edit-container,
        .sites-container,
        .wifi-config-container
    ) {
        padding: 0.75rem !important;
    }

    body.theme-body .organization-container .info-card {
        padding: 0.9rem !important;
    }

    .devices-page > .stats-overview {
        display: grid !important;
        grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
        align-items: center;
        gap: 1rem;
    }

    .devices-page > .stats-overview > :first-child {
        margin: 0 !important;
    }

    .devices-page > .stats-overview .stats-container {
        justify-content: flex-end;
    }

    :is(.site-card-header, .site-card-body, .site-card-footer) {
        padding: 0.75rem !important;
    }

    .e-grid :is(.e-rowcell, .e-headercell) {
        padding-top: 0.58rem !important;
        padding-bottom: 0.58rem !important;
    }
}

@media (max-width: 1024px) {
    .lbsa-container-fluid:not(.lbsa-container-fluid--map) {
        padding-left: var(--page-gutter-tablet);
        padding-right: var(--page-gutter-tablet);
    }

    :is(.card-grid, .card-grid-sm, .card-grid-lg) {
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --card-gap: var(--card-gap-mobile);
        --surface-padding: var(--surface-padding-mobile);
    }

    .app-content {
        scrollbar-gutter: auto !important;
        width: 100%;
        max-width: 100%;
    }

    .app-content:not(.app-content--map) {
        padding-bottom: var(--page-bottom-safe);
    }

    .app-content:has(:is(#scanFab, #refreshFab, .floating-toggle-btn, .floating-toggle-btn-monitor, .floating-refresh-btn, .e-fab.e-btn.e-fab-fixed)) {
        padding-bottom: calc(var(--page-bottom-safe) + var(--fab-size-mobile));
    }

    .lbsa-container-fluid:not(.lbsa-container-fluid--map) {
        padding: var(--page-gutter-mobile) var(--page-gutter-mobile) calc(var(--page-gutter-mobile) + var(--page-bottom-safe)) !important;
    }

    :is(
        .admin-container,
        .admin-invite-container,
        .add-organization-page,
        .batteries-summary-container,
        .battery-calibration-container,
        .battery-detail-container,
        .bms-firmware-container,
        .collaboration-container,
        .device-control-container,
        .device-requests-page,
        .devices-page,
        .esp-firmware-container,
        .gmail-auth-page,
        .link-monitor-container,
        .live-monitor-container,
        .notification-settings-container,
        .notifications-page,
        .organization-container,
        .organizations-page,
        .profile-container,
        .register-container,
        .sessions-container,
        .site-edit-container,
        .sites-container,
        .wifi-config-container
    ) {
        padding: var(--page-gutter-mobile) !important;
        width: 100% !important;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: clip;
    }

    :is(.app-content--map, .lbsa-container-fluid--map, .map-container, .leaflet-map-container) {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    :is(
        .e-card .e-card-header,
        .e-card .e-card-content,
        .card-body-custom,
        .card-header-custom,
        .item-card-header,
        .item-card-body,
        .item-card-footer,
        .device-card-header,
        .device-card-body,
        .device-card-footer,
        .site-card-header,
        .site-card-body,
        .site-card-footer,
        .org-card-header,
        .org-card-body,
        .user-card-header,
        .user-card-body,
        .filter-section,
        .professional-filter,
        .stats-overview,
        .stats-card,
        .header-card,
        .section-card,
        .connected-device-card,
        .device-status-card,
        .commands-card,
        .wifi-config-card,
        .warning-card
    ) {
        padding: var(--surface-padding-mobile) !important;
    }

    :is(
        .card-grid,
        .card-grid-sm,
        .card-grid-lg,
        .devices-grid,
        .device-grid,
        .sites-grid,
        .organizations-grid,
        .users-grid,
        .template-grid,
        .battery-grid,
        .groups-container,
        .legacy-grid,
        .stats-grid,
        .status-grid,
        .commands-grid,
        .info-grid,
        .info-grid-3,
        .info-grid-4,
        .form-grid,
        .detail-grid,
        .detail-grid-2,
        .detail-grid-3,
        .detail-grid-4
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--card-gap-mobile) !important;
        width: 100% !important;
        max-width: 100%;
        justify-items: stretch !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    :is(
        .e-card,
        .card,
        .card-custom,
        .header-card,
        .stats-card,
        .stats-overview,
        .filter-section,
        .professional-filter,
        .section-card,
        .site-card,
        .org-card,
        .user-card,
        .device-card,
        .firmware-card,
        .session-card,
        .notification-item,
        .warning-card,
        .connection-status-card,
        .wifi-config-card,
        .connected-device-card,
        .device-status-card,
        .commands-card,
        .battery-card,
        .collaboration-card,
        .info-card,
        .info-box,
        .item-card
    ) {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .battery-grid {
        display: grid !important;
        justify-content: stretch !important;
    }

    .live-monitor-container .stats-card .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
    }

    .live-monitor-container .stats-card .stat-item {
        min-width: 0;
        padding: 0.3rem 0.35rem !important;
    }

    .live-monitor-container .stats-card .stat-item label {
        font-size: 0.58rem;
        line-height: 1.15;
        margin-bottom: 0.12rem;
        white-space: normal;
    }

    .live-monitor-container .stats-card .stat-item .stat-value {
        font-size: 0.75rem;
        line-height: 1.2;
    }

    .cell-stats-card .cell-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cell-stats-card .cell-stats-grid .stat-item {
        min-width: 0 !important;
        padding: 0.55rem 0.35rem !important;
    }

    .battery-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .live-monitor-container .battery-cluster-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start;
        justify-items: stretch !important;
    }

    .live-monitor-container .battery-cluster-group {
        width: 100%;
        min-width: 0;
    }

    .live-monitor-container .battery-cluster-group .battery-grid.battery-cluster-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important;
        justify-content: stretch !important;
        justify-items: center !important;
        align-items: stretch;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .live-monitor-container .battery-cluster-group .battery-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 450px !important;
        flex: initial !important;
        margin-bottom: 0 !important;
    }

    .battery-overview-card > div {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.65rem !important;
    }

    .battery-detail-container .e-card-content > div[style*="display: flex"] {
        gap: 0.65rem !important;
    }

    .devices-page .stats-container,
    .stats-container {
        gap: var(--card-gap-mobile) !important;
        max-width: 100%;
    }

    .devices-page .stat-item,
    .stat-item {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    :is(.page-header, .sites-header, .connected-header, .section-header) {
        gap: 0.65rem;
    }

    :is(
        .page-header,
        .sites-header,
        .settings-page-header,
        .page-header-card,
        .devices-page > .stats-overview,
        .deleted-devices-hero,
        .collaboration-header,
        .sessions-header,
        .requests-header,
        .site-edit-header
    ) {
        padding: 0.8rem !important;
        margin-bottom: 0.8rem !important;
        gap: 0.65rem !important;
    }

    :is(.page-header h1, .sites-header h1, .page-title, .header-text h1) {
        font-size: clamp(1.15rem, 4.6vw, 1.45rem) !important;
        line-height: 1.2;
    }

    .header-actions,
    .form-actions,
    .modal-actions,
    .button-group,
    .upload-actions,
    .package-actions,
    .legacy-actions,
    .device-actions,
    .binding-actions,
    .session-actions,
    .test-actions {
        width: 100%;
        gap: 0.5rem;
    }

    :is(.header-actions, .form-actions, .modal-actions, .button-group) > :is(.e-btn, button, a) {
        flex: 1 1 auto;
        min-width: min(12rem, 100%);
    }

    .history-view-button,
    .battery-card .history-view-button {
        margin-top: 0.35rem !important;
        margin-bottom: 0 !important;
    }

    .e-btn {
        min-height: 44px;
        white-space: normal;
    }

    /* Keep every interactive header and MudBlazor action comfortably tappable. */
    :is(.nav-close-btn, .mud-button-root, .mud-icon-button) {
        min-height: 44px !important;
    }

    :is(.nav-close-btn, .mud-icon-button) {
        min-width: 44px !important;
    }

    :is(
        #scanFab,
        #refreshFab,
        .floating-toggle-btn,
        .floating-toggle-btn-monitor,
        .floating-refresh-btn,
        .e-fab.e-btn.e-fab-fixed
    ) {
        inset: auto var(--fab-inset-mobile) var(--fab-inset-mobile) auto !important;
        width: var(--fab-size-mobile) !important;
        height: var(--fab-size-mobile) !important;
        min-width: var(--fab-size-mobile) !important;
        min-height: var(--fab-size-mobile) !important;
    }

    .lbsa-mobile-dialog-host {
        align-items: flex-end;
        padding: max(0.75rem, env(safe-area-inset-top)) 0 0;
    }

    .e-dialog:not(.module-view-modal):not(.cell-view-modal),
    .lbsa-mobile-dialog:not(.module-view-modal):not(.cell-view-modal) {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100dvh - max(0.75rem, env(safe-area-inset-top))) !important;
        margin: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .e-dialog .e-dlg-header-content {
        padding: 0.7rem 0.8rem !important;
    }

    .lbsa-mobile-dialog .lbsa-mobile-dialog-header {
        min-height: 54px;
        padding: 0.72rem 3.55rem 0.72rem 1rem !important;
    }

    .e-dialog .e-dlg-content,
    .lbsa-mobile-dialog .lbsa-mobile-dialog-content {
        padding: 0.9rem 1rem !important;
        max-height: calc(100dvh - 7rem);
        scrollbar-gutter: auto;
    }

    .e-dialog .e-footer-content,
    .lbsa-mobile-dialog .lbsa-mobile-dialog-footer {
        padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom)) !important;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .e-dialog .e-footer-content .e-btn,
    .lbsa-mobile-dialog .lbsa-mobile-dialog-footer .e-btn {
        flex: 1 1 10rem;
        min-width: min(9rem, 100%);
        min-height: 44px;
    }

    .system-config-dialog.e-dialog .e-dlg-content,
    .lbsa-mobile-dialog.system-config-dialog .lbsa-mobile-dialog-content {
        padding: 0.75rem !important;
    }

    .system-config-dialog.e-dialog .e-footer-content,
    .lbsa-mobile-dialog.system-config-dialog .lbsa-mobile-dialog-footer {
        padding: 0.7rem 0.75rem !important;
    }

    .system-config-toolbar,
    .tou-config-header {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .system-config-toolbar {
        flex-direction: column;
    }

    .system-config-tabs,
    .system-config-sync-state,
    .system-config-status,
    .tou-mode-field {
        width: 100%;
    }

    .system-config-sync-state {
        align-items: stretch;
        flex-direction: column;
        gap: 0.4rem;
    }

    .system-config-status-message {
        max-width: 100%;
        white-space: normal;
    }

    .system-config-tab {
        flex: 1 1 0;
    }

    .cluster-tabs {
        max-height: 7.75rem;
        overflow-y: auto;
        padding-right: 0.2rem;
        scrollbar-color: rgba(var(--color-primary-rgb), 0.35) rgba(255, 255, 255, 0.04);
    }

    .system-config-setting-row,
    .tou-zone-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tou-zone-controls {
        grid-template-columns: 1fr;
    }

    .system-config-footer {
        justify-content: stretch;
    }

    .system-config-footer .e-btn {
        flex: 1 1 10rem;
    }

    .e-toast-container,
    .toast-stack-container,
    .custom-toast-container,
    .notification-container {
        left: var(--page-gutter-mobile) !important;
        right: var(--page-gutter-mobile) !important;
        width: auto !important;
        max-width: calc(100vw - (var(--page-gutter-mobile) * 2)) !important;
    }
}

@media (max-width: 480px) {
    .lbsa-container-fluid:not(.lbsa-container-fluid--map) {
        padding-left: var(--page-gutter-small) !important;
        padding-right: var(--page-gutter-small) !important;
    }

    :is(
        .admin-container,
        .admin-invite-container,
        .add-organization-page,
        .batteries-summary-container,
        .battery-calibration-container,
        .battery-detail-container,
        .bms-firmware-container,
        .collaboration-container,
        .device-control-container,
        .device-requests-page,
        .devices-page,
        .esp-firmware-container,
        .gmail-auth-page,
        .link-monitor-container,
        .live-monitor-container,
        .notification-settings-container,
        .notifications-page,
        .organization-container,
        .organizations-page,
        .profile-container,
        .register-container,
        .sessions-container,
        .site-edit-container,
        .sites-container,
        .wifi-config-container
    ) {
        padding-left: var(--page-gutter-small) !important;
        padding-right: var(--page-gutter-small) !important;
    }

    :is(.e-card, .card, .header-card, .stats-card, .filter-section, .professional-filter) {
        margin-bottom: 0.55rem !important;
    }

    :is(.e-card .e-card-header, .e-card .e-card-content) {
        padding: 0.62rem !important;
    }

    .e-dialog:not(.module-view-modal):not(.cell-view-modal),
    .lbsa-mobile-dialog:not(.module-view-modal):not(.cell-view-modal) {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100dvh - max(0.5rem, env(safe-area-inset-top))) !important;
    }

    .system-config-dialog.e-dialog .e-dlg-header-content {
        padding: 0.65rem 0.75rem !important;
    }

    .lbsa-mobile-dialog.system-config-dialog .lbsa-mobile-dialog-header {
        padding: 0.65rem 3.25rem 0.65rem 0.75rem !important;
    }

    .system-config-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .system-config-tab {
        min-height: 34px;
    }

    .system-config-setting-value {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}