/* ==============================================================
   SELLER SHELL — additions on top of base/components/builder.
   - Dark mode: CSS variable overrides triggered by [data-theme="dark"]
   - Mobile menu: hamburger + slide-down nav under 780px
   - Header action buttons: hamburger + theme toggle
   ============================================================== */

/* ── Dark mode ───────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #14121a;
  --card: #1d1a26;
  --preview-bg: #1a1822;
  --border: #2c2838;
  --border-strong: #3d3850;
  --text: #efe9e0;
  --text-mute: #b0a8bc;
  --text-faint: #6c647a;
  --orange-bg: #1f1730;
  --green-bg: #0e2c1c;
  --red-bg: #2a1414;
}
:root[data-theme="dark"] header.site {
  background: rgba(20, 18, 26, .85);
  border-bottom-color: var(--border);
}
:root[data-theme="dark"] footer.site {
  background: #18151f;
  border-top-color: var(--border);
}
:root[data-theme="dark"] .brand-name-index {
  color: #efe9e0;
}
:root[data-theme="dark"] .hero {
  background: linear-gradient(180deg, #1a1622 0%, var(--bg) 100%);
  border-bottom-color: var(--border);
}
:root[data-theme="dark"] .demo-banner {
  background: linear-gradient(90deg, #3a2c00, #4a3800);
  color: #fcd34d;
  border-bottom-color: #5a4400;
}
:root[data-theme="dark"] .hub-tool-card,
:root[data-theme="dark"] .discovery-card,
:root[data-theme="dark"] .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
/* Drop the white glass overlay on hub tool cards — invisible text otherwise */
:root[data-theme="dark"] .hub-tool-card::after {
  display: none !important;
}
/* Always show the accent stripe (per-platform: orange/green/blue) so cards
   keep their platform identity without relying on the gradient background. */
:root[data-theme="dark"] .hub-tool-card::before {
  transform: scaleX(1) !important;
}
:root[data-theme="dark"] .hub-section-title { color: var(--text); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

/* ── Dark mode text overrides ────────────────────────────────────
   The seller CSS hardcodes many text colors (#3d3832, #1f2937, etc.)
   that are invisible on dark backgrounds. Re-route them all to the
   var(--text) palette which dark mode flips.
   ──────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] body { color: var(--text); }

/* Brand name */
:root[data-theme="dark"] .brand-name-index { color: var(--text); }

/* Header nav links */
:root[data-theme="dark"] .nav a:hover,
:root[data-theme="dark"] .nav a.active { color: var(--text); }

/* Hero h1 (the platform name) */
:root[data-theme="dark"] .hero h1 { color: var(--text); }
:root[data-theme="dark"] .hero-platform-pill:hover { color: var(--text); }

/* Intro paragraphs */
:root[data-theme="dark"] .intro-content strong { color: var(--text); }

/* Builder card headers */
:root[data-theme="dark"] .card-hdr h2 { color: var(--text); }
:root[data-theme="dark"] .mode-tab:hover:not(.active) { color: var(--text); }
:root[data-theme="dark"] .style-chip .name,
:root[data-theme="dark"] .field label,
:root[data-theme="dark"] .opt-row-title,
:root[data-theme="dark"] .sym-howto strong,
:root[data-theme="dark"] .title-text,
:root[data-theme="dark"] .tag-set-summary strong,
:root[data-theme="dark"] .xform-help strong,
:root[data-theme="dark"] .mode-intro-body { color: var(--text); }
:root[data-theme="dark"] .mode-intro-body strong { color: #c4b5fd; }
:root[data-theme="dark"] .mode-intro-title { color: #c4b5fd; }
:root[data-theme="dark"] .xform-explainer { color: #c4b5fd; }

/* Symbol toolkit buttons (hardcoded white bg + dark text) */
:root[data-theme="dark"] .sym-btn {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .sym-toggle:hover {
  background: var(--preview-bg);
  color: var(--text);
}

/* Tag chips */
:root[data-theme="dark"] .tag-chip { color: var(--text); }

/* Hub & discovery cards */
:root[data-theme="dark"] .hub-section-title,
:root[data-theme="dark"] .hub-section-sub,
:root[data-theme="dark"] .hub-tool-card-name,
:root[data-theme="dark"] .hub-tool-card-platform,
:root[data-theme="dark"] .hub-tool-card-desc,
:root[data-theme="dark"] .hub-tool-card-cta,
:root[data-theme="dark"] .discovery-hdr h2,
:root[data-theme="dark"] .discovery-card .name,
:root[data-theme="dark"] .discovery-card .desc { color: var(--text); }
:root[data-theme="dark"] .hub-section-sub,
:root[data-theme="dark"] .hub-tool-card-desc,
:root[data-theme="dark"] .discovery-card .desc { color: var(--text-mute); }

/* Hub card gradients — keep their themed identity but darken the base
   so dark text rendered on them stays readable (cards themselves already
   get colored via .hub-tool-card override above). */

/* Preview card body */
:root[data-theme="dark"] .preview-body { color: var(--text); }
:root[data-theme="dark"] .field label .title-count.warn,
:root[data-theme="dark"] .field label .field-count.warn,
:root[data-theme="dark"] .preview-meta.warn,
:root[data-theme="dark"] .quality-indicator.ok,
:root[data-theme="dark"] .title-score.ok,
:root[data-theme="dark"] .tag-set-score.ok .tag-set-score-value,
:root[data-theme="dark"] .tag-chip.ok {
  background: #3a2c00 !important;
  color: #fcd34d !important;
  border-color: #5a4400 !important;
}

/* Demo banner already overridden above */

/* Etsy-only message */
:root[data-theme="dark"] .etsy-only-msg {
  background: #3a2c00;
  border-color: #5a4400;
  color: #fcd34d;
}
:root[data-theme="dark"] .etsy-only-msg strong { color: #fde68a; }

/* Footer sections */
:root[data-theme="dark"] .footer-links-label { color: var(--text-faint); }
:root[data-theme="dark"] .footer-links-group a { color: var(--text-mute); }
:root[data-theme="dark"] .footer-links-group a:hover { color: var(--text); }
:root[data-theme="dark"] .footer-legal,
:root[data-theme="dark"] .footer-legal p { color: var(--text-mute); }
:root[data-theme="dark"] .footer-legal a { color: var(--orange); }
:root[data-theme="dark"] .footer-tools-list { color: var(--text-faint); }
:root[data-theme="dark"] .footer-sister { color: var(--text); }

/* FAQ */
:root[data-theme="dark"] details summary { color: var(--text); }
:root[data-theme="dark"] details p { color: var(--text-mute); }

/* ── "Why IndexWolf" section (.hub-why) ──────────────────────── */
:root[data-theme="dark"] .hub-why {
  background: #18151f !important;
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}
:root[data-theme="dark"] .hub-why h2 {
  color: var(--text) !important;
}
:root[data-theme="dark"] .hub-why-sub {
  color: var(--text-mute) !important;
}
/* Replace the pastel gradient cards with dark cards that keep the
   per-card accent color (the accent stripe at the top stays vivid). */
:root[data-theme="dark"] .hub-why-item {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25) !important;
}
:root[data-theme="dark"] .hub-why-item::after {
  display: none;            /* glossy sheen looks bad on dark */
}
:root[data-theme="dark"] .hub-why-item::before {
  transform: scaleX(1);     /* show accent stripe always in dark mode */
}
:root[data-theme="dark"] .hub-why-item h3,
:root[data-theme="dark"] .hub-why-item p {
  color: var(--text);
}
:root[data-theme="dark"] .hub-why-item p {
  color: var(--text-mute);
}
:root[data-theme="dark"] .hub-why-icon {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .2) !important;
}
:root[data-theme="dark"] .hub-why-icon-img {
  filter: brightness(1.1);
}

/* ── FAQ section (.faq / .faq-item) ──────────────────────────── */
:root[data-theme="dark"] .faq h2 {
  color: var(--text) !important;
}
:root[data-theme="dark"] .faq-item {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .faq-q {
  color: var(--text) !important;
}
:root[data-theme="dark"] .faq-a {
  color: var(--text-mute) !important;
}

/* ══════════════════════════════════════════════════════════════
   BUILDER (Etsy/Shopify/eBay description generator pages)
   The builder.css has many hardcoded #fff backgrounds + dark
   text colors that become unreadable on dark theme. Comprehensive
   overrides below.
   ══════════════════════════════════════════════════════════════ */

/* Mode tabs ("Use a template / Paste yours / Custom") */
:root[data-theme="dark"] .mode-tabs {
  background: #14111a !important;
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .mode-tab.active {
  background: var(--card) !important;
  color: #c4b5fd !important;
}

/* Template picker search + grid + cards */
:root[data-theme="dark"] .tpl-search {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .tpl-grid {
  background: #14111a !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .tpl-card {
  background: var(--card) !important;
  border-color: transparent !important;
}
:root[data-theme="dark"] .tpl-card:hover {
  background: #2a2535 !important;
  border-color: var(--border-strong) !important;
}
:root[data-theme="dark"] .tpl-card.active {
  background: rgba(124, 58, 237, .25) !important;
  border-color: #a78bfa !important;
}
:root[data-theme="dark"] .tpl-card-name {
  color: var(--text) !important;
}
:root[data-theme="dark"] .tpl-card.active .tpl-card-name {
  color: #c4b5fd !important;
}

/* Style chips */
:root[data-theme="dark"] .style-chip {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .style-chip.active {
  background: rgba(124, 58, 237, .25) !important;
  border-color: #a78bfa !important;
}
:root[data-theme="dark"] .style-chip.active .name {
  color: #c4b5fd !important;
}

/* Field count badges */
:root[data-theme="dark"] .field label .title-count,
:root[data-theme="dark"] .field label .field-count {
  background: var(--card) !important;
  color: var(--text-mute) !important;
}

/* Transform toolbar */
:root[data-theme="dark"] .xform-btn {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .xform-btn:hover {
  background: rgba(124, 58, 237, .25) !important;
  color: #c4b5fd !important;
  border-color: #a78bfa !important;
}
:root[data-theme="dark"] .xform-help {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-mute) !important;
}
:root[data-theme="dark"] .xform-help strong {
  color: var(--text) !important;
}

/* Paste source note + mode intro card */
:root[data-theme="dark"] .paste-source-note,
:root[data-theme="dark"] .mode-intro {
  background: linear-gradient(135deg, #251c3a, #1f1730) !important;
  border-color: #3d2c5e !important;
  color: var(--text-mute) !important;
}
:root[data-theme="dark"] .mode-intro-tip {
  background: rgba(0, 0, 0, .25) !important;
  color: var(--text-mute) !important;
}

/* Optional sections panel */
:root[data-theme="dark"] .opt-panel,
:root[data-theme="dark"] .opt-panel-hdr {
  background: #14111a !important;
  border-color: var(--border) !important;
  color: var(--text-mute) !important;
}
:root[data-theme="dark"] .opt-row {
  border-bottom-color: var(--border) !important;
}
:root[data-theme="dark"] .opt-toggle {
  background: #3d3850 !important;
}
:root[data-theme="dark"] .opt-toggle::after {
  background: var(--card) !important;
}
:root[data-theme="dark"] .opt-row-body textarea {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Symbol library */
:root[data-theme="dark"] .sym-library,
:root[data-theme="dark"] .sym-toggle {
  background: #14111a !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .sym-howto {
  background: var(--card) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-mute) !important;
}
:root[data-theme="dark"] .sym-btn:hover {
  background: rgba(124, 58, 237, .25) !important;
  border-color: #a78bfa !important;
}

/* Custom-mode sections editor */
:root[data-theme="dark"] .section-item {
  background: #14111a !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .section-item .remove {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .section-item .remove:hover {
  background: #3a1414 !important;
}
:root[data-theme="dark"] .add-section {
  background: var(--card) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-mute) !important;
}

/* Preview card header */
:root[data-theme="dark"] .preview-card .card-hdr {
  background: #14111a !important;
}

/* Tag/title score chips */
:root[data-theme="dark"] .tag-set-score,
:root[data-theme="dark"] .tag-set-score-label {
  background: transparent !important;
  color: var(--text-mute) !important;
}

/* Tag suggestions section */
:root[data-theme="dark"] .tag-suggestions {
  background: rgba(124, 58, 237, .12) !important;
  border-color: #3d2c5e !important;
}
:root[data-theme="dark"] .tag-suggestions-title {
  color: #c4b5fd !important;
}

/* Generic input/textarea/select catchall (in case any are still light) */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Hero platform pills (Etsy/Shopify/eBay capsule selector) */
:root[data-theme="dark"] .hero-platforms {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
}
:root[data-theme="dark"] .hero-platform-pill {
  color: var(--text-mute) !important;
}
:root[data-theme="dark"] .hero-platform-pill:hover {
  color: var(--text) !important;
}
:root[data-theme="dark"] .hero-platform-pill.active {
  background: var(--orange) !important;   /* keep the purple-accent active state */
  color: #fff !important;
}

/* Preview meta chip (character count) — neutral default */
:root[data-theme="dark"] .preview-meta {
  background: var(--card) !important;
  color: var(--text-mute) !important;
}
:root[data-theme="dark"] .preview-meta.ok {
  background: rgba(34, 197, 94, .15) !important;
  color: #86efac !important;
}
:root[data-theme="dark"] .preview-meta.warn {
  background: rgba(234, 179, 8, .15) !important;
  color: #fcd34d !important;
}
:root[data-theme="dark"] .preview-meta.over {
  background: rgba(239, 68, 68, .18) !important;
  color: #fca5a5 !important;
}

/* Preview body (the generated description text area) */
:root[data-theme="dark"] .preview-body {
  background: #14111a !important;
  color: var(--text) !important;
}

/* Preview trust bar — "Your description stays on your device" */
:root[data-theme="dark"] .preview-trust {
  background: rgba(34, 197, 94, .10) !important;
  border-top-color: rgba(34, 197, 94, .3) !important;
  color: #86efac !important;
}

/* Generic .btn (Reset, Download, Copy etc.) */
:root[data-theme="dark"] .btn {
  background: var(--card) !important;
  color: var(--text-mute) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .btn:hover {
  background: #2a2535 !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
/* Preserve primary/success/danger button accents in dark mode */
:root[data-theme="dark"] .btn-primary {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .btn-primary:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
}
:root[data-theme="dark"] .btn-success {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
:root[data-theme="dark"] .modal-actions .btn-danger {
  background: var(--card) !important;
  border-color: #5a1414 !important;
  color: #fca5a5 !important;
}
:root[data-theme="dark"] .modal-actions .btn-danger:hover {
  background: #3a1414 !important;
}

/* ── Header action buttons (hamburger + theme toggle) ────────── */
.shell-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: center;
}
.shell-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all .15s;
}
.shell-btn:hover {
  color: var(--orange);
  border-color: var(--orange);
}
.shell-btn-hamburger { display: none; }   /* hidden on desktop, shown on mobile */

/* ── Mobile menu — slide-in drawer from the right ───────────── */
@media (max-width: 780px) {
  header.site {
    padding: 0 14px;
    gap: 10px;
    /* CRITICAL: backdrop-filter creates a containing block that traps
       position:fixed children inside the header's 62px height. Drop it
       on mobile so the drawer can position relative to the viewport. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, .98) !important;
  }
  :root[data-theme="dark"] header.site {
    background: rgba(20, 18, 26, .98) !important;
  }
  .brand-sub { display: none; }            /* hide tagline on small screens */
  .shell-btn-hamburger { display: inline-flex; }

  /* Right-side drawer. Always rendered, slid off-screen by transform.
     z-index is higher than the sticky header (which is 100) so it
     appears in front of everything. */
  .nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
    width: 280px;
    max-width: 82vw;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 70px 18px 24px;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
    z-index: 250;
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .nav.shell-open { transform: translateX(0) !important; }

  /* Backdrop — sits behind drawer, dims the page when menu is open.
     Inserted via the existing .nav.shell-open trick using a pseudo on body. */
  body.shell-menu-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 240;
    cursor: pointer;
  }

  .nav a {
    padding: 14px 6px !important;
    font-size: 15px !important;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.active::after { display: none; }  /* underline doesn't fit vertical menu */

  /* The "SEO tools" chip — show as full-width pill at the bottom of the drawer */
  .nav a[data-nav="seoTools"] {
    margin-left: 0 !important;
    margin-top: 14px;
    text-align: center;
    border-bottom: none !important;
    background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Make the hamburger sit above the drawer too, so it's the "close" button
     position when the menu is open. */
  .shell-btn-hamburger { z-index: 260; position: relative; }
}