/*
 * AZKAR — REFERENCE MINIMAL THEME
 * Visual layer only. Existing React structure, buttons, cards, navigation and
 * handlers remain unchanged. The supplied day/night reference is softened into
 * low-detail atmospheric backgrounds with protected text contrast.
 */

:root {
  --azkar-paper: #f5eddf;
  --azkar-paper-ink: #403427;
  --azkar-gold: #a77d42;
  --azkar-ink: #0d182a;
  --azkar-moon: #dfc18a;
}

html[data-theme="light"] {
  --bg-1: transparent;
  --bg-2: #eee4d5;
  --bg-3: #e4d7c4;
  --card: rgba(255, 250, 241, 0.72);
  --card-2: rgba(255, 250, 241, 0.84);
  --border: rgba(119, 91, 48, 0.14);
  --text: #2d2923;
  --text-2: #776957;
  --accent: #9c753c;
  --accent-soft: rgba(156, 117, 60, 0.13);
  --nav-bg: rgba(252, 247, 238, 0.82);
  --shadow: rgba(73, 52, 25, 0.16);
}

html[data-theme="dark"] {
  --bg-1: transparent;
  --bg-2: #111b2d;
  --bg-3: #0a1220;
  --card: rgba(14, 26, 43, 0.72);
  --card-2: rgba(18, 32, 51, 0.84);
  --border: rgba(235, 221, 190, 0.13);
  --text: #f5f1e8;
  --text-2: #bdc5d1;
  --accent: #e0c28b;
  --accent-soft: rgba(224, 194, 139, 0.14);
  --nav-bg: rgba(8, 17, 31, 0.78);
  --shadow: rgba(0, 0, 0, 0.42);
}

body {
  font-family: "Manrope", Inter, system-ui, sans-serif;
  background: var(--bg-2);
}

/* Deliberately sparse — the original illustration is visible only as atmosphere. */
#root .app-bg {
  background-color: var(--bg-2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html[data-theme="light"] #root .app-bg {
  background-image:
    linear-gradient(180deg, rgba(246, 239, 224, 0.68) 0%, rgba(246, 239, 224, 0.43) 48%, rgba(217, 201, 177, 0.57) 100%),
    url("/backgrounds/azkar-minimal-day.png");
}

html[data-theme="dark"] #root .app-bg {
  background-image:
    linear-gradient(180deg, rgba(7, 16, 30, 0.54) 0%, rgba(9, 20, 37, 0.38) 50%, rgba(5, 13, 25, 0.62) 100%),
    url("/backgrounds/azkar-minimal-night.png");
}

#root .min-h-\[100dvh\][style*="background"] { background: transparent !important; }

/* Header stays functional but gains a quiet, floating surface. */
#root .flex.items-center.justify-between.px-5.pt-4 > div:first-child h1 {
  font-size: 25px !important;
  letter-spacing: -0.055em;
}

#root .flex.items-center.gap-2 > .card.h-10.w-10 {
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px -14px var(--shadow) !important;
  backdrop-filter: blur(12px) saturate(1.08);
}

/* Existing two home cards: same targets, only richer surfaces. */
#root .space-y-4 > button.card {
  min-height: 124px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 25px !important;
  box-shadow: 0 18px 38px -22px var(--shadow) !important;
  background-size: cover !important;
  background-position: center !important;
  isolation: isolate;
}

html[data-theme="light"] #root .space-y-4 > button.card:nth-child(1) {
  background-image:
    linear-gradient(100deg, rgba(173, 126, 50, 0.86), rgba(198, 158, 90, 0.64) 53%, rgba(245, 226, 188, 0.18)),
    url("/backgrounds/azkar-minimal-day.png") !important;
}

html[data-theme="light"] #root .space-y-4 > button.card:nth-child(2) {
  background-image:
    linear-gradient(100deg, rgba(50, 91, 133, 0.91), rgba(76, 121, 159, 0.67) 55%, rgba(234, 220, 194, 0.12)),
    url("/backgrounds/azkar-minimal-day.png") !important;
  background-position: center bottom !important;
}

html[data-theme="dark"] #root .space-y-4 > button.card:nth-child(1) {
  background-image:
    linear-gradient(105deg, rgba(115, 80, 25, 0.88), rgba(49, 40, 29, 0.72) 57%, rgba(10, 20, 36, 0.31)),
    url("/backgrounds/azkar-minimal-night.png") !important;
}

html[data-theme="dark"] #root .space-y-4 > button.card:nth-child(2) {
  background-image:
    linear-gradient(105deg, rgba(19, 55, 87, 0.9), rgba(14, 36, 63, 0.73) 57%, rgba(5, 17, 31, 0.31)),
    url("/backgrounds/azkar-minimal-night.png") !important;
}

#root .space-y-4 > button.card > div.relative.flex > div:first-child {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(11, 20, 28, 0.2) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

/* Preserve all cards across Quran, azkar and settings while unifying their material. */
#root .card:not(.space-y-4 > button.card) {
  border-color: var(--border);
  box-shadow: 0 13px 29px -20px var(--shadow);
}

#root .fixed.bottom-0 {
  margin: 0 10px 8px;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  background: var(--nav-bg) !important;
  box-shadow: 0 14px 30px -20px var(--shadow) !important;
  backdrop-filter: blur(18px) saturate(1.12);
}

#root button:focus-visible,
#root [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  #root .card { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1), background 220ms ease; }
  #root .card:active { transform: scale(0.975); }
}

@media (max-width: 390px) {
  #root .space-y-4 > button.card { min-height: 118px !important; }
  #root .fixed.bottom-0 { margin-left: 7px; margin-right: 7px; }
}