:root {
    --app-max-width: 110rem;
    --app-page-gutter: clamp(0.75rem, 1.6vw, 1.75rem);
    --app-section-gap: clamp(0.75rem, 1.1vw, 1.25rem);
    --app-card-radius: 0.5rem;
    --app-sidebar-width: clamp(15.5rem, 16vw, 18rem);
    --app-chart-height: clamp(18rem, 34vh, 29rem);
    --app-chart-height-compact: clamp(15rem, 28vh, 24rem);
}

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

html {
    min-width: 20rem;
    max-width: 100%;
    overflow-x: hidden;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    font-family: Manrope, Inter, Aptos, "Segoe UI", Arial, sans-serif;
}

body:not(.screen-mode):not(.tv-screen-mode) {
    background: var(--bg, #f3f7f2) !important;
    background-color: var(--bg, #f3f7f2) !important;
}

[data-theme="dark"] body:not(.screen-mode):not(.tv-screen-mode) {
    background: var(--bg, #0d141b) !important;
    background-color: var(--bg, #15201d) !important;
}

body.gridpulse-dashboard-bg:not(.screen-mode):not(.tv-screen-mode) {
    background: var(--bg, #f3f7f2) !important;
    background-color: var(--bg, #f3f7f2) !important;
}

[data-theme="dark"] body.gridpulse-dashboard-bg:not(.screen-mode):not(.tv-screen-mode) {
    --bg: #0d141b;
    --surface: #151f2a;
    --surface-soft: #101822;
    --ink: #f1f7fb;
    --muted: #a8b8c6;
    --line: #2a3a49;
    --shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
    background: #0d141b !important;
    background-color: #0d141b !important;
}

[data-theme="dark"] body.gridpulse-dashboard-bg .panel,
[data-theme="dark"] body.gridpulse-dashboard-bg .summary-card,
[data-theme="dark"] body.gridpulse-dashboard-bg .site-map-panel,
[data-theme="dark"] body.gridpulse-dashboard-bg .site-table-panel,
[data-theme="dark"] body.gridpulse-dashboard-bg .site-form-panel {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow) !important;
}

[data-theme="dark"] body.gridpulse-dashboard-bg input,
[data-theme="dark"] body.gridpulse-dashboard-bg select,
[data-theme="dark"] body.gridpulse-dashboard-bg textarea,
[data-theme="dark"] body.gridpulse-dashboard-bg .map-location-field {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

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

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

.app {
    width: 100%;
    min-width: 0;
}

@media (min-width: 61.25rem) {
    .app {
        grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr) !important;
    }
}

.main {
    width: min(100%, var(--app-max-width)) !important;
    max-width: var(--app-max-width) !important;
    min-width: 0;
    margin-inline: auto;
    padding: var(--app-page-gutter) !important;
}

.sidebar {
    min-width: 0;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-padding-top: 1rem;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.workspace-identity {
    flex: 0 0 auto;
    min-height: max-content;
    overflow: visible !important;
    padding-top: clamp(0.35rem, 0.8vh, 0.75rem) !important;
}

.workspace-brand-row {
    min-width: 0;
    overflow: visible;
}

.workspace-app-name {
    min-height: 1.35em;
    overflow: visible;
    line-height: 1.18 !important;
    padding-top: 0.0625rem;
}

.workspace-product {
    line-height: 1.35;
}

.topbar,
.header,
.panel-head,
.chart-head,
.map-panel-head,
.comparison-controls,
.actions,
.modal-actions,
.btn-row,
.controls {
    min-width: 0;
    flex-wrap: wrap;
}

.topbar {
    gap: var(--app-section-gap) !important;
}

.topbar {
    min-height: 8.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 1.125rem !important;
    padding: 1.25rem 1.375rem !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.90) 48%, rgba(255,255,255,0.68) 100%),
        url('/static/energy-operations-bg.png') center / cover no-repeat !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
    border-radius: var(--app-card-radius) !important;
    box-shadow: var(--shadow, 0 18px 44px rgba(30, 45, 62, 0.08)) !important;
}

[data-theme="dark"] .topbar {
    background:
        linear-gradient(90deg, rgba(13,20,27,0.96) 0%, rgba(18,29,40,0.91) 48%, rgba(18,29,40,0.74) 100%),
        url('/static/energy-operations-bg.png') center / cover no-repeat !important;
    border-color: rgba(155, 220, 247, 0.14) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
}

.topbar-brand-area {
    display: flex !important;
    align-items: center !important;
    gap: 1.125rem !important;
    flex: 1 1 28rem !important;
    min-width: 0 !important;
    max-width: calc(100% - 17rem) !important;
}

.topbar-logo-card {
    width: 9.75rem !important;
    min-height: 4.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    padding: 0.75rem 1rem !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(32, 155, 216, 0.16), rgba(22, 134, 90, 0.10)),
        color-mix(in srgb, var(--surface, #fff) 86%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--brand, #1677b7) 24%, var(--line, #dce5ec)) !important;
    border-radius: var(--app-card-radius) !important;
    box-shadow: 0 14px 34px rgba(30, 45, 62, 0.10) !important;
}

.topbar-logo-card img {
    display: block !important;
    width: 100% !important;
    max-height: 3.25rem !important;
    object-fit: contain !important;
}

.topbar-brand-area,
.topbar-title-stack,
.live-title-main,
.chart-panel-head > div,
.chart-head > div,
.panel-head > div {
    min-width: 0;
}

h1,
.topbar h1,
h2,
h3,
.subtitle,
.section-title,
.panel-title,
.chart-title,
.reading-name,
.reading-code,
.nav-link span,
.dashboard-submenu-link span {
    overflow-wrap: anywhere;
}

.topbar h1 {
    margin: 0 0 0.375rem !important;
    color: var(--ink) !important;
    font-family: Manrope, Aptos, "Segoe UI", Arial, sans-serif !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
}

.topbar .subtitle {
    margin: 0 !important;
    max-width: min(54vw, 34rem) !important;
    color: var(--muted) !important;
    font-family: Manrope, Aptos, "Segoe UI", Arial, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

.topbar .controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.625rem !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding: 0.625rem !important;
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.86) !important;
    border-radius: var(--app-card-radius) !important;
    box-shadow: 0 14px 34px rgba(30, 45, 62, 0.10) !important;
}

[data-theme="dark"] .topbar .controls {
    background: rgba(13, 20, 27, 0.72) !important;
    border-color: rgba(155, 220, 247, 0.14) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26) !important;
}

.topbar .realtime-clock {
    min-width: 13.125rem !important;
    padding: 0.5625rem 0.75rem !important;
    text-align: right !important;
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.86) !important;
    border-radius: var(--app-card-radius) !important;
    box-shadow: 0 14px 34px rgba(30, 45, 62, 0.10) !important;
}

[data-theme="dark"] .topbar .realtime-clock {
    background: rgba(18, 27, 37, 0.78) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

.topbar .clock-time {
    color: var(--ink) !important;
    font-family: Manrope, Aptos, "Segoe UI", Arial, sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
}

.topbar .clock-date {
    margin-top: 0.25rem !important;
    color: var(--muted) !important;
    font-family: Manrope, Aptos, "Segoe UI", Arial, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

.panel,
.card,
.mini-card,
.metric-card,
.site-card,
.chart-card,
.chart-panel,
.trend-card,
.analytics-chart-panel,
.power-quality-panel,
.comparison-card,
.site-comparison-card,
.meter-comparison-chart,
.meter-comparison-content,
.site-comparison-trend,
.table-card,
.wizard-step,
.form-container,
.live-focus,
.phasor-panel,
.modal-shell {
    min-width: 0;
    border-radius: var(--app-card-radius);
}

.overview-grid,
.summary-grid,
.kpi-grid,
.comparison-grid,
.analytics-summary,
.comparison-kpis,
.site-comparison-cards,
.meter-comparison-summary,
.power-quality-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)) !important;
    gap: var(--app-section-gap) !important;
}

.reading-layout,
.trend-grid,
.charts,
.chart-grid,
.power-quality-grid,
.power-quality-charts,
.analytics-charts,
.three-charts,
.ranking-grid,
.table-grid,
.meter-layout,
.meter-comparison-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)) !important;
    gap: var(--app-section-gap) !important;
}

.filter-grid,
.form-grid,
.custom-range,
.trend-control-panel,
.analytics-control-strip,
.site-comparison-controls,
.comparison-control-fields,
.meter-comparison-toolbar,
.wizard-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) !important;
    gap: clamp(0.625rem, 1vw, 0.875rem) !important;
}

.trend-window-options,
.trend-display-options {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)) !important;
}

.chart-panel canvas,
.chart-card canvas,
.trend-card canvas,
.analytics-chart-panel canvas,
.power-quality-panel canvas,
.site-comparison-trend canvas,
.meter-comparison-chart canvas {
    display: block;
    width: 100% !important;
    height: var(--app-chart-height) !important;
    min-height: min(18rem, 55vh);
    max-height: 45rem;
}

.three-charts canvas,
.power-quality-panel canvas {
    height: var(--app-chart-height-compact) !important;
}

#phasorDiagramCanvas,
.phasor-canvas-shell canvas {
    width: 100% !important;
    height: clamp(18rem, 36vh, 32rem) !important;
}

.fullscreen-chart-shell canvas,
.modal canvas,
#fullscreenCanvas,
#fullscreenChartCanvas {
    width: 100% !important;
    height: min(72vh, 48rem) !important;
}

.table-card,
.panel:has(table),
.table-scroll,
.threshold-table,
.meter-sites,
.discovery-results {
    min-width: 0;
}

.table-card,
.panel:has(table),
.table-scroll,
.discovery-results {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    white-space: nowrap;
}

.reading-row,
.metric-card,
.site-card,
.mini-card,
.status-card,
.trend-card-top,
.chart-panel-head,
.power-quality-panel-head {
    min-width: 0;
}

.reading-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.reading-identity,
.reading-value,
.reading-head-copy {
    min-width: 0;
}

.reading-value {
    text-align: right;
}

.realtime-clock,
.topbar .controls {
    max-width: 100%;
}

.modal,
.modal-shell {
    width: min(100%, 64rem) !important;
    max-height: min(92vh, 58rem);
    overflow: auto;
}

@media (min-width: 120rem) {
    :root {
        --app-max-width: 116rem;
        --app-page-gutter: 2rem;
        --app-chart-height: clamp(22rem, 32vh, 34rem);
    }
}

@media (min-width: 180rem) {
    :root {
        --app-max-width: 124rem;
        --app-page-gutter: 2.25rem;
    }
}

@media (max-width: 80rem) {
    :root {
        --app-chart-height: clamp(17rem, 32vh, 25rem);
    }

    .chart-grid,
    .meter-layout,
    .ranking-grid,
    .table-grid,
    .three-charts {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 61.25rem) {
    .app {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    .main {
        width: 100% !important;
    }

    .topbar-brand-area {
        max-width: 100% !important;
    }
}

@media (max-width: 48rem) {
    :root {
        --app-page-gutter: 0.875rem;
        --app-chart-height: clamp(16rem, 42vh, 22rem);
    }

    .topbar,
    .header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .topbar .controls,
    .controls,
    .realtime-clock,
    .btn,
    .button,
    .chart-head button {
        width: 100%;
    }

    .modal-actions,
    .actions {
        align-items: stretch;
        flex-direction: column;
    }

    .phasor-panel {
        grid-template-columns: 1fr !important;
    }

    .reading-layout > .phasor-panel {
        grid-column: span 1 !important;
    }

    th,
    td {
        padding-inline: 0.75rem !important;
    }
}

@media (max-width: 34rem) {
    h1,
    .topbar h1 {
        font-size: clamp(1.45rem, 8vw, 2rem) !important;
    }

    .subtitle,
    .topbar .subtitle {
        max-width: 100% !important;
    }

    .reading-layout,
    .trend-grid,
    .charts,
    .chart-grid,
    .power-quality-grid,
    .power-quality-charts,
    .analytics-charts,
    .three-charts,
    .ranking-grid,
    .table-grid,
    .meter-layout,
    .meter-comparison-content {
        grid-template-columns: 1fr !important;
    }
}

body:not(.screen-mode):not(.tv-screen-mode) .reading-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:not(.screen-mode):not(.tv-screen-mode) .reading-group[data-reading="voltage"] { order: 1; }
body:not(.screen-mode):not(.tv-screen-mode) .reading-group[data-reading="current"] { order: 2; }
body:not(.screen-mode):not(.tv-screen-mode) .reading-group[data-reading="power-factor"] { order: 3; }
body:not(.screen-mode):not(.tv-screen-mode) .reading-group[data-reading="active-power"] { order: 4; }
body:not(.screen-mode):not(.tv-screen-mode) .reading-group[data-reading="reactive-power"] { order: 5; }
body:not(.screen-mode):not(.tv-screen-mode) .reading-group[data-reading="apparent-power"] { order: 6; }
body:not(.screen-mode):not(.tv-screen-mode) .reading-group[data-reading="demand"] { order: 7; }
body:not(.screen-mode):not(.tv-screen-mode) .reading-layout > .phasor-panel {
    order: 8;
    grid-column: span 2 !important;
}

@media (max-width: 73.75rem) {
    body:not(.screen-mode):not(.tv-screen-mode) .reading-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:not(.screen-mode):not(.tv-screen-mode) .reading-layout > .phasor-panel {
        grid-column: span 2 !important;
    }
}

@media (max-width: 48rem) {
    body:not(.screen-mode):not(.tv-screen-mode) .reading-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.screen-mode):not(.tv-screen-mode) .reading-layout > .phasor-panel {
        grid-column: span 1 !important;
    }
}

.sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: max(1.5rem, env(safe-area-inset-top)) !important;
}

@media (max-width: 61.25rem) {
    .sidebar {
        height: auto !important;
        max-height: none !important;
    }
}

.trend-control-panel {
    display: grid !important;
    grid-template-columns: minmax(32.5rem, 46.5rem) minmax(20rem, 1fr) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: clamp(0.75rem, 1vw, 1rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(0.85rem, 1vw, 1rem) !important;
}

.trend-window-control {
    display: grid !important;
    align-content: start;
    gap: 0.55rem !important;
    min-width: 0;
    height: 100%;
    padding: 0.8rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft, #f6f8fb) 86%, transparent), transparent),
        color-mix(in srgb, var(--surface, #fff) 92%, var(--brand, #1677b7) 8%);
    border: 1px solid color-mix(in srgb, var(--line, #dce5ec) 86%, var(--brand, #1677b7) 14%);
    border-radius: 0.5rem;
}

[data-theme="dark"] .trend-window-control {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
        color-mix(in srgb, var(--surface, #182330) 88%, var(--brand, #37a5d8) 12%);
}

.trend-control-label {
    display: flex;
    align-items: center;
    min-height: 1rem;
    color: color-mix(in srgb, var(--ink, #15202b) 62%, var(--muted, #667789) 38%) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
}

.trend-range-control .trend-window-options {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
    height: 2.7rem !important;
    padding: 0 !important;
    background: color-mix(in srgb, var(--surface-soft, #f6f8fb) 80%, var(--surface, #fff) 20%);
    border: 1px solid color-mix(in srgb, var(--line, #dce5ec) 88%, transparent);
    border-radius: 0.55rem;
    align-items: stretch !important;
}

.trend-display-control .trend-window-options {
    display: grid !important;
    grid-template-columns: minmax(6.75rem, 0.7fr) minmax(13rem, 1.3fr) !important;
    gap: 0.45rem !important;
}

.trend-window-button {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 0.45rem !important;
    white-space: nowrap;
}

.trend-range-control .trend-window-button {
    background: transparent;
    border-color: transparent;
}

.trend-range-control .trend-window-button:hover {
    background: var(--surface, #fff);
}

.trend-range-control .trend-window-button.active {
    color: #fff;
    background: linear-gradient(135deg, var(--brand, #1677b7), var(--brand-dark, #0f5f93));
    border-color: transparent;
    box-shadow: 0 0.5rem 1.1rem color-mix(in srgb, var(--brand, #1677b7) 24%, transparent);
}

.trend-resolution-control select {
    width: 100%;
    min-width: 0 !important;
    height: 2.7rem !important;
}

.trend-mode-toggle {
    min-width: 0 !important;
}

.trend-mode-sub {
    font-size: 0.56rem !important;
}

.trend-display-note {
    grid-column: 1 / -1;
    margin-top: 0 !important;
    color: color-mix(in srgb, var(--ink, #15202b) 72%, var(--muted, #667789) 28%) !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
}

.trend-display-card {
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 10rem) !important;
    align-items: end !important;
    gap: 0.45rem 0.75rem !important;
}

@media (min-width: 68.76rem) {
    .analytics-toolbar {
        min-height: 8.75rem !important;
        align-items: center !important;
        padding: 1.125rem !important;
    }

    .analytics-control-strip {
        width: min(27rem, 100%) !important;
        min-width: min(27rem, 100%) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: end !important;
    }

    .analytics-control {
        min-width: 0 !important;
    }
}

@media (max-width: 68.75rem) {
    .trend-control-panel {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .trend-display-control {
        grid-column: auto;
    }

    .trend-display-control .trend-window-options {
        grid-template-columns: minmax(9rem, 0.36fr) minmax(18rem, 0.64fr) !important;
    }
}

@media (max-width: 52rem) {
    .trend-control-panel {
        grid-template-columns: 1fr !important;
    }

    .trend-display-card {
        grid-template-columns: 1fr !important;
    }

    .trend-range-control .trend-window-options {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .trend-display-control .trend-window-options {
        grid-template-columns: 1fr !important;
    }
}

body.screen-mode,
body.tv-screen-mode {
    overflow: hidden !important;
}

body.screen-mode .main {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: clamp(0.65rem, 1.2vw, 1.1rem) !important;
}

body.screen-mode .live-shell {
    height: calc(100dvh - clamp(1.3rem, 2.4vw, 2.2rem)) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(0.55rem, 0.9vw, 0.85rem) !important;
}

body.screen-mode .live-focus {
    min-height: 0 !important;
    padding: clamp(0.75rem, 1.2vw, 1rem) clamp(0.9rem, 1.5vw, 1.35rem) !important;
}

body.screen-mode .live-headline-metrics,
body.screen-mode .summary-grid {
    display: none !important;
}

body.screen-mode .live-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    margin-top: 0.65rem !important;
}

body.screen-mode .reading-layout {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr);
    min-height: 0 !important;
    gap: clamp(0.55rem, 0.85vw, 0.85rem) !important;
}

body.screen-mode .reading-layout > .phasor-panel {
    grid-column: span 1 !important;
}

body.screen-mode .reading-group {
    min-height: 0 !important;
    overflow: hidden !important;
}

body.screen-mode .reading-head {
    padding: clamp(0.55rem, 0.8vw, 0.8rem) clamp(0.65rem, 0.95vw, 0.95rem) !important;
}

body.screen-mode .reading-list {
    min-height: 0 !important;
    padding: clamp(0.35rem, 0.55vw, 0.55rem) clamp(0.55rem, 0.8vw, 0.85rem) !important;
    overflow: auto;
}

body.screen-mode .reading-row {
    min-height: 0 !important;
    padding: clamp(0.28rem, 0.55vh, 0.5rem) 0.2rem !important;
}

body.screen-mode .phasor-panel {
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-columns: 1fr !important;
    padding: clamp(0.5rem, 0.85vw, 0.75rem) !important;
}

body.screen-mode #phasorDiagramCanvas,
body.screen-mode .phasor-canvas-shell canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 10rem !important;
    max-height: none !important;
}

body.screen-mode .chart-panel canvas,
body.screen-mode .chart-card canvas,
body.screen-mode .trend-card canvas,
body.screen-mode .analytics-chart-panel canvas,
body.screen-mode .power-quality-panel canvas,
body.screen-mode .site-comparison-trend canvas,
body.screen-mode .meter-comparison-chart canvas {
    height: 100% !important;
    min-height: 12rem !important;
    max-height: none !important;
}

body.tv-screen-mode .main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

@media (max-width: 75rem) {
    body.screen-mode {
        overflow: auto !important;
    }

    body.screen-mode .live-shell {
        height: auto !important;
        grid-template-rows: auto auto !important;
    }

    body.screen-mode .reading-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto;
    }
}

@media (max-width: 44rem) {
    body.screen-mode .reading-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Phone compatibility layer for customer and admin work screens. */
@media (max-width: 61.25rem) {
    body {
        background-size: auto 18rem, auto, cover, auto !important;
    }

    .app {
        display: block !important;
        min-height: 100dvh;
    }

    .sidebar {
        display: grid !important;
        gap: 0.75rem !important;
        padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem 0.75rem !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line, rgba(148, 163, 184, 0.24)) !important;
        box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.07) !important;
    }

    .brand,
    .workspace-identity {
        padding-bottom: 0.75rem !important;
    }

    .sidebar-actions,
    .customer-account-controls {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        gap: 0.5rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sidebar-actions::-webkit-scrollbar,
    .customer-account-controls::-webkit-scrollbar,
    .sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .sidebar nav {
        display: grid !important;
        gap: 0.45rem !important;
        align-items: stretch !important;
        overflow-x: visible;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .dashboard-submenu {
        display: grid !important;
        gap: 0.3rem !important;
        margin: -0.15rem 0 0.75rem 1rem !important;
        padding: 0.1rem 0 0.1rem 0.75rem !important;
        border-left: 1px solid rgba(127, 151, 166, 0.28) !important;
    }

    body.dashboard-submenus-collapsed .dashboard-submenu {
        display: none !important;
    }

    body.dashboard-submenus-collapsed .dashboard-nav-chevron svg {
        transform: rotate(-90deg) !important;
    }

    .nav-link,
    .dashboard-submenu-link {
        min-height: 2.75rem !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        white-space: nowrap;
    }

    .sidebar .device-picker-panel,
    .sidebar .device-picker-heading,
    .sidebar .device-picker {
        display: block !important;
    }

    .sidebar .device-picker-panel {
        margin-top: 0.5rem !important;
        padding-top: 0.75rem !important;
    }

    .sidebar .device-picker {
        padding: 0.75rem !important;
    }

    .sidebar .device-picker-step + .device-picker-step {
        margin-top: 0.55rem !important;
    }

    .main {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 48rem) {
    input,
    select,
    textarea,
    button {
        font-size: 1rem !important;
    }

    input,
    select {
        min-height: 2.75rem !important;
    }

    textarea {
        min-height: 6rem !important;
    }

    .topbar,
    .header,
    .site-manager-page .topbar,
    .meter-manager-page .topbar,
    .comparison-page .topbar {
        min-height: 0 !important;
        padding: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }

    .topbar-brand-area {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem !important;
        align-items: center !important;
    }

    .topbar-logo-card {
        width: 5.75rem !important;
        min-height: 3rem !important;
        padding: 0.45rem 0.55rem !important;
    }

    .topbar-logo-card img {
        max-height: 2.25rem !important;
    }

    .topbar .controls {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center !important;
        justify-content: stretch !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }

    .theme-toggle,
    .customer-topbar-theme-button {
        width: 4rem !important;
        min-width: 4rem !important;
        height: 2.5rem !important;
        flex-basis: 4rem !important;
    }

    .realtime-clock {
        min-width: 0 !important;
        padding: 0.6rem 0.75rem !important;
        text-align: left !important;
    }

    .clock-time {
        font-size: 1rem !important;
    }

    .clock-date {
        font-size: 0.75rem !important;
    }

    .action-bar,
    .toolbar,
    .filter-grid,
    .form-grid,
    .custom-range,
    .analytics-control-strip,
    .comparison-control-fields,
    .site-comparison-controls,
    .meter-comparison-toolbar,
    .profile-layout,
    .summary-list,
    .diagnostic-row {
        grid-template-columns: 1fr !important;
    }

    .action-bar {
        display: grid !important;
    }

    .action-bar .btn,
    .wizard-actions .btn,
    .modal-actions .btn,
    .btn-row .btn,
    .report-actions .btn,
    .site-submit-row .btn {
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    .summary-grid,
    .overview-grid,
    .kpi-grid,
    .analytics-summary,
    .comparison-kpis,
    .power-quality-values,
    .site-comparison-cards,
    .meter-comparison-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .wizard-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .wizard-step-pill {
        min-height: 2.75rem !important;
    }

    .panel,
    .card,
    .wizard-step,
    .site-box,
    .chart-panel,
    .trend-card,
    .analytics-config,
    .power-quality-panel,
    .modal-shell {
        padding: 0.875rem !important;
    }

    .table-wrap,
    .table-card,
    .panel:has(table),
    .meter-comparison-table-wrap,
    .site-table-wrap,
    .threshold-table,
    .discovery-results {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--app-card-radius);
    }

    table {
        min-width: 46rem !important;
    }

    th,
    td {
        padding: 0.7rem 0.65rem !important;
    }

    .modal-backdrop {
        align-items: stretch !important;
        padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom)) !important;
    }

    .modal,
    .modal-shell {
        width: 100% !important;
        max-height: calc(100dvh - 1rem) !important;
        border-radius: 0.5rem !important;
    }

    .actions-menu[open] .actions-panel {
        position: fixed !important;
        inset: auto 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) 0.75rem !important;
        width: auto !important;
        max-height: min(70dvh, 28rem);
        overflow-y: auto;
        z-index: 1300 !important;
    }

    .actions-panel button {
        min-height: 2.75rem !important;
    }

    .chart-panel canvas,
    .chart-card canvas,
    .trend-card canvas,
    .analytics-chart-panel canvas,
    .power-quality-panel canvas,
    .site-comparison-trend canvas,
    .meter-comparison-chart canvas {
        min-height: 15rem !important;
        height: clamp(15rem, 48vh, 22rem) !important;
    }

    .fullscreen-chart-modal.gauge-fullscreen {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .fullscreen-chart-modal.gauge-fullscreen .fullscreen-chart-shell {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .fullscreen-chart-modal.gauge-fullscreen .fullscreen-chart-head {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: -0.875rem -0.875rem 0;
        padding: max(0.75rem, env(safe-area-inset-top)) 0.875rem 0.75rem;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
    }

    .fullscreen-chart-modal.gauge-fullscreen .fullscreen-chart-readout {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem;
    }

    .fullscreen-chart-modal.gauge-fullscreen .chart-readout-time {
        text-align: left !important;
    }

    .fullscreen-chart-modal.gauge-fullscreen .gauge-range-panel {
        display: none !important;
    }

    .fullscreen-chart-modal.gauge-fullscreen #fullscreenChartCanvas {
        flex: 0 0 auto !important;
        min-height: 32rem !important;
        touch-action: pan-y;
    }
}

@media (max-width: 30rem) {
    :root {
        --app-page-gutter: 0.625rem;
        --app-section-gap: 0.625rem;
    }

    .main {
        padding: max(0.625rem, env(safe-area-inset-top)) 0.625rem max(0.875rem, env(safe-area-inset-bottom)) !important;
    }

    h1,
    .topbar h1 {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
    }

    .subtitle,
    .topbar .subtitle,
    .section-kicker,
    .field-hint {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    .topbar-brand-area,
    .topbar .controls,
    .summary-grid,
    .overview-grid,
    .kpi-grid,
    .analytics-summary,
    .comparison-kpis,
    .power-quality-values,
    .site-comparison-cards,
    .meter-comparison-summary,
    .wizard-progress,
    .method-grid,
    .phasor-readouts,
    .device-status-strip {
        grid-template-columns: 1fr !important;
    }

    .topbar-logo-card {
        width: 5.25rem !important;
    }

    .panel-header,
    .chart-panel-head,
    .power-quality-panel-head,
    .power-quality-chart-head,
    .trend-card-top,
    .wizard-actions,
    .modal-actions,
    .actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .status-pill,
    .measurement-chip {
        white-space: normal !important;
    }

    table {
        min-width: 42rem !important;
    }
}

@media (min-width: 61.25rem) {
    .app:has(.gridpulse-customer-sidebar) {
        display: block !important;
        grid-template-columns: none !important;
    }

    .app:has(.gridpulse-customer-sidebar) > .main {
        width: auto !important;
        max-width: none !important;
        margin-left: 284px !important;
        margin-right: 0 !important;
        margin-inline: 284px 0 !important;
    }

    .gridpulse-customer-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: 284px !important;
        max-width: 284px !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* Cross-device responsive hardening layer. Keep this last so page-local rules do not
   reintroduce Android horizontal overflow or clipped dashboard content. */
html,
body {
    width: 100%;
    max-width: 100%;
}

html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

:where(.app, .main, .topbar, .panel, .card, .summary-card, .metric-card, .reading-card,
.chart-panel, .chart-card, .trend-card, .analytics-card, .analytics-config, .pricing-panel,
.site-card, .site-box, .modal, .modal-shell, .fullscreen-chart-shell, .toolbar, .action-bar,
.controls, .filter-grid, .form-grid, .summary-grid, .overview-grid, .kpi-grid, .analytics-summary,
.comparison-kpis, .reading-layout, .trend-grid, .charts, .profile-layout, .summary-list) {
    min-width: 0;
    max-width: 100%;
}

:where(.container, .admin-container, .page-shell, .dashboard-shell, .meter-manager-page .main,
.site-manager-page .main, .thresholds-page .main, .comparison-page .main) {
    width: 100%;
    max-width: min(100%, var(--app-max-width, 110rem));
    min-width: 0;
}

:where(.topbar-brand-area, .topbar-title-stack, .section-title, .subtitle, .cell-main,
.cell-note, .reading-value, .reading-label, .metric-value, .metric-label, .summary-value,
.summary-label, .device-status-item, .chart-context, .chart-title, .filter-chip,
.live-hero, .live-focus, .live-title-row, .live-eyebrow, .live-title-main) {
    min-width: 0;
    overflow-wrap: anywhere;
}

:where(.summary-value, .metric-value, .reading-value, .live-headline-value) {
    line-height: 1.08;
    max-width: 100%;
}

:where(.summary-card, .metric-card, .reading-card, .panel, .chart-panel, .trend-card) {
    height: auto;
}

:where(.table-wrap, .table-card, .site-table-wrap, .meter-table-wrap, .threshold-table,
.discovery-results, .harmonic-table-wrap, .meter-comparison-table-wrap, .responsive-table,
.panel:has(table)) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

:where(table) {
    width: 100%;
    max-width: none;
}

:where(canvas) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

:where(.chart-panel, .chart-card, .trend-card, .analytics-chart-panel,
.power-quality-panel, .site-comparison-trend, .meter-comparison-chart) {
    overflow: visible;
}

:where(.chart-panel canvas, .chart-card canvas, .trend-card canvas,
.analytics-chart-panel canvas, .power-quality-panel canvas, .site-comparison-trend canvas,
.meter-comparison-chart canvas) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(15rem, 38dvh, 26rem);
}

:where(input, select, textarea, button, .btn) {
    min-width: 0;
}

@media (max-width: 64rem) {
    :root {
        --app-page-gutter: clamp(0.75rem, 2.4vw, 1.1rem);
    }

    :where(.summary-grid, .overview-grid, .kpi-grid, .analytics-summary,
    .comparison-kpis, .power-quality-values, .site-comparison-cards,
    .meter-comparison-summary, .charts, .reading-layout, .trend-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.toolbar, .filter-grid, .form-grid, .comparison-control-fields,
    .site-comparison-controls, .meter-comparison-toolbar, .pricing-rate-grid,
    .tou-meta-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.tou-period-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.topbar-brand-area) {
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    :where(.live-hero, .live-focus, .live-title-row, .live-eyebrow) {
        width: 100% !important;
        max-width: 100% !important;
    }

    :where(.live-title-row) {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    :where(.live-mode-actions) {
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    :where(.device-status-strip) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    :where(.container) {
        overflow-x: clip;
    }

    :where(.container > table) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :where(.container > table thead, .container > table tbody, .container > table tr) {
        width: max-content;
        min-width: 100%;
    }
}

@media (max-width: 48rem) {
    :where(.container .header) {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    :where(.container .nav-buttons) {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    :where(.container input, .container select, .container textarea) {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    :where(.container .stats) {
        grid-template-columns: 1fr !important;
    }

    .main {
        width: 100% !important;
        max-width: 100% !important;
    }

    :where(.topbar, .panel-header, .chart-panel-head, .trend-card-top,
    .power-quality-panel-head, .pricing-save-row, .modal-actions, .wizard-actions) {
        align-items: stretch;
    }

    :where(.toolbar, .filter-grid, .form-grid, .custom-range,
    .comparison-control-fields, .site-comparison-controls, .meter-comparison-toolbar,
    .profile-layout, .summary-list, .diagnostic-row, .pricing-rate-grid,
    .tou-meta-grid, .connection-fields-grid) {
        grid-template-columns: 1fr !important;
    }

    :where(.tou-period-grid) {
        grid-template-columns: 1fr !important;
    }

    :where(.action-bar, .toolbar) {
        display: grid;
    }

    :where(.btn, button, input, select, textarea) {
        min-height: 2.75rem;
    }

    :where(.action-bar .btn, .toolbar .btn, .modal-actions .btn, .wizard-actions .btn,
    .pricing-save-row .btn, .site-submit-row .btn) {
        width: 100%;
        white-space: normal;
    }

    :where(.summary-grid, .overview-grid, .kpi-grid, .analytics-summary,
    .comparison-kpis, .power-quality-values, .site-comparison-cards,
    .meter-comparison-summary, .charts, .reading-layout, .trend-grid,
    .wizard-progress, .method-grid, .device-status-strip) {
        grid-template-columns: 1fr !important;
    }

    :where(table) {
        min-width: min(44rem, 180vw) !important;
    }

    :where(.chart-panel canvas, .chart-card canvas, .trend-card canvas,
    .analytics-chart-panel canvas, .power-quality-panel canvas, .site-comparison-trend canvas,
    .meter-comparison-chart canvas) {
        height: clamp(14rem, 44dvh, 22rem) !important;
    }

    :where(.dropdown-menu, .display-mode-menu, .actions-panel, .modal) {
        max-width: calc(100vw - 1rem) !important;
    }
}

@media (max-width: 26.875rem) {
    :root {
        --app-page-gutter: 0.625rem;
    }

    :where(h1, .topbar h1) {
        font-size: clamp(1.25rem, 6vw, 1.65rem) !important;
    }

    :where(.section-title) {
        font-size: clamp(1rem, 4.6vw, 1.18rem) !important;
    }

    :where(.summary-value, .metric-value, .reading-value) {
        font-size: clamp(1.25rem, 8vw, 1.9rem) !important;
    }

    :where(.topbar, .panel, .card, .summary-card, .metric-card, .reading-card,
    .chart-panel, .trend-card) {
        padding: 0.75rem !important;
    }

    :where(table) {
        min-width: min(40rem, 190vw) !important;
    }
}