/*!
 * Hafdz member dashboard — front-end styles.
 *
 *   .hafdz-member            Outer wrapper. CSS vars override per-theme.
 *   .hafdz-streak            Streak chip (current + longest).
 *   .hafdz-card              One stat card. .hafdz-card--shalat carries the
 *                            5-prayer pill row.
 *   .hafdz-prayer            Tap target for one of fajr/dhuhr/asr/maghrib/isha.
 *   .hafdz-week              7-day mini-heatmap. Cells use intensity tiers
 *                            --0…--4.
 */

/* No outer max-width — the host page template (.wrap, the [hafdz_profile]
 * dashboard panel, etc.) owns the column width. Mirrors .hafdz-dua-wall and
 * .ziswaf-projects so every hafdz shortcode fills its parent. */
.hafdz-member { --hm-line: #e5e1d6; --hm-line-2: #efece4; --hm-ink: #1a1a1a; --hm-ink-2: #5a5a5a; --hm-ink-3: #888; --hm-bg: #fff; --hm-bg-soft: #faf9f5; --hm-accent: #2271b1; --hm-success: #1f6f3a; --hm-warning: #b08400; width: 100%; margin: 24px 0; font-family: inherit; color: var(--hm-ink); }

.hafdz-member__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hafdz-member__hello { margin: 0; font-size: 22px; font-weight: 600; }
.hafdz-member__date { margin: 0; font-size: 13px; color: var(--hm-ink-3); }

.hafdz-member__h3 { margin: 24px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hm-ink-2); }

/* ─── Streaks ─────────────────────────────────────────────────── */

.hafdz-member__streaks { display: flex; gap: 12px; margin-bottom: 8px; }
.hafdz-streak { flex: 1; padding: 14px 16px; border-radius: 12px; background: var(--hm-bg-soft); border: 1px solid var(--hm-line); display: flex; flex-direction: column; gap: 2px; }
.hafdz-streak__num { font-size: 28px; font-weight: 600; line-height: 1; }
.hafdz-streak__lbl { font-size: 13px; color: var(--hm-ink-2); }
.hafdz-streak__sub { font-size: 11px; color: var(--hm-ink-3); }

/* ─── Cards ───────────────────────────────────────────────────── */

.hafdz-card { padding: 14px 16px; border-radius: 12px; background: var(--hm-bg); border: 1px solid var(--hm-line); }
.hafdz-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hafdz-card__title { font-size: 13px; font-weight: 600; color: var(--hm-ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.hafdz-card__count { font-size: 28px; font-weight: 600; line-height: 1; color: var(--hm-ink); }
.hafdz-card__unit  { display: block; margin-top: 2px; font-size: 12px; color: var(--hm-ink-3); }

.hafdz-card--shalat { margin-bottom: 12px; }

.hafdz-prayers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
/* Sunnah column count is 6 — wraps to 3-up on narrow viewports. */
.hafdz-prayers--sunnah { grid-template-columns: repeat(6, 1fr); }
.hafdz-prayer { padding: 12px 6px; border-radius: 10px; border: 1px solid var(--hm-line); background: var(--hm-bg-soft); color: var(--hm-ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; line-height: 1.2; }
.hafdz-prayer:hover { border-color: var(--hm-accent); color: var(--hm-ink); }
.hafdz-prayer.is-done { background: #e3f5e8; border-color: #b6e1c2; color: var(--hm-success); }
.hafdz-prayer.is-done::before { content: '✓ '; }
.hafdz-prayer:disabled { opacity: 0.6; cursor: progress; }

/* Sunnah pills are visually softer than the fardh row — voluntary, so
   they shouldn't compete for attention with the obligatory five. */
.hafdz-prayer--sunnah { font-size: 12px; padding: 10px 4px; }
.hafdz-prayer--sunnah.is-done { background: #f0e9ff; border-color: #d6c6f5; color: #5b3fa3; }

/* Rawatib pill carries a sub-count (X/5) under its label. Stack vertically. */
.hafdz-prayer--rawatib { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.hafdz-prayer--rawatib .hafdz-prayer__sub { font-size: 10px; font-weight: 600; color: var(--hm-ink-3); letter-spacing: 0.04em; }
.hafdz-prayer--rawatib.is-done .hafdz-prayer__sub { color: inherit; opacity: 0.85; }
/* Defeat the .is-done::before "✓ " on the rawatib pill since the sub-count
   takes that visual space; the colour swap is signal enough. */
.hafdz-prayer--rawatib.is-done::before { content: ''; }

.hafdz-card--sunnah { margin-top: 12px; margin-bottom: 12px; }

/* ─── Rawatib popup ───────────────────────────────────────────── */

.hafdz-rawatib-popup { margin-top: 12px; padding: 14px; border-radius: 10px; background: #f7f4ff; border: 1px solid #d6c6f5; }
.hafdz-rawatib-popup[hidden] { display: none; }
.hafdz-rawatib-popup__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #5b3fa3; }
.hafdz-rawatib-popup__close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #5b3fa3; padding: 0 6px; }
.hafdz-rawatib-popup__close:hover { color: var(--hm-ink); }
.hafdz-rawatib-popup__heading { margin: 4px 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hm-ink-3); }
.hafdz-rawatib-popup__heading + .hafdz-rawatib-popup__grid { margin-bottom: 12px; }
.hafdz-rawatib-popup__heading + .hafdz-rawatib-popup__grid:last-child { margin-bottom: 0; }
.hafdz-rawatib-popup__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Mu'akkadah pills — purple, matches the parent rawatib pill. */
.hafdz-rawatib-occasion { padding: 10px 8px; font-size: 12px; font-weight: 600; }
.hafdz-rawatib-occasion.is-done { background: #f0e9ff; border-color: #d6c6f5; color: #5b3fa3; }

/* Ghair-mu'akkadah — softer amber palette so the lesser emphasis reads at a
   glance without making them look disabled. */
.hafdz-rawatib-occasion--extra { background: #fdf8e9; border-color: #e9dfb7; color: #6e591a; }
.hafdz-rawatib-occasion--extra:hover { border-color: #c9a93c; color: #4d3d10; }
.hafdz-rawatib-occasion--extra.is-done { background: #fcefb4; border-color: #d9b941; color: #4d3d10; }

@media (max-width: 600px) {
	.hafdz-rawatib-popup__grid { grid-template-columns: 1fr; }
}

.hafdz-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) {
	.hafdz-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.hafdz-stats-grid       { grid-template-columns: 1fr; }
	.hafdz-prayers          { grid-template-columns: repeat(5, 1fr); font-size: 11px; }
	.hafdz-prayers--sunnah  { grid-template-columns: repeat(3, 1fr); }
	.hafdz-prayer           { padding: 10px 2px; }
	.hafdz-prayer--sunnah   { font-size: 11px; padding: 9px 2px; }
}

/* ─── Period analytics ────────────────────────────────────────── */

.hafdz-member__period { margin-top: 24px; }
.hafdz-period__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hafdz-period__filters { display: inline-flex; gap: 4px; padding: 4px; background: var(--hm-bg-soft); border: 1px solid var(--hm-line); border-radius: 999px; }
.hafdz-period__filter { padding: 6px 12px; border: 0; background: transparent; color: var(--hm-ink-2); font-size: 12px; font-weight: 600; border-radius: 999px; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.hafdz-period__filter:hover { color: var(--hm-ink); }
.hafdz-period__filter.is-active { background: var(--hm-bg); color: var(--hm-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.hafdz-period__body { transition: opacity 200ms ease; }
.hafdz-period__body.is-loading { opacity: 0.5; pointer-events: none; }
.hafdz-period__error { padding: 16px; text-align: center; color: #a02525; background: #fce4e4; border: 1px solid #f3c4c4; border-radius: 10px; }

/* Per-type totals strip */
.hafdz-period__totals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
@media (max-width: 720px) { .hafdz-period__totals { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .hafdz-period__totals { grid-template-columns: repeat(2, 1fr); } }
.hafdz-period-stat { padding: 10px 12px; background: var(--hm-bg); border: 1px solid var(--hm-line); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.hafdz-period-stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hm-ink-3); font-weight: 600; }
.hafdz-period-stat__value { font-size: 22px; font-weight: 700; line-height: 1; color: var(--hm-ink); font-variant-numeric: tabular-nums; }
.hafdz-period-stat__unit  { font-size: 11px; color: var(--hm-ink-3); }

/* Heatmap shell + cell intensity tiers (renamed from .hafdz-week__cell--N) */
.hafdz-period__heatmap { margin-bottom: 16px; }
.hafdz-cell { aspect-ratio: 1 / 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--hm-line-2); color: var(--hm-ink-3); font-size: 11px; }
.hafdz-cell--blank { background: transparent; }
.hafdz-cell--0 { background: var(--hm-line-2); color: var(--hm-ink-3); }
.hafdz-cell--1 { background: #e9f0e9; color: #4a7d57; }
.hafdz-cell--2 { background: #d2e6d3; color: #2d6b3f; }
.hafdz-cell--3 { background: #bbd9bd; color: #1f6f3a; }
.hafdz-cell--4 { background: #94c598; color: #145128; }
.hafdz-cell__dow { font-weight: 600; font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; }
.hafdz-cell__num { font-weight: 600; font-size: 13px; }

.hafdz-week  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.hafdz-month { }
.hafdz-month__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.hafdz-month__dow span { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hm-ink-3); }
.hafdz-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hafdz-month__grid .hafdz-cell { aspect-ratio: 1 / 1; }
.hafdz-month__grid .hafdz-cell__num { font-size: 11px; }

.hafdz-year { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 600px) { .hafdz-year { grid-template-columns: repeat(3, 1fr); } }
.hafdz-year .hafdz-cell { aspect-ratio: 1.6 / 1; flex-direction: column; padding: 8px; }
.hafdz-year__month { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hafdz-year .hafdz-cell__num { font-size: 14px; }

/* Best-day callout — highlights the peak day in the current range. */
.hafdz-period__bestday { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; background: linear-gradient(90deg, var(--hm-bg-soft), transparent); border-left: 3px solid var(--hm-success, #1f6f3a); border-radius: 8px; font-size: 13px; }
.hafdz-period__bestday-label { font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; color: var(--hm-ink-3); }
.hafdz-period__bestday-day { font-weight: 700; color: var(--hm-ink); }
.hafdz-period__bestday-date { color: var(--hm-ink-2); }
.hafdz-period__bestday-score { margin-left: auto; padding: 2px 10px; background: #e3f5e8; color: #1f6f3a; border-radius: 999px; font-weight: 700; font-size: 12px; }
.hafdz-period__bestday-label--empty { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--hm-ink-3); }

/* Per-type consistency strip — replaces the old "By activity type" bar
   chart (totals only) with a daily timeseries per type, plus a "days
   active" metric so the operator reads consistency directly without
   eyeballing the curve. */
.hafdz-period__consistency { margin-bottom: 16px; }
.hafdz-period__consistency-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hm-ink-2); }
.hafdz-period__consistency-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--hm-ink-3); }
.hafdz-consistency-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 720px) { .hafdz-consistency-grid { grid-template-columns: 1fr; } }
.hafdz-consistency { padding: 12px 14px; background: var(--hm-bg); border: 1px solid var(--hm-line); border-radius: 10px; }
.hafdz-consistency__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.hafdz-consistency__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--hm-ink-3); }
.hafdz-consistency__total { font-size: 18px; font-weight: 700; color: var(--hm-ink); font-variant-numeric: tabular-nums; }
.hafdz-consistency__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--hm-ink-3); }
.hafdz-consistency__pct { padding: 1px 8px; border-radius: 999px; background: var(--hm-bg-soft); color: var(--hm-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Tier the consistency-rate pill so the colour codes the rating at a
   glance: strong ≥75 / mid ≥50 / weak >0 / empty. */
.hafdz-consistency__pct.is-empty  { background: var(--hm-bg-soft); color: var(--hm-ink-3); }
.hafdz-consistency__pct.is-weak   { background: #fdf3e0; color: #8a5a00; }
.hafdz-consistency__pct.is-mid    { background: #e3edf9; color: #1d4e80; }
.hafdz-consistency__pct.is-strong { background: #e3f5e8; color: #1f6f3a; }

.hafdz-spark__svg { width: 100%; height: 60px; display: block; }
.hafdz-spark__line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.hafdz-spark__area { stroke: none; opacity: 0.16; }
.hafdz-spark__dot  { stroke: none; }
/* Per-type colours — same palette family as before, scoped to the new strip. */
.hafdz-consistency[data-type="shalat"]        .hafdz-spark__line, .hafdz-consistency[data-type="shalat"]        .hafdz-spark__dot  { stroke: #2d6b3f; fill: #2d6b3f; }
.hafdz-consistency[data-type="shalat"]        .hafdz-spark__area { fill: #2d6b3f; }
.hafdz-consistency[data-type="shalat_sunnah"] .hafdz-spark__line, .hafdz-consistency[data-type="shalat_sunnah"] .hafdz-spark__dot  { stroke: #5b3fa3; fill: #5b3fa3; }
.hafdz-consistency[data-type="shalat_sunnah"] .hafdz-spark__area { fill: #5b3fa3; }
.hafdz-consistency[data-type="dhikr"]         .hafdz-spark__line, .hafdz-consistency[data-type="dhikr"]         .hafdz-spark__dot  { stroke: #1a5f64; fill: #1a5f64; }
.hafdz-consistency[data-type="dhikr"]         .hafdz-spark__area { fill: #1a5f64; }
.hafdz-consistency[data-type="quran_read"]    .hafdz-spark__line, .hafdz-consistency[data-type="quran_read"]    .hafdz-spark__dot  { stroke: #1d4e80; fill: #1d4e80; }
.hafdz-consistency[data-type="quran_read"]    .hafdz-spark__area { fill: #1d4e80; }
.hafdz-consistency[data-type="dua_support"]   .hafdz-spark__line, .hafdz-consistency[data-type="dua_support"]   .hafdz-spark__dot  { stroke: #b27300; fill: #b27300; }
.hafdz-consistency[data-type="dua_support"]   .hafdz-spark__area { fill: #b27300; }
.hafdz-consistency[data-type="infaq"]         .hafdz-spark__line, .hafdz-consistency[data-type="infaq"]         .hafdz-spark__dot  { stroke: #a02525; fill: #a02525; }
.hafdz-consistency[data-type="infaq"]         .hafdz-spark__area { fill: #a02525; }

/* Per-type donut breakdowns — Shalat (5 prayers), Sunnah (6 kinds), Dhikr (7 phrases). */
.hafdz-period__donuts { margin-bottom: 16px; }
.hafdz-period__donuts-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hm-ink-2); margin-bottom: 8px; }
/* auto-fit lets the grid go 2/3/4-up based on available width without
   media-query gymnastics; 220px keeps a single donut card readable. */
.hafdz-donut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hafdz-donut { padding: 14px; background: var(--hm-bg); border: 1px solid var(--hm-line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hafdz-donut__head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hm-ink-3); }
.hafdz-donut__svg  { width: 140px; height: 140px; }
.hafdz-donut__track { fill: none; stroke: var(--hm-line-2); stroke-width: 18; }
.hafdz-donut__seg   { fill: none; stroke-width: 18; transition: stroke 200ms ease; }
.hafdz-donut__total { fill: var(--hm-ink); font-size: 22px; font-weight: 700; }
.hafdz-donut__legend { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; }
.hafdz-donut__legend-item { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.hafdz-donut__swatch { width: 12px; height: 12px; border-radius: 3px; }
.hafdz-donut__name   { color: var(--hm-ink-2); }
.hafdz-donut__count  { font-weight: 700; color: var(--hm-ink); font-variant-numeric: tabular-nums; }
.hafdz-donut__legend-empty { font-size: 12px; color: var(--hm-ink-3); font-style: italic; text-align: center; }


/* ─── Guest state ─────────────────────────────────────────────── */

.hafdz-member--guest { padding: 32px; text-align: center; border: 1px dashed var(--hm-line); border-radius: 12px; color: var(--hm-ink-2); }