/* --- Material 3 Design Tokens --- */
:root {
    --md-sys-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    --md-sys-color-background: #121318;
    --md-sys-color-on-background: #e2e2e9;
    --md-sys-color-surface: #121318;
    --md-sys-color-surface-variant: #44464f;
    --md-sys-color-surface-container-low: #1a1b20;
    --md-sys-color-surface-container: #1e1f25;
    --md-sys-color-surface-container-high: #282a30;
    
    --md-sys-color-primary: #adc6ff;
    --md-sys-color-on-primary: #002e69;
    --md-sys-color-primary-container: #1e447d;
    --md-sys-color-on-primary-container: #d9e2ff;
    
    --md-sys-color-secondary: #c2c6dc;
    --md-sys-color-secondary-container: #404659;
    --md-sys-color-on-secondary-container: #dee1f9;
    
    --md-sys-color-outline: #8e9099;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-error-container: #93000a;
}

/* --- Core Reset & Normalization --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--md-sys-font-family);
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    padding: 16px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Typography System --- */
.display-large { font-size: 3.5rem; font-weight: 400; letter-spacing: -1px; }
.display-small { font-size: 1.5rem; font-weight: 400; }
.headline-small { font-size: 1.35rem; font-weight: 500; }
.body-large { font-size: 1rem; font-weight: 400; }
.body-medium { font-size: 0.875rem; font-weight: 400; }
.body-small { font-size: 0.75rem; font-weight: 400; color: var(--md-sys-color-outline); }
.label-large { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1px; }
.label-medium { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.5px; }
.label-small { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.5px; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.color-primary { color: var(--md-sys-color-primary); }
.color-secondary { color: var(--md-sys-color-secondary); }
.color-outline { color: var(--md-sys-color-outline); }
.color-error { color: var(--md-sys-color-error) !important; }
.uppercase { text-transform: uppercase; }

/* --- Top Header Configuration --- */
.top-app-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 8px 0 20px 0;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.app-bar-leading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.connected { background-color: #34c759; box-shadow: 0 0 8px rgba(52, 199, 89, 0.4); }
.status-dot.disconnected { background-color: var(--md-sys-color-error); }

.hub-config-card {
    background-color: var(--md-sys-color-surface-container);
    padding: 6px 12px;
    border-radius: 12px;
}

.input-group {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.input-group input {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-background);
    padding: 6px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    width: 150px;
}

/* --- Global Components --- */
.m3-banner {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 16px auto;
}
.m3-banner.hidden { display: none; }

.m3-card {
    border-radius: 24px;
    padding: 20px;
    background-color: var(--md-sys-color-surface-container);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.m3-card-elevated {
    background-color: var(--md-sys-color-surface-container-low);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* --- Thermostat Display Zone --- */
.temperature-display-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
}

.temp-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.temp-text-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.unit-marker {
    margin-top: 6px;
    margin-left: 2px;
    color: var(--md-sys-color-outline);
}

/* --- Inputs & Interactions --- */
.m3-btn {
    border: none;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    padding: 0 16px;
    height: 36px;
    font-weight: 500;
    user-select: none;
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.m3-btn-filled {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.m3-btn-outlined {
    background-color: transparent;
    border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-primary);
}

.m3-btn-text {
    background: transparent;
    color: var(--md-sys-color-primary);
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.25rem;
    padding: 0;
}

/* Power Floating Action Button */
.m3-fab {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background-color: var(--md-sys-color-surface-container-high);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.m3-fab.active {
    background-color: #b4eed0;
}
.m3-fab.active .fab-icon { fill: #00391c; }
.fab-icon { width: 22px; height: 22px; fill: var(--md-sys-color-primary); }

/* Segmented Control Component */
.segmented-control {
    display: flex;
    background-color: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-surface-variant);
    border-radius: 12px;
    padding: 4px;
    width: 100%;
    gap: 2px;
}

.segment-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-background);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 2px;
    cursor: pointer;
    border-radius: 8px;
    text-align: center;
}
.segment-btn.active {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* Switches & Layout Rows */
.m3-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.m3-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
    flex-shrink: 0;
}
.m3-switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--md-sys-color-surface-container-high);
    border: 2px solid var(--md-sys-color-outline);
    border-radius: 32px;
    transition: .15s ease;
}
.switch-slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 5px; bottom: 6px;
    background-color: var(--md-sys-color-outline);
    border-radius: 50%;
    transition: .15s ease;
}
input:checked + .switch-slider { background-color: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
input:checked + .switch-slider:before { transform: translateX(20px); background-color: var(--md-sys-color-on-primary); width: 22px; height: 22px; left: 3px; bottom: 3px; }

.grid-half { display: grid; grid-template-cols: 1fr 1fr; gap: 12px; width: 100%; }
.m3-select {
    background-color: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-background);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: inherit;
    width: 100%;
}

/* Text Fields & Containers */
.input-action-row { display: flex; gap: 12px; width: 100%; align-items: center; }
.m3-textfield { position: relative; flex: 1; }
.m3-textfield input {
    width: 100%;
    background-color: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-surface-variant);
    border-radius: 8px;
    padding: 10px;
    color: var(--md-sys-color-on-background);
    font-family: inherit;
}

.m3-status-container {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(173, 198, 255, 0.05); padding: 8px 12px;
    border-radius: 12px; border: 1px dashed var(--md-sys-color-primary);
}
.m3-status-container.hidden { display: none; }

/* Schedule Component Groups */
.schedule-grid { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.schedule-item-box {
    background-color: var(--md-sys-color-surface-container-low);
    padding: 12px 16px;
    border-radius: 16px;
}
.schedule-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.m3-badge { background-color: var(--md-sys-color-surface-container-high); padding: 2px 8px; border-radius: 6px; }
.m3-badge.active { background-color: rgba(173, 198, 255, 0.15); color: var(--md-sys-color-primary); }
.m3-time-input {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-background);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: inherit;
}

/* --- Layout Grid Constraints --- */
.dashboard-grid {
    display: grid;
    grid-template-cols: 1fr;
    gap: 16px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.control-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.system-footer { margin-top: auto; padding: 24px 0 8px 0; text-align: center; }
.hex-dump { background-color: var(--md-sys-color-surface-container); padding: 10px; border-radius: 12px; max-width: 450px; margin: 6px auto 0 auto; font-size: 0.8rem; }

/* --- Strict Responsive Breakdown Matrix --- */
@media (min-width: 744px) { /* Tablets */
    .dashboard-grid {
        grid-template-cols: repeat(2, 1fr);
    }
    .full-width-tablet {
        grid-column: span 2;
    }
    .schedule-grid {
        grid-template-cols: repeat(2, 1fr);
        flex-direction: row;
    }
    .schedule-item-box { flex: 1; }
}

@media (min-width: 1100px) { /* Desktops */
    body { padding: 24px 32px; }
    .dashboard-grid {
        grid-template-cols: repeat(3, 1fr);
    }
    .full-width-tablet {
        grid-column: span 1;
    }
    .schedule-grid {
        grid-template-cols: 1fr;
        flex-direction: column;
    }
}