/* v2 cream/white override for /image-gen/ standalone — flips the dark teal/ochre
 * theme to Analytics AIML v2 (cream canvas, warm ink, Claude terracotta) so the
 * standalone matches /writer/, /seo-automation/, and /hunt/.
 *
 * Loaded AFTER the compiled Tailwind CSS so var values win by cascade. The
 * variable names below MUST match the names baked into the bundle's Tailwind
 * theme (see grep --color-* on index-*.css).
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root, :host {
  /* Surfaces — flip dark teal blue → cream + white */
  --color-primary:         #FAF9F5;
  --color-primary-light:   #FFFFFF;
  --color-primary-lighter: #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-hover:   #F5F3EC;
  --color-white:           #FFFFFF;
  --color-black:           #2D2A26;

  /* Ink — warm near-black instead of stark white */
  --color-text:        #2D2A26;
  --color-text-muted:  #4A4743;
  --color-text-dim:    #75716E;

  /* Hairlines */
  --color-border:      #E8E5E0;

  /* Accents — AEO design system: primary teal + secondary ochre */
  --color-accent:        #0F766E;
  --color-accent-hover:  #0D6960;
  --color-ochre:         #C27310;

  /* Status (warmer palette) */
  --color-success:  #0F8A5B;
  --color-warning:  #B4651B;
  --color-error:    #B3371D;
}

/* Hide the fixed particle-mesh background canvas */
canvas.fixed.inset-0,
body > canvas,
#root > div > canvas {
  display: none !important;
}

/* Body — be defensive against arbitrary Tailwind classes the bundle may set */
html, body { background: #FAF9F5 !important; color: #2D2A26 !important; }
body.bg-\[\#09090b\] { background: #FAF9F5 !important; }
body.text-\[\#fafafa\] { color: #2D2A26 !important; }
.bg-primary { background-color: #FAF9F5 !important; }

/* Login card + interior surfaces */
.bg-surface, [class*="bg-surface"] { background-color: #FFFFFF !important; }
.bg-primary\/80 { background-color: rgba(255,255,255,0.92) !important; }

/* Form controls */
input, textarea, select {
  background-color: #FFFFFF !important;
  color: #2D2A26 !important;
  border-color: #D9D5CE !important;
}
input::placeholder, textarea::placeholder { color: #9A9693 !important; }

/* Default text color escape hatch — kill stark-white text on light bg */
.text-text     { color: #2D2A26 !important; }
.text-white    { color: #2D2A26 !important; }

/* Typography — 2026-05-01: Inter only across all headings.
   Was Fraunces serif (matched /writer/) — but inconsistent with the SEO Manager
   host (which is Inter-only) and made the iframe feel mismatched. Sans across
   the board keeps the iframe blending into the host and the standalone polished. */
h1, h2, h3, .font-bold:is(h1,h2,h3), .font-semibold:is(h1,h2,h3) {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em;
  color: #2D2A26 !important;
}

/* Strip the misleading "Password: admin123" hint label */
span:has(> code), span:has(> kbd) { display: none !important; }


/* Native <select> dropdown options — without these the OS picks colors from
 * the bundle's Tailwind theme (dark rgb(17,26,40)) instead of inheriting cream.
 * color-scheme:light also tells Chromium to draw the dropdown chrome (scrollbar,
 * borders) in light mode regardless of the OS preference. */
:root, html { color-scheme: light; }
select, select option, select optgroup {
  background-color: #FFFFFF !important;
  color: #2D2A26 !important;
}
select option:checked, select option:hover {
  background-color: #F5F3EC !important;
  color: #2D2A26 !important;
}


/* Hover utility overrides — the bundle uses Tailwind `hover:text-white` etc.
 * which compile to escaped class names like `.hover\:text-white:hover`. The
 * earlier rules that targeted `.text-white` did NOT catch these — so on hover
 * top-bar tabs (Generator/Image Ops/AI Learning/Admin) and any `.hover:text-*`
 * button became near-invisible white on cream. */
.hover\:text-white:hover,
.hover\:text-text:hover { color: #2D2A26 !important; }

.hover\:bg-surface\/50:hover  { background-color: #F5F3EC !important; }
.hover\:bg-primary\/50:hover  { background-color: #FAF9F5 !important; }
.hover\:bg-accent:hover           { background-color: #0F766E !important; color: #FFFFFF !important; }
.hover\:bg-accent\/10:hover    { background-color: rgba(15,118,110,0.1) !important; }
.hover\:bg-accent\/20:hover    { background-color: rgba(15,118,110,0.2) !important; }

/* Catch any leftover hover that just toggles bg-surface variants */
[class*="hover:bg-surface"]:hover { color: #2D2A26 !important; }

/* Ghost button cards (panels with hover:bg-surface) shouldn'''t lose contrast either */
[class*="hover:bg-primary"]:hover { color: #2D2A26 !important; }


/* v5.24.7 — Tailwind v4 @layer utilities lose to unlayered preflight in this bundle.
   Redeclare in unlayered context with absolute px (HTML root is 15px in SEO Manager,
   not 16px), scoped to .imagegen-app. Combined with Manager's scoped-out globals,
   this produces layout matching the standalone. */
/* 2026-05-01 — REMOVED: v5.24.7 button/input padding reset. Was a defense
   against SEO Manager preflight leaking when image-gen was in-page-mounted.
   Now iframed (CSS-isolated), so Tailwind py-* utilities should rule.
   Removing this fixes flat Generate button + Image Ops button heights.
   Kept .imagegen-app .p-N override block below — harmless. */

.imagegen-app .p-1 { padding: 4px !important; }
.imagegen-app .p-2 { padding: 8px !important; }
.imagegen-app .p-3 { padding: 12px !important; }
.imagegen-app .p-4 { padding: 16px !important; }
.imagegen-app .p-6 { padding: 24px !important; }
.imagegen-app .px-1   { padding-left: 4px !important; padding-right: 4px !important; }
.imagegen-app .px-1\.5 { padding-left: 6px !important; padding-right: 6px !important; }
.imagegen-app .px-2   { padding-left: 8px !important; padding-right: 8px !important; }
.imagegen-app .px-2\.5 { padding-left: 10px !important; padding-right: 10px !important; }
.imagegen-app .px-3   { padding-left: 12px !important; padding-right: 12px !important; }
.imagegen-app .px-3\.5 { padding-left: 14px !important; padding-right: 14px !important; }
.imagegen-app .px-4   { padding-left: 16px !important; padding-right: 16px !important; }
.imagegen-app .px-5   { padding-left: 20px !important; padding-right: 20px !important; }
.imagegen-app .px-6   { padding-left: 24px !important; padding-right: 24px !important; }
.imagegen-app .py-1   { padding-top: 4px !important; padding-bottom: 4px !important; }
.imagegen-app .py-1\.5 { padding-top: 6px !important; padding-bottom: 6px !important; }
.imagegen-app .py-2   { padding-top: 8px !important; padding-bottom: 8px !important; }
.imagegen-app .py-2\.5 { padding-top: 10px !important; padding-bottom: 10px !important; }
.imagegen-app .py-3   { padding-top: 12px !important; padding-bottom: 12px !important; }
.imagegen-app .py-4   { padding-top: 16px !important; padding-bottom: 16px !important; }
.imagegen-app .py-6   { padding-top: 24px !important; padding-bottom: 24px !important; }
.imagegen-app .text-xs  { font-size: 12px !important; line-height: 16px !important; }
.imagegen-app .text-sm  { font-size: 14px !important; line-height: 20px !important; }
.imagegen-app .text-base{ font-size: 16px !important; line-height: 24px !important; }
.imagegen-app .text-lg  { font-size: 18px !important; line-height: 28px !important; }
.imagegen-app .text-xl  { font-size: 20px !important; line-height: 28px !important; }
.imagegen-app .text-2xl { font-size: 24px !important; line-height: 32px !important; }
.imagegen-app .gap-1   { gap: 4px !important; }
.imagegen-app .gap-1\.5 { gap: 6px !important; }
.imagegen-app .gap-2   { gap: 8px !important; }
.imagegen-app .gap-3   { gap: 12px !important; }
.imagegen-app .gap-4   { gap: 16px !important; }
.imagegen-app .gap-6   { gap: 24px !important; }
.imagegen-app .space-y-1 > * + * { margin-top: 4px !important; }
.imagegen-app .space-y-2 > * + * { margin-top: 8px !important; }
.imagegen-app .space-y-3 > * + * { margin-top: 12px !important; }
.imagegen-app .space-y-4 > * + * { margin-top: 16px !important; }
.imagegen-app .space-y-6 > * + * { margin-top: 24px !important; }
.imagegen-app .whitespace-nowrap { white-space: nowrap !important; }
.imagegen-app .flex-shrink-0 { flex-shrink: 0 !important; }
.imagegen-app .flex-1 { flex: 1 1 0% !important; }
.imagegen-app .min-w-0 { min-width: 0 !important; }
.imagegen-app .w-full { width: 100% !important; }

/* v5.24.8 — hide empty xl-breakpoint right rail in embedded mode (standalone has it too
   but there it's populated; in embedded it's always empty, steals 240px) */
.imagegen-app .hidden.xl\:block.w-64.flex-shrink-0 { display: none !important; }


/* v5.24.10 — comprehensive margin + misc Tailwind utilities for embedded mode */
.imagegen-app .m-0 { margin: 0 !important; }
.imagegen-app .m-1 { margin: 4px !important; }
.imagegen-app .m-2 { margin: 8px !important; }
.imagegen-app .m-3 { margin: 12px !important; }
.imagegen-app .m-4 { margin: 16px !important; }
.imagegen-app .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.imagegen-app .mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.imagegen-app .mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.imagegen-app .my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.imagegen-app .my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.imagegen-app .my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
.imagegen-app .my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
.imagegen-app .my-6 { margin-top: 24px !important; margin-bottom: 24px !important; }

.imagegen-app .mt-0 { margin-top: 0 !important; }
.imagegen-app .mt-1 { margin-top: 4px !important; }
.imagegen-app .mt-1\.5 { margin-top: 6px !important; }
.imagegen-app .mt-2 { margin-top: 8px !important; }
.imagegen-app .mt-3 { margin-top: 12px !important; }
.imagegen-app .mt-4 { margin-top: 16px !important; }
.imagegen-app .mt-6 { margin-top: 24px !important; }
.imagegen-app .mt-8 { margin-top: 32px !important; }

.imagegen-app .mb-0 { margin-bottom: 0 !important; }
.imagegen-app .mb-1 { margin-bottom: 4px !important; }
.imagegen-app .mb-1\.5 { margin-bottom: 6px !important; }
.imagegen-app .mb-2 { margin-bottom: 8px !important; }
.imagegen-app .mb-3 { margin-bottom: 12px !important; }
.imagegen-app .mb-4 { margin-bottom: 16px !important; }
.imagegen-app .mb-6 { margin-bottom: 24px !important; }
.imagegen-app .mb-8 { margin-bottom: 32px !important; }

.imagegen-app .ml-1 { margin-left: 4px !important; }
.imagegen-app .ml-2 { margin-left: 8px !important; }
.imagegen-app .ml-3 { margin-left: 12px !important; }
.imagegen-app .ml-4 { margin-left: 16px !important; }
.imagegen-app .mr-1 { margin-right: 4px !important; }
.imagegen-app .mr-2 { margin-right: 8px !important; }
.imagegen-app .mr-3 { margin-right: 12px !important; }
.imagegen-app .mr-4 { margin-right: 16px !important; }

.imagegen-app .space-x-1 > * + * { margin-left: 4px !important; }
.imagegen-app .space-x-2 > * + * { margin-left: 8px !important; }
.imagegen-app .space-x-3 > * + * { margin-left: 12px !important; }
.imagegen-app .space-x-4 > * + * { margin-left: 16px !important; }

.imagegen-app .leading-tight  { line-height: 1.25 !important; }
.imagegen-app .leading-snug   { line-height: 1.375 !important; }
.imagegen-app .leading-normal { line-height: 1.5 !important; }
.imagegen-app .leading-relaxed{ line-height: 1.625 !important; }
.imagegen-app .leading-loose  { line-height: 2 !important; }

.imagegen-app .tracking-tighter { letter-spacing: -0.05em !important; }
.imagegen-app .tracking-tight   { letter-spacing: -0.025em !important; }
.imagegen-app .tracking-normal  { letter-spacing: 0 !important; }
.imagegen-app .tracking-wide    { letter-spacing: 0.025em !important; }
.imagegen-app .tracking-wider   { letter-spacing: 0.05em !important; }
.imagegen-app .tracking-widest  { letter-spacing: 0.1em !important; }

.imagegen-app .uppercase { text-transform: uppercase !important; }
.imagegen-app .lowercase { text-transform: lowercase !important; }
.imagegen-app .capitalize { text-transform: capitalize !important; }

/* v5.24.11 — header button nowrap only (not the whole flex), and give title enough room */
.imagegen-app nav button, .imagegen-app header button { white-space: nowrap !important; }

/* v5.24.12 — force title+subtitle nowrap so flex doesn't shrink them to per-word wrap */
.imagegen-app header h1,
.imagegen-app header p,
.imagegen-app header .text-xs { white-space: nowrap !important; }
.imagegen-app header .flex.items-center.gap-3 > div:not([class]) { flex-shrink: 0 !important; }

/* ── v5.32.0 polish — tighter density, friendlier hierarchy ───────────────── */
button { transition: background-color .15s, border-color .15s, color .15s; }
input, select, textarea { transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(15,118,110,.12) !important; }

/* Section spacing rhythm — more air between cards on the page */
[class*="space-y-6"] > * + * { margin-top: 1.5rem !important; }

/* Heading scale: tighter, more editorial */
h1 { letter-spacing: -.018em !important; }
h2 { letter-spacing: -.012em !important; }

/* Card surfaces: warmer border + subtle shadow */
[class*="rounded-lg"], [class*="rounded-xl"] {
  border-color: rgba(45,42,38,.08) !important;
}

/* Pill/badge polish */
[class*="badge"], [class*="pill"], [class*="chip"] {
  font-weight: 500 !important;
  letter-spacing: .01em;
}

/* ── 2026-04-30 mobile/iframe header fix — prevent client badge overlap with nav ── */
/* When viewport < 1100px (typical iframe-in-host case), hide subtitle and shrink
   client badge label so the nav has room. */
@media (max-width: 1100px) {
  .imagegen-app header p { display: none !important; }
  .imagegen-app header [class*='badge'] [class*='font-medium']:first-child,
  .imagegen-app header span:has(+ span:not([class])):not([class]) { /* Client label */
    display: none !important;
  }
  .imagegen-app header h1 { font-size: 1rem !important; line-height: 1.2 !important; }
}
@media (max-width: 768px) {
  .imagegen-app header { flex-wrap: wrap !important; }
  .imagegen-app header > div > div { flex-wrap: wrap !important; }
  .imagegen-app header nav { flex-basis: 100% !important; margin-top: .5rem !important; overflow-x: auto !important; }
}

/* 2026-04-30 stronger fix — hide entire client badge + shrink h1 below 1100px */
@media (max-width: 1100px) {
  /* Hide the client badge entirely; SEO Manager already shows the client at host level */
  header [class*='rounded'][class*='border'][class*='px-3'] { display: none !important; }
  /* Also hide standalone Client label spans */
  header span[class*='font-medium']:not([class*='border']):not([class*='rounded']) {
    /* Keep button labels visible — only hide the standalone Client label */
  }
}

/* 2026-04-30 v3 — actual selector for client badge container */
@media (max-width: 1100px) {
  /* The client badge wrapper has 'border-l' divider + 'pl-3' on it */
  header > div > div > div[class*='border-l'][class*='pl-3'] { display: none !important; }
  /* Also tighten nav button gap */
  header nav { gap: 0.5rem !important; }
  header nav button { padding-left: 0.5rem !important; padding-right: 0.5rem !important; font-size: 0.85rem !important; }
}

/* 2026-04-30 v4 — descendant selector (parent chain is 4 deep, not 3) */
@media (max-width: 1100px) {
  header div[class*='border-l'][class*='pl-3'] { display: none !important; }
}

/* 2026-04-30 v5 — constrain h1 to prevent overlap with nav */
@media (max-width: 1100px) {
  header h1 { max-width: 180px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
}

/* 2026-04-30 — invert toggle button states (selected should be filled, not outlined) */
/* Button states use Tailwind classes: selected has 'bg-accent/10', unselected has 'bg-primary' */
button[class*='bg-accent/10'][class*='border-accent'] {
  background-color: var(--color-accent, #0f766e) !important;
  color: #fff !important;
  border-color: var(--color-accent, #0f766e) !important;
  box-shadow: 0 1px 3px rgba(15,118,110,.25) !important;
}
button[class*='bg-primary'][class*='border-border'][class*='text-text-muted'] {
  background-color: transparent !important;
  color: var(--color-text-muted, #6b6660) !important;
}
button[class*='bg-primary'][class*='border-border'][class*='text-text-muted']:hover {
  border-color: var(--color-accent, #0f766e) !important;
  color: var(--color-accent, #0f766e) !important;
}


/* ── AEO retheme: kill gradient CTAs — solid teal primary ─────────────────
 * The bundle bakes gradient-image (from-ochre/to-accent) + a glow box-shadow
 * onto primary buttons. The CSS-var swap above handles semantic bg-accent
 * usage, but gradient-image is a separate property the var can't reset.
 * These rules strip it and force solid teal on any button/link that has a
 * from-* or bg-gradient* class. Also kills ochre/accent shadow glows.
 * ─────────────────────────────────────────────────────────────────────── */
button[class*="from-"],
button[class*="bg-gradient"],
a[class*="from-"][class*="bg-gradient"] {
  background-image: none !important;
  background-color: #0F766E !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}
button[class*="from-"]:hover,
button[class*="bg-gradient"]:hover,
a[class*="from-"][class*="bg-gradient"]:hover {
  background-color: #0D6960 !important;
  box-shadow: none !important;
}
/* Kill ochre/accent glow shadows on any element */
[class*="shadow-ochre"],
[class*="shadow-accent"] {
  box-shadow: none !important;
}


/* ── AEO retheme: Inter only — no JetBrains Mono, no cv0x alternates ──────
 * The bundle loads JetBrains Mono via Google Fonts and applies it to
 * .font-mono elements (number inputs, cost/token displays) with cv02–cv11
 * stylistic alternates. Replace with plain Inter + tabular-nums so number
 * displays stay proportional and the iframe feels native to the host.
 * ─────────────────────────────────────────────────────────────────────── */
/* Reset body-level cv0x alternates the bundle sets via font-feature-settings */
html, body, #root {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-feature-settings: normal !important;
}
/* Kill mono on number inputs and tabular cost/token displays */
.font-mono,
[class*="font-mono"],
input[type="number"],
[class*="tabular-nums"] {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-feature-settings: normal !important;
  font-variant-numeric: tabular-nums !important;
}
/* Normal-case labels — kill uppercase + tracking-wider label pattern */
[class*="uppercase"][class*="tracking-wider"],
[class*="uppercase"][class*="tracking-wide"],
[class*="text-xs"][class*="uppercase"],
[class*="text-sm"][class*="uppercase"] {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}


/* ── AEO retheme: dark-panel leak shield ───────────────────────────────────
 * Defensive rules against any bundle dark-panel classes that survive the
 * :root variable swap. Keeps text on the ink token, panels on the surface
 * token. Scoped to patterns that won't collide with legitimate light-theme
 * utility classes.
 * ─────────────────────────────────────────────────────────────────────── */
[class*="bg-gray-900"],
[class*="bg-slate-900"],
[class*="bg-zinc-900"],
[class*="bg-neutral-900"],
[class*="bg-stone-900"] {
  background-color: #FFFFFF !important;
  color: #2D2A26 !important;
}
/* Kill forced-white text on light surfaces (allow it on dark bg-accent buttons) */
.text-white:not([class*="bg-accent"]):not([class*="bg-teal"]):not(button) {
  color: #2D2A26 !important;
}