/* ═══════════════════════════════════════════════════════════════
   User Statistics — SHARED component
   Pages: /profile (own) + /user-profile.html (any other user)
   Same cards, same design; only the data changes by userId.
   Base design tokens (--surface-2, --gold, --sky-soft, ...) come
   from each page's own :root. This file only adds the component's
   rules + the category color tokens it needs.
   Card size is LOCKED: 14px padding / 40px icon / radius-md.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fajr: #D95A1B;
  --fajr-soft: rgba(217, 90, 27, 0.13);
  --shubha: #0E7490;
  --shubha-soft: rgba(14, 116, 144, 0.13);
  --bidaa: #BE185D;
  --bidaa-soft: rgba(190, 24, 93, 0.12);
  --adhkar: #0F766E;
  --adhkar-soft: rgba(15, 118, 110, 0.13);
  --hadith: #B43A5F;
  --hadith-soft: rgba(180, 58, 95, 0.13);
}
html[data-theme="dark"] {
  --fajr: #FF9E4F;
  --fajr-soft: rgba(255, 158, 79, 0.16);
  --shubha: #2BB0CC;
  --shubha-soft: rgba(43, 176, 204, 0.16);
  --bidaa: #F472B6;
  --bidaa-soft: rgba(244, 114, 182, 0.16);
  --adhkar: #2DD4BF;
  --adhkar-soft: rgba(45, 212, 191, 0.16);
  --hadith: #F98CA8;
  --hadith-soft: rgba(249, 140, 168, 0.16);
}

/* ─── Grid ─── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ─── Card ─── */
.stat-tile {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--sky-soft); }
.stat-tile-ico {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px;
  background: var(--sky-soft);
}
.stat-tile-txt { min-width: 0; }
.stat-tile-val {
  display: block;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; color: var(--ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-tile-lbl {
  display: block;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Category colors ─── */
.stat-tile--daily .stat-tile-ico { background: var(--red-soft); }
.stat-tile--daily .stat-tile-ico .stat-flame {
  width: 18px; height: 19px;
  color: #2563EB;
}
html[data-theme="dark"] .stat-tile--daily .stat-tile-ico .stat-flame { color: #60A5FA; }
.stat-tile--quran .stat-tile-ico { background: var(--green-soft); }
.stat-tile--fajr .stat-tile-ico { background: var(--fajr-soft); }
.stat-tile--books .stat-tile-ico { background: var(--navy-soft); }
.stat-tile--knowledge .stat-tile-ico { background: var(--purple-soft); }
.stat-tile--shubha .stat-tile-ico { background: var(--shubha-soft); }
.stat-tile--bidaa .stat-tile-ico { background: var(--bidaa-soft); }
.stat-tile--wered .stat-tile-ico { background: var(--sky-soft); }
.stat-tile--adhkar .stat-tile-ico { background: var(--adhkar-soft); }
.stat-tile--hadith .stat-tile-ico { background: var(--hadith-soft); }

/* ─── ⭐ MAIN stat — gold identity, same card size ─── */
.stat-tile--main {
  background: linear-gradient(150deg, var(--gold-soft), var(--surface-2) 72%);
  border-color: rgba(201, 163, 74, 0.35);
}
.stat-tile--main .stat-tile-ico {
  background: linear-gradient(145deg, var(--gold-2), var(--gold));
  box-shadow: 0 4px 14px -4px rgba(201, 163, 74, 0.55);
}
.stat-tile--main .stat-tile-val { color: var(--gold-ink); }
.stat-tile--main:hover { border-color: var(--gold); }
html[data-theme="dark"] .stat-tile--main { border-color: rgba(224, 188, 94, 0.35); }
html[data-theme="dark"] .stat-tile--main .stat-tile-val { color: var(--gold); }

/* ─── Responsive: desktop keeps the 2-col grid, roomier cards ─── */
@media (min-width: 960px) {
  .stats-grid { gap: 12px; }
  .stat-tile { padding: 16px; }
  .stat-tile-val { font-size: 22px; }
}