:root[data-theme="dark"] {
  --parchment: #1a1a1a;
  --ivory: #262626;
  --charcoal: #e0dcd4;
  --ink: #e0dcd4;
  --white: #f0ece4;
  --black: #f0ece4;
  --slate: #b0b0b0;
  --mist: #909090;
  --border: rgba(184, 149, 90, .25);
  --border-lt: rgba(184, 149, 90, .15);
}

/* Re-darken sections that use --ink as a background color */
[data-theme="dark"] .prayer-bar,
[data-theme="dark"] .mission,
[data-theme="dark"] .imam,
[data-theme="dark"] .ev-top,
[data-theme="dark"] .contact-strip,
[data-theme="dark"] .contact-hero,
[data-theme="dark"] .form-section,
[data-theme="dark"] .form-submit,
[data-theme="dark"] .page-header,
[data-theme="dark"] .fp-content,
[data-theme="dark"] .page-tabs,
[data-theme="dark"] .tab-bar,
[data-theme="dark"] .live-row,
[data-theme="dark"] .jd-times,
[data-theme="dark"] .qpanel,
[data-theme="dark"] .give-hero,
[data-theme="dark"] .waiver-section,
[data-theme="dark"] .campaigns-section,
[data-theme="dark"] .leadership-section,
[data-theme="dark"] .hero,
[data-theme="dark"] .yearbar,
[data-theme="dark"] .status-card,
[data-theme="dark"] .stat-box,
[data-theme="dark"] .sbox,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .nm-card,
[data-theme="dark"] .fam-card,
[data-theme="dark"] .featured,
[data-theme="dark"] footer {
  background: #141414;
}

[data-theme="dark"] .on {
  background: #141414;
  border-color: #141414;
  color: #fff;
}

[data-theme="dark"] .freq-btn.on,
[data-theme="dark"] .amt-btn.on,
[data-theme="dark"] .pt-btn.on {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-dark {
  background: #141414 !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-dark:hover,
[data-theme="dark"] .mnb:hover {
  background: #141414;
}

[data-theme="dark"] .mt-block:nth-child(2),
[data-theme="dark"] .fund-card:nth-child(2) {
  background: #141414;
}

[data-theme="dark"] .members-table thead,
[data-theme="dark"] .pt-table thead {
  background: #141414;
}

[data-theme="dark"] .mfg select option {
  background: #141414;
}

[data-theme="dark"] #tab-today {
  background: #141414;
}

/* Auth pages: body uses --ink as background */
[data-theme="dark"] body {
  background: var(--parchment);
}

/* Form inputs: ensure readable text on dark backgrounds */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #262626;
  color: #e0dcd4;
  border-color: rgba(184, 149, 90, .25);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #7a7a7a;
}

/* Re-darken elements that use --white as a background color */
[data-theme="dark"] .members-table,
[data-theme="dark"] .pt-table,
[data-theme="dark"] .card,
[data-theme="dark"] .event-card,
[data-theme="dark"] .fund-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .vote-card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .sec-card,
[data-theme="dark"] .pcard,
[data-theme="dark"] .mbox,
[data-theme="dark"] .opp-card,
[data-theme="dark"] .cand-card,
[data-theme="dark"] .pending-item,
[data-theme="dark"] .result-item,
[data-theme="dark"] .detail-panel,
[data-theme="dark"] .contact-form-wrap,
[data-theme="dark"] .form-main,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .search-box,
[data-theme="dark"] .tl-content,
[data-theme="dark"] .res-opt {
  background: #262626;
  color: #e0dcd4;
}

[data-theme="dark"] .members-table td,
[data-theme="dark"] .pt-table td {
  color: #b0b0b0;
}

[data-theme="dark"] .td-name {
  color: #e0dcd4;
}

[data-theme="dark"] .filter-btn {
  background: #1a1a1a;
  color: #b0b0b0;
}

[data-theme="dark"] .ci-icon,
[data-theme="dark"] .dept-icon {
  background: #333;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — convert dark content boxes to light gold
   ══════════════════════════════════════════════════════════ */

/* ── Backgrounds: dark → light gold ── */
[data-theme="light"] .status-card,
[data-theme="light"] .stat-box,
[data-theme="light"] .sbox,
[data-theme="light"] .yearbar,
[data-theme="light"] .fam-card,
[data-theme="light"] .nm-card,
[data-theme="light"] .modal-box,
[data-theme="light"] .page-header,
[data-theme="light"] .page-tabs,
[data-theme="light"] .tab-bar,
[data-theme="light"] .fp-content,
[data-theme="light"] .give-hero,
[data-theme="light"] .waiver-section,
[data-theme="light"] .campaigns-section,
[data-theme="light"] .leadership-section,
[data-theme="light"] .featured {
  background: rgba(184, 149, 90, .06) !important;
  color: #1c1c1c;
}

/* ── Force dark text inside light-mode content boxes ── */
[data-theme="light"] .status-card,
[data-theme="light"] .status-card *,
[data-theme="light"] .stat-box,
[data-theme="light"] .stat-box *,
[data-theme="light"] .sbox,
[data-theme="light"] .sbox *,
[data-theme="light"] .yearbar,
[data-theme="light"] .yearbar *,
[data-theme="light"] .fam-card,
[data-theme="light"] .fam-card *,
[data-theme="light"] .nm-card,
[data-theme="light"] .nm-card *,
[data-theme="light"] .modal-box,
[data-theme="light"] .modal-box *,
[data-theme="light"] .page-header,
[data-theme="light"] .page-header *,
[data-theme="light"] .featured,
[data-theme="light"] .featured * {
  color: #1c1c1c;
}

/* ── Muted/secondary text ── */
[data-theme="light"] .sc-year,
[data-theme="light"] .cr-lbl,
[data-theme="light"] .prog-title,
[data-theme="light"] .prog-sub,
[data-theme="light"] .yearbar-lbl,
[data-theme="light"] .action-txt,
[data-theme="light"] .fam-sub,
[data-theme="light"] .fi-rel,
[data-theme="light"] .vp-row,
[data-theme="light"] .ql,
[data-theme="light"] .page-header p,
[data-theme="light"] .page-hdr p {
  color: #6a6a6a !important;
}

/* ── Gold accents stay gold ── */
[data-theme="light"] .fam-card h3,
[data-theme="light"] .action-title,
[data-theme="light"] .status-card .badge[style*="gold"],
[data-theme="light"] .sec-head h3 {
  color: var(--gold-dk) !important;
}

/* ── Decorative watermark — hide on light ── */
[data-theme="light"] .sc-bg {
  color: rgba(184, 149, 90, .06) !important;
}

/* ── Year bar buttons ── */
[data-theme="light"] .yr-btn {
  color: #4a4a4a !important;
  border-color: var(--border) !important;
  background: transparent !important;
}

[data-theme="light"] .yr-btn.on {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

/* ── Tabs ── */
[data-theme="light"] .tab {
  color: #6a6a6a !important;
}

[data-theme="light"] .tab.on {
  color: #1c1c1c !important;
  border-color: var(--gold) !important;
}

/* ── Progress bars ── */
[data-theme="light"] .prog-bar {
  background: rgba(184, 149, 90, .12) !important;
}

[data-theme="light"] .cr {
  background: rgba(184, 149, 90, .06) !important;
  border-color: var(--border) !important;
}

/* ── Family member rows ── */
[data-theme="light"] .fi {
  border-color: var(--border-lt) !important;
}

[data-theme="light"] .fi-name {
  color: #1c1c1c !important;
}

[data-theme="light"] .fs-u18 {
  background: rgba(184, 149, 90, .08) !important;
  color: #6a6a6a !important;
}

/* ── Buttons inside light boxes ── */
[data-theme="light"] .add-fam,
[data-theme="light"] .abtn.sec,
[data-theme="light"] .mcancel {
  color: #4a4a4a !important;
  border-color: var(--border) !important;
}

/* ── Modal inputs ── */
[data-theme="light"] .modal-box input,
[data-theme="light"] .modal-box select,
[data-theme="light"] .modal-box textarea,
[data-theme="light"] .mfg input,
[data-theme="light"] .mfg select {
  background: #fff !important;
  color: #1c1c1c !important;
  border-color: var(--border) !important;
}

/* ── Quick links ── */
[data-theme="light"] .ql {
  border-color: var(--border-lt) !important;
}

[data-theme="light"] .ql:hover {
  color: var(--gold-dk) !important;
}

/* ── Admin table headers ── */
[data-theme="light"] .members-table thead,
[data-theme="light"] .pt-table thead {
  background: rgba(184, 149, 90, .08) !important;
}

[data-theme="light"] .members-table thead th,
[data-theme="light"] .pt-table thead th {
  color: var(--gold-dk) !important;
}

/* ── Filter buttons (admin) ── */
[data-theme="light"] .filter-btn.on {
  background: var(--gold) !important;
  color: #fff !important;
  border-color: var(--gold) !important;
}

/* ── Sub-tabs ── */
[data-theme="light"] .sub-tab {
  color: #6a6a6a !important;
}

[data-theme="light"] .sub-tab.on {
  color: #1c1c1c !important;
  border-color: var(--gold) !important;
}

/* ── Stat box numbers (admin) ── */
[data-theme="light"] .sb-num {
  color: #1c1c1c !important;
}

[data-theme="light"] .sb-lbl {
  color: #6a6a6a !important;
}

/* ── Loading state ── */
[data-theme="light"] .loading p {
  color: var(--mist) !important;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Public pages: dark sections → light gold
   ══════════════════════════════════════════════════════════ */

/* ── Backgrounds ── */
[data-theme="light"] .prayer-bar,
[data-theme="light"] .mission,
[data-theme="light"] .imam,
[data-theme="light"] .ev-top,
[data-theme="light"] .contact-strip,
[data-theme="light"] .contact-hero,
[data-theme="light"] .form-section,
[data-theme="light"] .live-row,
[data-theme="light"] .jd-times,
[data-theme="light"] .qpanel,
[data-theme="light"] #tab-today,
[data-theme="light"] .event-card.featured,
[data-theme="light"] .plan-card.featured,
[data-theme="light"] .fund-card:nth-child(2),
[data-theme="light"] .mt-block:nth-child(2) {
  background: rgba(184, 149, 90, .06) !important;
  color: #1c1c1c;
}

/* ── Force dark text in these sections ── */
[data-theme="light"] .prayer-bar *,
[data-theme="light"] .mission *,
[data-theme="light"] .imam-body *,
[data-theme="light"] .ev-top *,
[data-theme="light"] .contact-strip *,
[data-theme="light"] .contact-hero *,
[data-theme="light"] .form-section *,
[data-theme="light"] .live-row *,
[data-theme="light"] .jd-times *,
[data-theme="light"] .qpanel *,
[data-theme="light"] #tab-today *,
[data-theme="light"] .event-card.featured *,
[data-theme="light"] .plan-card.featured *,
[data-theme="light"] .fund-card:nth-child(2) *,
[data-theme="light"] .mt-block:nth-child(2) * {
  color: #1c1c1c;
}

/* ── Prayer bar ── */
[data-theme="light"] .pb-name {
  color: #4a4a4a !important;
}

[data-theme="light"] .pb-adhan {
  color: #1c1c1c !important;
}

[data-theme="light"] .pb-iqama {
  color: #6a6a6a !important;
}

[data-theme="light"] .pb-label-txt {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .pb-loading span {
  color: var(--mist) !important;
}

[data-theme="light"] .pb-dot {
  background: var(--gold) !important;
}

[data-theme="light"] .pb-prayer.pb-active::after {
  background: var(--gold) !important;
}

/* ── Mission section ── */
[data-theme="light"] .mission-quote {
  color: #1c1c1c !important;
}

[data-theme="light"] .mission-ref {
  color: #6a6a6a !important;
}

[data-theme="light"] .mission-bg-txt {
  color: rgba(184, 149, 90, .06) !important;
}

/* ── Imam section ── */
[data-theme="light"] .imam-grad {
  background: linear-gradient(to right, transparent 40%, rgba(184, 149, 90, .06) 100%) !important;
}

[data-theme="light"] .imam-name {
  color: #1c1c1c !important;
}

[data-theme="light"] .imam-role {
  color: var(--gold-dk) !important;
}

/* ── Event cards (featured) ── */
[data-theme="light"] .ev-type {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .ev-d,
[data-theme="light"] .ev-m {
  color: #1c1c1c !important;
}

/* ── Contact strip ── */
[data-theme="light"] .contact-strip a,
[data-theme="light"] .contact-strip span {
  color: #1c1c1c !important;
}

/* ── Contact hero ── */
[data-theme="light"] .contact-hero h1,
[data-theme="light"] .contact-hero h2 {
  color: #1c1c1c !important;
}

[data-theme="light"] .contact-hero p {
  color: #4a4a4a !important;
}

/* ── Stat numbers on homepage ── */
[data-theme="light"] .stat-n {
  color: #1c1c1c !important;
}

[data-theme="light"] .stat-l {
  color: #6a6a6a !important;
}

/* ── Prayer times page ── */
[data-theme="light"] .live-label,
[data-theme="light"] .live-time {
  color: #1c1c1c !important;
}

[data-theme="light"] .jd-times h3 {
  color: var(--gold-dk) !important;
}

/* ── Donate page: selected buttons ── */
[data-theme="light"] .freq-btn.on,
[data-theme="light"] .amt-btn.on,
[data-theme="light"] .pt-btn.on {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

/* ── Membership page: waiver + form sections ── */
[data-theme="light"] .waiver-section *,
[data-theme="light"] .campaigns-section *,
[data-theme="light"] .leadership-section * {
  color: #1c1c1c;
}

[data-theme="light"] .form-submit {
  background: var(--gold) !important;
  color: #fff !important;
}

/* ── Button hover states ── */
[data-theme="light"] .btn-dark:hover,
[data-theme="light"] .mnb:hover {
  background: var(--gold) !important;
  color: #fff !important;
  border-color: var(--gold) !important;
}

/* ── Hero sections: light overlay on photo, dark text ── */
[data-theme="light"] .hero-bg {
  background: linear-gradient(to bottom,
    rgba(250, 247, 242, .55) 0%,
    rgba(250, 247, 242, .75) 55%,
    rgba(250, 247, 242, .95) 100%),
    url('../images/masjid-aerial.jpg') center/cover no-repeat !important;
}

[data-theme="light"] .hero-h1 {
  color: #1c1c1c !important;
}

[data-theme="light"] .hero-h1 em {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .hero-eyebrow span {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .hero-bism {
  color: rgba(184, 149, 90, .5) !important;
}

[data-theme="light"] .hero-line {
  background: var(--gold-dk) !important;
}

[data-theme="light"] .btn-gold {
  background: var(--gold) !important;
  color: #fff !important;
}

[data-theme="light"] .btn-ghost {
  border-color: #1c1c1c !important;
  color: #1c1c1c !important;
}

[data-theme="light"] .btn-ghost:hover {
  border-color: var(--gold) !important;
  color: var(--gold-dk) !important;
}

/* ── Donate hero: same treatment ── */
[data-theme="light"] .give-hero {
  background: rgba(184, 149, 90, .06) !important;
}

[data-theme="light"] .give-hero *,
[data-theme="light"] .give-hero h1 {
  color: #1c1c1c !important;
}

[data-theme="light"] .give-hero h1 em {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .gh-arabic {
  color: rgba(184, 149, 90, .06) !important;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Events page
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .hero {
  background: rgba(184, 149, 90, .06) !important;
}

[data-theme="light"] .hero *,
[data-theme="light"] .hero h1,
[data-theme="light"] .hero p {
  color: #1c1c1c !important;
}

[data-theme="light"] .hero h1 em {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .hero p {
  color: #4a4a4a !important;
}

/* Featured event card */
[data-theme="light"] .event-card.featured {
  background: rgba(184, 149, 90, .08) !important;
}

[data-theme="light"] .event-card.featured .ev-title,
[data-theme="light"] .event-card.featured .ev-desc {
  color: #1c1c1c !important;
}

[data-theme="light"] .event-card.featured .ev-cat {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .event-card.featured .ev-meta span {
  color: #6a6a6a !important;
}

[data-theme="light"] .event-card.featured .ev-date {
  background: rgba(184, 149, 90, .15) !important;
}

[data-theme="light"] .event-card.featured .ev-date-day {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .event-card.featured .ev-date-mon {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .event-card.featured .rsvp-badge {
  color: #4a4a4a !important;
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Programs page
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .fp-content {
  background: rgba(184, 149, 90, .06) !important;
}

[data-theme="light"] .fp-content h2 {
  color: #1c1c1c !important;
}

[data-theme="light"] .fp-content h2 em {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .fp-content p {
  color: #4a4a4a !important;
}

[data-theme="light"] .fp-meta-item {
  background: rgba(184, 149, 90, .04) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .fp-meta-item .fpm-label {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .fp-meta-item .fpm-val {
  color: #1c1c1c !important;
}

[data-theme="light"] .page-header-arabic {
  color: rgba(184, 149, 90, .08) !important;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Fix featured card text contrast
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .event-card.featured {
  background: #262626 !important;
}

[data-theme="dark"] .event-card.featured .ev-title {
  color: #fff !important;
}

[data-theme="dark"] .event-card.featured .ev-meta span {
  color: #909090 !important;
}

[data-theme="dark"] .event-card.featured .ev-desc {
  color: #b0b0b0 !important;
}

[data-theme="dark"] .event-card.featured .ev-cat {
  color: var(--gold-lt) !important;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Membership plan cards
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .plan-card.featured {
  background: rgba(184, 149, 90, .08) !important;
  border-color: var(--gold) !important;
}

[data-theme="light"] .plan-card.featured .plan-name,
[data-theme="light"] .plan-card.featured .plan-price {
  color: #1c1c1c !important;
}

[data-theme="light"] .plan-card.featured .plan-period {
  color: #6a6a6a !important;
}

[data-theme="light"] .plan-card.featured .plan-save {
  background: rgba(184, 149, 90, .12) !important;
  color: var(--gold-dk) !important;
}

[data-theme="light"] .plan-card.featured .plan-divider {
  background: var(--border) !important;
}

[data-theme="light"] .plan-card.featured li {
  color: #1c1c1c !important;
}

[data-theme="light"] .plan-card.featured .plan-label {
  color: var(--gold-dk) !important;
}

/* Waiver card */
[data-theme="light"] .plan-card.waiver {
  background: rgba(26, 61, 79, .06) !important;
  border-color: rgba(26, 61, 79, .2) !important;
}

[data-theme="light"] .plan-card.waiver .plan-name {
  color: #1c1c1c !important;
}

[data-theme="light"] .plan-card.waiver .plan-price {
  color: var(--teal) !important;
}

[data-theme="light"] .plan-card.waiver .plan-period {
  color: #6a6a6a !important;
}

[data-theme="light"] .plan-card.waiver .plan-label {
  color: var(--teal) !important;
}

[data-theme="light"] .plan-card.waiver .plan-save {
  background: rgba(26, 61, 79, .08) !important;
  color: var(--teal) !important;
}

[data-theme="light"] .plan-card.waiver li {
  color: #1c1c1c !important;
}

[data-theme="light"] .plan-card.waiver .plan-divider {
  background: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Programs: Nur Academy (teal section)
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .nur-content {
  background: rgba(26, 61, 79, .06) !important;
}

[data-theme="light"] .nur-content h2 {
  color: #1c1c1c !important;
}

[data-theme="light"] .nur-content h2 em {
  color: var(--gold-dk) !important;
}

[data-theme="light"] .nur-content p {
  color: #4a4a4a !important;
}

[data-theme="light"] .nur-pillar {
  background: rgba(26, 61, 79, .04) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .nur-pillar h4 {
  color: var(--teal) !important;
}

[data-theme="light"] .nur-pillar p {
  color: #4a4a4a !important;
}

[data-theme="light"] .nur-image-overlay {
  background: linear-gradient(to right, transparent 40%, rgba(250, 247, 242, .95) 100%) !important;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Fix plan card text contrast
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .plan-card.featured .plan-name {
  color: #fff !important;
}

[data-theme="dark"] .plan-card.featured .plan-period {
  color: #909090 !important;
}

[data-theme="dark"] .plan-card.featured li {
  color: #b0b0b0 !important;
}

[data-theme="dark"] .plan-card.waiver .plan-name {
  color: #fff !important;
}

[data-theme="dark"] .plan-card.waiver li {
  color: rgba(255, 255, 255, .7) !important;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .7);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 0;
  font-family: inherit;
}

.theme-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
}