/**
 * Court Designer contrast overrides (v2)
 *
 * The embedded SPA bundle (public/court-designer/assets/*) was re-themed from
 * dark to light via CSS variables (--paper, --ink, ...), but a few components
 * still hardcode dark-theme colors. That gives dark-on-dark (e.g. Extras >
 * Light poles > "+" fixture menu: bg #1c2128 with --ink text, 1.16:1) and
 * light-on-light (amber warnings, secondary buttons) controls.
 *
 * The real fix exists in court-builder-web source (commit 6032209 on branch
 * polish/quote-handoff) but the embed can't be rebuilt yet (fence/templates
 * are patched directly into the bundle). Earlier fixes were made in the
 * hashed bundle or source only and never reached this site.
 *
 * This file lives OUTSIDE public/court-designer/ on purpose: the documented
 * `rsync --delete dist/ public/court-designer/` sync would delete anything in
 * that folder. It is loaded after the bundle CSS and every rule is scoped to
 * body.designer-embed with !important, so it is order-independent and keeps
 * working after an embed rebuild as long as the class names stay the same.
 * Desktop and mobile.
 */

/* Native <select> menus / number spinners stay light over the dark canvas
   (was only in the hashed bundle CSS; a rebuild would drop it). */
html:has(body.designer-embed),
body.designer-embed {
  color-scheme: light;
}

/* 1. DARK ON DARK: leftover dark surfaces inside light panels
      (Light poles "+" -> "Choose fixture" menu). */
body.designer-embed .bg-\[\#1c2128\] {
  background-color: var(--paper-elevated, #ffffff) !important;
  color: var(--ink, #0f1218) !important;
  box-shadow: 0 10px 24px rgba(15, 18, 24, 0.15) !important;
}

body.designer-embed [role="menu"] [role="menuitem"] {
  color: var(--ink, #0f1218) !important;
}

body.designer-embed [role="menu"] [role="menuitem"]:hover,
body.designer-embed [role="menu"] [role="menuitem"]:focus-visible {
  background-color: #f3f4f6 !important;
}

body.designer-embed [role="menu"].bg-\[\#1c2128\] > p,
body.designer-embed [role="menu"].bg-\[\#1c2128\] > button:not([role="menuitem"]) {
  color: var(--ink-soft, #3a404c) !important;
}

/* Safety net: theme-variable (dark) text placed inside the dark 3D docks
   would be dark on dark; force it light there. */
body.designer-embed [class*="bg-[#161b22]"] [class*="text-[var(--ink)]"],
body.designer-embed [class*="bg-[#161b22]"] [class*="text-[var(--ink-soft)]"],
body.designer-embed [class*="bg-[#0d1117]"] [class*="text-[var(--ink)]"],
body.designer-embed [class*="bg-[#0d1117]"] [class*="text-[var(--ink-soft)]"] {
  color: #e6edf3 !important;
}

/* 2. LIGHT ON LIGHT: default "secondary" action button (e.g. Cancel in the
      "Replace current design?" dialog) was translucent white + gray-200 text. */
body.designer-embed button.bg-white\/10.text-gray-200 {
  background-color: var(--paper, #fafaf8) !important;
  border: 1px solid var(--line, #e4e6ea) !important;
  color: var(--ink, #0f1218) !important;
}

body.designer-embed button.bg-white\/10.text-gray-200:hover {
  background-color: #f3f4f6 !important;
}

/* 3. Amber warnings on light panels (e.g. "Surface too small for tennis"
      + Resize). Matches court-builder-web 6032209. */
body.designer-embed #root .text-amber-400 {
  color: #92400e !important;
}

body.designer-embed button.text-amber-300.bg-amber-500\/20 {
  color: #78350f !important;
  background-color: #fef3c7 !important;
}

body.designer-embed button.text-amber-300.bg-amber-500\/20:hover {
  color: var(--ink, #0f1218) !important;
  background-color: #fde68a !important;
}

/* 5. Extras > Fence > "Remove" was bare 10px gray text that read as a label.
      Styled as a real button, matching Simple mode's Remove (.gcs-also-btn).
      This exact class list is only used by that button in the bundle. */
body.designer-embed button.text-\[10px\].text-\[var\(--ink-soft\)\].hover\:text-\[var\(--ink\)\] {
  padding: 4px 10px !important;
  border: 1px solid var(--line, #e4e6ea) !important;
  border-radius: 6px !important;
  background-color: var(--paper-elevated, #ffffff) !important;
  color: var(--ink, #0f1218) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
}

body.designer-embed button.text-\[10px\].text-\[var\(--ink-soft\)\].hover\:text-\[var\(--ink\)\]:hover {
  border-color: #c2413a !important;
  color: #c2413a !important;
  background-color: #fef2f2 !important;
}

body.designer-embed button.text-\[10px\].text-\[var\(--ink-soft\)\].hover\:text-\[var\(--ink\)\]:focus-visible {
  outline: 2px solid var(--grit, #2f8f72) !important;
  outline-offset: 2px !important;
}

/* 4. Error banners (Share modal) - red-400 on a faint red tint. */
body.designer-embed .text-red-400.bg-red-400\/10 {
  color: #b91c1c !important;
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}

/* Undo / Redo: keep both visible but see-through when unavailable (the bundle's
   disabled style used --line at 50% opacity, which read as blank space). Grant 2026-10-07 */
body.designer-embed button[aria-label="Undo"]:disabled,
body.designer-embed button[aria-label="Redo"]:disabled {
  color: var(--ink-soft, #4b5563) !important;
  opacity: 0.35 !important;
  visibility: visible !important;
}