/* App theme */
:root {
  --bg-grad-1: #0f172a;
  --bg-grad-2: #1e293b;
  --glass: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.18);
  --accent: #0d6efd;
  --accent-soft: rgba(13, 110, 253, 0.15);
  --text-high: #f8fafc;
  --text-low: #94a3b8;
}

html, body { height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--text-high);
}
[dir="rtl"] body, [dir="rtl"] .page-bg {
  font-family: "Tajawal", "Noto Kufi Arabic", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.page-bg {
  background: radial-gradient(1200px 600px at 10% 0%, #0b1220, transparent),
              radial-gradient(1200px 600px at 90% 0%, #0a1a34, transparent),
              linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2));
}

.glass { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); }

.icon-wrap { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid rgba(13,110,253,0.25); }
.icon-wrap i { font-size: 1.2rem; }

.time-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: transform .2s ease, border-color .2s ease; }
.time-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.2); }
.time-card.next { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Keep icon aligned even if there are extra lines */
.time-card .row-main { align-items: flex-start; }
/* compact footer for meta lines */
.card-foot { line-height: 1.2; }

.next-badge { background: rgba(13,110,253,0.08); border: 1px solid rgba(13,110,253,0.22); }

/* Now pill */
.now-pill { padding: .6rem .9rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem; }

/* LTR numbers helper (for RTL contexts) */
.ltr-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* Inline countdown under next prayer card */
.next-inline { padding: .25rem .5rem; border: 1px dashed rgba(255,255,255,0.25); border-radius: .5rem; display: inline-flex; align-items: center; gap: .35rem; }
[data-theme="light"] .next-inline { border-color: rgba(15,23,42,0.35); }

/* Utilities */
.text-secondary { color: var(--text-low) !important; }

/* Light theme overrides */
[data-theme="light"] {
  --bg-grad-1: #f8fafc;
  --bg-grad-2: #e2e8f0;
  --glass: rgba(255,255,255,0.85);
  --glass-border: rgba(15,23,42,0.08);
  --text-high: #0f172a;
  --text-low:  #475569;
}

[data-theme="light"] .page-bg {
  background:
    radial-gradient(1000px 500px at 10% 0%, #e0f2fe, transparent),
    radial-gradient(1000px 500px at 90% 0%, #ede9fe, transparent),
    linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2));
}

[data-theme="light"] .time-card { background: rgba(255,255,255,0.9); border: 1px solid rgba(15,23,42,0.08); }
[data-theme="light"] .now-pill { background: rgba(15,23,42,0.04); border: 1px solid rgba(15,23,42,0.08); }
[data-theme="light"] .icon-wrap { background: rgba(13,110,253,0.10); border-color: rgba(13,110,253,0.25); }
[data-theme="light"] .next-badge { background: rgba(13,110,253,0.10); border-color: rgba(13,110,253,0.25); }

/* Make outline buttons readable on light backgrounds */
[data-theme="light"] .btn-outline-light { color: var(--text-high) !important; border-color: rgba(15,23,42,0.25) !important; }
[data-theme="light"] .btn-outline-light:hover, [data-theme="light"] .btn-outline-light.active { background: rgba(15,23,42,0.06) !important; }

/* Theme switch spacing */
.theme-switch .form-check-input { cursor: pointer; }
.theme-switch .form-check-label { margin-inline-start: .4rem; display: inline-flex; align-items: center; }