/* Shared theme overrides for UGO | MARKET.
   Applied site-wide via a class on <html> ("theme-daylight" / "theme-oled")
   set by js/theme-loader.js from the "ugo-theme" value settings.html saves
   to localStorage. Kept separate from each page's own inline Tailwind
   config so switching themes never requires touching the static color
   palette every page already ships. Only neutral surface/text/border tones
   are repainted here — brand accent colors (primary/secondary/tertiary/
   error containers) are intentionally left as-is in every theme, matching
   the original design on settings.html.

   Rules use [class*="..."] attribute selectors instead of plain class
   selectors so they also catch Tailwind's opacity-modifier variants
   (e.g. "bg-surface-container-low/95"), which are distinct generated
   classes a plain ".bg-surface-container-low" selector would not match.
   Because several token names are substrings of a more specific one
   (surface-container-low/-lowest, surface-container-high/-highest,
   outline/outline-variant, text-on-surface/-variant), the broader rule for
   each pair MUST come first and the more specific one after, so the later,
   equally-specific rule wins the cascade. Do not reorder without keeping
   that in mind. */

/* ---------- OLED True Black ---------- */
html.theme-oled,
html.theme-oled body {
  background-color: #000000 !important;
  color: #f3ede7 !important;
}
html.theme-oled header,
html.theme-oled main,
html.theme-oled [class*="bg-surface"] {
  background-color: #000000 !important;
}
html.theme-oled [class*="bg-surface-bright"] { background-color: #111111 !important; }
html.theme-oled [class*="bg-surface-variant"] { background-color: #111111 !important; }
html.theme-oled [class*="bg-surface-container"] { background-color: #0a0a0a !important; }
html.theme-oled [class*="bg-surface-container-low"] { background-color: #0a0a0a !important; }
html.theme-oled [class*="bg-surface-container-lowest"] { background-color: #000000 !important; }
html.theme-oled [class*="bg-surface-container-high"] { background-color: #111111 !important; }
html.theme-oled [class*="bg-surface-container-highest"] { background-color: #161616 !important; }
html.theme-oled nav {
  background-color: rgba(0, 0, 0, 0.95) !important;
}
html.theme-oled [class*="border-surface-container"],
html.theme-oled [class*="border-outline"] {
  border-color: #1a1a1a !important;
}

/* Gradient-stop utilities (from-X/via-X/to-X, e.g. the vault-assets card's
   "bg-gradient-to-br from-surface-container-high via-surface-container
   to-surface-container-lowest") never go through background-color at all —
   Tailwind renders them as --tw-gradient-from/-via/-to custom properties
   that feed a background-image. The [class*="bg-surface-..."] rules above
   never touch these, so without this block every gradient card on the
   site stays stuck in its dark-mode colors regardless of theme.

   Overriding the three leaf custom properties looked like it should work
   (var() resolves against each property's final cascaded value, not one
   frozen when the utility class's own rule was defined) and it does for
   from-X/to-X — but Tailwind's via-X utility bakes its color as a literal
   straight into --tw-gradient-stops instead of indirecting through
   --tw-gradient-via, so overriding the leaf var alone silently fails to
   move the middle stop (confirmed via computed-style inspection: from/to
   picked up the override, via stayed on its original dark-mode hex).
   Simplest reliable fix: drop the gradient image entirely for these
   elements and give them one flat themed background instead — also reads
   cleaner on a light surface than a reconstructed 3-stop gradient would. */
html.theme-oled [class*="from-surface-container"] {
  background-image: none !important;
  background-color: #0a0a0a !important;
}

/* ---------- Daylight (Light) ---------- */
html.theme-daylight,
html.theme-daylight body {
  background-color: #fdfaf8 !important;
  color: #1f1b18 !important;
}
html.theme-daylight header {
  background-color: rgba(253, 250, 248, 0.9) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
html.theme-daylight nav {
  background-color: rgba(244, 238, 233, 0.95) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

/* The white UGO wordmark disappears against this theme's light header/nav.
   Swap in the black variant every page already ships at
   assets/ugo-logo-black.png. content:url() on an <img> is supported by all
   modern browsers and only affects rendered <img> tags — it can't and
   doesn't touch the unrelated <link rel="apple-touch-icon">, which stays
   on the white mark for the home-screen icon in every theme. Path is
   relative to this stylesheet (market/css/), hence the "../". */
html.theme-daylight img[src*="ugo-logo-white.png"] {
  content: url("../assets/ugo-logo-black.png");
}

/* Same problem, same fix, for the "no real photo" fallback image used
   across 14 pages (card/bid/outbid/checkout/activity/my-bids/my-orders/
   my-listings/live-room/index + 4 admin screens): it's a light logo mark
   at ~50% alpha, invisible against this theme's white/near-white card
   backgrounds (bg-surface-container-lowest renders #ffffff here). Verified
   live on index.html's Live Spotlight card — the fallback image was present
   in the DOM and loaded (naturalWidth/height > 0) but visually blank. */
html.theme-daylight img[src*="ugo_logo_placehoder_white.png"] {
  content: url("../assets/ugo_logo_placehoder_black.png");
}

html.theme-daylight [class*="text-on-surface"] { color: #1f1b18 !important; }
html.theme-daylight [class*="text-on-surface-variant"] { color: #71665f !important; }
html.theme-daylight [class*="text-outline"] { color: #6e6054 !important; }
html.theme-daylight [class*="text-outline-variant"] { color: #8c7e70 !important; }

html.theme-daylight main,
html.theme-daylight [class*="bg-surface"] {
  background-color: #fdfaf8 !important;
}
html.theme-daylight [class*="bg-surface-bright"] { background-color: #ffffff !important; }
html.theme-daylight [class*="bg-surface-variant"] { background-color: #ebe3dc !important; }
html.theme-daylight [class*="bg-surface-container"] { background-color: #ebe3dc !important; }
html.theme-daylight [class*="bg-surface-container-low"] {
  background-color: #f4eee9 !important;
  box-shadow: 0 4px 12px rgba(44, 30, 20, 0.05);
}
html.theme-daylight [class*="bg-surface-container-lowest"] {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.06);
}
html.theme-daylight [class*="bg-surface-container-high"] { background-color: #e5dcd4 !important; }
html.theme-daylight [class*="bg-surface-container-highest"] { background-color: #dcd1c7 !important; }

html.theme-daylight [class*="border-surface-container"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html.theme-daylight [class*="border-outline"] {
  border-color: rgba(0, 0, 0, 0.15) !important;
}
html.theme-daylight [class*="border-outline-variant"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Gradient-stop utilities (from-X/via-X/to-X) — see the matching comment in
   the OLED block above for why this drops the gradient image rather than
   trying to override its three stop colors individually. Every gradient
   card on the site that uses a surface-container stop always carries a
   from-surface-container* class (verified: none exist with only a via-/to-
   class and no matching from-), so one catch-all selector is enough. */
html.theme-daylight [class*="from-surface-container"] {
  background-image: none !important;
  background-color: #f4eee9 !important;
}

/* Accent text colors (primary/secondary/tertiary/error, including their
   -container/-fixed/-fixed-dim variants) are tuned for dark backgrounds —
   e.g. text-primary is #ffb4a2, a pale salmon that measures ~1.1:1 contrast
   against this theme's light surfaces (WCAG AA needs 4.5:1 for text).
   Swapped to darker members of the same hue family that already exist in
   every page's own palette (inverse-primary, secondary-container) or a
   hand-picked dark green for tertiary, since tertiary-container itself
   only reaches ~3:1.

   No exclusion is needed for the paired "on-primary"/"on-primary-container"
   etc. tokens (the literal substring "text-primary" never occurs inside
   "text-on-primary...", since "-on-" sits between "text-" and the color
   name, so [class*=] can't match it).

   text-X itself is also sometimes used directly as a badge/chip's own
   readable-on-dark color, paired with that same family's -container
   background (e.g. "bg-error-container text-error"). Whether that pairing
   should be LEFT alone (original light color, already correct) or STILL
   darkened depends on how dark the container actually renders once its
   own opacity is taken into account — verified by blending each family's
   -container hex against this theme's page/card backgrounds at every
   opacity actually used in the codebase:
     - primary:   text-primary on bg-primary-container is only ~1.85:1
                  contrast even at 100% opacity (e17053 isn't dark enough
                  for ffb4a2 to read against it) — ALWAYS darken.
     - tertiary:  same story, ~1.87:1 at 100% (3ea271 isn't dark enough for
                  77daa4) and every real instance is 10–40% opacity anyway,
                  worse still — ALWAYS darken.
     - secondary: 100% opacity reaches a solid 4.26:1 (025d83 is dark
                  enough for 8dcef9) and should stay light, but every real
                  instance in the codebase is opacity-modified (20–80%),
                  which blends back down to 1.0–3.7:1 — darken only the
                  opacity-modified form.
     - error:     100% opacity reaches 5.51:1 (4 instances, stay light) but
                  16 more instances use an opacity-modified wash (20–50%),
                  which blends down to 1.1–1.8:1 just like secondary —
                  same treatment.
   Both secondary and error darken by default and exclude only the bare,
   unmodified class via :not([class~=...]) (exact-token match, so it
   can't also match an opacity-modified sibling class like
   "bg-error-container/40" on the same element — a plain :not([class*=...])
   substring check was tried first and wrongly excluded every opacity
   variant too, since "bg-error-container" is a substring of all of them;
   confirmed live via delivery.html's "gpp_bad" icon, bg-error-container/40,
   which stayed light at only 1.48:1 until this was corrected to ~=). */
html.theme-daylight [class*="text-primary"]:not([class*="bg-on-primary-container"]) { color: #a03f27 !important; }
html.theme-daylight [class*="text-secondary"]:not([class~="bg-secondary-container"]) { color: #025d83 !important; }
html.theme-daylight [class*="text-tertiary"] { color: #0f6b40 !important; }
html.theme-daylight [class*="text-error"]:not([class~="bg-error-container"]) { color: #93000a !important; }
html.theme-daylight [class~="bg-error-container"] [class*="text-error"] { color: #ffb4ab !important; }
/* The descendant restore above is too broad on its own — outbid.html's
   countdown chip (bg-surface-container-lowest, itself nested inside the
   same error-container banner) also carries text-error, and the restore
   rule can't tell that this particular text-error sits on its OWN nested
   white pill rather than being directly exposed to the banner's dark red.
   Confirmed live: without this, the timer text came back light-pink-on-
   white (1.7:1) instead of light-pink-on-dark-red. One extra attribute
   selector gives this higher specificity, so it correctly wins back over
   for just this nested-pill case — in both shapes that occur (the pill's
   own bg-surface-container-lowest and text-error as separate nodes, and
   as classes on the one node, which the descendant combinator alone
   can't match since it requires a true ancestor). */
html.theme-daylight [class~="bg-error-container"] [class*="bg-surface-container-lowest"] [class*="text-error"] { color: #93000a !important; }
html.theme-daylight [class~="bg-error-container"] [class*="bg-surface-container-lowest"][class*="text-error"] { color: #93000a !important; }
/* hover: state classes (e.g. "hover:bg-error-container/40") also contain
   the literal token "bg-error-container" as a substring, which the
   [class*=...] restore rule above would match — but that's a conditional
   background, not the element's actual resting one, so it shouldn't
   trigger the light restore. Switching that restore to [class~=...]
   (exact-token match) already excludes it, since "hover:bg-error-
   container/40" is a different complete token than "bg-error-container".
   This rule is only a second line of defense in case a future instance
   combines a genuine bg-error-container with an additional hover:
   variant on the same element — currently redundant but cheap to keep. */
html.theme-daylight [class*="hover:bg-error-container"][class*="text-error"] { color: #93000a !important; }

/* text-on-secondary-container (#95d5ff) is a light color — correct when
   paired with secondary-container (#025d83, dark) at full strength, but
   every badge on the site that pairs it with an opacity-modified wash of
   that same background (e.g. "bg-secondary-container/20", used for a
   subtle tint) computes badly: blended against this theme's light page,
   even /80 only reaches ~3:1 and /20 measures ~1.1:1. Scoped to only the
   opacity-modified wash (the trailing slash is the tell) via two
   [class*=] conditions on the same element, so a legitimate full-strength
   "bg-secondary-container text-on-secondary-container" pairing elsewhere
   is untouched. error doesn't need the equivalent rule — see the long
   comment above. */
html.theme-daylight [class*="bg-secondary-container/"][class*="text-on-secondary-container"] {
  color: #025d83 !important;
}

/* One badge (activity.html's "Active Bids" tab counter) pairs text-primary
   with bg-on-primary-container (#550e00, a very dark chip) instead of a
   neutral surface — a legitimate light-on-dark use of text-primary's
   original salmon that the blanket text-primary rule above would still
   override to the same dark rust as everything else, dropping it to
   2.23:1 against its own dark chip (already excluded above via
   :not([class*="bg-on-primary-container"]), so this just restores the
   original color for that excluded case rather than leaving it
   unstyled). Equivalent text-secondary/tertiary pairings with their own
   bg-on-X-container don't currently exist in the codebase. */
html.theme-daylight [class*="bg-on-primary-container"][class*="text-primary"]:not([class*="text-primary-container"]) {
  color: #ffb4a2 !important;
}

/* A handful of payment-method brand icons (MTN MoMo yellow, Orange Money
   orange, a generic gold wallet icon) use hardcoded Tailwind arbitrary
   colors — text-[#ffcc00], text-[#ff6f00], text-[#f4c430] — bypassing the
   named palette entirely, so none of the rules above touch them. Measured
   1.2–2.1:1 against this theme's light card backgrounds (payment-
   methods.html, signup.html). Darkened each while keeping its hue
   recognizable as the same brand color, reaching ~3.2–4.9:1 depending on
   which card shade it sits on. */
html.theme-daylight [class*="text-[#ffcc00]"] { color: #8a6d00 !important; }
html.theme-daylight [class*="text-[#f4c430]"] { color: #8a6a10 !important; }
html.theme-daylight [class*="text-[#ff6f00]"] { color: #b85600 !important; }

/* ---------- Fallback Placeholder Image & Input Placeholder Sizing ---------- */
/* Scales down the UGO fallback logo placeholder so it sits compactly centered
   at 38% size inside cards, thumbnails, and hero containers rather than
   stretching edge-to-edge. */
img[src*="ugo_logo_placehoder"] {
  object-fit: contain !important;
  transform: scale(0.38) !important;
  transform-origin: center center !important;
  opacity: 0.5;
}
.group:hover img[src*="ugo_logo_placehoder"] {
  transform: scale(0.4) !important;
}

/* Reduces input and textarea placeholder text size across all forms and modals
   so placeholders never look oversized inside large-font inputs. */
input::placeholder,
textarea::placeholder {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* Ensure slide-up Filter Vault Lots sheet and modal sheets always sit above
   the fixed bottom navigation bar with sufficient bottom clearance. */
#filterSheetBackdrop {
  z-index: 100 !important;
}
#filterSheetPanel {
  z-index: 110 !important;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}