/* Bio-Luminescent Theme Rating Colors - High Contrast */
.rating-best { 
    background-color: #082f49; /* Deep blue */
    color: #22d3ee; /* Bright cyan text */
    border: 1px solid #06b6d4; 
}
.rating-good { 
    background-color: #064e3b; /* Dark emerald green */
    color: #34d399; /* Bright green text */
    border: 1px solid #10b981; 
}
.rating-fair { 
    background-color: #78350f; /* Dark amber/orange */
    color: #fbbf24; /* Bright amber text */
    border: 1px solid #f59e0b;
}
.rating-bad { 
    background-color: #7f1d1d; /* Dark red */
    color: #fca5a5; /* Bright red text */
    border: 1px solid #ef4444;
}

/* Split Background Utilities for Transition Days */
.split-best-good { 
    background: linear-gradient(135deg, #082f49 50%, #064e3b 50%); 
    color: #ccfbf1; 
    border: 1px solid #0d9488; 
}
.split-good-fair { 
    background: linear-gradient(135deg, #064e3b 50%, #78350f 50%); 
    color: #fef3c7; 
    border: 1px solid #d97706; 
}
.split-fair-bad { 
    background: linear-gradient(135deg, #78350f 50%, #7f1d1d 50%); 
    color: #fee2e2; 
    border: 1px solid #b91c1c; 
}

/* Base Day Cell Styling */
.day-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    font-weight: 700;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    z-index: 1;
}

.day-cell:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* Moon Outlines indicating phases */
.new-moon-outline {
    border: 2px solid #22d3ee;
    box-shadow: inset 0 0 8px rgba(34, 211, 238, 0.5);
}

.full-moon-outline {
    border: 2px solid #f8fafc;
    background-color: #f1f5f9;
    color: #0f172a !important;
}

/* Bioluminescent Pulse Animation for Optimal Nights */
@keyframes bioGlow {
    0% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.4), inset 0 0 5px rgba(6, 182, 212, 0.3); }
    50% { box-shadow: 0 0 15px rgba(34, 211, 238, 0.8), inset 0 0 10px rgba(34, 211, 238, 0.6); }
    100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.4), inset 0 0 5px rgba(6, 182, 212, 0.3); }
}

.bio-glow { 
    animation: bioGlow 3s infinite alternate; 
}