/* NexousHub landing - Helpdesk/Support page styles (from the page <style> block; template-literal escapes unescaped) */
html, body { overflow-x: hidden; max-width: 100%; }

    /* ══════════════════════════════════════════
       WHITE MODE OVERRIDES — helpdesk.html
       ══════════════════════════════════════════ */

    /* Body background & text */
    /* [data-theme="light"] body {
      background: #f8fafc !important;
      color: #0f172a !important;
    } */

    /* Hero section background */
    [data-theme="light"] section {
      background-color: transparent;
    }

    /* All hardcoded text-white → dark text */
    [data-theme="light"] .text-white {
      color: #0f172a !important;
    }
    [data-theme="light"] h1.text-white,
    [data-theme="light"] h2.text-white,
    [data-theme="light"] h3.text-white,
    [data-theme="light"] h4.text-white {
      color: #0f172a !important;
    }

    /* text-white/60, text-white/55, text-white/40 etc. */
    [data-theme="light"] .text-white\/60,
    [data-theme="light"] .text-white\/55,
    [data-theme="light"] .text-white\/50,
    [data-theme="light"] .text-white\/40,
    [data-theme="light"] .text-white\/35,
    [data-theme="light"] .text-white\/30 {
      color: #475569 !important;
    }

    /* Inline style color overrides for rgba(255,255,255,...) text */
    [data-theme="light"] [style*="color:rgba(255,255,255,0.6)"],
    [data-theme="light"] [style*="color:rgba(255,255,255,0.55)"],
    [data-theme="light"] [style*="color:rgba(255,255,255,0.5)"],
    [data-theme="light"] [style*="color:rgba(255,255,255,0.4)"],
    [data-theme="light"] [style*="color:rgba(255,255,255,0.35)"],
    [data-theme="light"] [style*="color:rgba(255,255,255,0.3)"] {
      color: #64748b !important;
    }

    /* Mockup cards — dark bg → light bg */
    [data-theme="light"] [style*="background:#0d1117"],
    [data-theme="light"] [style*="background: #0d1117"] {
      background: #ffffff !important;
      border-color: rgba(15,23,42,0.12) !important;
    }
    [data-theme="light"] [style*="background:#161b22"],
    [data-theme="light"] [style*="background: #161b22"] {
      background: #f1f5f9 !important;
    }

    /* KPI cards inside mockup */
    [data-theme="light"] [style*="background:rgba(255,255,255,0.03)"],
    [data-theme="light"] [style*="background: rgba(255,255,255,0.03)"] {
      background: rgba(15,23,42,0.04) !important;
      border-color: rgba(15,23,42,0.08) !important;
    }
    [data-theme="light"] [style*="background:rgba(255,255,255,0.025)"] {
      background: rgba(15,23,42,0.03) !important;
      border-color: rgba(15,23,42,0.08) !important;
    }
    [data-theme="light"] [style*="background:rgba(255,255,255,0.05)"] {
      background: rgba(15,23,42,0.05) !important;
    }
    [data-theme="light"] [style*="background:rgba(255,255,255,0.08)"] {
      background: rgba(15,23,42,0.08) !important;
    }

    /* Feature/info cards */
    [data-theme="light"] [style*="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07)"] {
      background: #f8fafc !important;
      border-color: rgba(15,23,42,0.1) !important;
    }

    /* Section dividers */
    [data-theme="light"] [style*="border-color:rgba(255,255,255,0.07)"],
    [data-theme="light"] [style*="border-color:rgba(255,255,255,0.06)"],
    [data-theme="light"] [style*="border-color:rgba(255,255,255,0.08)"] {
      border-color: rgba(15,23,42,0.1) !important;
    }

    /* bg-white/[0.02] sections */
    /* [data-theme="light"] .bg-white\/\[0\.02\] {
      background: rgba(15,23,42,0.02) !important;
    } */

    /* Stats section border */
    [data-theme="light"] [style*="border-top:1px solid rgba(255,255,255,0.06)"],
    [data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.06)"] {
      border-color: rgba(15,23,42,0.08) !important;
    }

    /* Metrics bar cards */
    [data-theme="light"] .fade-up[style*="background:rgba(255,255,255,0.025)"] {
      background: #ffffff !important;
      border-color: rgba(15,23,42,0.1) !important;
      box-shadow: 0 2px 12px rgba(15,23,42,0.06);
    }

    /* Stats bar metric cards — fix invisible boxes & gradient text */
    [data-theme="light"] .fade-up[style*="background:var(--glass-bg)"] {
      background: #ffffff !important;
      border-color: rgba(0,0,0,0.1) !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    }
    /* Protect gradient text numbers from being overridden */
    [data-theme="light"] [style*="-webkit-text-fill-color:transparent"][style*="background:linear-gradient"] {
      -webkit-text-fill-color: transparent !important;
      color: transparent !important;
    }

    /* text-white/40 in stats labels */
    [data-theme="light"] .text-xs.text-white\/40 {
      color: #64748b !important;
    }

    /* FAQ items */
    [data-theme="light"] .faq-item-ui {
      background: #ffffff !important;
      border-color: rgba(15,23,42,0.1) !important;
    }
    [data-theme="light"] .faq-trigger:hover {
      background: rgba(15,23,42,0.03) !important;
    }
    [data-theme="light"] .faq-trigger .text-white\/40 {
      color: #94a3b8 !important;
    }

    /* Webhook events card hover */
    [data-theme="light"] .hover\:bg-white\/5:hover {
      background: rgba(15,23,42,0.04) !important;
    }

    /* How it works step circles — dark bg override */
    [data-theme="light"] [style*="background:#050508;border:2px solid"] {
      background: #ffffff !important;
      box-shadow: 0 0 0 5px #f8fafc, 0 0 20px rgba(79,142,247,0.3) !important;
    }

    /* How It Works - Step Boxes */
    .step-helpdesk {
      padding: 28px 20px;
      border-radius: 20px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.15);
      transition: all 0.3s ease;
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }
    .step-helpdesk:hover {
      background: rgba(79,142,247,0.1);
      border-color: rgba(79,142,247,0.4);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(79,142,247,0.2);
    }

    /* Light mode step boxes */
    [data-theme="light"] .step-helpdesk {
      background: #ffffff;
      border-color: rgba(0,0,0,0.08);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    [data-theme="light"] .step-helpdesk:hover {
      background: rgba(79,142,247,0.06);
      border-color: rgba(79,142,247,0.25);
      box-shadow: 0 8px 24px rgba(79,142,247,0.15);
    }
    [data-theme="light"] .steps-helpdesk .hidden.md\:block {
      opacity: 0.4;
    }

    /* CTA section */
    [data-theme="light"] #cta > div {
      background: linear-gradient(135deg, rgba(79,142,247,0.06), rgba(139,92,246,0.06)) !important;
      border-color: rgba(139,92,246,0.2) !important;
    }
    [data-theme="light"] #cta [style*="color:rgba(255,255,255,0.3)"] {
      color: #94a3b8 !important;
    }

    /* ── API Code Card — White Mode ── */
    [data-theme="light"] .api-code-card {
      background: #ffffff !important;
      border-color: rgba(15,23,42,0.1) !important;
      box-shadow: 0 2px 16px rgba(15,23,42,0.07) !important;
    }
    [data-theme="light"] .api-code-header {
      background: #f1f5f9 !important;
      border-bottom-color: rgba(15,23,42,0.08) !important;
    }
    [data-theme="light"] .api-code-title {
      color: #64748b !important;
    }
    [data-theme="light"] .api-code-body {
      background: #ffffff !important;
    }
    /* Syntax colors adjusted for white bg */
    [data-theme="light"] .api-c-method  { color: #7c3aed !important; }
    [data-theme="light"] .api-c-url     { color: #16a34a !important; }
    [data-theme="light"] .api-c-key     { color: #64748b !important; }
    [data-theme="light"] .api-c-kw      { color: #d97706 !important; }
    [data-theme="light"] .api-c-val     { color: #2563eb !important; }
    [data-theme="light"] .api-c-comment { color: #94a3b8 !important; }
    [data-theme="light"] .api-c-brace   { color: #1e293b !important; }
    [data-theme="light"] .api-c-prop    { color: #2563eb !important; }
    [data-theme="light"] .api-c-str     { color: #16a34a !important; }
    [data-theme="light"] .api-c-num     { color: #d97706 !important; }

    /* Table text */
    [data-theme="light"] table .text-white,
    [data-theme="light"] table [class*="text-white"] {
      color: #0f172a !important;
    }
    [data-theme="light"] table th[style*="color:rgba(255,255,255,0.35)"] {
      color: #64748b !important;
    }
    [data-theme="light"] table td[style*="color:rgba(255,255,255,0.5)"],
    [data-theme="light"] table td[style*="color:rgba(255,255,255,0.4)"] {
      color: #64748b !important;
    }
    [data-theme="light"] table tr[style*="border-bottom:1px solid rgba(255,255,255,0.04)"] {
      border-bottom-color: rgba(15,23,42,0.06) !important;
    }

    /* Search input in mockup */
    [data-theme="light"] input[style*="background:rgba(255,255,255,0.05)"] {
      background: rgba(15,23,42,0.04) !important;
      border-color: rgba(15,23,42,0.12) !important;
      color: #475569 !important;
    }

    /* Code block — keep dark (it's a code editor mockup) */
    [data-theme="light"] .rounded-xl.overflow-hidden[style*="background:#0d1117"] {
      background: #1e2433 !important;
    }
    [data-theme="light"] .rounded-xl.overflow-hidden[style*="background:#0d1117"] .text-white {
      color: #e2e8f0 !important;
    }

    /* Webhook card — keep dark */
    [data-theme="light"] .rounded-xl.overflow-hidden[style*="background:#0d1117"] [style*="color:rgba(255,255,255,0.5)"],
    [data-theme="light"] .rounded-xl.overflow-hidden[style*="background:#0d1117"] [style*="color:rgba(255,255,255,0.4)"] {
      color: #94a3b8 !important;
    }

    /* Section tag */
    [data-theme="light"] .section-tag {
      color: #4f8ef7 !important;
    }

    /* Divider gradients — slightly more visible on light */
    [data-theme="light"] [style*="background:linear-gradient(90deg,transparent,rgba(79,142,247,0.3)"] {
      background: linear-gradient(90deg, transparent, rgba(79,142,247,0.2), rgba(139,92,246,0.2), transparent) !important;
    }

    /* Hero badge */
    [data-theme="light"] .inline-flex[style*="background:rgba(79,142,247,0.12)"] {
      background: rgba(79,142,247,0.1) !important;
      border-color: rgba(79,142,247,0.3) !important;
    }

    /* Explore Features btn-outline on light */
    [data-theme="light"] .btn-outline {
      color: #4f8ef7 !important;
      border-color: rgba(79,142,247,0.5) !important;
    }

    /* ── BOT Token Deep Dive Mockup — full white in light mode ── */
    [data-theme="light"] .btm-deep-mockup {
      background: #ffffff !important;
      border-color: rgba(0,0,0,0.1) !important;
      box-shadow: 0 20px 60px rgba(0,0,0,0.1) !important;
    }
    [data-theme="light"] .btm-deep-header {
      background: #f8fafc !important;
      border-bottom-color: rgba(0,0,0,0.08) !important;
    }
    [data-theme="light"] .btm-deep-header[style*="background:#161b22"] { background: #f8fafc !important; }
    [data-theme="light"] .btm-deep-mockup .text-white { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; }
    [data-theme="light"] .btm-deep-mockup [style*="color:rgba(255,255,255,0.4)"] { color: #64748b !important; }
    [data-theme="light"] .btm-deep-mockup [style*="color:rgba(255,255,255,0.35)"] { color: #94a3b8 !important; }
    /* KPI row — light background so cards are visible */
    [data-theme="light"] .btm-deep-mockup .grid.grid-cols-4 {
      background: #f1f5f9 !important;
      border-bottom-color: rgba(0,0,0,0.08) !important;
    }
    /* KPI cards — white with visible border */
    [data-theme="light"] .btm-deep-mockup [style*="background:rgba(255,255,255,0.03)"] {
      background: #ffffff !important;
      border: 1px solid rgba(15,23,42,0.12) !important;
      box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
    }
    /* Employee rows body */
    [data-theme="light"] .btm-deep-mockup .p-4.space-y-3 { background: #ffffff !important; }
    /* Progress bar tracks */
    [data-theme="light"] .btm-deep-mockup [style*="background:rgba(255,255,255,0.08)"] {
      background: rgba(0,0,0,0.08) !important;
    }
    /* Outer dark bg override */
    [data-theme="light"] .btm-deep-mockup[style*="background:#0d1117"] { background: #ffffff !important; }
    [data-theme="light"] .bot-token-mockup { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.1) !important; }
    [data-theme="light"] .bot-token-mockup .btm-topbar,
    [data-theme="light"] .btm-topbar { background: #f8fafc !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
    /* Override the global #161b22 rule specifically for the topbar */
    [data-theme="light"] .btm-topbar[style*="background:#161b22"] { background: #f8fafc !important; }
    [data-theme="light"] .btm-title { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; }
    [data-theme="light"] .btm-sub { color: #64748b !important; }
    /* "BOT Token Management" title text (text-white inside topbar) */
    [data-theme="light"] .btm-topbar .text-white,
    [data-theme="light"] .btm-topbar [class*="text-white"] { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; }
    /* Refresh button in topbar */
    [data-theme="light"] .btm-topbar button { background: rgba(79,142,247,0.1) !important; border-color: rgba(79,142,247,0.25) !important; color: #2563eb !important; }
    [data-theme="light"] .btm-section-border { border-bottom-color: rgba(0,0,0,0.08) !important; }
    [data-theme="light"] .btm-kpi-card { background: #ffffff !important; border-color: rgba(15,23,42,0.12) !important; box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important; }
    [data-theme="light"] .helpdesk-kpi-grid { background: #f1f5f9 !important; }
    [data-theme="light"] .btm-label { color: #64748b !important; }
    [data-theme="light"] .btm-desc { color: #94a3b8 !important; }
    [data-theme="light"] .btm-table-header { background: #ffffff; border-bottom-color: rgba(0,0,0,0.08) !important; }
    [data-theme="light"] .btm-table-title { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; }
    [data-theme="light"] .btm-search { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.1) !important; color: #64748b !important; }
    [data-theme="light"] .btm-search::placeholder { color: #94a3b8 !important; }
    [data-theme="light"] .btm-table { background: #ffffff; }
    [data-theme="light"] .btm-thead-row { border-bottom-color: rgba(0,0,0,0.08) !important; }
    [data-theme="light"] .btm-th { color: #64748b !important; }
    [data-theme="light"] .btm-row { border-bottom-color: rgba(0,0,0,0.06) !important; }
    [data-theme="light"] .btm-id { color: #94a3b8 !important; }
    [data-theme="light"] .btm-name { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; }
    [data-theme="light"] .btm-email { color: #64748b !important; }
    [data-theme="light"] .btm-given { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; }
    [data-theme="light"] .btm-bar-bg { background: rgba(0,0,0,0.08) !important; }
    /* Table body area background */
    [data-theme="light"] .bot-token-mockup .overflow-x-auto { background: #ffffff !important; }
    [data-theme="light"] .bot-token-mockup tbody tr { background: #ffffff !important; }
    /* btm-id inline color override */
    [data-theme="light"] .btm-id[style*="color:rgba(255,255,255,0.5)"] { color: #94a3b8 !important; }
    /* Assign button */
    [data-theme="light"] .bot-token-mockup button[style*="background:rgba(79,142,247,0.15)"] {
      background: rgba(79,142,247,0.1) !important;
      border-color: rgba(79,142,247,0.25) !important;
      color: #2563eb !important;
    }

    /* Mobile Responsive */
    @media (max-width: 1024px) {
      /* Hero center */
      .helpdesk-hero-grid { display: flex !important; flex-direction: column !important; }
      .helpdesk-hero-grid > .fade-up:first-child { text-align: center; }
      .helpdesk-hero-grid > .fade-up:first-child p { margin-left: auto; margin-right: auto; }
      .helpdesk-hero-grid > .fade-up:first-child .flex.flex-wrap { justify-content: center; flex-wrap: nowrap !important; }
      .helpdesk-hero-grid > .fade-up:first-child .flex.flex-wrap a { flex: 1; max-width: 180px; text-align: center; padding: 14px 12px !important; }
      /* Mockup full width */
      .helpdesk-hero-grid > .fade-up:last-child { width: 100% !important; }
      /* KPIs 2 cols on mobile */
      .helpdesk-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
      /* Split sections center on mobile */
      #token-heading ~ p, #int-heading ~ p { margin-left: auto; margin-right: auto; }
      .helpdesk-split-center { text-align: center !important; }
      .helpdesk-split-center .section-tag { justify-content: center !important; display: inline-flex !important; }
      /* Reduce section spacing */
      section { padding-top: 40px !important; padding-bottom: 40px !important; }
      .pt-28 { padding-top: 100px !important; }
      .pb-10 { padding-bottom: 30px !important; }
      .mb-14 { margin-bottom: 28px !important; }
      .mb-16 { margin-bottom: 28px !important; }
    }
    @media (max-width: 768px) {
      h1 { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
      .steps.grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
      .steps-helpdesk { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
      .steps .hidden.md\:block { display: none !important; }
      [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
      [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
      [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
      .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
      .data-table { min-width: 600px !important; }
    }
    @media (max-width: 480px) {
      .steps.grid { grid-template-columns: 1fr !important; }
      .steps-helpdesk { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    }