/* ===== CSS VARIABLES FOR HAWAIIAN TROPICAL THEME ===== */
:root {
    /* Hawaiian Tropical Color Palette */
    --tropical-deep-green: #0f4c3a;
    --tropical-seafoam: #2d8f64;
    --tropical-mint: #7fffd4;
    --tropical-golden: #ffd700;
    --tropical-coral: #ff7f7f;
    --tropical-sunset: #ff6b35;
    
    /* Glassmorphism Variables */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(127, 255, 212, 0.2);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    --glass-blur: blur(20px);
    
    /* Typography */
    --font-primary: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* Spacing & Layout */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;
    
    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-tropical: 0 4px 16px rgba(127, 255, 212, 0.2);
}

/* ===== ENHANCED MAP SELECT STYLING ===== */
#map-plant-select {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: white;
    padding: var(--spacing-md);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md), var(--shadow-tropical);
}

#map-plant-select:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--tropical-mint);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 6px 20px rgba(127, 255, 212, 0.3);
}

#map-plant-select option {
    background: rgba(15, 76, 58, 0.95);
    color: white;
    padding: var(--spacing-md);
    border: none;
    font-weight: var(--font-weight-medium);
}

/* ===== ENHANCED BODY & BACKGROUND STYLING ===== */
body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    background: linear-gradient(135deg, var(--tropical-deep-green) 0%, var(--tropical-seafoam) 50%, #1a6b4a 100%);
    background-attachment: fixed;
    color: white;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced tropical forest background with multiple layers */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(127, 255, 212, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
        url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2560&q=80');
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
    opacity: 0.35;
    z-index: -2;
    animation: subtle-shift 20s ease-in-out infinite alternate;
}

/* Subtle background animation for living feel */
@keyframes subtle-shift {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.02) rotate(0.5deg); }
}

/* Additional atmospheric layer */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at top, rgba(127, 255, 212, 0.03) 0%, transparent 70%),
        linear-gradient(180deg, rgba(15, 76, 58, 0.1) 0%, transparent 30%, transparent 70%, rgba(45, 143, 100, 0.1) 100%);
    z-index: -1;
    pointer-events: none;
}

/* ===== ENHANCED FLOATING TROPICAL ICONS ===== */
.floating-icon {
    position: fixed;
    font-size: clamp(20px, 3vw, 28px);
    opacity: 0.7;
    z-index: -1;
    pointer-events: none;
    animation: float-up linear;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Enhanced floating animation with more natural movement */
@keyframes float-up {
    0% {
        bottom: -40px;
        transform: rotate(0deg) translateX(0px) scale(0.8);
        opacity: 0;
        filter: blur(2px) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    10% {
        opacity: 0.7;
        filter: blur(0px) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        transform: rotate(45deg) translateX(10px) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: rotate(180deg) translateX(var(--wind-drift, 20px)) scale(1.1);
    }
    90% {
        opacity: 0.6;
        transform: rotate(315deg) translateX(var(--wind-drift, -10px)) scale(0.9);
    }
    100% {
        bottom: calc(100vh + 60px);
        transform: rotate(var(--rotation, 360deg)) translateX(var(--wind-drift, 0px)) scale(0.7);
        opacity: 0;
        filter: blur(1px) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
}

/* ===== ENHANCED HEADER WITH HAWAIIAN STYLING ===== */
.header {
    position: fixed;
    top: var(--spacing-sm);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 0;
    animation: header-glow 4s ease-in-out infinite alternate;
}

/* Subtle header glow animation */
@keyframes header-glow {
    0% { filter: drop-shadow(0 4px 8px rgba(127, 255, 212, 0.1)); }
    100% { filter: drop-shadow(0 6px 12px rgba(127, 255, 212, 0.2)); }
}

.header-content {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-xl);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), var(--shadow-tropical);
    transition: all var(--transition-normal);
}

.header-content:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--tropical-mint);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg), 0 8px 24px rgba(127, 255, 212, 0.3);
}

.logo {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, var(--tropical-mint) 0%, var(--tropical-seafoam) 100%);
    border: 2px solid var(--tropical-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    backdrop-filter: var(--glass-blur);
    box-shadow: 
        var(--shadow-lg),
        var(--shadow-tropical),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: all var(--transition-normal);
}

.logo:hover {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(127, 255, 212, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.logo::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: logo-shine 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes logo-shine {
    0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
}

.logo:hover img {
    transform: scale(1.1);
}

#main-chart {
    flex: 1;
    width: 100% !important;
    height: 100% !important;
}

.mode-dropdown {
    position: relative;
    z-index: 1001;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(45, 143, 100, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid #7fffd4;
    border-radius: 6px;
    min-width: 140px;
    z-index: 1002;
    margin-top: 2px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(127, 255, 212, 0.2);
}

.dropdown-content.show {
    display: block;
}

.dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    color: white;
    border-bottom: 1px solid rgba(127, 255, 212, 0.2);
    transition: background 0.3s ease;
}

.dropdown-item:hover {
    background: rgba(127, 255, 212, 0.1);
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #999;
}

.dropdown-item.disabled:hover {
    background: none;
}

.mode-label {
    display: block;
    font-weight: 500;
}

.mode-description {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 2px;
}

.mode-unavailable {
    float: right;
    font-size: 0.9em;
}

.widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    gap: 1.5rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 20px;
    padding: 0 20px;
    justify-content: start;
    align-items: stretch;
}

.widget {
    background: rgba(15, 76, 58, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(127, 255, 212, 0.4);
    border-radius: 16px;
    padding: 8px;
    min-height: 144px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(127, 255, 212, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.widget:hover {
    border-color: #7fffd4;
    background: rgba(15, 76, 58, 0.6);
    transform: translateY(-4px);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(127, 255, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.widget.has-visual {
    min-height: 264px;
}

.widget-title {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 8px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.widget-value {
    font-size: 2.8rem;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 1;
}

.widget-unit {
    font-size: 1.1rem;
    opacity: 0.7;
    margin-top: 4px;
}

.widget-subtitle {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 4px;
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.gauge-container {
    position: relative;
    width: 184px;
    height: 184px;
}

.gauge-bg {
    width: 184px;
    height: 184px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #7fffd4 var(--gauge-angle, 0deg), rgba(127, 255, 212, 0.2) var(--gauge-angle, 0deg));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.gauge-inner {
    width: 141px;
    height: 141px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(15, 76, 58, 0.9), rgba(15, 76, 58, 0.7));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: 
        inset 0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}

.compass-container {
    position: relative;
    width: 184px;
    height: 184px;
}

.compass {
    width: 184px;
    height: 184px;
    border-radius: 50%;
    border: 3px solid #7fffd4;
    background: radial-gradient(circle, rgba(127, 255, 212, 0.15) 0%, rgba(127, 255, 212, 0.05) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(127, 255, 212, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.compass-needle {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 5px;
    height: 61px;
    background: linear-gradient(to bottom, #ff4444, #7fffd4);
    transform: translateX(-50%);
    transform-origin: center 77px;
    border-radius: 2px;
    box-shadow: 
        0 0 8px rgba(255, 68, 68, 0.5),
        0 0 4px rgba(127, 255, 212, 0.3);
}

.compass-direction {
    position: absolute;
    font-size: 0.9rem;
    font-weight: bold;
    color: #7fffd4;
}

.compass-n { top: 5px; left: 50%; transform: translateX(-50%); }
.compass-e { right: 5px; top: 50%; transform: translateY(-50%); }
.compass-s { bottom: 5px; left: 50%; transform: translateX(-50%); }
.compass-w { left: 5px; top: 50%; transform: translateY(-50%); }

.battery-container {
    position: relative;
    width: 240px;
    height: 120px;
}

.battery-icon {
    width: 240px;
    height: 120px;
    border: 8px solid #7fffd4;
    border-radius: 16px;
    position: relative;
    background: rgba(15, 76, 58, 0.8);
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(127, 255, 212, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.battery-terminal {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 48px;
    background: linear-gradient(145deg, #7fffd4, #40e0d0);
    border-radius: 0 8px 8px 0;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(127, 255, 212, 0.3);
}

.battery-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(to right, #44ff44, #7fffd4);
    transition: width 0.5s ease;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.battery-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.8rem;
    font-weight: bold;
    color: white;
    z-index: 10;
}

/* ===== ENHANCED PLANT GRID & CARDS ===== */
.plant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 220px));
    gap: var(--spacing-xl);
    width: 100%;
    max-width: 1400px;
    margin: 0 var(--spacing-xl);
    padding: 0 var(--spacing-xl);
    justify-content: start;
}

.plant-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    box-shadow: 
        var(--shadow-lg),
        var(--shadow-tropical),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.plant-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(127, 255, 212, 0.05) 0%, transparent 50%, rgba(255, 215, 0, 0.03) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.plant-card:hover {
    border-color: var(--tropical-mint);
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(127, 255, 212, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.plant-card:hover::before {
    opacity: 1;
}

/* ===== ENHANCED PLANT IMAGE & TEXT ===== */
.plant-image {
    width: 100%;
    flex: 1;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    overflow: hidden;
    min-height: 0;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.plant-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(127, 255, 212, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.plant-card:hover .plant-image::before {
    opacity: 1;
}

.plant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-md);
    transition: transform var(--transition-normal);
}

.plant-card:hover .plant-image img {
    transform: scale(1.05);
}

.plant-card h3 {
    color: var(--tropical-mint);
    margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: color var(--transition-normal);
}

.plant-card:hover h3 {
    color: var(--tropical-golden);
}

.plant-card p {
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    margin: 0;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: color var(--transition-normal);
}

.plant-card:hover p {
    color: rgba(255, 255, 255, 0.95);
}

.no-results, .loading-message, .error-message {
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    background: rgba(15, 76, 58, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(127, 255, 212, 0.4);
    border-radius: 16px;
    margin: 20px;
    max-width: 1400px;
    width: calc(100% - 40px);
}

.error-message {
    border-color: rgba(255, 68, 68, 0.6);
    color: #ff6b6b;
}

.hidden {
    display: none !important;
}

.footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(15, 76, 58, 0.4);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(127, 255, 212, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 
        0 -8px 32px rgba(0, 0, 0, 0.3),
        0 -4px 16px rgba(127, 255, 212, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.footer-content {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 0.8rem;
    min-height: 60px;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-start;
    flex-shrink: 0;
}

.footer-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}

.footer-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.weather-status-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4444;
    transition: background-color 0.3s ease;
    box-shadow: 
        0 0 8px rgba(255, 68, 68, 0.5),
        0 0 16px rgba(255, 68, 68, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.weather-status-led.connected {
    background: #44ff44;
    box-shadow: 
        0 0 8px rgba(68, 255, 68, 0.5),
        0 0 16px rgba(68, 255, 68, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.weather-status-led.connecting {
    background: #ffff44;
    box-shadow: 
        0 0 8px rgba(255, 255, 68, 0.5),
        0 0 16px rgba(255, 255, 68, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.weather-status-led.disconnected {
    background: #ff4444;
    box-shadow: 
        0 0 8px rgba(255, 68, 68, 0.5),
        0 0 16px rgba(255, 68, 68, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* ===== ENHANCED HEADER TEXT WITH HAWAIIAN TYPOGRAPHY ===== */
.header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.header-text h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    background: linear-gradient(135deg, var(--tropical-mint) 0%, var(--tropical-golden) 50%, var(--tropical-mint) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(127, 255, 212, 0.3);
    animation: gradient-shift 3s ease-in-out infinite alternate;
    letter-spacing: 0.5px;
}

/* Gradient animation for header text */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.header-text p {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    font-weight: var(--font-weight-medium);
    margin: 0;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(127, 255, 212, 0.2);
    letter-spacing: 0.3px;
    line-height: 1.4;
}

/* ===== ENHANCED NAVIGATION WITH HAWAIIAN GLASSMORPHISM ===== */
.navigation {
    position: fixed;
    top: 110px;
    left: 0;
    right: 0;
    height: 120px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-left: none;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 90;
    box-shadow: 
        var(--shadow-lg),
        var(--shadow-tropical),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all var(--transition-normal);
}

.nav-container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.primary-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.primary-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.secondary-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 40px;
}

/* ===== ENHANCED NAVIGATION BUTTONS ===== */
.nav-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-primary);
    backdrop-filter: var(--glass-blur);
    box-shadow: 
        var(--shadow-md),
        var(--shadow-tropical),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left var(--transition-slow);
}

.nav-btn:hover::before {
    left: 100%;
}

.nav-btn:hover, .nav-btn.active {
    background: rgba(127, 255, 212, 0.15);
    border-color: var(--tropical-mint);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        var(--shadow-lg),
        0 6px 20px rgba(127, 255, 212, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: var(--tropical-mint);
}

.nav-btn.active {
    background: linear-gradient(135deg, rgba(127, 255, 212, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
    border-color: var(--tropical-golden);
    color: var(--tropical-golden);
    font-weight: var(--font-weight-bold);
}

/* ===== DIAMETER INPUT STYLING ===== */
.diameter-input {
    width: 70px !important;
    text-align: center;
    font-weight: var(--font-weight-medium);
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(127, 255, 212, 0.3) !important;
    color: var(--tropical-mint) !important;
}

.diameter-input:focus {
    outline: none;
    border-color: var(--tropical-golden) !important;
    background: rgba(255, 215, 0, 0.1) !important;
    color: var(--tropical-golden) !important;
    box-shadow: 
        var(--shadow-lg),
        0 0 0 2px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.diameter-input::placeholder {
    color: rgba(127, 255, 212, 0.6);
    font-style: italic;
}

.nav-text {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.search-container {
    position: relative;
}

/* ===== ENHANCED SEARCH INPUT ===== */
#searchInput {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    width: clamp(300px, 50vw, 600px);
    outline: none;
    font-size: 0.9rem;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    box-shadow: 
        var(--shadow-md),
        var(--shadow-tropical),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-normal);
    letter-spacing: 0.3px;
}

#searchInput::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

#searchInput:focus {
    border-color: var(--tropical-mint);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        var(--shadow-lg),
        0 6px 20px rgba(127, 255, 212, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(127, 255, 212, 0.2);
    transform: translateY(-1px);
}

#searchInput:hover {
    border-color: rgba(127, 255, 212, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

.main-content {
    position: fixed;
    top: 240px;
    left: 0;
    right: 0;
    bottom: 70px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

.page-content {
    background: rgba(15, 76, 58, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(127, 255, 212, 0.4);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 1400px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(127, 255, 212, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-content h2 {
    color: #7fffd4;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.page-content p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.settings-panel {
    display: none;
    position: fixed;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1200px;
    height: auto;
    max-height: 90vh;
    background: rgba(45, 143, 100, 0.95);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(127, 255, 212, 0.6);
    border-radius: 16px;
    padding: 20px;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(127, 255, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.settings-panel.show {
    display: block;
}

.settings-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.settings-overlay.show {
    display: block;
}

.settings-section {
    margin-bottom: 1.5rem;
}

.settings-section h3 {
    color: #7fffd4;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(15, 76, 58, 0.4);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(127, 255, 212, 0.3);
    font-size: 0.9rem;
    text-align: left;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.setting-item > span:first-child {
    min-width: 140px;
    flex-shrink: 0;
    font-weight: 500;
}

.setting-toggle {
    width: 45px;
    height: 22px;
    background: #666;
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
    border: 1px solid rgba(127, 255, 212, 0.3);
}

.setting-toggle.active {
    background: #7fffd4;
}

.setting-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.setting-toggle.active::after {
    left: 25px;
}

.setting-input, .setting-select {
    background: rgba(15, 76, 58, 0.6);
    border: 1px solid rgba(127, 255, 212, 0.4);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    flex: 1;
    margin-left: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.setting-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.setting-input:focus, .setting-select:focus {
    outline: none;
    border-color: #7fffd4;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(127, 255, 212, 0.3);
}

.api-section {
    padding: 15px;
    background: rgba(15, 76, 58, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(127, 255, 212, 0.3);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.api-section h4 {
    color: #40e0d0;
    margin: 0 0 15px 0;
    font-size: 1rem;
    text-align: left;
}

.widget-toggles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.close-btn {
    float: right;
    background: none;
    border: none;
    color: #7fffd4;
    font-size: 1.8rem;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 4px 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: rgba(127, 255, 212, 0.2);
    transform: scale(1.1) rotate(90deg);
}

.weather-status-led.connected {
    background: #44ff44;
}

.weather-status-text {
    color: rgba(255, 255, 255, 0.7);
}

.weather-status-value {
    color: #7fffd4;
    font-weight: bold;
}

.footer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}

.footer-label {
    color: rgba(255, 255, 255, 0.7);
}

.footer-value {
    color: #7fffd4;
    font-weight: bold;
}

.detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.detail-window {
    background: rgba(15, 76, 58, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 2px solid #40e0d0;
    max-width: 1800px;
    width: 100%;
    height: auto;
    max-height: 85vh;
    overflow: hidden;
    padding: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

.detail-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 2px solid #40e0d0;
    color: #7fffd4;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.detail-close-btn:hover {
    background: rgba(64, 224, 208, 0.2);
    transform: scale(1.1) rotate(90deg);
}

.detail-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.detail-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
}

.detail-image {
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 1;
    object-fit: cover;
    min-height: 0;
}

.detail-text {
    overflow-y: auto;
    padding-right: 0.5rem;
    display: flex;
    flex-direction: column;
}

.detail-image:hover {
    transform: scale(1.05);
}

.detail-image-container {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-image-fallback {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(64, 224, 208, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.detail-image-fallback:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(64, 224, 208, 0.5);
    transform: scale(1.02);
}

.detail-image-only {
    min-height: 300px;
}

.detail-emoji {
    font-size: 8rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.detail-emoji-label {
    color: rgba(127, 255, 212, 0.8);
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.detail-text h2 {
    color: #7fffd4;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.detail-text h3 {
    color: #40e0d0;
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.3rem;
}

.detail-text p {
    line-height: 1.6;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}



.detail-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(64, 224, 208, 0.3);
    flex-shrink: 0;
    margin-top: 1rem;
}

.more-resources {
    color: #7fffd4;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.more-resources:hover {
    color: #40e0d0;
}

.photo-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.photo-modal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.status-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4444;
    box-shadow: 
        0 0 8px rgba(255, 68, 68, 0.5),
        0 0 16px rgba(255, 68, 68, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.status-led.connected {
    background: #44ff44;
    box-shadow: 
        0 0 8px rgba(68, 255, 68, 0.5),
        0 0 16px rgba(68, 255, 68, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.weather-content {
    display: none;
    width: 100%;
    max-width: 1400px;
    height: 100%;
}

.weather-content.active {
    display: flex;
    flex-direction: column;
}

.weather-content:not(.hidden) {
    display: flex;
    flex-direction: column;
}

.map-content {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.map-content.active {
    display: flex;
}

.map-content:not(.hidden) {
    display: flex;
}

.map-container {
    background: rgba(15, 76, 58, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(127, 255, 212, 0.4);
    border-radius: 16px;
    height: calc(100vh - 360px);
    width: 100%;
    max-width: none;
    position: relative;
    overflow: hidden;
    cursor: default;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(127, 255, 212, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background-image: url('giantslothorchard_map.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.map-plant {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.map-plant.selected .map-plant-circle {
    border-color: #ffff44;
    box-shadow: 
        0 0 20px rgba(255, 255, 68, 0.8),
        0 0 40px rgba(255, 255, 68, 0.4);
}

.map-plant-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(127, 255, 212, 0.3);
    border: 2px solid #7fffd4;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(127, 255, 212, 0.3);
}

.map-plant:hover .map-plant-circle {
    background: rgba(127, 255, 212, 0.5);
    transform: scale(1.1);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(127, 255, 212, 0.5);
}

.map-plant-emoji {
    font-size: calc(100% * 0.6);
    min-font-size: 12px;
    max-font-size: 24px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.charts-container {
    display: none;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: calc(95vh - 340px);
    max-height: none;
}

/* Print Styles */
#print-content {
    display: none;
}

@media print {
    /* Hide everything except print content */
    body > *:not(#print-content) {
        display: none !important;
    }
    
    #print-content {
        display: block !important;
    }
    
    @page {
        size: landscape;
        margin: 0.5in;
    }
    
    .print-page {
        background: white;
        margin: 20px auto;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        page-break-after: always;
        max-width: 100%;
        min-height: 500px;
        display: flex;
        flex-direction: column;
    }
    
    .print-page:last-child {
        page-break-after: auto;
    }
    
    .print-title {
        display: none !important;
    }
    
    .map-content {
        flex: 1;
        background: linear-gradient(45deg, #4a7c59 0%, #6b8e23 50%, #228b22 100%);
        border: 2px solid #2d8f64;
        border-radius: 10px;
        position: relative;
        min-height: 400px;
        overflow: hidden;
        margin: 20px auto;
        width: 90%;
        height: 60vh;
    }
    
    .map-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 100%;
        opacity: 0.8;
        z-index: 1;
        object-fit: cover;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .map-image.left-half {
        left: 0%;
    }
    
    .map-image.right-half {
        left: -100%;
    }
    
    .print-plant {
        position: absolute;
        width: 20px;
        height: 20px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        border: 2px solid #2d8f64;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    
    .print-plant-emoji {
        font-size: 12px;
        line-height: 1;
    }
    
    .print-plant-name {
        position: absolute;
        color: #2d8f64;
        font-size: 10px;
        font-weight: bold;
        white-space: nowrap;
        text-shadow: 1px 1px 2px rgba(255,255,255,0.9), -1px -1px 2px rgba(255,255,255,0.9), 1px -1px 2px rgba(255,255,255,0.9), -1px 1px 2px rgba(255,255,255,0.9);
        z-index: 4;
        pointer-events: none;
    }
    
    .print-plant-name.position-bottom {
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .print-plant-name.position-top {
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .print-plant-name.position-right {
        top: 50%;
        left: 25px;
        transform: translateY(-50%);
    }
    
    .print-plant-name.position-left {
        top: 50%;
        right: 25px;
        transform: translateY(-50%);
    }
    
    .map-title {
        display: none !important;
    }
    
    .map-subtitle {
        display: none !important;
    }
    
    .plant-list {
        display: none !important;
    }
    
    .plant-list h3 {
        display: none !important;
    }
    
    .plant-item {
        display: none !important;
    }
    
    .print-page.map-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        background: #f0f0f0;
    }
}

.charts-container.active {
    display: flex;
    flex-direction: column;
}

.chart-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.chart-btn {
    background: rgba(127, 255, 212, 0.08);
    border: 1px solid rgba(127, 255, 212, 0.4);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(127, 255, 212, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#chart-param-select {
    background: rgba(127, 255, 212, 0.08);
    border: 1px solid rgba(127, 255, 212, 0.4);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(127, 255, 212, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-right: 20px;
    outline: none;
}

#chart-param-select:hover, #chart-param-select:focus {
    background: rgba(127, 255, 212, 0.15);
    border-color: #7fffd4;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(127, 255, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#chart-param-select option {
    background: rgba(45, 143, 100, 0.95);
    color: white;
    padding: 8px;
}

.chart-btn:hover, .chart-btn.active {
    background: rgba(127, 255, 212, 0.15);
    border-color: #7fffd4;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(127, 255, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.chart-wrapper {
    background: rgba(15, 76, 58, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(127, 255, 212, 0.4);
    border-radius: 16px;
    padding: 20px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(127, 255, 212, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.map-plant.marked-for-deletion .map-plant-circle {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.4);
    opacity: 0.6;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 107, 107, 0.6);
}

.map-plant.marked-for-deletion:hover .map-plant-circle {
    background: rgba(255, 107, 107, 0.6);
    transform: scale(1.05);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 107, 107, 0.8);
}

.map-plant.temp .map-plant-circle {
    border-color: #ffff44;
    background: rgba(255, 255, 68, 0.4);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 68, 0.6);
}

.map-plant.temp:hover .map-plant-circle {
    background: rgba(255, 255, 68, 0.6);
    transform: scale(1.05);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 255, 68, 0.8);
}

#map-plant-select {
    background: rgba(127, 255, 212, 0.08);
    border: 1px solid rgba(127, 255, 212, 0.4);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(127, 255, 212, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-decoration: none;
    display: inline-block;
    max-width: 200px;
    margin-right: 10px;
}

#map-plant-select:hover, #map-plant-select:focus {
    background: rgba(127, 255, 212, 0.15);
    border-color: #7fffd4;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(127, 255, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    outline: none;
}

@media (max-width: 768px) {
    .header {
        position: static;
        padding: 20px;
    }

    .header-content {
        flex-direction: column;
        gap: 15px;
    }

    .header-text h1 {
        font-size: 2rem;
    }

    .navigation {
        position: static;
        height: auto;
        padding: 15px;
    }

    .nav-container {
        flex-direction: column;
        gap: 15px;
    }

    .main-content {
        position: static;
        margin-top: 0;
        padding: 10px;
        margin-bottom: 70px;
    }

    .plant-grid {
        margin: 2rem 10px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
        gap: 1rem;
        padding: 0 10px;
        justify-content: start;
    }

    #searchInput {
        width: 250px;
    }

    .detail-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        padding: 0 15px;
        gap: 10px;
    }

    .footer-left {
        gap: 15px;
        flex-wrap: wrap;
    }

    .widgets-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
        gap: 8px;
        justify-content: center;
    }

    .widget {
        min-height: 120px;
    }

    .widget.has-visual {
        min-height: 240px;
    }

    .widget-value {
        font-size: 2rem;
    }

    .gauge-container {
        width: 138px;
        height: 138px;
    }

    .gauge-bg {
        width: 138px;
        height: 138px;
    }

    .gauge-inner {
        width: 106px;
        height: 106px;
    }

    .compass-container {
        width: 138px;
        height: 138px;
    }

    .compass {
        width: 138px;
        height: 138px;
    }

    .battery-container {
        width: 180px;
        height: 90px;
    }

    .battery-icon {
        width: 180px;
        height: 90px;
    }

    .map-container {
        height: calc(100vh - 240px);
        aspect-ratio: 4/3;
        width: auto;
        max-width: calc(100vw - 20px);
    }

    .settings-panel {
        width: 95%;
        height: 95vh;
        top: 2.5%;
        padding: 15px;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .widget-toggles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Print Styles for Map */
@media print {
    /* Hide everything except print container when printing map */
    body.printing-map > *:not(.map-print-container) {
        display: none !important;
    }
    
    body.printing-map {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }
    
    .map-print-container {
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        background: white !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .map-print-page {
        width: 100% !important;
        height: 100vh !important;
        page-break-after: always !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        background: white !important;
        overflow: hidden !important;
    }
    
    .map-print-page:last-child {
        page-break-after: avoid !important;
    }
    
    .print-title {
        color: #000 !important;
        font-size: 18px !important;
        margin: 0 0 20px 0 !important;
        text-align: center !important;
        font-weight: bold !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .map-print-content {
        width: 100% !important;
        height: calc(100vh - 80px) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        background: white !important;
    }
    
    .map-print-content > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force all map content to be visible */
    .map-print-content * {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure map images are visible in print */
    .map-print-content img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: none !important;
        max-height: none !important;
    }
    
    /* Ensure plant markers are visible in print */
    .map-print-content .plant-marker {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        z-index: 10 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 2px solid #000 !important;
        border-radius: 50% !important;
        color: #000 !important;
    }
    
    .map-print-content .plant-label {
        color: #000 !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
        font-size: 10px !important;
        font-weight: bold !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* ==========================================================================
   Footer strip: shed content as the viewport narrows

   .footer-bar is position: fixed with a hard 60px height, and .footer-center
   and .footer-right are flex-shrink: 0. So the strip never wraps or squashes -
   past its max-content width it simply slides off the right edge, and because
   the bar is fixed no scrollbar appears to reveal what was lost. Note that
   document.scrollWidth cannot see this: measure .footer-content.scrollWidth
   minus its clientWidth instead.

   Component widths below were measured in-browser at 1400px against the widest
   content each field can hold - 3-digit counters, a 2-digit-hour clock, and
   readings "-10.5°F / -23.6°C", "100%", "23.4 mph WNW", "30.12 inHg", "12.34in":

     left   255.6  (plants 64.7, categories 76.3, wishlist 74.6, 2x20 gap)
     center 502.5  (status 31.3, led 8, temp 98.6, humidity 33.2, wind 95.8,
                    pressure 65.6, rain 39.2, clock 74.8, 7x8 gap)
     right  287.7   padding 40      ->  1085.7 for the full strip

   Each tier below drops the least useful surviving item. The decorative
   copyright goes first; then the clock and the Categories counter (a constant
   8); then wind and pressure, the only two readings ever dropped, because the
   Weather tab carries both in full; then the plant counters. #footer-weather-
   status is never hidden - the LED beside it encodes connection state, not
   mode, so dropping the label would leave demo readings with nothing on screen
   saying "demo".

   Thresholds are not arithmetic; each was swept in-browser at its own boundary
   +/-1px with the content above. Requirement and headroom at each threshold,
   measured as the sum of the visible children plus padding:

     >=1140  full strip          needs 1085.8   headroom  54
     >= 830  no copyright        needs  798.0   headroom  32
     >= 660  no clock/categories needs  603.9   headroom  56
     >= 480  no wind/pressure    needs  426.5   headroom  54
     >= 380  no wishlist         needs  337.0   headroom  43
     >= 300  counters all hidden needs  272.3   headroom  28

   Headroom exists because these were measured in Chrome on Windows; other
   platforms render the same strings a few px wider.
   ========================================================================== */

@media (max-width: 1139px) {
    .footer-right {
        display: none;
    }
}

@media (max-width: 829px) {
    #footer-last-update {
        display: none;
    }
    /* .footer-item order in .footer-left: 1 Plants, 2 Categories, 3 Wishlist */
    .footer-left .footer-item:nth-child(2) {
        display: none;
    }
}

@media (max-width: 659px) {
    #footer-weather-wind,
    #footer-weather-pressure {
        display: none;
    }
}

@media (max-width: 479px) {
    .footer-left .footer-item:nth-child(3) {
        display: none;
    }
}

/* Narrowest tier: the footer becomes the weather strip alone. */
@media (max-width: 379px) {
    .footer-left {
        display: none;
    }
}