/**
 * Home Temperature Monitor - Modern PWA Styles
 * A beautiful, responsive design for temperature monitoring
 */

/* ========== CSS Variables ========== */
:root {
    /* Colors — minimal / data-dense palette (near-black, flat borders) */
    --color-bg-primary: #060708;
    --color-bg-secondary: #0e1011;
    --color-bg-card: #0e1011;
    --color-bg-elevated: #16181b;
    --color-border: #1c1e21;
    --color-border-light: #2a2d31;

    --color-text-primary: #d8dbde;
    --color-text-secondary: #9a9fa5;
    --color-text-muted: #6a6f75;

    --color-accent: #7fffd4;
    --color-accent-light: #b3fff0;
    --color-accent-dark: #58e0bd;

    --color-success: #7fffd4;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-cold: #7fb3ff;
    --color-hot: #ff9f6b;

    /* Fonts */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius — flat, not rounded-card */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 6px;

    /* Shadows — unused in this theme, kept at 0 so any stray references stay flat */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Safe areas */
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
}

/* ========== Reset & Base ========== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--safe-top);
    padding-bottom: calc(70px + var(--safe-bottom));
}

/* ========== Header ========== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md);
    padding-top: calc(var(--spacing-md) + var(--safe-top));
}

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

.header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.icon-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.icon-btn:hover, .icon-btn:focus {
    background: var(--color-bg-elevated);
    color: var(--color-accent);
}

.icon-btn:active {
    transform: scale(0.95);
}

.icon-btn svg {
    width: 22px;
    height: 22px;
}

.icon-btn.active {
    color: var(--color-bg-primary);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.last-update {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

/* ========== Alert Banner ========== */
.alert-banner {
    background: linear-gradient(135deg, var(--color-danger) 0%, #dc2626 100%);
    padding: var(--spacing-md);
    animation: slideDown 0.3s ease;
}

.alert-banner.hidden {
    display: none;
}

.alert-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: white;
    font-weight: 500;
}

.alert-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ========== Main Content ========== */
.main-content {
    flex: 1;
    padding: var(--spacing-md);
    padding-left: calc(var(--spacing-md) + var(--safe-left));
    padding-right: calc(var(--spacing-md) + var(--safe-right));
}

.view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========== Sensor List ========== */
.sensor-section-label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.sensor-grid {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-lg);
}

.sensor-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

.sensor-card:last-child {
    border-bottom: none;
}

.sensor-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sensor-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

.sensor-card.alert-cold .sensor-dot {
    background: var(--color-cold);
}

.sensor-card.alert-hot .sensor-dot {
    background: var(--color-hot);
}

.sensor-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.sensor-location {
    font-size: 0.625rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sensor-icon {
    display: none;
}

.sensor-readout {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-mono);
}

.sensor-temp {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sensor-temp .unit {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sensor-card.alert-cold .sensor-temp {
    color: var(--color-cold);
}

.sensor-card.alert-hot .sensor-temp {
    color: var(--color-hot);
}

.sensor-humidity {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.sensor-humidity svg {
    display: none;
}

.sensor-time {
    display: none;
}

/* ========== Differential Card ========== */
.differential-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: var(--spacing-lg);
}

.differential-card h3 {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.differential-content {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-mono);
}

.floor-temp {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.floor-label {
    display: none;
}

.floor-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.differential-indicator {
    display: contents;
}

.diff-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-cold);
}

.diff-value.positive {
    color: var(--color-hot);
}

.diff-value.negative {
    color: var(--color-cold);
}

.diff-label {
    display: none;
}

/* ========== Chart Cards ========== */
.quick-chart-card,
.history-chart-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.card-header h3 {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.text-btn {
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 0.875rem;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.text-btn:hover {
    background: var(--color-bg-elevated);
}

.chart-container {
    height: 150px;
    position: relative;
}

.chart-container.large {
    height: 250px;
}

/* ========== History View ========== */
.history-controls {
    margin-bottom: var(--spacing-lg);
}

.time-range-selector {
    display: flex;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs);
    gap: var(--spacing-xs);
}

.range-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.range-btn:hover {
    color: var(--color-text-primary);
}

.range-btn.active {
    background: var(--color-accent);
    color: white;
}

.sensor-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--spacing-lg);
}

.sensor-chip {
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.sensor-chip .sensor-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sensor-chip.active {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-light);
    color: var(--color-text-primary);
}

.sensor-chip[data-id="all"].active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    overflow: hidden;
}

.stat-card h4 {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
}

.stat-label {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

/* A 2x2 grid rather than a single row of 4 - a single row kept squeezing
   (and eventually overlapping) once "In Range" joined min/max/avg, since
   flex items don't reliably shrink numbers + labels down to a 140px card. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.stat-row > div {
    text-align: center;
    min-width: 0;
}

/* Refresh button spinning animation */
.icon-btn.spinning svg {
    animation: spin 1s linear infinite;
}

/* ========== Settings View ========== */
.settings-section {
    margin-bottom: var(--spacing-xl);
}

.settings-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.settings-description {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.threshold-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.threshold-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.threshold-card h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.threshold-card .location {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.threshold-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.threshold-input {
    flex: 1;
}

.threshold-input label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.threshold-input input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-elevated);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 1rem;
    transition: border-color var(--transition-fast);
}

.threshold-input input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.setting-info {
    display: flex;
    flex-direction: column;
}

.setting-label {
    font-weight: 500;
}

.setting-description {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
}

.setting-select {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-elevated);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

/* ========== Users ========== */
.users-list {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-md);
}

.user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
}

.user-row:last-child {
    border-bottom: none;
}

.user-remove-btn {
    background: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-remove-btn:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.add-user-form {
    display: flex;
    gap: var(--spacing-sm);
}

.add-user-form input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.add-user-form input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.add-user-form .text-btn {
    border: 1px solid var(--color-border-light);
}

.users-error {
    color: var(--color-danger);
    font-size: 0.75rem;
    margin-top: var(--spacing-sm);
}

/* Toggle Switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-elevated);
    transition: var(--transition-fast);
    border-radius: 28px;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: var(--transition-fast);
    border-radius: 50%;
}

.toggle input:checked + .toggle-slider {
    background-color: var(--color-accent);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(24px);
}

/* About Section */
.about-info {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.about-info p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.about-info p:last-child {
    margin-bottom: 0;
}

.primary-btn {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: background var(--transition-fast);
}

.primary-btn:hover {
    background: var(--color-accent-dark);
}

.primary-btn.hidden {
    display: none;
}

.primary-btn svg {
    width: 20px;
    height: 20px;
}

/* ========== Bottom Navigation ========== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(70px + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-bg-elevated);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

.nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.625rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.nav-btn svg {
    width: 24px;
    height: 24px;
}

.nav-btn.active {
    color: var(--color-accent);
}

.nav-btn:hover {
    color: var(--color-text-secondary);
}

/* ========== Loading Overlay ========== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 15, 26, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity var(--transition-normal);
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-bg-elevated);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ========== Toast ========== */
.toast {
    position: fixed;
    bottom: calc(90px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    animation: toastIn 0.3s ease;
}

.toast.hidden {
    display: none;
}

.toast.success {
    background: var(--color-success);
    color: #0f0f1a;
}

.toast.error {
    background: var(--color-danger);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========== Responsive Adjustments ========== */
@media (min-width: 768px) {
    .sensor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .chart-container.large {
        height: 300px;
    }
}

@media (min-width: 1024px) {
    .sensor-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-content {
        max-width: 1000px;
    }

    .bottom-nav {
        position: relative;
        height: auto;
        padding: var(--spacing-md);
        border-top: none;
        background: transparent;
        justify-content: center;
        gap: var(--spacing-xl);
    }

    #app {
        padding-bottom: 0;
    }
}

/* ========== Dark Mode Preference (already dark, but for system preference) ========== */
@media (prefers-color-scheme: light) {
    /* Keep dark theme regardless of system preference for this app */
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== Sign-in gate ========== */
.hidden {
    display: none !important;
}

.signin-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    padding: var(--spacing-lg, 24px);
}

.signin-card {
    background: var(--color-bg-card);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    width: min(90vw, 380px);
    text-align: center;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
}

.signin-card h1 {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    color: var(--color-text-primary);
}

.signin-sub {
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: none;
    background: #fff;
    color: #1f1f1f;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.signin-btn:hover {
    opacity: 0.9;
}

/* ========== Thermostat Card ========== */
.thermostat-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.thermostat-section-label .sensor-section-label {
    margin-bottom: 0;
}

.thermostat-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.mode-badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mode-badge.active-heat {
    color: var(--color-hot);
}

.mode-badge.active-cool {
    color: var(--color-cold);
}

.thermostat-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    flex: 1;
    min-width: 0;
}

.thermostat-target {
    display: block;
}

.thermostat-target-value {
    text-align: left;
}

.thermostat-target-value #thermostat-target {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
}

.thermostat-target-value .unit {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.thermostat-current {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

.thermostat-current #thermostat-current {
    font-family: var(--font-mono);
}

.thermostat-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--color-border);
}

.mode-buttons {
    display: flex;
    gap: 6px;
}

.mode-btn {
    font-family: var(--font-mono);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition-fast);
}

.mode-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.thermostat-away-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thermostat-away-row .setting-label {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

/* Context strip: override notice + heat-cycle + next-schedule-change lines,
   stacked under the current-temp readout. Kept to plain text + a small
   status dot (no emoji) to match the rest of the app's typographic style. */
.thermostat-context {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.thermostat-override-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 4px 5px 8px;
    margin-bottom: 1px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--radius-sm);
}

.thermostat-override-pill .override-text {
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    color: var(--color-warning);
    line-height: 1.3;
}

.thermostat-override-pill .text-btn {
    font-size: 0.6875rem;
    padding: 2px 8px;
    flex-shrink: 0;
    color: var(--color-warning);
}

.thermostat-context-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.context-text {
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    color: var(--color-text-secondary);
}

.context-icon {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.heat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex-shrink: 0;
}

.heat-dot.active {
    background: var(--color-hot);
    box-shadow: 0 0 0 3px rgba(255, 159, 107, 0.22);
}

/* Vertical slider — a native <input type="range"> rotated -90deg, so it
   inherits real touch/drag behavior (iOS Control Center style) instead of
   hand-rolled pointer-event dragging. A separate fill div behind it shows
   the current value as a bottom-anchored percentage fill. */
.vslider-wrap {
    position: relative;
    width: 56px;
    height: 176px;
    flex-shrink: 0;
}

/* The visual pill (background + rounded corners + fill) is a separate
   layer from the <input> itself. A native range thumb's CENTER sits
   exactly at the track's top/bottom edge at min/max, so half the thumb
   necessarily extends past the track at the extremes — clipping that
   with overflow:hidden on the same box the input lives in cuts the thumb
   in half. Keeping the clipped, rounded pill as its own element and the
   input as an unclipped sibling lets the thumb sit fully visible at
   every position while the track still reads as a clean rounded shape. */
.vslider-track {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    pointer-events: none;
}

.vslider-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, var(--color-accent-light), var(--color-accent-dark));
}

.vslider-input {
    position: absolute;
    width: 176px;
    height: 56px;
    top: 50%;
    left: 50%;
    margin-top: -28px;
    margin-left: -88px;
    transform: rotate(-90deg);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    touch-action: none;
    cursor: grab;
}

.vslider-input::-webkit-slider-runnable-track {
    height: 56px;
    background: transparent;
}

/* The thumb spans the FULL 56px cross-axis (matching the track/input
   height exactly) instead of floating as a smaller circle within it —
   there's then no leftover space for a browser's thumb-centering default
   to get wrong in either direction, on any engine. Styled as a rounded
   cap that sits right at the fill's edge, closer to how iOS Control
   Center's own slider actually looks (no separate floating handle). */
.vslider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-bg-primary);
    border: 3px solid var(--color-accent);
    cursor: grab;
}

.vslider-input::-moz-range-track {
    height: 56px;
    background: transparent;
    border: none;
}

.vslider-input::-moz-range-thumb {
    width: 28px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-bg-primary);
    border: 3px solid var(--color-accent);
    cursor: grab;
}

/* ========== Schedule ========== */
.schedule-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.schedule-header-row h2 {
    margin-bottom: 0;
}

.schedule-day-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
    padding-bottom: 2px;
}

.schedule-day-tab {
    font-family: var(--font-mono);
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.schedule-day-tab.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-primary);
}

.schedule-entries {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.schedule-entry-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.schedule-entry-row input[type="time"],
.schedule-entry-row input[type="number"] {
    background: var(--color-bg-elevated);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    padding: 8px 10px;
}

.schedule-entry-row input[type="time"] {
    flex: 1.2;
}

.schedule-entry-row input[type="number"] {
    flex: 1;
    width: 0; /* let flex control width instead of the number input's intrinsic size */
}

.schedule-entry-row input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.schedule-entry-remove-btn {
    background: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    padding: 8px 10px;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.schedule-entry-remove-btn:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.schedule-empty-day {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    padding: var(--spacing-md) 0;
    text-align: center;
}

.schedule-saved-msg {
    color: var(--color-accent);
    font-size: 0.75rem;
    margin-top: var(--spacing-sm);
    text-align: center;
}