/* ==========================================================
   LIGHT.CSS – Comprehensive Light Mode Styles
   ========================================================== */

/* ---------- ROOT VARIABLES FOR LIGHT MODE ---------- */
body.light-mode {
  /* Base Colors */
  --bg: #f0f2f5;
  --card-bg: #ffffff;
  --text: #2d3748;
  --text-muted: #718096;

  /* Surfaces */
  --surface-100: #f8fafc;
  --surface-200: #e2e8f0;
  --surface-300: #ffffff;

  /* Accent Colors */
  --accent1: #8b5cf6;   /* purple-500 */
  --accent2: #10b981;   /* emerald-500 */
  --accent3: #3b82f6;   /* blue-500 */

  /* Effects */
  --shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.05);
 
  /* Clock Specific */
}

/* ---------- BASE ELEMENTS ---------- */
body.light-mode {
  background-color: var(--bg);
  color: var(--text);
}

/* ---------- TOPBAR COMPONENTS ---------- */
body.light-mode .topbar {
  background: #2d3748;
  color: #f0f2f5;
}

body.light-mode .mode-toggle,
body.light-mode #toolsDropdownBtn,
body.light-mode .settings-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #f0f2f5;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light-mode .mode-toggle:hover,
body.light-mode #toolsDropdownBtn:hover,
body.light-mode .settings-btn:hover {
  background: rgba(162, 89, 255, 0.2);
}

/* ---------- CARD COMPONENTS ---------- */
body.light-mode .tool-card {
  background: var(--surface-100);
  border: 1px solid var(--surface-200);
  color: var(--text);
}

body.light-mode .tool-card:hover,
body.light-mode .tool-card.selected {
  background: linear-gradient(120deg, var(--accent1), var(--accent2));
  color: #fff;
  border: 2px solid var(--accent3);
}

body.light-mode .main-content,
body.light-mode .timezone-card,
body.light-mode .timer-card,
body.light-mode .age-details-card {
  background: var(--surface-100);
  border: 1px solid var(--surface-200);
}

body.light-mode .timezone-card.fullscreen {
  background: var(--surface-300);
}

/* ---------- TIMEZONE SPECIFIC STYLES ---------- */
body.light-mode .timezone-card .city,
body.light-mode .timezone-card .time,
body.light-mode .timezone-card .date {
  color: var(--tz-color, var(--accent3));
}

body.light-mode .timezone-card.fullscreen .card-controls {
  background: rgba(0, 0, 0, 0.05);
}

/* Force icon colors for timezone controls */
body.light-mode .timezone-card .card-controls .fullscreen-btn,
body.light-mode .timezone-card .card-controls .remove-btn {
  color: var(--accent3) !important;
}

body.light-mode .timezone-card .card-controls .fullscreen-btn:hover,
body.light-mode .timezone-card .card-controls .remove-btn:hover {
  color: var(--accent1) !important;
}

/* ---------- ALARM COMPONENTS ---------- */
body.light-mode .alarm-item {
  background: var(--surface-100);
  border: 1px solid var(--surface-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.light-mode .alarm-item.active-alarm {
  background: #fefffe;
  border-color: var(--accent2);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* ---------- FORM ELEMENTS ---------- */
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .timer-input,
body.light-mode .alarm-input,
body.light-mode .timezone-input,
body.light-mode .age-input {
  background: var(--surface-100);
  border-color: #cbd5e0;
  color: var(--text);
}

body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
  border-color: var(--accent3);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ---------- STOPWATCH COMPONENTS ---------- */
body.light-mode .stopwatch-laps li {
  background: var(--surface-100);
  border-left-color: var(--accent2);
}

/* ---------- MODAL COMPONENTS ---------- */
body.light-mode .modal-content,
body.light-mode .set-alarm-content,
body.light-mode .city-modal-content,
body.light-mode .timer-modal-content,
body.light-mode #settingsModal {
  background: var(--surface-300);
  border: 1px solid var(--surface-200);
}

body.light-mode .modal-content .close,
body.light-mode .close-set-alarm,
body.light-mode #closeTimerModal {
  color: var(--text);
}

body.light-mode .modal-content .close:hover,
body.light-mode .close-set-alarm:hover,
body.light-mode #closeTimerModal:hover {
  color: var(--accent1);
}

/* ---------- DROPDOWN COMPONENTS ---------- */
body.light-mode #toolsDropdown {
  background: var(--surface-100);
  border: 1px solid var(--surface-200);
}

body.light-mode #toolsDropdown li {
  color: var(--text);
}

body.light-mode #toolsDropdown li:hover {
  background-color: rgba(162, 89, 255, 0.1);
}

body.light-mode #toolsDropdownBtn::after {
  color: var(--text);
}

/* ---------- SETTINGS MODAL ---------- */
body.light-mode #settingsModal label span,
body.light-mode #settingsModal span {
  color: var(--text);
}

/* ---------- SCROLLBAR STYLING ---------- */
body.light-mode ::-webkit-scrollbar-track {
  background: var(--surface-100);
}

body.light-mode ::-webkit-scrollbar-thumb {
  background: var(--accent3);
}

body.light-mode * {
  scrollbar-color: var(--accent3) var(--surface-100);
}

/* ---------- AD PLACEHOLDER ---------- */
body.light-mode .adsense-placeholder {
  background: var(--surface-300);
  border: 2px dashed var(--accent1);
  color: var(--text-muted);
}

/* ==== Settings Modal fix în Light Mode ==== */
body.light-mode .settings-modal {
  background: var(--surface-100) !important; /* gri deschis */
  border: 1px solid var(--surface-200) !important;
  color: var(--text) !important;
}
body.light-mode .settings-modal .modal-header,
body.light-mode .settings-modal .modal-body {
  background: transparent !important;
  color: var(--text) !important;
}