/* ============================= */
/* TIME-OF-DAY THEMES            */
/* Applied as .theme-X on .app   */
/* Works alongside .mode-X       */
/* ============================= */

/* ============================= */
/* DAWN  pre-sunrise             */
/* ============================= */

.app.theme-dawn .app-bg {
  background-color: #efb080;
  background-image: linear-gradient(180deg, #243a62 0%, #5f83b1 50%, #efb080 100%);
}

.app.theme-dawn .scene-overlay {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 35%,
    rgba(0, 4, 14, 0.10) 62%,
    rgba(0, 4, 14, 0.52) 100%
  );
}

.app.theme-dawn .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, rgba(10, 6, 20, 0.80) 100%); }

.app.theme-dawn .horizon-glow {
  opacity: 0.90;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 184, 132, 0.52) 0%,
    rgba(255, 140, 80, 0.24) 42%,
    transparent 68%);
}

.app.theme-dawn .stars { opacity: 0.40; }
.app.theme-dawn .moon  { opacity: 0.30; }

.app.theme-dawn .carousel-left-btn,
.app.theme-dawn .carousel-right-btn,
.app.theme-dawn .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(200, 100, 180, 0.07), transparent 40%),
    rgba(14, 10, 24, 0.36);
}

.app.theme-dawn .track-label {
  color: rgba(255, 200, 200, 0.65);
}

/* ============================= */
/* MORNING  05:00 – 11:59        */
/* ============================= */

.app.theme-morning .app-bg {
  background-color: #f0c080;
  background-image: linear-gradient(180deg, #2e4875 0%, #6995c2 50%, #f0c080 100%);
}

.app.theme-morning .scene-overlay {
  background: linear-gradient(180deg,
    rgba(0, 4, 14, 0.60) 0%,
    rgba(0, 4, 14, 0.18) 28%,
    rgba(0, 4, 14, 0.16) 60%,
    rgba(0, 4, 14, 0.55) 100%
  );
}

.app.theme-morning .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, rgba(12, 8, 20, 0.78) 100%); }

.app.theme-morning .horizon-glow {
  opacity: 0.80;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 200, 110, 0.48) 0%,
    rgba(255, 160, 60, 0.22) 42%,
    transparent 68%);
}

.app.theme-morning .stars { opacity: 0; }
.app.theme-morning .moon  { opacity: 0; }

.app.theme-morning .carousel-left-btn,
.app.theme-morning .carousel-right-btn,
.app.theme-morning .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 210, 130, 0.07), transparent 40%),
    rgba(20, 18, 14, 0.34);
}

.app.theme-morning .track-label {
  color: rgba(255, 225, 175, 0.68);
}

/* ============================= */
/* DAWN + DAY: light glass cards */
/* ============================= */

.app.theme-dawn .scroll-extras,
.app.theme-day .scroll-extras {
  --widget-glass-bg:       linear-gradient(145deg, rgba(210, 228, 248, 0.20), rgba(190, 215, 240, 0.13));
  --widget-glass-border:   rgba(180, 210, 240, 0.28);
  --widget-glass-shadow:   0 2px 12px rgba(0, 20, 60, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --widget-glass-blur:     blur(16px) saturate(1.4);
  --widget-text-primary:   rgba(10, 28, 72, 0.95);
  --widget-text-secondary: rgba(10, 28, 72, 0.82);
  --widget-text-muted:     rgba(10, 28, 72, 0.62);
  --widget-icon-color:     rgba(10, 28, 72, 0.68);
}

/* Icon images: richer/deeper accent colors on light backgrounds */
.app.theme-dawn .scroll-extras .stat-card__icon-img,
.app.theme-day  .scroll-extras .stat-card__icon-img {
  filter: saturate(1.5) brightness(0.82);
}

.app.theme-dawn .scroll-extras .stat-card__arrow,
.app.theme-day  .scroll-extras .stat-card__arrow {
  filter: saturate(1.4) brightness(0.86);
}

/* fuelPlaceholder has inline white color — override for light themes */
.app.theme-dawn .scroll-extras #fuelPlaceholder,
.app.theme-day  .scroll-extras #fuelPlaceholder {
  color: var(--widget-text-muted) !important;
}

/* Border widget: light theme adaptations */
.app.theme-dawn .scroll-extras .border-card__divider,
.app.theme-day  .scroll-extras .border-card__divider {
  background: rgba(10, 28, 72, 0.07);
}

.app.theme-dawn .scroll-extras .border-card__times-sep,
.app.theme-day  .scroll-extras .border-card__times-sep {
  color: rgba(10, 28, 72, 0.30);
}

.app.theme-dawn .scroll-extras .border-widget__footer,
.app.theme-day  .scroll-extras .border-widget__footer {
  border-top-color: rgba(10, 28, 72, 0.08);
}

.app.theme-dawn .scroll-extras .border-dot,
.app.theme-day  .scroll-extras .border-dot {
  background: rgba(10, 28, 72, 0.18);
}

.app.theme-dawn .scroll-extras .border-dot.active,
.app.theme-day  .scroll-extras .border-dot.active {
  background: rgba(10, 60, 150, 0.70);
}

.app.theme-dawn .scroll-extras .border-country-row:not(:last-child),
.app.theme-day  .scroll-extras .border-country-row:not(:last-child) {
  border-bottom-color: rgba(10, 28, 72, 0.07);
}

.app.theme-dawn .scroll-extras .border-country-row:active,
.app.theme-day  .scroll-extras .border-country-row:active {
  background: rgba(10, 28, 72, 0.05);
}

.app.theme-dawn .scroll-extras .border-country-row__badge,
.app.theme-day  .scroll-extras .border-country-row__badge {
  background: rgba(10, 28, 72, 0.07);
  border-color: rgba(10, 28, 72, 0.14);
}

.app.theme-dawn .scroll-extras .border-country-row__title,
.app.theme-day  .scroll-extras .border-country-row__title {
  color: var(--widget-text-primary);
}

.app.theme-dawn .scroll-extras .border-country-row__subtitle,
.app.theme-day  .scroll-extras .border-country-row__subtitle {
  color: var(--widget-text-muted);
}

.app.theme-dawn .scroll-extras .border-country-row__chevron,
.app.theme-day  .scroll-extras .border-country-row__chevron {
  color: var(--widget-icon-color);
}

/* ============================= */
/* DAY  12:00 – 17:59            */
/* ============================= */

.app.theme-day .app-bg {
  background-color: #d8eeff;
  background-image: linear-gradient(180deg, #6fbaff 0%, #9bd3ff 50%, #d8eeff 100%);
}

.app.theme-day .scene-overlay {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 32%,
    rgba(0, 6, 22, 0.08) 62%,
    rgba(0, 6, 22, 0.58) 100%
  );
}

.app.theme-day .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, rgba(0, 8, 26, 0.72) 100%); }

.app.theme-day .horizon-glow {
  opacity: 0.65;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(200, 235, 255, 0.14) 42%,
    transparent 68%);
}

.app.theme-day .stars { opacity: 0; }
.app.theme-day .moon  { opacity: 0; }

/* ============================= */
/* EVENING  dusk after sunset    */
/* ============================= */

.app.theme-evening .app-bg {
  background-color: #6e6f9e;
  background-image: linear-gradient(180deg, #1d3153 0%, #42618b 50%, #6e6f9e 100%);
}

.app.theme-evening .scene-overlay {
  background: linear-gradient(180deg,
    rgba(5, 2, 18, 0.60) 0%,
    rgba(5, 2, 18, 0.20) 28%,
    rgba(5, 2, 18, 0.18) 60%,
    rgba(5, 2, 18, 0.55) 100%
  );
}

.app.theme-evening .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, rgba(8, 4, 22, 0.76) 100%); }

.app.theme-evening .horizon-glow {
  opacity: 0.78;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(180, 164, 255, 0.40) 0%,
    rgba(110, 90, 200, 0.18) 42%,
    transparent 68%);
}

.app.theme-evening .stars { opacity: 0.72; }
.app.theme-evening .moon  { opacity: 0.78; }

.app.theme-evening .carousel-left-btn,
.app.theme-evening .carousel-right-btn,
.app.theme-evening .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(120, 60, 200, 0.08), transparent 40%),
    rgba(10, 8, 22, 0.40);
}

.app.theme-evening .track-label,
.app.theme-evening .track-artist {
  color: rgba(200, 180, 255, 0.62);
}

/* ============================= */
/* SUNSET  18:00 – 20:59         */
/* ============================= */

.app.theme-sunset .app-bg {
  background-color: #f09a6a;
  background-image: linear-gradient(180deg, #3b4e82 0%, #a15a87 50%, #f09a6a 100%);
}

.app.theme-sunset .scene-overlay {
  background: linear-gradient(180deg,
    rgba(0, 2, 12, 0.60) 0%,
    rgba(0, 2, 12, 0.22) 28%,
    rgba(0, 2, 12, 0.18) 60%,
    rgba(0, 2, 12, 0.56) 100%
  );
}

.app.theme-sunset .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, rgba(5, 2, 16, 0.74) 100%); }

.app.theme-sunset .horizon-glow {
  opacity: 0.94;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 166, 106, 0.56) 0%,
    rgba(220, 90, 60, 0.26) 42%,
    transparent 68%);
}

.app.theme-sunset .stars { opacity: 0.30; }
.app.theme-sunset .moon  { opacity: 0.45; }

.app.theme-sunset .carousel-left-btn,
.app.theme-sunset .carousel-right-btn,
.app.theme-sunset .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(200, 90, 150, 0.08), transparent 40%),
    rgba(18, 10, 22, 0.38);
}

.app.theme-sunset .track-label {
  color: rgba(255, 195, 155, 0.68);
}

/* ============================= */
/* NIGHT  21:00 – 04:59          */
/* ============================= */

.app.theme-night .app-bg {
  background-color: #02060e;
  background-image: linear-gradient(180deg, #06101f 0%, #08192f 50%, #02060e 100%);
}

.app.theme-night .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, rgba(1, 2, 6, 0.84) 100%); }

.app.theme-night .horizon-glow {
  opacity: 0.32;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(60, 80, 200, 0.24) 0%,
    rgba(30, 40, 120, 0.08) 45%,
    transparent 72%);
}

.app.theme-night .stars { opacity: 1; }
.app.theme-night .moon  { opacity: 1; }

.app.theme-night .carousel-left-btn,
.app.theme-night .carousel-right-btn,
.app.theme-night .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(70, 110, 220, 0.09), transparent 40%),
    rgba(10, 16, 36, 0.42);
}

.app.theme-night .track-label,
.app.theme-night .track-artist {
  color: rgba(255, 255, 255, 0.58);
}

.app.theme-night .weather-widget {
  background: rgba(12, 20, 44, 0.52);
}

/* ============================= */
/* OVERCAST  weather override    */
/* dark weather modes (non-night) */
/* ============================= */

.app.theme-overcast .app-bg {
  background-color: #1c314f;
  background-image: linear-gradient(180deg, #1c314f 0%, #3e5d86 50%, #69759c 100%);
}

.app.theme-overcast .scene-overlay {
  background: linear-gradient(180deg,
    rgba(4, 8, 20, 0.72) 0%,
    rgba(4, 8, 20, 0.42) 28%,
    rgba(4, 8, 20, 0.38) 60%,
    rgba(4, 8, 20, 0.70) 100%
  );
}

.app.theme-overcast .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, rgba(5, 8, 18, 0.80) 100%); }

.app.theme-overcast .horizon-glow {
  opacity: 0.28;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(150, 180, 210, 0.18) 0%,
    rgba(90, 120, 160, 0.08) 45%,
    transparent 72%);
}

.app.theme-overcast .stars { opacity: 0; }
.app.theme-overcast .moon  { opacity: 0; }

.app.theme-overcast .carousel-left-btn,
.app.theme-overcast .carousel-right-btn,
.app.theme-overcast .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(100, 120, 140, 0.06), transparent 40%),
    rgba(12, 16, 22, 0.38);
}

/* ============================= */
/* MODE-SPECIFIC HORIZON GLOW    */
/* Overrides time-of-day default */
/* Must stay AFTER theme rules   */
/* ============================= */

.app.mode-rap .horizon-glow {
  opacity: 0.65;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(180, 20, 255, 0.30) 0%,
    rgba(200, 0, 150, 0.12) 42%,
    transparent 70%);
}

.app.mode-rock .horizon-glow {
  opacity: 0.75;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 60, 10, 0.34) 0%,
    rgba(200, 40, 0, 0.12) 42%,
    transparent 70%);
}

.app.mode-deep .horizon-glow {
  opacity: 0.55;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(60, 40, 220, 0.28) 0%,
    rgba(80, 60, 180, 0.10) 42%,
    transparent 70%);
}

.app.mode-lofi .horizon-glow {
  opacity: 0.45;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(100, 160, 220, 0.22) 0%,
    rgba(150, 130, 210, 0.08) 42%,
    transparent 70%);
}

.app.mode-euro .horizon-glow {
  opacity: 0.70;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(0, 200, 255, 0.28) 0%,
    rgba(220, 0, 180, 0.14) 42%,
    transparent 70%);
}

.app.mode-pulse .horizon-glow {
  opacity: 0.80;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(160, 255, 20, 0.30) 0%,
    rgba(100, 200, 10, 0.12) 42%,
    transparent 70%);
}

.app.mode-manele .horizon-glow {
  opacity: 0.72;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 155, 0, 0.32) 0%,
    rgba(200, 100, 0, 0.12) 42%,
    transparent 70%);
}

/* ====================================== */
/* DAY-CONTRAST-UI                        */
/* Dark glass on light-sky backgrounds    */
/* Active when theme-day or theme-dawn    */
/* ====================================== */

/* scroll-extras: switch back to dark glass vars */
.app.day-contrast-ui .scroll-extras {
  --widget-glass-bg:       linear-gradient(145deg, rgba(8, 16, 40, 0.50), rgba(4, 10, 28, 0.42));
  --widget-glass-border:   rgba(255, 255, 255, 0.10);
  --widget-glass-shadow:   0 2px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --widget-glass-blur:     blur(16px) saturate(1.3);
  --widget-text-primary:   rgba(255, 255, 255, 0.95);
  --widget-text-secondary: rgba(255, 255, 255, 0.82);
  --widget-text-muted:     rgba(255, 255, 255, 0.58);
  --widget-icon-color:     rgba(255, 255, 255, 0.65);
}

.app.day-contrast-ui .scroll-extras .stat-card__icon-img { filter: none; }
.app.day-contrast-ui .scroll-extras .stat-card__arrow    { filter: none; }

.app.day-contrast-ui .scroll-extras #fuelPlaceholder { color: var(--widget-text-muted) !important; }

.app.day-contrast-ui .scroll-extras .border-card__divider            { background: rgba(255, 255, 255, 0.07); }
.app.day-contrast-ui .scroll-extras .border-card__times-sep          { color: rgba(255, 255, 255, 0.25); }
.app.day-contrast-ui .scroll-extras .border-widget__footer           { border-top-color: rgba(255, 255, 255, 0.07); }
.app.day-contrast-ui .scroll-extras .border-dot                      { background: rgba(255, 255, 255, 0.18); }
.app.day-contrast-ui .scroll-extras .border-dot.active               { background: rgba(100, 160, 255, 0.70); }
.app.day-contrast-ui .scroll-extras .border-country-row:not(:last-child) { border-bottom-color: rgba(255, 255, 255, 0.06); }
.app.day-contrast-ui .scroll-extras .border-country-row:active       { background: rgba(255, 255, 255, 0.04); }
.app.day-contrast-ui .scroll-extras .border-country-row__badge       { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.app.day-contrast-ui .scroll-extras .border-country-row__title       { color: var(--widget-text-primary); }
.app.day-contrast-ui .scroll-extras .border-country-row__subtitle    { color: var(--widget-text-muted); }
.app.day-contrast-ui .scroll-extras .border-country-row__chevron     { color: var(--widget-icon-color); }

/* main play button: dark glass */
.app.day-contrast-ui .carousel-main-btn {
  background: rgba(4, 8, 22, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
}

/* nav side buttons + volume: dark glass */
.app.day-contrast-ui .carousel-left-btn,
.app.day-contrast-ui .carousel-right-btn,
.app.day-contrast-ui .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.05), transparent 40%),
    rgba(4, 8, 20, 0.48);
}

/* toolbar buttons: dark glass */
.app.day-contrast-ui .settings-btn,
.app.day-contrast-ui .language-btn,
.app.day-contrast-ui .tip-btn,
.app.day-contrast-ui .calculator-btn {
  background: rgba(4, 8, 22, 0.55);
  border-color: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.88);
}

/* speed indicator: dark glass */
.app.day-contrast-ui .speed-indicator {
  background: rgba(4, 8, 22, 0.55);
  border-color: rgba(255, 255, 255, 0.13);
}

/* weather widget: dark glass */
.app.day-contrast-ui .weather-widget {
  background: rgba(4, 8, 22, 0.55);
  border-color: rgba(255, 255, 255, 0.13);
}

/* track info: dark text on light sky */
.app.day-contrast-ui .track-label {
  color: rgba(10, 28, 72, 0.65);
}

.app.day-contrast-ui .track-title {
  color: rgba(10, 28, 72, 0.95);
}

.app.day-contrast-ui .track-artist {
  color: rgba(10, 28, 72, 0.70);
}