:root {
    color-scheme: light;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-muted: #f7f9fa;
    --surface-raised: #ffffff;
    --border: #e3e7eb;
    --border-strong: #cfd6dc;
    --text: #1d2733;
    --text-muted: #687480;
    --text-subtle: #89939c;
    --primary: #159447;
    --primary-hover: #117c3c;
    --primary-soft: #e8f7ed;
    --success: #168447;
    --warning: #b58b00;
    --danger: #a13a35;
    --info: #397fa8;
    --overlay: rgba(8, 20, 14, .34);
    --shadow: rgba(18, 45, 30, .10);
    --energy-grid: #4387b5;
    --energy-solar: #d49b16;
    --energy-battery: #27a765;
    --energy-consumption: #9a68b5;
    --energy-price: #b95710;
    --energy-inverter: #278f91;
    --chart-soc: #168c9c;
    --chart-voltage: #c06a34;
    --chart-heat-pump: #b84b8d;
    --chart-other: #66717c;
    --chart-fallback-1: #7b61b5;
    --chart-fallback-2: #b55f76;
    --chart-fallback-3: #477f6d;
    --chart-fallback-4: #8a7042;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101820;
    --surface: #18232d;
    --surface-muted: #202d37;
    --surface-raised: #22313c;
    --border: #30414d;
    --border-strong: #435762;
    --text: #edf4f0;
    --text-muted: #b0bfc6;
    --text-subtle: #8799a2;
    --primary: #48bd7d;
    --primary-hover: #60cf91;
    --primary-soft: #183b2a;
    --success: #55c987;
    --warning: #e2bd4e;
    --danger: #ef7a72;
    --info: #70b9df;
    --overlay: rgba(0, 0, 0, .62);
    --shadow: rgba(0, 0, 0, .30);
    --energy-grid: #20c8ff;
    --energy-solar: #ffd400;
    --energy-battery: #91ff20;
    --energy-consumption: #bd5cff;
    --energy-price: #ff7a1a;
    --energy-inverter: #55c4c4;
    --chart-soc: #48cad1;
    --chart-voltage: #f09a63;
    --chart-heat-pump: #ee82bd;
    --chart-other: #aeb8c1;
    --chart-fallback-1: #ad93e3;
    --chart-fallback-2: #e18aa0;
    --chart-fallback-3: #72b59d;
    --chart-fallback-4: #c2a86c;
}

:root[data-theme="dark"] [class*="card"],
:root[data-theme="dark"] [class*="panel"],
:root[data-theme="dark"] [class*="row"],
:root[data-theme="dark"] [class*="item"],
:root[data-theme="dark"] [class*="body"],
:root[data-theme="dark"] [class*="content"],
:root[data-theme="dark"] [class*="description"],
:root[data-theme="dark"] [class*="readable"],
:root[data-theme="dark"] [class*="event"] {
    border-color: var(--border) !important;
}
:root[data-theme="dark"] [class*="card"],
:root[data-theme="dark"] [class*="panel"],
:root[data-theme="dark"] [class*="description"],
:root[data-theme="dark"] [class*="readable"] {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}
:root[data-theme="dark"] [class*="meta"],
:root[data-theme="dark"] [class*="label"],
:root[data-theme="dark"] [class*="subtitle"],
:root[data-theme="dark"] [class*="summary"] {
    color: var(--text-muted) !important;
}
:root[data-theme="dark"] tbody tr,
:root[data-theme="dark"] .subtask,
:root[data-theme="dark"] .question,
:root[data-theme="dark"] .zone-editor-row,
:root[data-theme="dark"] .thermostat-manage-row {
    background-color: var(--surface-muted) !important;
}

html, body { background: var(--bg) !important; color: var(--text) !important; }
body, input, select, textarea, button { color: var(--text); }
a, .header-link, .logout { color: var(--primary) !important; }
header { background: var(--surface) !important; border-color: var(--border) !important; }
h1, h2, h3, h4, strong { color: var(--text); }
input, select, textarea { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.subtitle, .muted, small, .meta, .note, .account-label { color: var(--text-muted) !important; }
.card, .panel, .toolbar, .modal-panel, .settings-panel, .thermostat-card, .thermostat-live-panel,
.history-panel, .zone-editor-row, .zone-editor-card, .system-card, .user-card, table, thead, tbody, tr, td, th {
    border-color: var(--border) !important;
}
.card, .panel, .toolbar, .modal-panel, .settings-panel, .thermostat-card, .thermostat-live-panel,
.history-panel, .system-card, table { background-color: var(--surface) !important; }
.modal, .overlay, [class*="overlay"] { background-color: var(--overlay); }
button.primary, .primary-button, .save-button { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
button.primary:hover, .primary-button:hover, .save-button:hover { background: var(--primary-hover) !important; }
.settings-button, button:not(.primary):not(.primary-button):not(.save-button) { background-color: var(--surface) ; border-color: var(--border-strong); color: var(--text); }
.message.success, .status.completed, .status.running { background: var(--primary-soft) !important; }
.message.error, .status.failed, .status.blocked { color: var(--danger) !important; }
code, pre { background: var(--surface-muted) !important; color: var(--text) !important; }
svg text { fill: var(--text-muted); }

/* Admin entity- en loggingkaarten gebruiken dezelfde centrale oppervlakken. */
.entity-device-group,
.entity-device-summary,
.entity-mapping-list,
.entity-mapping-item,
.entity-search-card,
.entity-mapping-details {
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.entity-mapping-item,
.entity-search-card {
    background: var(--surface-raised) !important;
}
.entity-device-summary,
.entity-mapping-list {
    background: var(--surface-muted) !important;
}
.entity-mapping-details,
.entity-device-count,
.entity-search-meta {
    color: var(--text-muted) !important;
}
.entity-section-content {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.entity-mapping-item input,
.entity-mapping-item select {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}
.inline-message { color: var(--text-muted) !important; }
.inline-message.success { color: var(--success) !important; }
.inline-message.error { color: var(--danger) !important; }
button:disabled, input:disabled, select:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Climate bevat oudere componentlokale light-declarations. Deze page-scoped
   tokenlaag wint bewust de cascade zonder aparte Dark-markup. */
.climate-page .overview-card,
.climate-page .panel,
.climate-page .thermostat,
.climate-page .boiler-settings-panel,
.climate-page .zone-settings-panel,
.climate-page .zone-card,
.climate-page .zone-editor-row,
.climate-page .thermostat-add-panel,
.climate-page .thermostat-add-preview,
.climate-page .thermostat-history-chart-shell {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.climate-page .stat,
.climate-page .disinfection-box,
.climate-page .thermostat-mode-buttons,
.climate-page .thermostat-card-status,
.climate-page .thermostat-manage-row,
.climate-page .boiler-settings-footer,
.climate-page .zone-settings-footer,
.climate-page .disinfection-status-card.neutral {
    background-color: var(--surface-muted) !important;
    border-color: var(--border) !important;
}
.climate-page .thermostat-card-footer,
.climate-page .thermostat-control-section,
.climate-page .panel-header,
.climate-page .boiler-settings-header,
.climate-page .settings-section,
.climate-page .zone-settings-header,
.climate-page .zone-card-content,
.climate-page .zone-group-row,
.climate-page .zone-footer {
    border-color: var(--border) !important;
}
.climate-page .thermostat-mode-button,
.climate-page .settings-button,
.climate-page .settings-secondary-button,
.climate-page .boiler-settings-close,
.climate-page .zone-settings-close,
.climate-page .zone-editor-remove {
    background-color: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
.climate-page .thermostat-mode-button.active {
    background-color: var(--surface-raised) !important;
    color: var(--primary) !important;
}
.climate-page .thermostat-temperature-dial::before {
    background-color: var(--surface) !important;
}
.climate-page .overview-value,
.climate-page .big-value,
.climate-page .stat-value,
.climate-page .boiler-next-value,
.climate-page .disinfection-title,
.climate-page .disinfection-row strong,
.climate-page .panel-title,
.climate-page .thermostat-name,
.climate-page .thermostat-temp,
.climate-page .thermostat-setpoint,
.climate-page .thermostat-current-value,
.climate-page .thermostat-target-value {
    color: var(--text) !important;
}
.climate-page .overview-label,
.climate-page .overview-small,
.climate-page .big-label,
.climate-page .stat-label,
.climate-page .boiler-next-label,
.climate-page .disinfection-row,
.climate-page .thermostat-card-label,
.climate-page .thermostat-secondary-reading,
.climate-page .thermostat-live-label,
.climate-page .thermostat-humidity,
.climate-page .zone-footer {
    color: var(--text-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Application-wide phone density. Page-specific desktop layouts stay untouched. */
@media (max-width: 760px) {
    html {
        font-size: 13px;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: 13px !important;
    }

    body > main {
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding: 12px 0 calc(24px + env(safe-area-inset-bottom)) !important;
    }

    body > :is(header,.moras-global-header) {
        min-height: 54px !important;
        padding: 7px 9px !important;
    }

    body > :is(header,.moras-global-header) img {
        max-width: 150px;
        max-height: 40px;
    }

    body :is(h1,.page-title) {
        font-size: clamp(1.45rem,7vw,1.75rem) !important;
        line-height: 1.08 !important;
    }

    body h2 {
        font-size: clamp(1.08rem,5vw,1.3rem) !important;
    }

    body h3 {
        font-size: 1rem !important;
    }

    body :is(button,.button,a.button,input,select,textarea) {
        min-height: 38px !important;
        padding: 7px 9px !important;
        font-size: .82rem !important;
    }

    body :is(.card,.panel,.overview-card,.summary-card,.side-card,.price-card,.settings-section,.modal-panel,.planning-panel,.dashboard-panel) {
        border-radius: 16px !important;
    }

    body :is(.card,.overview-card,.summary-card,.side-card,.price-card,.settings-section) {
        padding: 13px !important;
    }

    body :is(.modal,.planning-modal,.dashboard-modal,.price-modal,.thermostat-add-overlay,.boiler-settings-overlay,.zone-settings-overlay) {
        padding: 7px !important;
    }

    body :is(.modal-header,.planning-head,.dashboard-head,.card-header,.panel-header) {
        padding: 10px 12px !important;
    }

    body :is(.modal-body,.planning-body,.dashboard-body,.panel-body) {
        padding: 10px !important;
    }

    body :is(.muted,.subtitle,.description,small,label) {
        font-size: .76rem;
    }

    body :is(.tabs,.actions,.button-row,.theme-options) {
        gap: 5px !important;
    }
}