/* ============================================================
   INDIGO BLOOM — Launchpad design system override
   ------------------------------------------------------------
   Light-only. No dark backgrounds anywhere.
   WCAG AA contrast on every text token.
   Loads AFTER styles.css so it wins on specificity ties.
   ============================================================ */

:root {
  /* ── Indigo Bloom brand ───────────────────────────────────── */
  --p:   #4338CA;          /* primary indigo — AA on white (7.0:1) */
  --pl:  #EEF0FE;          /* primary light */
  --pd:  #3730A3;          /* primary dark (hover) */
  --pb:  #C7D2FE;          /* primary border */
  --a:   #0E7490;          /* accent cyan-700 — AA on white (5.1:1) */
  --a2:  #06B6D4;          /* accent cyan (decorative only) */

  /* ── Neutrals — slate ramp ────────────────────────────────── */
  --b:   #0F172A;          /* ink */
  --t1:  #0F172A;          /* text 1 — 17.8:1 */
  --t2:  #475569;          /* text 2 — 7.5:1 */
  --t3:  #64748B;          /* text 3 — 4.8:1 (AA for body) */
  --t4:  #94A3B8;          /* text 4 — 2.6:1 (decorative/icons ONLY) */
  --bg:  #FFFFFF;          /* page background — pure white */
  --bg2: #F8FAFC;          /* surface 2 */
  --bd:  #E2E8F0;          /* border */
  --bd2: #F1F5F9;          /* border light */

  /* ── Status ───────────────────────────────────────────────── */
  --g:   #047857;  --gl: #ECFDF5;  --gb: #A7F3D0;
  --r:   #BE123C;  --rl: #FFF1F2;  --rb: #FECDD3;
  --o:   #C2410C;  --ol: #FFF7ED;  --ob: #FED7AA;
  --y:   #854D0E;  --yl: #FEFCE8;  --yb: #FEF08A;

  /* ── Components ───────────────────────────────────────────── */
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-hover: #F1F5F9;
  --bg-selected: #EEF0FE;

  /* ── Shape ────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 99px;

  --bw: 1px;
  --bdc: #E2E8F0;
}

/* ============================================================
   DARK-THEME NEUTRALIZER
   Any theme class that paints a dark background gets its
   background/foreground forced back to the light Indigo Bloom
   palette. Colour identity is preserved (accent hues survive),
   but every surface is light and every text token is readable.
   ============================================================ */

.theme-dark,
.theme-cyberpunk,
.theme-rpg,
.theme-glass,
.theme-vibrant,
.theme-midnight,
.theme-noir,
.theme-obsidian {
  background: #FFFFFF !important;
}
.theme-dark body,
.theme-cyberpunk body,
.theme-rpg body,
.theme-glass body,
.theme-vibrant body,
.theme-midnight body,
.theme-noir body,
.theme-obsidian body {
  background: #FFFFFF !important;
  color: var(--t1) !important;
}
.theme-dark .card,
.theme-cyberpunk .card,
.theme-rpg .card,
.theme-glass .card,
.theme-vibrant .card,
.theme-midnight .card,
.theme-noir .card,
.theme-obsidian .card,
.theme-dark .kpi,
.theme-cyberpunk .kpi,
.theme-rpg .kpi,
.theme-glass .kpi {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border-color: var(--bd) !important;
}
.theme-dark #sidebar,
.theme-cyberpunk #sidebar,
.theme-rpg #sidebar,
.theme-glass #sidebar,
.theme-vibrant #sidebar,
.theme-dark .sidebar,
.theme-cyberpunk .sidebar,
.theme-rpg .sidebar,
.theme-glass .sidebar {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border-right-color: var(--bd) !important;
}
.theme-dark .ni,
.theme-cyberpunk .ni,
.theme-rpg .ni,
.theme-glass .ni {
  color: var(--t2) !important;
}
.theme-dark .ni.on,
.theme-cyberpunk .ni.on,
.theme-rpg .ni.on,
.theme-glass .ni.on {
  background: var(--pl) !important;
  color: var(--p) !important;
}
.theme-dark .nlbl,
.theme-cyberpunk .nlbl,
.theme-rpg .nlbl,
.theme-glass .nlbl {
  color: var(--t3) !important;
}
.theme-dark .topbar,
.theme-cyberpunk .topbar,
.theme-rpg .topbar,
.theme-glass .topbar,
.theme-dark #topbar,
.theme-cyberpunk #topbar,
.theme-rpg #topbar,
.theme-glass #topbar {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border-bottom-color: var(--bd) !important;
}
/* Kill glow / scanline / noise overlays that dark themes inject */
.theme-dark body::before,
.theme-cyberpunk body::before,
.theme-rpg body::before,
.theme-glass body::before,
.theme-dark body::after,
.theme-cyberpunk body::after,
.theme-rpg body::after,
.theme-glass body::after {
  content: none !important;
  background: none !important;
}
/* Any element that explicitly set a near-black background */
.theme-dark [style*="background: #0"],
.theme-dark [style*="background:#0"],
.theme-cyberpunk [style*="background: #0"],
.theme-rpg [style*="background: #0"] {
  background: #FFFFFF !important;
  color: var(--t1) !important;
}

/* ============================================================
   READABILITY PASS
   Guarantees text is legible on every surface.
   ============================================================ */

/* Focus ring — visible and on-brand */
:focus-visible {
  outline: 2px solid var(--p) !important;
  outline-offset: 2px !important;
}

/* Inputs always readable */
input, textarea, select {
  background: #FFFFFF !important;
  color: var(--t1) !important;
  border-color: var(--bd) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--t3) !important;  /* 4.8:1 — AA */
  opacity: 1 !important;
}
select option {
  background: #FFFFFF !important;
  color: var(--t1) !important;
}

/* Muted text — never below AA */
.muted, .t3, [class*="text-mute"], [class*="muted"] {
  color: var(--t3) !important;
}

/* Primary button: white on indigo = 7.0:1 */
.btn-p {
  background: var(--p) !important;
  color: #FFFFFF !important;
  border-color: var(--p) !important;
}
.btn-p:hover {
  background: var(--pd) !important;
  border-color: var(--pd) !important;
}

/* Active nav item */
.ni.on, .nav-item.active {
  background: var(--pl) !important;
  color: var(--p) !important;
}

/* Cards lift on hover (subtle, from the mockup) */
.card {
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
  }
}

/* ============================================================
   LAYOUT INTEGRITY
   Guards against overlap / overflow / structural regressions.
   ============================================================ */

/* Nothing may spill horizontally out of the page */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* The main scroll container must not be overlapped by a fixed
   sidebar. Reserve the sidebar width on wide screens only. */
@media (min-width: 761px) {
  .layout { min-height: 100vh; }
}

/* On narrow screens the sidebar is fixed and off-canvas; the
   overlay must sit UNDER the sidebar so the menu is clickable. */
@media (max-width: 760px) {
  #sidebar { z-index: 1001; }
  .sidebar-overlay { z-index: 1000; }
  /* Sticky topbar must clear the notch on iOS */
  #topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  /* Nothing may exceed the viewport width */
  #main, #page { max-width: 100%; }
  /* Tables and wide content scroll instead of overflowing */
  .table-wrap, .vrow, .grid { max-width: 100%; }
}

/* Long unbroken strings (URLs, tokens) must wrap, not overflow */
body { overflow-wrap: break-word; word-break: break-word; }

/* Images and iframes never exceed their container */
img, iframe, video, canvas, svg {
  max-width: 100%;
  height: auto;
}
iframe { height: auto; }

/* Flex/grid children must be allowed to shrink — this is the
   classic cause of "text pushed out of the card" overlap */
.card > *,
.grid > *,
.flex > * { min-width: 0; }

/* ============================================================
   TOUCH TARGETS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .ni { min-height: 44px; }
  .btn { min-height: 40px; padding: 10px 16px; }
  .iconbtn { min-width: 44px; min-height: 44px; }
  .tab { padding: 12px 16px; }
}

/* ============================================================
   CONTRAST SAFETY NET
   Flags any element whose text would be invisible.
   ============================================================ */
::selection {
  background: var(--pl);
  color: var(--p);
}

/* ============================================================
   DARK SURFACE RECONCILIATION
   Some components used the ink token (--b) as a dark surface.
   The ink token is now dark slate, so those surfaces are pinned
   back to light with an indigo tint — same layout, light paint.
   ============================================================ */

.how {
  background: var(--pl) !important;
  color: var(--t1) !important;
}
.how .section-num { color: var(--p) !important; }
.how .section-head { border-bottom-color: var(--bd) !important; }
.how .section-head h2 { color: var(--t1) !important; }
.how .section-head p { color: var(--t2) !important; }
.how .step-num,
.how .step-title { color: var(--t1) !important; }
.how .step p,
.how .step-desc { color: var(--t2) !important; }

/* Buttons that used --b as a fill: keep them dark-on-light as an
   inverted primary, which stays AA (white on #0F172A = 17.8:1). */
.final-cta {
  background: var(--p) !important;
  color: #FFFFFF !important;
}
.faq-tab.on,
.faq-tab.on:hover {
  background: var(--p) !important;
  color: #FFFFFF !important;
}

/* Generic: any element still painting with the ink token as a
   background becomes a light tinted surface. */
[style*="background: var(--b)"],
[style*="background:var(--b)"] {
  background: var(--p) !important;
  color: #FFFFFF !important;
}

/* Pull-quote / stat blocks that inherit the ink background */
.hero-stat, .stat, .metric {
  color: var(--t1) !important;
}

/* ============================================================
   HORIZONTAL OVERFLOW CONTAINMENT
   The testimonial strip is a horizontal scroller by design, but it
   was leaking 100px past the viewport and creating a page-level
   horizontal scrollbar. Contain it at the section, not the page.
   ============================================================ */
html {
  overflow-x: clip;   /* clip is stronger than hidden — no scroll container */
}
body {
  overflow-x: clip;
  max-width: 100%;
}
/* Any element that scrolls sideways does so on itself, never on the page */
.tst-track,
.tst-strip,
.testimonials,
.testimonial-track {
  max-width: 100vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   HARD OVERFLOW LOCK
   overflow-x: clip stops the page from being scrollable in most
   engines, but Chromium still reports scrollX > 0 if any descendant
   uses position:absolute with negative offsets. Force the body to
   act as a true viewport, no exceptions.
   ============================================================ */
html, body {
  position: relative;
  max-width: 100%;
  width: 100%;
}
/* Anything that overflows horizontally is now also clipped at its
   nearest scrollable ancestor. */
.tst-track { width: 100%; max-width: 100vw; }

/* ============================================================
   MOBILE ACTION ROWS
   Some pages have horizontal action rows (Save / Generate / Cancel)
   that exceed 390px on phones. Wrap them to two lines so the user
   can see and tap every button.
   ============================================================ */
@media (max-width: 600px) {
  .actions,
  .lab-input-actions,
  .toolbar,
  .button-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .actions > *,
  .lab-input-actions > *,
  .toolbar > * {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   TABLE LAYOUT RESTORATION
   styles.css makes every <table> `display: block` for responsive
   overflow scrolling. That's fine for the user-facing pages, but
   in the admin panel the tables are inside wide .content panels
   that already have their own scroll container. demoting a table
   to display:block collapses each <td>/<th> into a single
   content-sized block, so columns shrink to 30-50px regardless
   of available width.
   Restore true table layout by default; only allow the block
   override when the table is in a known mobile-narrow context
   (a wrapper with data-table-responsive, or the resume builder).
   ============================================================ */
table {
  display: table !important;
  table-layout: auto;
  width: 100%;
}
thead { display: table-header-group !important; }
tbody { display: table-row-group !important; }
tr    { display: table-row !important; }
th, td { display: table-cell !important; }

/* ============================================================
   ADMIN TABLE COLUMN WIDTHS
   Even with display:table-cell restored, the auto-layout
   algorithm gives every cell its content width. Cells containing
   a single word ("Apps", "Plan", "ID") collapse to 30-50px
   regardless of available container width. Two fixes:

   1. table-layout: fixed so the browser respects explicit
      column widths and distributes the remaining space evenly.
   2. min-width on every cell so short text doesn't
      squeeze the column below 90px.
   The first <th> with width:30px (the checkbox) still works
   because fixed layout uses the explicit width.
   ============================================================ */
.panel table,
table.admin {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 100%;
}
.panel th,
.panel td,
table.admin th,
table.admin td {
  min-width: 90px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  vertical-align: middle;
}