/* ===== DARK MODE THEME =====
   Această fișier conține **doar** suprascrierile/variabilele
   pentru dark mode. Valorile de mai jos sunt identice
   cu cele din :root (main.css), fiind prezente aici
   pentru claritate și eventual override-uri viitoare.
-------------------------------------------------------- */

body.dark-mode {
  /* Fundal principal */
  --bg: #121212;

  /* Fundal carduri/modale */
  --card-bg: #1e1e1e;

  /* Culori de accent */
  --accent1: #a259ff;
  --accent2: #2ee6d6;
  --accent3: #00b2ff;

  /* Text */
  --text: #f0f0f0;
  --text-muted: #b0b0b0;

  /* Umbre */
  --shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.35);

  /* Variabile pentru cardurile Timezone (8 culori) */
  --tz-color-white:  #ffffff;
  --tz-color-black:  #000000;
  --tz-color-purple: #a259ff;
  --tz-color-teal:   #2ee6d6;
  --tz-color-blue:   #00b2ff;
  --tz-color-red:    #ff4d4d;
  --tz-color-green:  #4dff88;
  --tz-color-yellow: #ffd700;
}

/* === Aplică culorile Timezone folosind variabilele de mai sus === */
body.dark-mode .timezone-card[data-color="white"]  { --tz-color: var(--tz-color-white);  }
body.dark-mode .timezone-card[data-color="black"]  { --tz-color: var(--tz-color-black);  }
body.dark-mode .timezone-card[data-color="purple"] { --tz-color: var(--tz-color-purple); }
body.dark-mode .timezone-card[data-color="teal"]   { --tz-color: var(--tz-color-teal);   }
body.dark-mode .timezone-card[data-color="blue"]   { --tz-color: var(--tz-color-blue);   }
body.dark-mode .timezone-card[data-color="red"]    { --tz-color: var(--tz-color-red);    }
body.dark-mode .timezone-card[data-color="green"]  { --tz-color: var(--tz-color-green);  }
body.dark-mode .timezone-card[data-color="yellow"] { --tz-color: var(--tz-color-yellow); }

/* === Exemple de text (opțional, deja moștenite din components.css) === */
body.dark-mode .timezone-card .time,
body.dark-mode .timezone-card .date {
  color: var(--text);
}

body.dark-mode .timezone-card .city {
  color: var(--accent3);
}

/* Scoped Age date picker rules — apply ONLY in Dark Mode */
body.dark-mode #ageBirthdate,
body.dark #ageBirthdate,
html.dark #ageBirthdate,
[data-theme="dark"] #ageBirthdate {
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  color-scheme: dark;
}

body.dark-mode #ageBirthdate::-webkit-datetime-edit,
body.dark-mode #ageBirthdate::-webkit-datetime-edit-fields-wrapper,
body.dark-mode #ageBirthdate::-webkit-datetime-edit-text,
body.dark-mode #ageBirthdate::-webkit-datetime-edit-month-field,
body.dark-mode #ageBirthdate::-webkit-datetime-edit-day-field,
body.dark-mode #ageBirthdate::-webkit-datetime-edit-year-field,
body.dark #ageBirthdate::-webkit-datetime-edit,
body.dark #ageBirthdate::-webkit-datetime-edit-fields-wrapper,
body.dark #ageBirthdate::-webkit-datetime-edit-text,
body.dark #ageBirthdate::-webkit-datetime-edit-month-field,
body.dark #ageBirthdate::-webkit-datetime-edit-day-field,
body.dark #ageBirthdate::-webkit-datetime-edit-year-field,
html.dark #ageBirthdate::-webkit-datetime-edit,
html.dark #ageBirthdate::-webkit-datetime-edit-fields-wrapper,
html.dark #ageBirthdate::-webkit-datetime-edit-text,
html.dark #ageBirthdate::-webkit-datetime-edit-month-field,
html.dark #ageBirthdate::-webkit-datetime-edit-day-field,
html.dark #ageBirthdate::-webkit-datetime-edit-year-field,
[data-theme="dark"] #ageBirthdate::-webkit-datetime-edit,
[data-theme="dark"] #ageBirthdate::-webkit-datetime-edit-fields-wrapper,
[data-theme="dark"] #ageBirthdate::-webkit-datetime-edit-text,
[data-theme="dark"] #ageBirthdate::-webkit-datetime-edit-month-field,
[data-theme="dark"] #ageBirthdate::-webkit-datetime-edit-day-field,
[data-theme="dark"] #ageBirthdate::-webkit-datetime-edit-year-field {
  color: #fff;
  -webkit-text-fill-color: #fff;
  opacity: 1;
}

body.dark-mode #ageBirthdate::-webkit-calendar-picker-indicator,
body.dark #ageBirthdate::-webkit-calendar-picker-indicator,
html.dark #ageBirthdate::-webkit-calendar-picker-indicator,
[data-theme="dark"] #ageBirthdate::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 1;
}

/* ============================================================
   Sleep Calculator — time picker în Dark Mode (desktop)
   Scop: text alb + iconiță vizibilă + paletă dark nativă
   Se aplică DOAR în modul dark (acoperă mai multe strategii)
   ============================================================ */
body.dark-mode #sleepWakeUpTime,
body.dark #sleepWakeUpTime,
html.dark #sleepWakeUpTime,
[data-theme="dark"] #sleepWakeUpTime {
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  background: var(--bg);
  color-scheme: dark; /* forțează widgetul nativ pe dark */
}

body.dark-mode #sleepWakeUpTime::-webkit-datetime-edit,
body.dark-mode #sleepWakeUpTime::-webkit-datetime-edit-fields-wrapper,
body.dark-mode #sleepWakeUpTime::-webkit-datetime-edit-text,
body.dark-mode #sleepWakeUpTime::-webkit-datetime-edit-hour-field,
body.dark-mode #sleepWakeUpTime::-webkit-datetime-edit-minute-field,
body.dark-mode #sleepWakeUpTime::-webkit-datetime-edit-ampm-field,
body.dark #sleepWakeUpTime::-webkit-datetime-edit,
body.dark #sleepWakeUpTime::-webkit-datetime-edit-fields-wrapper,
body.dark #sleepWakeUpTime::-webkit-datetime-edit-text,
body.dark #sleepWakeUpTime::-webkit-datetime-edit-hour-field,
body.dark #sleepWakeUpTime::-webkit-datetime-edit-minute-field,
body.dark #sleepWakeUpTime::-webkit-datetime-edit-ampm-field,
html.dark #sleepWakeUpTime::-webkit-datetime-edit,
html.dark #sleepWakeUpTime::-webkit-datetime-edit-fields-wrapper,
html.dark #sleepWakeUpTime::-webkit-datetime-edit-text,
html.dark #sleepWakeUpTime::-webkit-datetime-edit-hour-field,
html.dark #sleepWakeUpTime::-webkit-datetime-edit-minute-field,
html.dark #sleepWakeUpTime::-webkit-datetime-edit-ampm-field,
[data-theme="dark"] #sleepWakeUpTime::-webkit-datetime-edit,
[data-theme="dark"] #sleepWakeUpTime::-webkit-datetime-edit-fields-wrapper,
[data-theme="dark"] #sleepWakeUpTime::-webkit-datetime-edit-text,
[data-theme="dark"] #sleepWakeUpTime::-webkit-datetime-edit-hour-field,
[data-theme="dark"] #sleepWakeUpTime::-webkit-datetime-edit-minute-field,
[data-theme="dark"] #sleepWakeUpTime::-webkit-datetime-edit-ampm-field {
  color: #fff;
  -webkit-text-fill-color: #fff;
  opacity: 1;
}

body.dark-mode #sleepWakeUpTime::-webkit-calendar-picker-indicator,
body.dark #sleepWakeUpTime::-webkit-calendar-picker-indicator,
html.dark #sleepWakeUpTime::-webkit-calendar-picker-indicator,
[data-theme="dark"] #sleepWakeUpTime::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 1;
}

/* ===== Global form control palette in Dark Mode ===== */
body.dark-mode, body.dark, html.dark, [data-theme="dark"] {
  color-scheme: dark;
}

/* ==== Sleep Calculator: desktop time picker — final hard override ==== */
body.dark-mode #section-sleepcalculator #sleepWakeUpTime,
body.dark #section-sleepcalculator #sleepWakeUpTime,
html.dark #section-sleepcalculator #sleepWakeUpTime,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: var(--bg) !important;
  border-color: rgba(255,255,255,.3) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* WebKit internal fields */
body.dark-mode #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit,
body.dark-mode #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-fields-wrapper,
body.dark-mode #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-text,
body.dark-mode #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-hour-field,
body.dark-mode #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-minute-field,
body.dark-mode #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-ampm-field,
body.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit,
body.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-fields-wrapper,
body.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-text,
body.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-hour-field,
body.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-minute-field,
body.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-ampm-field,
html.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit,
html.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-fields-wrapper,
html.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-text,
html.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-hour-field,
html.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-minute-field,
html.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-ampm-field,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-fields-wrapper,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-text,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-hour-field,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-minute-field,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime::-webkit-datetime-edit-ampm-field {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Indicator + spin buttons */
body.dark-mode #section-sleepcalculator #sleepWakeUpTime::-webkit-calendar-picker-indicator,
body.dark-mode #section-sleepcalculator #sleepWakeUpTime::-webkit-inner-spin-button,
body.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-calendar-picker-indicator,
body.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-inner-spin-button,
html.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-calendar-picker-indicator,
html.dark #section-sleepcalculator #sleepWakeUpTime::-webkit-inner-spin-button,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime::-webkit-calendar-picker-indicator,
[data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime::-webkit-inner-spin-button {
  filter: invert(1) brightness(1.2) !important;
  opacity: 1 !important;
}

/* Firefox */
@-moz-document url-prefix() {
  body.dark-mode #section-sleepcalculator #sleepWakeUpTime,
  body.dark #section-sleepcalculator #sleepWakeUpTime,
  html.dark #section-sleepcalculator #sleepWakeUpTime,
  [data-theme="dark"] #section-sleepcalculator #sleepWakeUpTime {
    color: #fff !important;
    background-color: var(--bg) !important;
  }
}


/* ==== Settings Modal fix în Dark Mode ==== */
body.dark-mode .settings-modal {
  background: var(--card-bg) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--text) !important;
}