/* =============================================================
   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: chevron on tappable selector rows (combobox / radix select trigger) */
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: "";
  width: 7px; height: 7px;
  border-right: 2px solid #c4c8d0;
  border-bottom: 2px solid #c4c8d0;
  transform: rotate(-45deg);
  margin-left: 6px;
  flex: 0 0 auto;
}

/* =================================================================
   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;
}