@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&family=Righteous&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  /* Match the body gradient so Safari's safe-area zones (top/bottom) are
     never left white when the address bar / home indicator show.
     Defaults to the dark base; switches to the light base below. */
  background: #0d1b2a;
  transition: background 0.5s ease;
}
/* Light mode: html base follows the light gradient's top color */
html:has(body:not(.dark)) { background: #dff0fb; }
body {
  width: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ══ ANIMATED GRADIENT KEYFRAMES ═══════════════════════ */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%, 100% 50%, 0 0;
  }
  50% {
    background-position: 100% 50%, 0% 50%, 0 0;
  }
  100% {
    background-position: 0% 50%, 100% 50%, 0 0;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* ══ LIGHT MODE ══════════════════════════════════════════ */
:root {
  --bg-body: linear-gradient(160deg, #dff0fb 0%, #d4f5f5 100%);
  --text-primary: #0d2b3e;
  --text-secondary: #4a7a96;
  --accent-from: #1a7abf;
  --accent-to: #0fbdbd;
  --accent-grad: linear-gradient(135deg, #1a7abf 0%, #0fbdbd 100%);
  --shadow: 0 8px 32px rgba(15, 100, 160, 0.15);
  --shadow-hover: 0 12px 40px rgba(15, 100, 160, 0.25);
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

/* ══ DARK MODE ═══════════════════════════════════════════ */
body.dark {
  --bg-body: linear-gradient(160deg, #0d1b2a 0%, #0a1f1f 100%);
  --text-primary: #d6eaf8;
  --text-secondary: #5fa8c8;
  --accent-from: #1a8fd1;
  --accent-to: #0fd4d4;
  --accent-grad: linear-gradient(135deg, #1a8fd1 0%, #0fd4d4 100%);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.55);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

/* ══ BASE ════════════════════════════════════════════════ */
body {
  background: var(--bg-body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  transition: background 0.5s ease, color 0.3s ease;
  padding: max(5rem, env(safe-area-inset-top, 5rem)) max(1rem, env(safe-area-inset-right, 1rem)) max(2rem, env(safe-area-inset-bottom, 2rem)) max(1rem, env(safe-area-inset-left, 1rem));
  position: relative;
}

body * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(26, 143, 209, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(15, 189, 189, 0.35) 0%, transparent 50%),
    radial-gradient(3px 3px at 20% 30%, white, transparent),
    radial-gradient(3px 3px at 60% 70%, white, transparent),
    radial-gradient(2px 2px at 50% 50%, white, transparent),
    radial-gradient(2px 2px at 80% 10%, white, transparent),
    radial-gradient(3px 3px at 90% 60%, white, transparent),
    radial-gradient(2px 2px at 33% 80%, white, transparent),
    radial-gradient(2px 2px at 15% 15%, white, transparent),
    radial-gradient(3px 3px at 70% 40%, white, transparent);
  background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: starsGlow 4s ease-in-out infinite, gradientShift 20s ease infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

body.dark::before {
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(26, 143, 209, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(15, 189, 189, 0.25) 0%, transparent 50%),
    radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 60% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 50% 50%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 80% 10%, rgba(255,255,255,0.6), transparent),
    radial-gradient(3px 3px at 90% 60%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 33% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 15% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(3px 3px at 70% 40%, rgba(255,255,255,0.8), transparent);
  background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: starsGlow 4s ease-in-out infinite, gradientShift 20s ease infinite;
}

@keyframes starsGlow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-top: 8vh;      /* moderate top offset */
}
/* ══ MOBILE RESPONSIVE — Index/Dashboard ═══════════════════
   Tightens spacing, scales typography, and keeps the header
   readable on narrow phone screens (~ 380px). */
@media (max-width: 600px) {
  /* Outer container — give the page some horizontal breathing room */
  .dashboard {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Header — stack vertically on phones, smaller logo */
  .dashboard-header {
    margin-bottom: 2rem;
    padding-top: 8px;
  }
  .header-content {
    flex-direction: column;
    gap: 6px;
  }
  .header-left {
    gap: 8px;
  }
  .header-right {
    align-items: center;
    margin-right: 0;
    margin-top: 4px;
  }
  .header-icon-svg {
    width: 36px;
    height: 36px;
    margin-top: 2px;
  }
  .logo-text {
    font-size: 38px !important;
    letter-spacing: 0;
  }
  .header-clock {
    font-size: 16px;
  }
  .header-subtitle {
    font-size: 12px;
  }

  /* User greeting — smaller text, less top margin */
  .user-greeting {
    font-size: 17px;
    margin-top: 0.8rem;
    padding: 0 8px;
  }

  /* Cards grid — keep 2 columns but tighter */
  .cards-grid {
    gap: 12px;
    margin-bottom: 2rem;
  }
  .dashboard-card {
    padding: 18px 14px;
    border-radius: 18px;
  }
}

/* Smaller phones (~ 360px or less) */
@media (max-width: 380px) {
  .logo-text {
    font-size: 34px !important;
  }
  .header-icon-svg {
    width: 32px;
    height: 32px;
  }
  .cards-grid {
    gap: 10px;
  }
  .dashboard-card {
    padding: 16px 12px;
  }
}

/* ══ THEME TOGGLE ═══════════════════════════════════════ */
.theme-toggle {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 20px));
  right: max(20px, env(safe-area-inset-right, 20px));
  width: 52px; height: 52px; border-radius: 50%;
  border: none; background: var(--accent-grad);
  box-shadow: 0 4px 16px rgba(15, 130, 190, 0.35);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 100; transition: transform 0.18s, box-shadow 0.2s;
}
.theme-toggle:hover { transform: scale(1.10); box-shadow: 0 6px 22px rgba(15,130,190,0.45); }
.theme-toggle:active { transform: scale(0.93); }
.theme-toggle svg { width: 24px; height: 24px; color: #fff; transition: opacity 0.15s, transform 0.25s; position: absolute; }
.theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-45deg) scale(0.6); }
body.dark .theme-toggle .icon-sun { opacity: 0; transform: rotate(45deg) scale(0.6); }
body.dark .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* ══ HEADER ═════════════════════════════════════════════ */
.dashboard-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-top: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-right: -10px;
  margin-top: 8px;
}

.header-content h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.header-icon-svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 10px rgba(15, 130, 190, 0.4));
  color: var(--accent-from);
  flex-shrink: 0;
  margin-top: 4px;
}

.logo-text {
  font-family: 'Tajawal', 'Inter', sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0;
  margin: 0;
  line-height: 1;
}

/* Personal greeting under the header (e.g. "مرحباً خالد!") */
.user-greeting {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.5rem 0 0 0;
  text-align: center;
  /* Subtle gradient accent on the username portion is added via the span */
}
.user-greeting .name {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
@media (max-width: 600px) {
  .user-greeting { font-size: 17px; margin-top: 1rem; }
}

.header-clock {
  font-size: 20px;
  color: var(--text-primary);
  font-weight: 600;
  direction: ltr;
  margin: 0;
}

.header-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0;
}

/* ══ CARDS GRID ═════════════════════════════════════════ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .cards-grid { 
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .cards-grid { gap: 24px; }
}

/* ══ GLASSMORPHISM CARD ═════════════════════════════════ */
.dashboard-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: var(--glass-shadow);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.4s ease;
}

.dashboard-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: shimmer 3s infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dashboard-card:hover::after {
  opacity: 1;
}

.dashboard-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover), 0 0 40px rgba(26, 143, 209, 0.2);
  border-color: rgba(26, 143, 209, 0.4);
}

body.dark .dashboard-card:hover {
  box-shadow: var(--shadow-hover), 0 0 40px rgba(26, 143, 209, 0.3);
}

.dashboard-card:active {
  transform: translateY(-4px);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 4px 14px rgba(15, 130, 190, 0.25);
}

.card-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

.card-icon svg[fill="currentColor"] {
  fill: #fff;
}

.card-icon svg[stroke="currentColor"] {
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}

.card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.card-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
}

.card-stats {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.stat-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--accent-grad);
  color: #fff;
}

.progress-ring {
  width: 32px;
  height: 32px;
  position: relative;
}

.progress-ring svg {
  transform: rotate(-90deg);
}

.progress-ring circle {
  fill: none;
  stroke-width: 3;
}

.progress-ring .progress-bg {
  stroke: rgba(255,255,255,0.2);
}

.progress-ring .progress-bar {
  stroke: #fff;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

/* ══ CARD COLOR ACCENTS (borders & hover) ═══════════════ */
.card-tasks::before { background: linear-gradient(135deg, #1a7abf 0%, #0fbdbd 100%); }
.card-tasks:hover { border-color: rgba(26, 122, 191, 0.5); }

.card-finance::before { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); }
.card-finance:hover { border-color: rgba(39, 174, 96, 0.5); }

.card-quran::before { background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%); }
.card-quran:hover { border-color: rgba(22, 160, 133, 0.5); }

.card-fitness::before { background: linear-gradient(135deg, #c4ff3d 0%, #7be67b 100%); }
.card-fitness:hover { border-color: rgba(196, 255, 61, 0.5); }

.card-books::before { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }
.card-books:hover { border-color: rgba(139, 92, 246, 0.5); }

.card-achievements::before { background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%); }
.card-achievements:hover { border-color: rgba(243, 156, 18, 0.5); }

/* ICON COLORS */
.card-finance .card-icon { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); }
.card-quran .card-icon { background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%); }
.card-fitness .card-icon { background: linear-gradient(135deg, #c4ff3d 0%, #7be67b 100%); }
.card-books .card-icon { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }
.card-achievements .card-icon { background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%); }

/* ══ FOOTER ═════════════════════════════════════════════ */
.dashboard-footer {
  text-align: center;
  padding: 2rem 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.dashboard-footer p { margin: 0; }
.dashboard-footer .footer-version {
  margin-top: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  opacity: 0.45;
}

/* ══ STARS BACKGROUND ═══════════════════════════════════ */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.stars::before,
.stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 50%;
  opacity: 0.3;
  animation: twinkle 3s infinite;
}

.stars::before {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}

.stars::after {
  top: 60%;
  right: 25%;
  animation-delay: 1.5s;
}

/* ══ DAILY QUOTE ════════════════════════════════════════ */
.daily-quote {
  text-align: center;
  margin: 2rem auto 1rem;
  max-width: 600px;
  padding: 1.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  border: 1px solid var(--glass-border);
}

.quote-text {
  font-size: 16px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}

/* ───────────────────────────────────────────────────────────
   Spinning logo — same gentle 20s sun rotation as every other
   page (login + all section pages), applied to the dashboard
   header icon. Respects reduced-motion preferences.
   ─────────────────────────────────────────────────────────── */
@keyframes tawazonLogoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.header-icon-svg {
  animation: tawazonLogoSpin 20s linear infinite;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .header-icon-svg { animation: none; }
}

/* Prevent iOS auto-zoom on input focus (font-size < 16px triggers it) */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}