/* ============================================================================
   CreativeLaunch AI — Light theme + layout fixes
   Loaded after app.css. The dark palette in app.css stays the default; this
   file redefines the same tokens for html[data-theme="light"] and patches the
   handful of components that hard-code light-on-dark colors.
   ========================================================================== */

:root { --on-soft: #cdd6ff; color-scheme: dark; }

html[data-theme="light"] {
  color-scheme: light;
  --grad-brand-soft: linear-gradient(135deg, rgba(23,92,247,.10) 0%, rgba(154,60,252,.10) 100%);
  --grad-brand-text: linear-gradient(120deg, #1F55E6 0%, #7E38E0 100%);
  --bg: #F2F4F9;
  --bg-2: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #F7F8FC;
  --panel-3: #ECEFF6;
  --glass: rgba(16,23,41,.035);
  --glass-2: rgba(16,23,41,.06);
  --border: rgba(16,23,41,.10);
  --border-2: rgba(16,23,41,.15);
  --border-strong: rgba(16,23,41,.24);
  --text: #111A2E;
  --text-dim: #4E5B78;
  --text-faint: #6F7C97;
  --green: #12915A;
  --green-dim: rgba(18,145,90,.12);
  --red: #CF3A40;
  --red-dim: rgba(207,58,64,.12);
  --amber: #A86D0B;
  --amber-dim: rgba(168,109,11,.14);
  --cyan: #0E8A92;
  --shadow-sm: 0 1px 3px rgba(16,23,41,.08);
  --shadow: 0 8px 24px rgba(16,23,41,.10);
  --shadow-lg: 0 20px 50px rgba(16,23,41,.16);
  --glow-brand: 0 8px 24px rgba(99,80,255,.25);
  --glow-green: 0 0 18px rgba(18,145,90,.25);
  --on-soft: #3A2C9B;
}
/* body.admin re-declares the surface tokens for the dark admin skin; every one of them must be re-declared here too */
html[data-theme="light"] body.admin { --bg: #EEF1F8; --bg-2: #FFFFFF; --panel: #FFFFFF; --panel-2: #F5F7FC; --panel-3: #E9EDF6; --grad-brand: linear-gradient(135deg, #2D6BFF 0%, #7A4DFF 100%); }
html[data-theme="light"] .mkt-hero__badge { color: var(--on-soft); }

/* ambient glow + chrome */
html[data-theme="light"] body::before {
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(154,60,252,.10), transparent 60%),
    radial-gradient(1000px 500px at 0% 10%, rgba(23,92,247,.08), transparent 55%);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(16,23,41,.18); background-clip: padding-box; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(16,23,41,.28); background-clip: padding-box; }
html[data-theme="light"] ::selection { background: rgba(123,92,255,.25); color: var(--text); }
html[data-theme="light"] .sidebar { background: var(--panel); border-right: 1px solid var(--border); }
html[data-theme="light"] .topbar { background: rgba(255,255,255,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
html[data-theme="light"] .card { box-shadow: var(--shadow-sm); }
html[data-theme="light"] .dropdown, html[data-theme="light"] .modal, html[data-theme="light"] .toast { box-shadow: var(--shadow-lg); }

/* components that hard-code white text on a brand-soft ground */
html[data-theme="light"] .nav-item.active { color: var(--on-soft); }
html[data-theme="light"] .chip.active, html[data-theme="light"] .chip[aria-pressed="true"],
html[data-theme="light"] .tab.active, html[data-theme="light"] .btn--outline:hover,
html[data-theme="light"] .modal__close:hover, html[data-theme="light"] .mkt-nav__links a:hover,
html[data-theme="light"] .mkt-footer a:hover, html[data-theme="light"] .skip-link { color: var(--text); }
html[data-theme="light"] .switch .track::after { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
html[data-theme="light"] .pf-google { border: 1px solid var(--border-2); }
html[data-theme="light"] .pf-x, html[data-theme="light"] .pf-tiktok { border: 1px solid rgba(255,255,255,.2); }
html[data-theme="light"] .btn--ghost { color: var(--text-dim); }
html[data-theme="light"] .btn--ghost:hover { color: var(--text); background: var(--glass-2); }
html[data-theme="light"] .company-switch__btn:hover, html[data-theme="light"] .dropdown__item:hover, html[data-theme="light"] .nav-item:hover { background: var(--glass-2); }
html[data-theme="light"] [tabindex]:focus-visible, html[data-theme="light"] .btn:focus-visible,
html[data-theme="light"] a:focus-visible, html[data-theme="light"] button:focus-visible,
html[data-theme="light"] .input:focus-visible { outline-color: #2F5BE8; }
html[data-theme="light"] .connect-banner { background: linear-gradient(90deg, rgba(23,92,247,.08), rgba(154,60,252,.06)); }
html[data-theme="light"] .preview-banner b { color: #8A5A00; }
html[data-theme="light"] .mkt-nav { background: rgba(255,255,255,.85); border-bottom: 1px solid var(--border); }
html[data-theme="light"] .mkt-footer { background: var(--panel-2); border-top: 1px solid var(--border); }

/* ---- theme toggle button ------------------------------------------------ */
[data-theme-toggle] { position: relative; }
[data-theme-toggle] .ico-sun { display: none; }
html[data-theme="light"] [data-theme-toggle] .ico-sun { display: block; }
html[data-theme="light"] [data-theme-toggle] .ico-moon { display: none; }
.theme-fab { position: fixed; top: 14px; right: 14px; z-index: 60; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text-dim); box-shadow: var(--shadow-sm); }
.theme-fab:hover { color: var(--text); border-color: var(--border-strong); }
.theme-fab svg { width: 18px; height: 18px; }

/* ---- layout fixes (both themes) ----------------------------------------- */
/* sidebar user: name and role were inline and ran together */
.sidebar__user .meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sidebar__user .name, .sidebar__user .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* gauges must never be squeezed by a flex sibling (Predicted Reach, Exposure Score) */
.gauge, .gauge-wrap > .gauge, .donut-wrap { flex: none; }
.gauge-wrap > div:not(.gauge) { min-width: 0; }
/* long labels inside stat feet wrap instead of overlapping */
.stat__foot { flex-wrap: wrap; row-gap: 4px; }
/* topbar pills never wrap mid-word */
.topbar .pill { white-space: nowrap; }

/* brand logo: the white wordmark is darkened on light grounds (logo.png is only the small icon) */
.logo-on-light { display: none !important; }
html[data-theme="light"] .logo-on-dark { filter: brightness(.12); }

/* hidden dropdowns must never widen the document (caused a horizontal jump when clicking topbar buttons) */
html { overflow-x: hidden; }
.topbar .dropdown { max-width: calc(100vw - 32px); }

/* range sliders (Auto-Pilot cadence): visible track + solid thumb in light mode */
html[data-theme="light"] input[type=range].rng { background: #D5DBE8; }
html[data-theme="light"] input[type=range].rng::-webkit-slider-thumb { background: var(--brand-violet); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(16,23,41,.35); }
html[data-theme="light"] input[type=range].rng::-moz-range-thumb { background: var(--brand-violet); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(16,23,41,.35); }
html[data-theme="light"] .segmented { background: #E6EAF3; }

/* SEO / shared components in light mode */
html[data-theme="light"] .ptabs button.active { color: #111633; }
html[data-theme="light"] .typeahead { box-shadow: 0 18px 40px rgba(20,30,60,.16); }
html[data-theme="light"] .drawer-scrim { background: rgba(20,30,60,.35); }
html[data-theme="light"] .pos--top { color: #fff; }