/* Dark color scheme for mosque public page (orthogonal to layout theme) */

html:has(body[data-color-scheme="dark"]) {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(13, 114, 78, 0.28), transparent 60%),
    linear-gradient(180deg, #071510 0%, #0b1a14 45%, #0a1410 100%);
}

body[data-color-scheme="dark"] {
  color: #e7efe9;
  background: transparent;
}

body[data-color-scheme="dark"] .loading-overlay {
  background-color: #071510;
}

body[data-color-scheme="dark"] .loading-text {
  color: #a7b9b0;
}

body[data-color-scheme="dark"] .bismillah,
body[data-color-scheme="dark"] .bismillah-top {
  color: #e8f5ee;
}

body[data-color-scheme="dark"] .hero-title,
body[data-color-scheme="dark"] .mosque-name {
  color: #f3faf6;
}

body[data-color-scheme="dark"] .hero-location,
body[data-color-scheme="dark"] .hero-updated,
body[data-color-scheme="dark"] .hero-updated #last-updated-relative,
body[data-color-scheme="dark"] .hero-updated #last-updated,
body[data-color-scheme="dark"] .subtle,
body[data-color-scheme="dark"] .next-prayer,
body[data-color-scheme="dark"] .count-label,
body[data-color-scheme="dark"] .muted,
body[data-color-scheme="dark"] .muted-text,
body[data-color-scheme="dark"] .support-footnote {
  color: #c9dbd1;
}

body[data-color-scheme="dark"] .next-prayer strong {
  color: #5fd4a2;
}

body[data-color-scheme="dark"] .date-pill,
body[data-color-scheme="dark"] .tz-chip,
body[data-color-scheme="dark"] .live-chip {
  background: rgba(18, 42, 32, 0.9);
  border-color: rgba(95, 212, 162, 0.28);
  color: #d7e7de;
}

body[data-color-scheme="dark"] .live-dot {
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
}

body[data-color-scheme="dark"] .now-clock {
  color: #f8fffb;
}

body[data-color-scheme="dark"] .count-card {
  background: #122a20;
  color: #f3faf6;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(95, 212, 162, 0.16);
}

body[data-color-scheme="dark"] .prayer-card,
body[data-color-scheme="dark"] .ramadan-item,
body[data-color-scheme="dark"] .support-card,
body[data-color-scheme="dark"] .mosque-info-strip,
body[data-color-scheme="dark"] .day-progress {
  background: #122a20;
  color: #e7efe9;
  border: 1px solid rgba(95, 212, 162, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

body[data-color-scheme="dark"] .card.support-card {
  background: linear-gradient(180deg, #163328 0%, #122a20 100%);
  border: 1px solid rgba(95, 212, 162, 0.22);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
}

body[data-color-scheme="dark"] .support-card p,
body[data-color-scheme="dark"] .support-card .card-subtitle,
body[data-color-scheme="dark"] .support-card #calc-info,
body[data-color-scheme="dark"] .support-card #calc-info-text,
body[data-color-scheme="dark"] .support-card #calc-info-text .calc-line,
body[data-color-scheme="dark"] #calc-info-text .calc-line {
  color: #c9dbd1;
}

body[data-color-scheme="dark"] .support-card .support-note {
  background: rgba(95, 212, 162, 0.12);
  color: #d7e7de;
}

body[data-color-scheme="dark"] .support-card .support-note.warning {
  background: rgba(251, 191, 36, 0.14);
  border-left-color: #fbbf24;
  color: #fcd34d;
}

body[data-color-scheme="dark"] .support-actions .btn-secondary {
  background: #0b1f18;
  color: #e7efe9;
  border-color: rgba(95, 212, 162, 0.28);
}

body[data-color-scheme="dark"] .support-actions .btn-secondary:hover,
body[data-color-scheme="dark"] .support-actions .btn-secondary:active {
  background: #163328;
}

body[data-color-scheme="dark"] .support-actions .btn-primary {
  background: #0d724e;
  border-color: #149567;
  box-shadow: 0 8px 18px rgba(13, 114, 78, 0.35);
}

body[data-color-scheme="dark"] .support-card .ghost-btn {
  background: #0b1f18;
  color: #d7e7de;
  border: 1px solid rgba(95, 212, 162, 0.28);
}


body[data-color-scheme="dark"][data-theme="2"] .prayer-card {
  background: #122a20;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

body[data-color-scheme="dark"][data-theme="2"] .prayer-card .label,
body[data-color-scheme="dark"][data-theme="2"] .prayer-card::after {
  color: #d7e7de;
}

body[data-color-scheme="dark"][data-theme="2"] .prayer-card .time-display {
  color: #5fd4a2;
}

body[data-color-scheme="dark"][data-theme="2"] .prayer-card .sub {
  color: #8fa89c;
}

body[data-color-scheme="dark"] .prayer-card.active,
body[data-color-scheme="dark"][data-theme="2"] .prayer-card.active {
  background: #0d724e;
  border-color: #0d724e;
}

body[data-color-scheme="dark"] .prayer-card.active .label,
body[data-color-scheme="dark"] .prayer-card.active .sub,
body[data-color-scheme="dark"] .prayer-card.active .time-display,
body[data-color-scheme="dark"][data-theme="2"] .prayer-card.active .label,
body[data-color-scheme="dark"][data-theme="2"] .prayer-card.active .sub,
body[data-color-scheme="dark"][data-theme="2"] .prayer-card.active .time-display,
body[data-color-scheme="dark"][data-theme="2"] .prayer-card.active::after {
  color: #ffffff;
}

body[data-color-scheme="dark"][data-theme="2"] .prayer-card[data-prayer="suhoor"],
body[data-color-scheme="dark"][data-theme="2"] .prayer-card[data-prayer="iftar"] {
  background: linear-gradient(180deg, rgba(199, 135, 0, 0.18), rgba(18, 42, 32, 0.95));
  border-color: #c78700;
  color: #ffe8bf;
}

body[data-color-scheme="dark"][data-theme="2"] .prayer-card[data-prayer="suhoor"] .label,
body[data-color-scheme="dark"][data-theme="2"] .prayer-card[data-prayer="iftar"] .label {
  color: #ffd48a;
}

body[data-color-scheme="dark"] .prayer-card .time-input,
body[data-color-scheme="dark"][data-theme="2"] .prayer-card .time-input {
  background: #0b1f18;
  color: #f3faf6;
  border: 1px solid rgba(95, 212, 162, 0.35);
  border-radius: 8px;
  color-scheme: dark;
}

body[data-color-scheme="dark"] .support-card h2,
body[data-color-scheme="dark"] .card-header h2 {
  color: #f3faf6;
}

body[data-color-scheme="dark"] .schedule-controls-wrapper {
  border-bottom-color: rgba(95, 212, 162, 0.16) !important;
  color: #c9dbd1;
}

body[data-color-scheme="dark"] .schedule-controls-wrapper .card-subtitle,
body[data-color-scheme="dark"] .schedule-controls-wrapper #calc-info-text,
body[data-color-scheme="dark"] .schedule-controls-wrapper #calc-info-text .calc-line {
  color: #c9dbd1;
}

body[data-color-scheme="dark"] .ghost-btn,
body[data-color-scheme="dark"] .utility-menu-toggle,
body[data-color-scheme="dark"] .btn-secondary,
body[data-color-scheme="dark"] .info-link,
body[data-color-scheme="dark"] .exit-display-btn {
  background: rgba(18, 42, 32, 0.95);
  color: #d7e7de;
  border: 1px solid rgba(95, 212, 162, 0.28);
}

body[data-color-scheme="dark"] .utility-menu-toggle[aria-expanded="true"],
body[data-color-scheme="dark"] .ghost-btn:hover,
body[data-color-scheme="dark"] .utility-menu-toggle:hover {
  background: rgba(13, 114, 78, 0.35);
  border-color: rgba(95, 212, 162, 0.55);
}

body[data-color-scheme="dark"] .utility-menu-panel {
  background: rgba(18, 42, 32, 0.98);
  border-color: rgba(95, 212, 162, 0.22);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

body[data-color-scheme="dark"] .utility-menu-item {
  color: #e7efe9;
}

body[data-color-scheme="dark"] .utility-menu-item:hover,
body[data-color-scheme="dark"] .utility-menu-item[aria-pressed="true"] {
  background: rgba(13, 114, 78, 0.28);
}

body[data-color-scheme="dark"] .utility-menu-label strong {
  color: #5fd4a2;
}

body[data-color-scheme="dark"] .btn-primary {
  background: #0d724e;
  color: #fff;
  border: 1px solid #0d724e;
}

body[data-color-scheme="dark"] .info-label {
  color: #8fa89c;
}

body[data-color-scheme="dark"] .info-value {
  color: #e7efe9;
}

body[data-color-scheme="dark"] .day-progress-item {
  color: #8fa89c;
}

body[data-color-scheme="dark"] .day-progress-item.is-current {
  color: #5fd4a2;
  background: rgba(13, 114, 78, 0.22);
  border-color: rgba(95, 212, 162, 0.4);
}

body[data-color-scheme="dark"] .day-progress-item.is-past {
  color: #6f877c;
}

body[data-color-scheme="dark"] .modal {
  background: rgba(2, 8, 6, 0.72);
}

body[data-color-scheme="dark"] .modal-content {
  background: #122a20;
  color: #e7efe9;
  border: 1px solid rgba(95, 212, 162, 0.18);
}

body[data-color-scheme="dark"] .modal-content input {
  background: #0b1f18;
  color: #f3faf6;
  border-color: rgba(95, 212, 162, 0.3);
  color-scheme: dark;
}

body[data-color-scheme="dark"] .edit-banner {
  background: rgba(13, 114, 78, 0.25);
  color: #d7e7de;
}

body[data-color-scheme="dark"] .schedule-toolbar {
  background: rgba(7, 21, 16, 0.65);
  border-color: rgba(95, 212, 162, 0.18);
}

body[data-color-scheme="dark"] .toolbar-status {
  color: #d7e7de;
}

body[data-color-scheme="dark"] .support-note.warning {
  color: #fbbf24;
}