/* ==========================================================================
   E-Tahfidz Pro — Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Amiri:wght@400;700&display=swap');

:root{
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857; --emerald-900:#064e3b;
  --gold-400:#fbbf24; --gold-500:#f59e0b; --gold-600:#d97706;
  --bg:#f6f8f7; --surface:#ffffff; --surface-2:#f1f5f3;
  --text:#1c2521; --text-dim:#6b7a74; --border:#e4e9e6;
  --shadow-sm:0 1px 3px rgba(16,24,20,.06); --shadow-md:0 8px 24px -8px rgba(16,24,20,.12); --shadow-lg:0 24px 48px -12px rgba(16,24,20,.18);
  --radius:1.25rem;
  color-scheme: light;
}
[data-theme="dark"]{
  --bg:#0d1512; --surface:#141d19; --surface-2:#1a2420;
  --text:#e8efec; --text-dim:#8fa199; --border:#26332d;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 8px 24px -8px rgba(0,0,0,.5); --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .3s ease, color .3s ease;
}
.font-arabic{font-family:'Amiri', serif;}

/* Scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--emerald-500);}

/* ---------- Utility surface classes (work with Tailwind alongside) ---------- */
.surface{background:var(--surface); border:1px solid var(--border); color:var(--text);}
.surface-2{background:var(--surface-2); border:1px solid var(--border);}
.text-dim{color:var(--text-dim) !important;}
.text-main{color:var(--text) !important;}
.border-theme{border-color:var(--border) !important;}
.bg-app{background:var(--bg) !important;}

/* ---------- Islamic geometric pattern background ---------- */
.pattern-bg{
  position:relative;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(16,185,129,.10) 0, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(245,158,11,.10) 0, transparent 45%);
}
.geo-pattern{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%2310b981' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M42 0 L84 42 L42 84 L0 42 Z'/%3E%3Ccircle cx='42' cy='42' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;
}

/* ---------- Card hover-lift ---------- */
.lift{ transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.lift:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---------- Glass ---------- */
.glass{
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:.75rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.75rem 1.25rem; border-radius:.9rem; transition:all .2s ease; cursor:pointer; border:none;
}
.btn-primary{ background:linear-gradient(135deg, var(--emerald-600), var(--emerald-500)); color:#fff; box-shadow:0 10px 25px -8px rgba(5,150,105,.55);}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(5,150,105,.65); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:var(--emerald-50); color:var(--emerald-700); border-color:var(--emerald-100); }
[data-theme="dark"] .btn-ghost:hover{ background:var(--surface); color:var(--emerald-500); }
.btn-danger{ background:var(--surface-2); color:#e11d48; border:1px solid var(--border);}
.btn-danger:hover{ background:#fff1f2; }

/* ---------- Inputs ---------- */
.field{
  width:100%; padding:.7rem 1rem; border-radius:.85rem; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:.825rem; font-weight:600;
  transition:all .2s ease;
}
.field:focus{ outline:none; border-color:var(--emerald-500); box-shadow:0 0 0 4px rgba(16,185,129,.15); }
.field::placeholder{color:var(--text-dim); font-weight:500;}
label.label{ display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-bottom:.35rem; }

/* ---------- Nav link ---------- */
.nav-link{
  display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; border-radius:.85rem;
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-dim); transition:all .2s ease; position:relative;
}
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{ background:linear-gradient(135deg, var(--emerald-600), var(--emerald-500)); color:#fff; box-shadow:0 8px 20px -6px rgba(5,150,105,.5); }
.nav-link .ico{ font-size:1rem; width:1.4rem; text-align:center; }

/* ---------- Badge ---------- */
.badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .6rem; border-radius:99px; }
.badge-mumtaz{ background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#fff; box-shadow:0 4px 10px -2px rgba(245,158,11,.5); }
.badge-jayyid-jiddan{ background:var(--emerald-100); color:var(--emerald-700); }
.badge-jayyid{ background:#fef9c3; color:#854d0e; }
.badge-maqbul{ background:#ffedd5; color:#9a3412; }

/* ---------- Animations ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.animate-in{ animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) both; }
.delay-1{animation-delay:.05s;} .delay-2{animation-delay:.1s;} .delay-3{animation-delay:.15s;} .delay-4{animation-delay:.2s;} .delay-5{animation-delay:.25s;}

@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.float{ animation:floaty 5s ease-in-out infinite; }

@keyframes shimmer{ 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
.shimmer-text{
  background:linear-gradient(90deg, var(--gold-500) 0%, var(--gold-400) 25%, #fff 50%, var(--gold-400) 75%, var(--gold-500) 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 3.5s linear infinite;
}

@keyframes pulseRing{ 0%{box-shadow:0 0 0 0 rgba(16,185,129,.45);} 70%{box-shadow:0 0 0 10px rgba(16,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} }
.pulse-ring{ animation:pulseRing 2.2s infinite; }

@keyframes spin-slow{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.spin-slow{ animation:spin-slow 18s linear infinite; }

/* Progress ring */
.progress-ring circle{ transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }

/* Skeleton loader */
@keyframes skeleton{ 0%{opacity:.5;} 50%{opacity:1;} 100%{opacity:.5;} }
.skeleton{ animation:skeleton 1.4s ease-in-out infinite; background:var(--surface-2); border-radius:.6rem; }

/* Toast */
.toast{
  position:fixed; top:1.25rem; right:1.25rem; z-index:100; min-width:280px; max-width:360px;
  padding:1rem 1.1rem; border-radius:1rem; box-shadow:var(--shadow-lg); font-size:.78rem; font-weight:700;
  display:flex; align-items:flex-start; gap:.6rem; animation:toastIn .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes toastIn{ from{opacity:0; transform:translateX(30px) scale(.95);} to{opacity:1; transform:translateX(0) scale(1);} }
.toast.success{ background:var(--emerald-600); color:#fff; }
.toast.error{ background:#e11d48; color:#fff; }

/* Login slideshow */
.slide-fade{ animation:slideFade 1s ease both; }
@keyframes slideFade{ from{opacity:0; transform:scale(1.03);} to{opacity:1; transform:scale(1);} }

.dots span{ width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.35); display:inline-block; transition:all .35s ease; }
.dots span.active{ width:22px; background:#fff; }

/* Print */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff !important; }
}