/**
 * EstatixPMS - Reusable City Skyline Background & Theme System
 * Supports seamless transitions between Day (Light) and Night (Dark) themes.
 */

/* Main canvas wrapper */
.city-sky-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    transition: background 0.5s ease;
    z-index: 0;
}

/* ========================================================= */
/* 1. LIGHT / DAY THEME: Fresh daylight sky & airy skyline   */
/* ========================================================= */
[data-theme="light"] .city-sky-canvas {
    background: 
        radial-gradient(circle at 75% 22%, rgba(254, 240, 138, 0.45) 0%, rgba(254, 240, 138, 0.1) 25%, transparent 50%),
        linear-gradient(180deg, #93C5FD 0%, #BAE6FD 30%, #E0F2FE 60%, #F1F5F9 85%, #E2E8F0 100%);
}

[data-theme="light"] .city-layer-far {
    fill: #94A3B8;
    opacity: 0.5;
}

[data-theme="light"] .city-layer-mid {
    fill: #64748B;
    opacity: 0.45;
}

[data-theme="light"] .city-layer-front {
    fill: #475569;
    opacity: 0.35;
}

[data-theme="light"] .city-window-dot {
    fill: #FFFFFF;
    opacity: 0.55;
}

[data-theme="light"] .city-window-warm {
    fill: #FEF08A;
    opacity: 0.5;
}

[data-theme="light"] .day-celestial { 
    display: block; 
}

[data-theme="light"] .night-celestial { 
    display: none; 
}

/* ========================================================= */
/* 2. DARK / NIGHT THEME: Midnight sky, stars, lit windows   */
/* ========================================================= */
[data-theme="dark"] .city-sky-canvas {
    background: 
        radial-gradient(circle at 75% 20%, rgba(186, 230, 253, 0.12) 0%, transparent 40%),
        linear-gradient(180deg, #020617 0%, #070D1E 30%, #0A142F 65%, #0B0F19 100%);
}

[data-theme="dark"] .city-layer-far {
    fill: #060A17;
    opacity: 0.95;
}

[data-theme="dark"] .city-layer-mid {
    fill: #0B132B;
    opacity: 0.95;
}

[data-theme="dark"] .city-layer-front {
    fill: #0F172A;
    opacity: 0.95;
}

[data-theme="dark"] .city-window-dot {
    fill: #BAE6FD;
    opacity: 0.85;
    filter: drop-shadow(0 0 2px #38bdf8);
}

[data-theme="dark"] .city-window-warm {
    fill: #FDE047;
    opacity: 0.9;
    filter: drop-shadow(0 0 3px #f59e0b);
}

[data-theme="dark"] .day-celestial { 
    display: none; 
}

[data-theme="dark"] .night-celestial { 
    display: block; 
}

/* ========================================================= */
/* 3. ANIMATIONS: Beacon Pulse & Star Twinkle                */
/* ========================================================= */
.beacon-light {
    animation: beaconPulse 2s infinite ease-in-out;
}

@keyframes beaconPulse {
    0%, 100% { opacity: 0.25; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 6px #ef4444); }
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); }
}

.star-1 { animation: starTwinkle 3s infinite ease-in-out; }
.star-2 { animation: starTwinkle 4s infinite ease-in-out 1.2s; }
.star-3 { animation: starTwinkle 2.5s infinite ease-in-out 0.6s; }

/* ========================================================= */
/* 4. REUSABLE SCROLLBARS                                    */
/* ========================================================= */
.floor-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
.floor-scroll-container::-webkit-scrollbar {
    width: 5px;
}
.floor-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.floor-scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
}
.floor-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.8);
}