body {
    background: #121212;
    color: white;
    margin: 0;
    font-family: Arial, sans-serif;
    padding-top: 60px; /* Adjust main content to account for fixed header */
    padding-bottom: 70px; /* Add padding for fixed bottom navigation */
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Main panel: flex container for centering content */
.main-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Add any other styles that were in styles.css here */
select {
    font-size: 18px; /* Match the rest of the font sizes */
    font-weight: bold; /* Make the text bold */
    padding: 5px 10px; /* Add some padding for better appearance */
    background-color: #2a2a2a; /* Dark background to match the theme */
    color: #ffffff; /* White text for contrast */
    border: 1px solid #555; /* Subtle border */
    border-radius: 5px; /* Rounded corners for a modern look */
    appearance: none; /* Remove default styles for consistency across browsers */
    cursor: pointer; /* Indicate interactivity */
}
select:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: 0 0 5px #4caf50; /* Add a green glow effect when focused */
}

option {
    background-color: #2a2a2a; /* Ensure dropdown items match the theme */
    color: #ffffff; /* Text color */
}

.house-icon svg {
  width: 100%;
  height: auto;
}
.house-icon svg {
    width: 100%;
    height: auto;
    stroke: #666;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(100, 100, 100, 0.2));
    overflow: visible;  /* Ensure SVG doesn't clip */
}

.house-outline {
    stroke: #888;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw 2s ease forwards;
}

.window {
    fill: #222222;
    transition: all 0.5s ease;  /* Smooth transition for color changes */
}

.window.heat {
    fill: #aa1111;
    stroke: #dd1111;
}

.window.cool {
    fill: #1111aa;
    stroke: #1111dd;
}

.chimney-smoke {
    opacity: 0;
    animation: smoke 9s infinite;
    transform-origin: bottom;
}

.smoke {
    opacity: 0.3;
    transform-origin: bottom center;
    fill: #eeeeee;  /* Lighter color from #dddddd */
    pointer-events: none;
}

.smoke-particle {
    opacity: 0;
    animation: smoke-drift 2s infinite;
}

.smoke-particle:nth-child(1) { animation-delay: 0s; }
.smoke-particle:nth-child(2) { animation-delay: 0.3s; }
.smoke-particle:nth-child(3) { animation-delay: 0.6s; }
.smoke-particle:nth-child(4) { animation-delay: 0.9s; }
.smoke-particle:nth-child(5) { animation-delay: 1.2s; }
.smoke-particle:nth-child(6) { animation-delay: 1.5s; }

@keyframes smoke-drift {
    0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.8); }
    20% { opacity: 0.3; transform: translateY(-10px) translateX(3px) scale(0.9); }
    40% { opacity: 0.2; transform: translateY(-20px) translateX(-4px) scale(1.0); }
    60% { opacity: 0.15; transform: translateY(-30px) translateX(5px) scale(1.1); }
    80% { opacity: 0.1; transform: translateY(-40px) translateX(-3px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-50px) translateX(0) scale(1.3); }
}

.smoke.windy .smoke-particle {
    animation-name: smoke-drift-wind;
    animation-duration: 1.5s;
}

.smoke.windy-strong .smoke-particle {
    animation-name: smoke-drift-wind-strong;
    animation-duration: 1s;
}

@keyframes smoke-drift-wind {
    0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.8); }
    20% { opacity: 0.3; transform: translateY(-5px) translateX(15px) scale(0.9); }
    40% { opacity: 0.2; transform: translateY(-10px) translateX(30px) scale(1.0); }
    60% { opacity: 0.15; transform: translateY(-15px) translateX(45px) scale(1.1); }
    80% { opacity: 0.1; transform: translateY(-20px) translateX(60px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-25px) translateX(75px) scale(1.3); }
}

@keyframes drift-normal {
    0% { transform: translateY(0) translateX(0); opacity: 0.3; }
    25% { transform: translateY(-40px) translateX(8px); opacity: 0.2; }
    50% { transform: translateY(-80px) translateX(-8px); opacity: 0.15; }
    75% { transform: translateY(-120px) translateX(6px); opacity: 0.1; }
    100% { transform: translateY(-160px) translateX(0); opacity: 0; }
}

.smoke.windy {
    animation: drift-wind 6s infinite;
}

.smoke.windy-strong {
    animation: drift-wind-strong 4s infinite;
}

@keyframes smoke {
    0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.8); }
    15% { opacity: 0.3; transform: translateY(-4px) translateX(3px) scale(0.9); }
    30% { opacity: 0.25; transform: translateY(-8px) translateX(-2px) scale(1.0); }
    45% { opacity: 0.2; transform: translateY(-12px) translateX(4px) scale(1.1); }
    60% { opacity: 0.15; transform: translateY(-16px) translateX(-3px) scale(1.2); }
    75% { opacity: 0.1; transform: translateY(-20px) translateX(2px) scale(1.3); }
    90% { opacity: 0.05; transform: translateY(-24px) translateX(-2px) scale(1.4); }
    100% { opacity: 0; transform: translateY(-28px) translateX(0) scale(1.5); }
}

@keyframes drift-wind {
    0% { transform: translateY(0) translateX(0); opacity: 0.4; }
    25% { transform: translateY(-20px) translateX(30px); opacity: 0.3; }
    50% { transform: translateY(-40px) translateX(60px); opacity: 0.2; }
    75% { transform: translateY(-60px) translateX(90px); opacity: 0.1; }
    100% { transform: translateY(-80px) translateX(120px); opacity: 0; }
}

@keyframes drift-wind-strong {
    0% { transform: translateY(0) translateX(0); opacity: 0.4; }
    25% { transform: translateY(-15px) translateX(20px); opacity: 0.3; }
    50% { transform: translateY(-30px) translateX(40px); opacity: 0.2; }
    75% { transform: translateY(-45px) translateX(60px); opacity: 0.1; }
    100% { transform: translateY(-60px) translateX(80px); opacity: 0; }
}

.tree-branch {
    animation: sway 5s ease-in-out infinite;
    transform-origin: bottom;
}

/* Fix tree animations */
.tree-branches {
    transform-origin: bottom center;
    will-change: transform;
    animation-play-state: paused;
}

@keyframes gentle-sway {
    0% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
    100% { transform: rotate(-2deg); }
}

@keyframes strong-sway {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}

.tree-branches.windy {
    animation: gentle-sway 4s ease-in-out infinite;
    animation-play-state: running !important;
}

.tree-branches.windy-strong {
    animation: strong-sway 3s ease-in-out infinite;
    animation-play-state: running !important;
}

.tree-branches .leaf {
    transform-origin: bottom;
    fill: #2E7D32;
}

.house-temp {
    position: absolute;
    top: 42%;  /* Moved down from 35% */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    white-space: nowrap;
}

.energy-display {
    position: absolute;
    top: 87%;  /* Position below the windows, above the bottom */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    color: #90ee90;
    display: flex;
    align-items: center;
    gap: 3px;
}

.energy-icon {
    font-size: 16px;
}

@keyframes energy-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.cellar-temp {
    position: absolute;
    top: 100%;  /* Moved down from 70% */
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 10;  /* Ensure it stays above other elements */
}

.house-container {
  max-width: 420px;
  width: 90vw;
  margin: 0 auto;
  display: flex;           /* lay out house and tree horizontally */
  align-items: center;
  justify-content: center;
  gap: 20px;               /* space between house and tree */
}
.house-icon {
  flex: 0 0 auto;          /* prevent shrinking of house block */
  position: relative;      /* positioning context for temps */
}
.temperature-info {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    min-width: 120px;
}

.tree-icon {
    width: 100px;  /* Slightly smaller */
    height: 125px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;  /* Prevent tree from shrinking */
}

.dial-knob {
    fill: #444;
    stroke: #666;
    stroke-width: 2;
}

.dial-indicator {
    fill: #4CAF50;
}

.small-label {
    font-size: 14px; /* Smaller than default labels */
    font-weight: normal; /* Reduce emphasis */
    color: #bbbbbb; /* Slightly muted color */
}

.small-text {
    font-size: 16px; /* Smaller than 'important' */
    font-weight: normal; /* Less bold */
    color: #ffffff;
}

.important {
    font-size: 24px;
    font-weight: bold;
}

.container {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 10px;
}

.temp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.label {
    font-size: 18px;
    font-weight: bold;
}

input[type="number"] {
    width: 100px;
    padding: 5px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid #888;
    background-color: #222;
    color: #fff;
    text-align: left;
}

button {
    padding: 5px 10px;
    font-size: 1em;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.schedule-section {
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px;
    margin: 5px 0;
    background-color: #1e1e1e;
}

.schedule-title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.next-schedule-info {
    font-size: 0.9em;
    color: #bbbbbb;
    margin-top: 10px;
}

.header {
    background: #1e1e1e;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;  /* Lower than popups */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.nav-tabs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    gap: 24px;
}

.site-title {
    color: #4CAF50;
    font-size: 18px;
    font-weight: bold;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab {
    color: #4CAF50;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.tab:hover {
    background: #2a2a2a;
}

.nav-icon {
    width: 20px;
    height: 20px;
}

.outside-temp {
    font-size: 20px;
    color: white;
    position: absolute;
    top: 5%;
    left: 105%;
    white-space: nowrap;
}

#debug-info {
    position: fixed;
    top: 70px;  /* Move below header */
    right: 20px;
    background: rgba(30,30,30,0.98);  /* More opaque */
    padding: 15px;
    border: 1px solid #4CAF50;
    border-radius: 8px;
    font-family: monospace;
    font-size: 14px;
    color: #4CAF50;
    display: none;
    z-index: 1000;  /* Above header */
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    max-height: calc(100vh - 90px);  /* Account for header */
    overflow-y: auto;
}

.debug-color-block {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #666;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 5px;
}

.debug-row {
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
}

/* Weather icon will be inline within the weather-block */

.weather-condition {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.weather-condition.visible {
    opacity: 1;
    animation: gentle-float 20s linear infinite;  /* Slow, continuous movement */
}

.weather-condition.cloud {
    fill: #cccccc;
    stroke: #666666;
}

.weather-condition.cloud-dark {
    fill: #999999;
    stroke: #444444;
}

@keyframes gentle-float {
    0% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    100% { transform: translateX(-2px); }
}

/* Slightly different animation for heavy clouds */
.weather-condition.cloud-dark.visible {
    animation: gentle-float-heavy 25s linear infinite;  /* Slower for heavy clouds */
}

@keyframes gentle-float-heavy {
    0% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    100% { transform: translateX(-3px); }
}

@keyframes rain-fall {
    0% { transform: translateY(-5px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(15px); opacity: 0; }
}

@keyframes snow-fall {
    0% { transform: translateY(-5px) rotate(0deg); opacity: 0; }
    50% { transform: translateY(5px) rotate(180deg); opacity: 1; }
    100% { transform: translateY(15px) rotate(360deg); opacity: 0; }
}

/* Update cloudy-heavy specific styles for darker appearance */
.weather-symbol.cloudy-heavy .cloud {
    filter: brightness(0.8);  /* Darken the main cloud */
}

.weather-symbol.cloudy-heavy .extra-clouds {
    position: absolute;
    font-size: 64px;
    top: 5px;
    left: 55%;
    transform: translateX(-50%);
    opacity: 0.9;  /* Increased from 0.8 */
    animation: float 6s ease-in-out infinite;
    filter: brightness(0.7);  /* Darken the second cloud more */
}

.calendar-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    filter: drop-shadow(0 2px 3px rgba(9, 66, 20, 0.3));
}

.calendar-icon:hover {
    transform: scale(1.05);
}

.calendar-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e1e1e;
    border: 1px solid #4CAF50;
    border-radius: 10px;
    padding: 20px;
    z-index: 1000;  /* Above header */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.popup-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popup-section {
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
}

.popup-section:last-child {
    border-bottom: none;
}

.popup-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 999;  /* Just below popups */
}

.temp-text {
    font-weight: normal;  /* Make temperature text thinner */
    opacity: 0.9;        /* Slightly reduce opacity for softer appearance */
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.schedule-day {
    background: #222;
    padding: 10px;
    border-radius: 5px;
}

.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px;
    border: 2px solid #4CAF50;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(0,0,0,0.8);
    color: white;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
}

@media (max-width: 480px) {
    .house-container {
        gap: 12px;
        flex-direction: row;   /* ensure tree stays to the right */
    }

    .house-icon svg {
        /* Already responsive via width: 100%; height: auto; */
    }

      .house-temp {
    font-size: 1.7rem;
    }
    .cellar-temp,
    .outside-temp {
        font-size: 1.1rem;
    }

    .tree-icon {
        width: 80px;
        height: 100px;
        flex-shrink: 0;
    }

    .house-temp {
        font-size: 28px;  /* Slightly smaller on mobile */
    }

    .weather-icon {
        top: -15px;  /* Adjust for mobile */
        left: 70%;  /* Slightly different position on mobile */
        width: 40px;
        height: 40px;
    }

    #debug-info {
        max-width: 90vw;
        font-size: 11px;
    }
}

/* Weather display positioning fixes */
.weather-display {
    position: absolute;
    top: -30px;
    left: 55%;
    z-index: 2;
    width: 80px;  /* Increased from 60px to give more space */
    height: 60px;
}

/* Update cloudy-heavy specific styles */
.weather-symbol.cloudy-heavy .extra-clouds {
    position: absolute;
    font-size: 64px;
    top: 5px;
    left: 55%;  /* Adjusted from 60% */
    transform: translateX(-50%);
    opacity: 0.8;
    animation: float 6s ease-in-out infinite;  /* Slowed down from default to 6s */
}

@keyframes float {
    0%, 100% { transform: translateX(-50%) translateX(0px); }
    50% { transform: translateX(-50%) translateX(3px); }  /* Reduced from 10px to 3px */
}

.manual-mode {
    background-color: #ff9800;
    border-color: #ff6f00;
    color: #000;
}

.clear-manual-btn {
    width: 100%;
    background-color: #ff9800;
    font-size: 0.85em;
    padding: 3px 6px;
}

.btn-warning-small {
    background-color: #ff9800;
    padding: 6px 12px;
    font-size: 0.9em;
    border-radius: 4px;
    width: auto;            /* key bit: no full width */
    display: inline-block;
}

.btn-warning-small:hover {
    background-color: #e68900;
}
.manual-indicator {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #2e7d32;  /* Auto = green */
    color: #ffffff;
}

.manual-indicator.manual-on {
    background-color: #ff9800;  /* Manual = orange */
}

.weather-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.weather-icon {
    width: 3rem;
    height: auto;
    flex-shrink: 0;
    display: block;
}

.weather-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Bottom nav styling */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(0,0,0,0.05);
    backdrop-filter: blur(6px);
    z-index: 50;  /* Ensure nav stays above content */
}

.bottom-nav .nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 4px;
    border-radius: 10px;
    color: #6b7280; /* muted gray */
    cursor: pointer;
    transition: all 0.2s ease;
}

.bottom-nav .nav-icon {
  width: 2.2rem;
  height: 2.2rem;
  display: block;
}

/* Subtle hover/focus accents */
.bottom-nav .nav-item:hover,
.bottom-nav .nav-item:focus {
    background: rgba(0,0,0,0.06);
    color: #374151; /* slightly darker */
}

/* Active state for selected view */
.bottom-nav .nav-item.active {
    color: #4CAF50; /* green for active */
    background: rgba(76, 175, 80, 0.1);
}

/* Control & Info with discrete neutral tones */
.bottom-nav .nav-item[aria-label="Control"] {
    color: #4b5563; /* neutral gray, not green */
}

/* View panels */
.view-panel {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.view-panel.active {
    display: block;
}

/* Home view specific - add padding to prevent bottom cutoff */
#homeView {
    padding-bottom: 20px;
}

/* History/Plot view specific */
#historyView {
    padding: 0;
}

#plot-container {
    width: 100%;
    height: 100%;
}

/* Schedule view specific */
#scheduleView .schedule-grid {
    display: grid;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
}

#scheduleView .schedule-day-card {
    background: #1e1e1e;
    border-radius: 8px;
    padding: 15px;
}

#scheduleView .schedule-day-card h4 {
    color: #4CAF50;
    margin: 0 0 10px 0;
    font-size: 16px;
}

#scheduleView .schedule-row {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background: #2a2a2a;
    border-radius: 4px;
    margin-bottom: 5px;
}

#scheduleView .schedule-time {
    color: #aaa;
}

#scheduleView .schedule-temp {
    color: #fff;
    font-weight: bold;
}

/* Time range buttons for plot */
.time-range-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.time-btn {
    background: #2a2a2a;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.time-btn:hover {
    background: #3a3a3a;
    border-color: #4CAF50;
}

.time-btn:active {
    background: #4CAF50;
    transform: scale(0.95);
}

/* Mobile: larger house view on iPhone */
@media (max-width: 600px) {
    .house-container {
        width: 90vw;
    }
    .house-temp {
        font-size: 1.6rem;
    }
    .cellar-temp,
    .outside-temp {
        font-size: 1.1rem;
    }
    
    .time-btn {
        padding: 5px 9px;
        font-size: 11px;
        flex: 0 1 auto;
        min-width: 0;
        line-height: 1.1;
    }
    
    .time-range-buttons {
        gap: 5px;
        padding: 0;
    }
}

/* Schedule day slider styles */
#day-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: calc(100% / 7 - 4px);
    min-width: 30px;
    height: 24px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.8;
    border: none;
}

#day-slider::-moz-range-thumb {
    width: calc(100% / 7 - 4px);
    min-width: 30px;
    height: 24px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.8;
    border: none;
}

.slider-labels span:first-child {
    border-left: none !important;
}