/* =============================================================
   SalatiPal — Settings NATIVE overhaul (2026-06-02)
   iOS  → grouped-inset list (hairline dividers, small-caps headers)
   Android → Material list (flatter, full-width, subtle elevation)
   Scoped to  body[data-sp-route="settings"]  and gated by
   body[data-sp-platform="ios|android|web"] (set by settings-enhance.js).
   Layered AFTER settings-polish.css so these win where they overlap.
   ============================================================= */

/* NOTE: the three card shapes the settings page renders are
   div[class*="rounded-lg"][class*="bg-card"], .elevated-card, and
   [class*="backdrop-blur"][class*="bg-white"]. (Previously this was stored in a
   :root custom property whose single-quoted value spanned two lines — a literal
   newline inside a CSS string is illegal and silently broke parsing of this
   ENTIRE file, so none of the native rules applied. Removed 2026-06-02.) */

/* ---------------- group header labels (both platforms) ---------------- */
body[data-sp-route="settings"] .sp-grp-label {
  font-family: var(--sp2-font, system-ui, -apple-system, sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a94a6;
  margin: 20px 6px 8px;
  padding: 0 10px;
}
html.dark body[data-sp-route="settings"] .sp-grp-label { color: #7c8699; }
/* first label shouldn't push a big gap under the page title */
body[data-sp-route="settings"] .sp-grp-label:first-of-type { margin-top: 8px; }

/* ---------------- tighten the "spaced out" layout (both) ---------------- */
/* The section cards sit in vertical stacks with generous gaps; pull them in
   so groups read as a continuous native list rather than floating panels. */
body[data-sp-route="settings"] [class*="space-y-6"] > * + *,
body[data-sp-route="settings"] [class*="space-y-8"] > * + * { margin-top: 14px !important; }
body[data-sp-route="settings"] [class*="gap-6"] { gap: 14px !important; }

/* =================================================================
   iOS  —  grouped inset list
   ================================================================= */
body[data-sp-route="settings"][data-sp-platform="ios"] div[class*="rounded-lg"][class*="bg-card"],
body[data-sp-route="settings"][data-sp-platform="ios"] .elevated-card,
body[data-sp-route="settings"][data-sp-platform="ios"] [class*="backdrop-blur"][class*="bg-white"] {
  border-radius: 12px !important;
  box-shadow: none !important;
  border: 0.5px solid rgba(60, 60, 67, 0.13) !important;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: hidden;
}
html.dark body[data-sp-route="settings"][data-sp-platform="ios"] div[class*="rounded-lg"][class*="bg-card"],
html.dark body[data-sp-route="settings"][data-sp-platform="ios"] .elevated-card,
html.dark body[data-sp-route="settings"][data-sp-platform="ios"] [class*="backdrop-blur"][class*="bg-white"] {
  background: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* iOS hairline dividers between rows inside a card. Direct flex/border-y rows
   that repeat get a top hairline (skip the first). Covers the common Tailwind
   row shapes used across the settings cards. */
body[data-sp-route="settings"][data-sp-platform="ios"] .elevated-card > div > .flex.items-center.justify-between + .flex.items-center.justify-between,
body[data-sp-route="settings"][data-sp-platform="ios"] [class*="backdrop-blur"] .flex.items-center.justify-between + .flex.items-center.justify-between {
  border-top: 0.5px solid rgba(60, 60, 67, 0.13);
  margin-top: 0;
  padding-top: 12px;
}
html.dark body[data-sp-route="settings"][data-sp-platform="ios"] .flex.items-center.justify-between + .flex.items-center.justify-between {
  border-top-color: rgba(255, 255, 255, 0.09);
}

/* iOS switch → System Green pill */
body[data-sp-route="settings"][data-sp-platform="ios"] button[role="switch"][data-state="checked"],
body[data-sp-route="settings"][data-sp-platform="ios"] button[role="switch"][aria-checked="true"] {
  background-color: #34c759 !important;
  border-color: #34c759 !important;
  box-shadow: none !important;
}
body[data-sp-route="settings"][data-sp-platform="ios"] button[role="switch"] {
  transform: none !important;
  border-radius: 999px !important;
}

/* iOS: NO extra chevron on selector rows. The bundle's shadcn SelectTrigger
   already renders its own down arrow (svg.lucide-chevron-down, dimmed in
   settings-polish.css), so the old rotated-border ">" ::after here was a SECOND
   chevron next to the down arrow (user: "keep only the down"). Removed.
   Belt-and-braces: explicitly suppress any ::after on these rows. */
body[data-sp-route="settings"][data-sp-platform="ios"] button[role="combobox"]::after,
body[data-sp-route="settings"][data-sp-platform="ios"] [data-radix-select-trigger]::after {
  content: none !important;
}

/* =================================================================
   Android  —  Material list
   ================================================================= */
body[data-sp-route="settings"][data-sp-platform="android"] div[class*="rounded-lg"][class*="bg-card"],
body[data-sp-route="settings"][data-sp-platform="android"] .elevated-card,
body[data-sp-route="settings"][data-sp-platform="android"] [class*="backdrop-blur"][class*="bg-white"] {
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  border: 0 !important;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.dark body[data-sp-route="settings"][data-sp-platform="android"] div[class*="rounded-lg"][class*="bg-card"],
html.dark body[data-sp-route="settings"][data-sp-platform="android"] .elevated-card,
html.dark body[data-sp-route="settings"][data-sp-platform="android"] [class*="backdrop-blur"][class*="bg-white"] {
  background: #1e1f22 !important;
}

/* Android full-width row dividers */
body[data-sp-route="settings"][data-sp-platform="android"] .flex.items-center.justify-between + .flex.items-center.justify-between {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 13px;
}
html.dark body[data-sp-route="settings"][data-sp-platform="android"] .flex.items-center.justify-between + .flex.items-center.justify-between {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Android switch → Material green track */
body[data-sp-route="settings"][data-sp-platform="android"] button[role="switch"][data-state="checked"],
body[data-sp-route="settings"][data-sp-platform="android"] button[role="switch"][aria-checked="true"] {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}
/* Android tap feedback (no true ripple in CSS, use a press highlight) */
body[data-sp-route="settings"][data-sp-platform="android"] button:active,
body[data-sp-route="settings"][data-sp-platform="android"] [data-radix-select-trigger]:active {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

/* Android group labels read slightly bolder + tinted (Material section style) */
body[data-sp-route="settings"][data-sp-platform="android"] .sp-grp-label {
  color: #10b981;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* =================================================================
   shared row polish — uniform heights + alignment across all sections
   ================================================================= */
body[data-sp-route="settings"][data-sp-platform="ios"] .flex.items-center.justify-between,
body[data-sp-route="settings"][data-sp-platform="android"] .flex.items-center.justify-between {
  min-height: 44px;
}

/* =================================================================
   2026-06-02 — Location: true iOS switch + native search field
   ================================================================= */

/* The auto-detect switch → real UISwitch proportions (51×31 track, 27px thumb
   that slides). We drive the thumb here so it animates regardless of the
   bundle's inline transform. */
body[data-sp-route="settings"][data-sp-platform="ios"] .sp-location-card button[role="switch"] {
  width: 51px !important;
  height: 31px !important;
  min-width: 51px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  transition: background-color .25s ease !important;
}
body[data-sp-route="settings"][data-sp-platform="ios"] .sp-location-card button[role="switch"] > span {
  width: 27px !important;
  height: 27px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.22), 0 0 1px rgba(0,0,0,.18) !important;
  transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
}
body[data-sp-route="settings"][data-sp-platform="ios"] .sp-location-card button[role="switch"]:not([data-state="checked"]):not([aria-checked="true"]) > span {
  transform: translateX(2px) !important;
}
body[data-sp-route="settings"][data-sp-platform="ios"] .sp-location-card button[role="switch"][data-state="checked"] > span,
body[data-sp-route="settings"][data-sp-platform="ios"] .sp-location-card button[role="switch"][aria-checked="true"] > span {
  transform: translateX(22px) !important;
}

/* Manual entry: the bundle's search field already has its own magnifier icon +
   focus ring, so we DON'T add a second icon (that caused the overlapping-glyph).
   Just round it a touch and keep its native feel. */
body[data-sp-route="settings"] .sp-location-card .sp-manual-input {
  border-radius: 12px !important;
  font-size: 16px !important;
  /* Clear the bundle's built-in left search icon so the placeholder/text never
     sits under it (the icon is absolute at ~left:16px, ~20px wide). */
  padding-left: 42px !important;
}

/* =================================================================
   2026-06-02 — Location section cleanup
   • coords removed (handled in settings-polish)
   • drop the redundant green "GPS Detected" card + duplicate "Manual Entry" label
   • the typeahead suggestions dropdown is position:absolute z-[9999]; the iOS
     grouped-card overflow:hidden was CLIPPING it (and freezing the field). Let
     the location card + its relative wrappers overflow so the list shows fully.
   ================================================================= */
body[data-sp-route="settings"] .sp-hide-gpsdetected,
body[data-sp-route="settings"] .sp-hide-manual-label { display: none !important; }

/* Country on the SAME line as the city: flow line 1 (city) + line 2 (country,
   with the coords hidden) inline, with a comma between. JS tags .sp-loc-l1/.l2;
   if React strips them it just falls back to two stacked lines (country kept). */
body[data-sp-route="settings"] .sp-location-card .sp-loc-l1,
body[data-sp-route="settings"] .sp-location-card .sp-loc-l2 {
  display: inline-flex !important;
  vertical-align: baseline;
}
body[data-sp-route="settings"] .sp-location-card .sp-loc-l2::before {
  content: ",";
  margin: 0 4px 0 1px;
}
/* Match the country's type to the city (was 16px/400/slate vs 11px/500/navy). */
body[data-sp-route="settings"] .sp-location-card .sp-loc-l2,
body[data-sp-route="settings"] .sp-location-card .sp-loc-l2 span,
body[data-sp-route="settings"] .sp-location-card .sp-loc-l2::before {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgb(26, 74, 122) !important;
}
html.dark body[data-sp-route="settings"] .sp-location-card .sp-loc-l2,
html.dark body[data-sp-route="settings"] .sp-location-card .sp-loc-l2 span,
html.dark body[data-sp-route="settings"] .sp-location-card .sp-loc-l2::before {
  color: #aebfd6 !important;
}

/* THE "green when off" fix: a leftover linear-gradient background-IMAGE was being
   painted over the switch's background-COLOR, so the track looked green in BOTH
   states (getComputedStyle.backgroundColor read grey, but the gradient image hid
   it). Force the track to a solid colour — grey off, System-Green on. */
body[data-sp-route="settings"] button[role="switch"] { background-image: none !important; }
body[data-sp-route="settings"] button[role="switch"][data-state="unchecked"],
body[data-sp-route="settings"] button[role="switch"][aria-checked="false"] {
  background-color: #e9e9ea !important; background-image: none !important;
}
body[data-sp-route="settings"] button[role="switch"][data-state="checked"],
body[data-sp-route="settings"] button[role="switch"][aria-checked="true"] {
  background-color: #34c759 !important; background-image: none !important;
}
html.dark body[data-sp-route="settings"] button[role="switch"][data-state="unchecked"],
html.dark body[data-sp-route="settings"] button[role="switch"][aria-checked="false"] {
  background-color: #39393d !important;
}

body[data-sp-route="settings"] .sp-location-card,
body[data-sp-route="settings"] .sp-location-card .relative,
body[data-sp-route="settings"] .sp-location-card [class*="overflow"] {
  overflow: visible !important;
}

/* 2026-06-03 — typeahead dropdown was INVISIBLE even though overflow was fixed.
   The bundle's list is position:absolute z-[9999], but z-index only competes
   WITHIN its own stacking context — the grouped iOS cards stacked BELOW the
   Location card paint in DOM order and covered it. Lift the whole Location card
   into its own stacking context above the following cards so the dropdown (and
   everything in the card) paints on top. Kept moderate (30) so it stays under
   any sticky header. The dropdown's own z-[9999] still wins inside the card. */
body[data-sp-route="settings"] .sp-location-card {
  position: relative !important;
  z-index: 30 !important;
}
/* Belt-and-braces: make sure the absolutely-positioned suggestions list itself
   is on top of the input/card chrome, and give it an opaque backdrop so any
   sliver of a card peeking through can't bleed into the text. */
body[data-sp-route="settings"] .sp-location-card .absolute.top-20.left-0.right-0 {
  z-index: 9999 !important;
}

/* 2026-06-06 — Settings top bar fix. The "Prayer Times Settings" header is a
   .modern-header banner that was position:static, so it scrolled away with the
   page and (on iOS overscroll) appeared to grow. Keep it SMALL and FIXED.
   position:sticky can't be used here because the bundle forces
   body{overflow-y:auto!important}, which makes <body> a non-scrolling
   scroll-container that traps sticky. position:fixed pins to the viewport
   regardless. Scoped to the settings route ONLY so the dashboard's next-prayer
   .modern-header banner is untouched. */
body[data-sp-route="settings"] .modern-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  /* compact bar height (+ status-bar safe area), instead of the big 1.5rem banner */
  padding: 10px 16px !important;
  padding-top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 8px) !important;
  /* read as a nav bar, not a rounded card */
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important;
}
/* Keep the title small and never let it scale up on scroll / iOS text-resize. */
body[data-sp-route="settings"] .modern-header h1 {
  font-size: 17px !important;
  line-height: 1.2 !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
body[data-sp-route="settings"] .modern-header p {
  font-size: 12px !important;
  line-height: 1.2 !important;
}
/* The header is now fixed (out of flow); offset the page content so the first
   card isn't hidden behind it. Height = safe-area + 8 (top pad) + 36 (back-button
   row) + 10 (bottom pad) ≈ safe-area + 54; +8 breathing room. */
body[data-sp-route="settings"] .sp-settings-page {
  padding-top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 62px) !important;
  overscroll-behavior-y: contain;
}