/* Theme system for Officetracker */

/* Base theme (default) has default styling in original CSS, no vars needed */

/* City Skyline Theme.
   The skyline SVG is inlined into .skyline-background, so the CSS variables
   below cascade into it. Time-of-day is just a body class (.time-*) swapping
   the palette; everything else is handled by the SVG itself. */
.theme-city-skyline {
    --primary-bg: #3a7bd5;
    --secondary-bg: #00d2ff;
    --content-bg: rgba(255, 255, 255, 0.95);
    --text-color: #333;
    --border-color: #dee2e6;
    --highlight-color: #FFC107;
    --present-color: #4CAF50;
    --not-present-color: #F44336;
    --other-color: #2196F3;

    /* Daytime palette (default) */
    --sky-1: #3f87cf;
    --sky-2: #74b3e3;
    --sky-3: #b2d9f0;
    --sky-4: #e3f2fb;
    --bldg-far: #a9c3d9;
    --bldg-mid: #7592ad;
    --bldg-front: #47627c;
    --win-front: rgba(25, 40, 57, 0.45);
    --win-glass: rgba(222, 240, 250, 0.8);
    --lit: 0;
    --lit-mid: 0;
    --stars: 0;
    --sun-op: 1;
    --sun-glow: 0.45;
    --sun-core: #fff6dc;
    --sun-glow-color: #fff3c4;
    --sun-x: 880px;
    --sun-y: 150px;
    --moon-op: 0;
    --cloud: #ffffff;
    --cloud-op: 0.75;
    --bird: #33475c;
    --birds: 0.9;
    --beacon: 0;
    --city-glow: 0;

    background: transparent;
    position: relative;
    overflow-x: hidden;
}

.theme-city-skyline.time-morning {
    --sky-1: #46639f;
    --sky-2: #8f7fb8;
    --sky-3: #eba27c;
    --sky-4: #ffd9a3;
    --bldg-far: #b39fb4;
    --bldg-mid: #836f94;
    --bldg-front: #4e3d5e;
    --win-front: rgba(35, 25, 48, 0.5);
    --win-glass: rgba(255, 205, 160, 0.85);
    --lit: 0.3;
    --lit-mid: 0.25;
    --stars: 0.2;
    --sun-glow: 0.85;
    --sun-core: #ffe9b8;
    --sun-glow-color: #ffc98a;
    --sun-x: 250px;
    --sun-y: 560px;
    --cloud: #ffd9c4;
    --cloud-op: 0.7;
    --bird: #3d3048;
    --birds: 0.8;
    --beacon: 0.25;
    --city-glow: 0.1;
}

.theme-city-skyline.time-evening {
    --sky-1: #2c2a5c;
    --sky-2: #5c4985;
    --sky-3: #c66e6e;
    --sky-4: #f3a96b;
    --bldg-far: #6a5f8c;
    --bldg-mid: #423a63;
    --bldg-front: #221d3c;
    --win-front: rgba(10, 8, 24, 0.5);
    --win-glass: rgba(255, 170, 115, 0.8);
    --lit: 0.85;
    --lit-mid: 0.7;
    --stars: 0.45;
    --sun-glow: 0.9;
    --sun-core: #ffd9a0;
    --sun-glow-color: #ff9e6a;
    --sun-x: 950px;
    --sun-y: 565px;
    --cloud: #d98f7e;
    --cloud-op: 0.55;
    --birds: 0.35;
    --beacon: 1;
    --city-glow: 0.18;
}

.theme-city-skyline.time-night {
    --sky-1: #04091a;
    --sky-2: #0a1428;
    --sky-3: #12203a;
    --sky-4: #1d2e4a;
    --bldg-far: #1d2c44;
    --bldg-mid: #131f33;
    --bldg-front: #090f1b;
    --win-front: rgba(0, 0, 0, 0.35);
    --win-glass: rgba(28, 42, 60, 0.6);
    --lit: 1;
    --lit-mid: 0.9;
    --stars: 1;
    --sun-op: 0;
    --moon-op: 1;
    --cloud: #243348;
    --cloud-op: 0.45;
    --birds: 0;
    --beacon: 1;
    --city-glow: 0.3;
}

/* City Skyline SVG Background Container */
.skyline-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    overflow: hidden;
    transition: background 1.5s ease;
    /* Fallback gradient shown until the SVG loads */
    background: linear-gradient(to bottom, var(--sky-1), var(--sky-2), var(--sky-3), var(--sky-4));
}

.skyline-background svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Weather variations: tone down the sun and thicken the clouds, plus an
   overlay for precipitation. */
.theme-city-skyline.weather-cloudy,
.theme-city-skyline.weather-rain,
.theme-city-skyline.weather-thunderstorm,
.theme-city-skyline.weather-snow {
    --cloud-op: 1;
    --sun-glow: 0.15;
    --birds: 0;
}

.theme-city-skyline.weather-rain,
.theme-city-skyline.weather-thunderstorm {
    --cloud: #8d99aa;
}

.theme-city-skyline.weather-cloudy {
    --cloud: #d4dbe2;
}

.theme-city-skyline.weather-rain:after,
.theme-city-skyline.weather-thunderstorm:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(105deg,
        transparent 0px,
        transparent 7px,
        rgba(255, 255, 255, 0.18) 7px,
        rgba(255, 255, 255, 0.18) 8px);
    background-size: 100% 32px;
    pointer-events: none;
    animation: rain 0.7s linear infinite;
    z-index: -1;
}

.theme-city-skyline.weather-thunderstorm:after {
    /* Streak layer must stay first: the rain keyframes only scroll layer one */
    background:
        repeating-linear-gradient(105deg,
            transparent 0px,
            transparent 6px,
            rgba(255, 255, 255, 0.22) 6px,
            rgba(255, 255, 255, 0.22) 7px),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.1) 100%);
    background-size: 100% 32px, 100% 100%;
    animation: rain 0.45s linear infinite;
}

.theme-city-skyline.weather-snow:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.9) 2px, transparent 0),
        radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 0);
    background-size: 20px 20px, 30px 30px;
    background-position: 0 0, 10px 10px;
    pointer-events: none;
    animation: snow 20s linear infinite;
    z-index: -1;
}

/* Dark theme */
.theme-dark {
    --primary-bg: #202124;    /* page background */
    --secondary-bg: #17181a;  /* navbar */
    --content-bg: #2a2b2e;    /* content card */
    --input-bg: #2f3033;      /* inputs, buttons, table headers */
    --text-color: #e3e3e3;
    --muted-text: #9aa0a6;    /* secondary/descriptive text */
    --border-color: #3c4043;
    --highlight-color: #FFC107;
    --present-color: #4CAF50;
    --not-present-color: #F44336;
    --other-color: #2196F3;
}

/* No light theme as it's redundant with default */

/* Apply CSS variables only to themed elements (dark and city-skyline) */
body.theme-dark, 
body.theme-city-skyline {
    background-color: var(--primary-bg);
    color: var(--text-color);
}

body.theme-dark main,
body.theme-city-skyline main {
    background-color: var(--content-bg);
}

body.theme-dark main > nav {
    /* Base `main > nav` sets #dee with !important, so this must be !important too. */
    background-color: var(--secondary-bg) !important;
}

body.theme-dark .weekday-header, 
body.theme-dark .day,
body.theme-city-skyline .weekday-header, 
body.theme-city-skyline .day {
    border-color: var(--border-color);
    background-color: var(--content-bg);
    color: var(--text-color);
}

body.theme-dark .weekday-header,
body.theme-city-skyline .weekday-header {
    color: var(--text-color);
}

/* These should apply to all themes since they're consistent */
.present { background-color: #4CAF50; }
.not-present { background-color: #F44336; }
.other { background-color: #2196F3; }

body.theme-dark .present,
body.theme-city-skyline .present { 
    background-color: var(--present-color); 
}

body.theme-dark .not-present,
body.theme-city-skyline .not-present { 
    background-color: var(--not-present-color); 
}

body.theme-dark .other,
body.theme-city-skyline .other { 
    background-color: var(--other-color); 
}

/* Scheduled state styles for themed versions */
body.theme-dark .scheduled-home,
body.theme-city-skyline .scheduled-home {
    background-color: rgba(76, 175, 80, 0.4); /* Semi-transparent green */
}

body.theme-dark .scheduled-office,
body.theme-city-skyline .scheduled-office {
    background-color: rgba(244, 67, 54, 0.4); /* Semi-transparent red */
}

body.theme-dark .scheduled-other,
body.theme-city-skyline .scheduled-other {
    background-color: rgba(33, 150, 243, 0.4); /* Semi-transparent blue */
}

body.theme-dark .today,
body.theme-city-skyline .today {
    border-color: var(--highlight-color);
}

/* -------------------------------------------------------------------------
   Dark theme — consistency fixes.
   The app's base styles are light-first with many hardcoded colours the
   original dark theme never covered (white inputs, tables, dividers, etc.).
   These rules bring the rest of the UI in line with the dark palette. They are
   all scoped to body.theme-dark, so the other themes are left untouched. */

/* Secondary / descriptive text */
body.theme-dark .section-desc,
body.theme-dark .account-list .empty {
    color: var(--muted-text);
}

/* Form controls: inputs, selects, textareas (excluding native checkboxes) */
body.theme-dark input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark textarea#notes,
body.theme-dark .field-row select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Default buttons (calendar nav, export). The dedicated .login-btn keeps its
   own dark styling. */
body.theme-dark button:not(.login-btn) {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
body.theme-dark button:not(.login-btn):hover {
    background-color: #3a3b3f;
}

/* Summary table */
body.theme-dark .summary-container th,
body.theme-dark .summary-container td {
    border-color: var(--border-color);
    color: var(--text-color);
}
body.theme-dark .summary-container th {
    background-color: var(--input-bg);
}

/* Notification banner: keep the amber accent, but dark text for contrast */
body.theme-dark section.notification {
    color: #1a1a1a;
}

/* Footer (base uses inline styles, so !important is required to override) */
body.theme-dark footer {
    border-top-color: var(--border-color) !important;
}
body.theme-dark footer a {
    color: var(--muted-text) !important;
}

/* Settings page: section cards, row dividers and the weekly-schedule grid */
body.theme-dark .settings-section {
    border-color: var(--border-color);
}
body.theme-dark .field-row + .field-row,
body.theme-dark .account-list li + li {
    border-top-color: var(--border-color);
}
body.theme-dark .schedule-day {
    border-color: var(--border-color);
}
body.theme-dark .schedule-day[data-state="0"] {
    background-color: var(--input-bg);
}
body.theme-dark .schedule-day:hover {
    background-color: #3a3b3f;
}

/* Animations for weather effects */

@keyframes rain {
    0% {
        background-position: 0px 0px, 0px 0px;
    }
    100% {
        /* One 32px background tile per loop, so the pattern repeats seamlessly.
           Only the first layer scrolls; thunderstorm's dim layer stays put. */
        background-position: 0px 32px, 0px 0px;
    }
}

@keyframes snow {
    0% {
        background-position: 0 0, 10px 10px;
    }
    100% {
        background-position: 500px 500px, 510px 510px;
    }
}