/* ══════════════════════════════════════════
   ISLAMIC HUB — light-mode-fix.css
   لائٹ موڈ کا مکمل بہتری پیکج
   اس فائل کو index.html میں دوسری CSS کے بعد لنک کریں
   ══════════════════════════════════════════ */

/* ══ LED COLORS — لائٹ موڈ میں گہرے رنگ ══ */
body.light-mode {
  --red-led:    #c0001a;
  --green-led:  #006b38;
  --yellow-led: #8a6800;
  --blue-led:   #0033aa;
  --teal:       #007a62;
  --teal-dim:   #005a48;
  --teal-glow:  rgba(0, 122, 98, 0.18);
  --gold:       #8a6200;
  --gold-light: #b07800;
  --gold-dim:   #6a4a00;
  --gold-glow:  rgba(138, 98, 0, 0.18);
  --text-muted: #6a6258;
  --text-soft:  #4a4038;
}

/* ══ CLOCK DIGITS ══ */
body.light-mode .clock-digits {
  color: #006b38;
  text-shadow: 0 1px 4px rgba(0, 107, 56, 0.25);
}

/* ══ PRAYER TABLE ROWS ══ */
body.light-mode .prayer-row {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(150, 100, 30, 0.18);
}
body.light-mode .prayer-row:hover {
  background: rgba(255, 255, 255, 0.95);
}
body.light-mode .prayer-row.active {
  background: rgba(0, 107, 56, 0.08);
  border-color: rgba(0, 107, 56, 0.3);
}
body.light-mode .prayer-row.next {
  background: rgba(138, 104, 0, 0.06);
  border-color: rgba(138, 104, 0, 0.25);
}

/* ══ PRAYER TIMES — LED FONT COLORS ══ */
body.light-mode .p-time {
  color: #c0001a;
  text-shadow: none;
}
body.light-mode .prayer-row.active .p-time {
  color: #006b38;
  text-shadow: none;
}
body.light-mode .prayer-row.next .p-time {
  color: #8a6800;
  text-shadow: none;
}

/* ══ PRAYER LABEL ══ */
body.light-mode .p-label {
  color: #3a3028;
}

/* ══ BADGES ══ */
body.light-mode .badge-active {
  background: rgba(0, 107, 56, 0.12);
  color: #006b38;
  border-color: rgba(0, 107, 56, 0.3);
}
body.light-mode .badge-next {
  background: rgba(138, 104, 0, 0.10);
  color: #8a6800;
  border-color: rgba(138, 104, 0, 0.28);
}

/* ══ JAMAAT TABLE ══ */
body.light-mode .jamaat-row {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 51, 170, 0.15);
}
body.light-mode .j-label {
  color: #8a6800;
}
body.light-mode .j-display {
  color: #0033aa;
  text-shadow: none;
}

/* ══ COUNTER NUMBER ══ */
body.light-mode .counter-num {
  color: #006b38;
  text-shadow: none;
}
body.light-mode .ring-bg {
  stroke: rgba(0, 0, 0, 0.08);
}
body.light-mode .ring-fill {
  stroke: #007a62;
  filter: none;
}

/* ══ TASBIH ARABIC TEXT ══ */
body.light-mode .tasbih-arabic {
  text-shadow: none;
}

/* ══ TAP BUTTON ══ */
body.light-mode .tap-btn {
  background: linear-gradient(135deg, rgba(0, 122, 98, 0.10), rgba(0, 100, 80, 0.04));
  border-color: rgba(0, 122, 98, 0.35);
  color: #007a62;
}
body.light-mode .tap-btn:hover {
  box-shadow: 0 2px 12px rgba(0, 122, 98, 0.14);
}

/* ══ HIJRI STRIP ══ */
body.light-mode .hijri-strip {
  color: #007a62;
}

/* ══ QIBLA COMPASS ══ */
body.light-mode .compass-outer {
  background: radial-gradient(circle, rgba(240, 237, 230, 0.98) 55%, rgba(138, 98, 0, 0.06) 100%);
  box-shadow:
    0 0 30px rgba(138, 98, 0, 0.15),
    inset 0 0 20px rgba(0, 0, 0, 0.06),
    0 0 0 8px rgba(138, 98, 0, 0.04),
    0 0 0 9px var(--border);
}

/* ══ NOTIFICATION DOT ══ */
body.light-mode .notif-dot {
  border-color: #f0ede6;
}

/* ══ TOGGLE SWITCH ══ */
body.light-mode .toggle-switch input:checked + .toggle-track {
  background: rgba(0, 122, 98, 0.15);
  border-color: #007a62;
}
body.light-mode .toggle-switch input:checked + .toggle-track::after {
  background: #007a62;
}

/* ══ SETTINGS DRAWER SELECT ══ */
body.light-mode .setting-select {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(150, 100, 30, 0.2);
}

/* ══ AUTH CARD TABS ══ */
body.light-mode .auth-tab.active {
  background: linear-gradient(135deg, rgba(138, 98, 0, 0.12), rgba(138, 98, 0, 0.04));
  color: #8a6200;
}

/* ══ PRESET BUTTONS ══ */
body.light-mode .preset-btn.sel {
  background: rgba(138, 98, 0, 0.08);
  border-color: #8a6200;
  color: #8a6200;
  box-shadow: none;
}

/* ══ DRAWER JAMAAT INPUT ══ */
body.light-mode .dj-label {
  color: #8a6800;
}

/* ══ NEXT PRAYER BANNER ══ */
body.light-mode .next-prayer-banner {
  background: linear-gradient(135deg, rgba(0, 122, 98, 0.07), rgba(0, 122, 98, 0.02));
}

/* ══ SCROLLBAR ══ */
body.light-mode::-webkit-scrollbar-thumb {
  background: rgba(138, 98, 0, 0.35);
}

/* ══ LOADING DOTS ══ */
body.light-mode .ldot {
  background: #8a6200;
}