/* ============================================================
   EmailsWave — Global light theme (Omnisend-quality re-skin)
   Loaded AFTER style.css on every page EXCEPT the home page
   (home has its own dedicated home.css). Re-maps the dark app
   theme to the purple/pink light system by overriding the CSS
   variables + patching the rules that hardcoded dark colors.

     Primary #6C3CEC  Accent #FF6B9D  BG #FAF9FD
     Card #FFFFFF  Text #1A1538  Muted #5C587A
   ============================================================ */

:root {
    /* Brand */
    --primary: #6C3CEC;
    --primary-light: #A362F0;
    --primary-dark: #5A2FD0;
    --accent: #FF6B9D;
    --accent-light: #ff9dbf;

    /* Surfaces (were dark) → light */
    --dark:   #FAF9FD;   /* page background            */
    --dark-2: #FFFFFF;   /* card background            */
    --dark-3: #FFFFFF;   /* nested card background     */

    /* Text scale: on the dark theme these were light grays used as body
       text; remap so they read as ink / muted on a light background.     */
    --gray-900: #1A1538;
    --gray-800: #241d4a;
    --gray-700: #3a3560;
    --gray-600: #4a466a;
    --gray-500: #5C587A;   /* muted text */
    --gray-400: #6f6b8e;
    --gray-300: #47426b;   /* was light; now readable body-ish */
    --gray-200: #1A1538;   /* DEFAULT body text -> ink */
    --gray-100: #ece9f6;   /* light tint */
    --gray-50:  #f5f3fb;

    --shadow: 0 4px 24px rgba(107, 60, 236, 0.06);
    --shadow-lg: 0 24px 64px rgba(107, 60, 236, 0.16);
    --shadow-glow: 0 0 40px rgba(108, 60, 236, 0.12);
    --radius: 16px;
    --ink: #1A1538;
    --muted: #5C587A;
    --hairline: rgba(108, 60, 236, 0.10);
}

body {
    background: var(--dark);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -0.01em; }

/* Links */
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* Headings were white; ink on light. */
h1, h2, h3, h4, h5, h6 { color: var(--ink); }

.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.text-muted { color: var(--muted); }

/* ---------- Navigation ---------- */
.navbar { background: transparent; }
.navbar.scrolled {
    background: rgba(250, 249, 253, 0.8);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 4px 20px rgba(107, 60, 236, 0.06);
}
.nav-brand, .brand-text, .brand-text.brand-accent { color: var(--ink) !important; }
.brand-accent { color: var(--primary) !important; }
.brand-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff !important;
}
.nav-links a { color: var(--muted); }
.nav-links a:hover, .nav-links a.active {
    color: var(--primary);
    background: rgba(108, 60, 236, 0.08);
}
.nav-btn-outline {
    color: var(--primary) !important;
    border: 1.5px solid rgba(108, 60, 236, 0.24) !important;
}
.nav-btn-outline:hover { background: rgba(108,60,236,0.06); border-color: var(--primary) !important; }
.nav-toggle span { background: var(--ink); }

/* ---------- Buttons ---------- */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    box-shadow: 0 8px 24px rgba(107, 60, 236, 0.28);
    border-radius: 10px;
}
.btn-primary:hover { color: #fff; box-shadow: 0 12px 32px rgba(107, 60, 236, 0.36); }
.btn-outline {
    color: var(--primary);
    border: 1.5px solid rgba(108, 60, 236, 0.24);
    background: transparent;
    border-radius: 10px;
}
.btn-outline:hover { color: var(--primary); background: rgba(108,60,236,0.06); border-color: var(--primary); }
.btn-white { background: #fff; color: var(--primary); }
.btn-glass { background: rgba(255,255,255,0.16); color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.btn-glass:hover { background: rgba(255,255,255,0.24); color: #fff; }

/* ---------- Hero / sections ---------- */
.hero-title, .section-title, .stat-number, .step-card h3, .feature-card h3,
.product-card h3, .spec-value, .efficiency-card h3 { color: var(--ink); }
.hero-subtitle, .section-subtitle { color: var(--muted); }
.hero-badge {
    background: rgba(108, 60, 236, 0.08);
    color: var(--primary);
    border: none;
}
.section.features-section, .products-preview-section,
.section[style*="--dark-2"], .product-details-section { background: var(--dark) !important; }

/* ---------- Cards (generic) ---------- */
.feature-card, .product-card, .spec-card, .efficiency-card, .contact-info-card,
.admin-stat-card, .admin-panel, .pending-card, .form-card, .detail-card,
.import-card, .template-card, .step-card, .faq-item {
    background: #fff;
    border: none !important;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
.feature-card:hover, .product-card:hover, .template-card:hover, .step-card:hover {
    box-shadow: 0 12px 32px rgba(107,60,236,0.12);
    transform: translateY(-4px);
}
.feature-icon { color: #fff; }

/* ---------- Comparison table ---------- */
.comparison-table-wrapper { border: 1px solid var(--hairline); }
.comparison-table th { background: #f3f0fc; color: var(--ink); border-bottom: 1px solid var(--hairline); }
.comparison-table td { border-bottom: 1px solid var(--hairline); color: var(--muted); }

/* ---------- Forms ---------- */
.form-group input, .form-group textarea, .form-group select,
.app-form input, .app-form textarea, .app-form select {
    background: #fff;
    border: 1.5px solid rgba(108, 60, 236, 0.16);
    color: var(--ink);
    border-radius: 10px;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #a8a4c0; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,60,236,0.12);
    outline: none;
}
.form-group label, .app-form label { color: var(--ink); }
.form-group select option { background: #fff; color: var(--ink); }

/* ---------- Tables / rows / hairlines ---------- */
.detail-card-header, .admin-panel-header, .admin-table th, .admin-table td,
.template-card-header, .template-card-actions, .contact-links li,
.spec-row, .feature-row, .price-row, .footer-bottom {
    border-color: var(--hairline) !important;
}
.admin-table th { color: var(--muted); }
.admin-table td { color: var(--ink); }

/* ---------- Alerts (reuse the improved contrast rules) ---------- */
.alert { box-shadow: var(--shadow); border-left: 4px solid transparent; }
.alert-success { background: rgba(0,184,148,0.14); border-color: rgba(0,184,148,0.4); border-left-color: #00B894; color: #0b7a63; }
.alert-error { background: rgba(225,112,85,0.14); border-color: rgba(225,112,85,0.4); border-left-color: var(--accent); color: #b23c5e; }
.alert strong { color: var(--ink); }

/* ---------- Status badges ---------- */
.status-draft, .status-inactive, .status-responded { background: rgba(108,60,236,0.08); color: var(--muted); }

/* ---------- Auth / login ---------- */
.login-wrapper, .auth-switch { color: var(--muted); }
.auth-switch a { color: var(--primary); }

/* ---------- Footer ---------- */
.footer {
    background: #1A1538;
    border-top: none;
}
.footer, .footer p, .footer-desc, .footer-col a, .footer-bottom p { color: rgba(255,255,255,0.72); }
.footer-col h4 { color: rgba(255,255,255,0.5); }
.footer .brand-text { color: #fff !important; }
.footer .brand-accent { color: var(--accent) !important; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }

/* ---------- Mobile nav panel ---------- */
@media (max-width: 1024px) {
    .nav-links {
        background: rgba(250,249,253,0.98);
        border-bottom: 1px solid var(--hairline);
    }
}

/* ---------- Step numbers / accents ---------- */
.step-number, .admin-stat-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
}

/* ---------- Product card headers keep their gradients but text stays white ---------- */
.product-card-header, .product-card-header h3, .product-card-header p, .product-speed { color: #fff; }
.product-highlights li { color: var(--muted); }
.product-badge { background: var(--accent); color: #fff; }

/* ---------- FAQ ---------- */
.faq-question { color: var(--ink); }
.faq-answer { color: var(--muted); }

/* ---------- CTA box ---------- */
.cta-box {
    background: linear-gradient(135deg, #6C3CEC 0%, #8B4DEE 50%, #A362F0 100%);
    border: none;
}
.cta-box h2, .cta-box p { color: #fff; }
.cta-box p { opacity: 0.85; }

/* ---------- Product detail hero (keeps its inline gradient bg) ---------- */
/* Text stays white on the colored gradient; the bottom fade blends into the
   light page background. */
.product-hero h1, .product-hero .product-hero-speed,
.product-hero-tagline, .product-hero-desc { color: #fff; }

/* ---------- Dashboard / app generic surfaces ---------- */
.dashboard-card, .stat-card, .panel, .card, .app-card {
    background: #fff !important;
    border: none !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius) !important;
}

/* Any remaining muted body copy reads as ink/muted, never washed-out gray. */
p, li, td, span, label, .text-secondary { color: inherit; }

/* Code / pre blocks on light bg */
pre, code, .code-block {
    background: #f3f0fc !important;
    color: #4a2fb0 !important;
    border: 1px solid var(--hairline) !important;
}

/* ============================================================
   CONTRAST FIXES — override every remaining white/light text
   from style.css that would render invisible on the light theme.
   Loaded last, so these win by source order.
   ============================================================ */

/* Alerts: readable dark text + visible code/links (was #fff → invisible). */
.alert { color: #3a2f5c; }
.alert strong { color: var(--ink) !important; }
.alert p { color: inherit !important; opacity: 1; }
.alert-success, .alert-success strong { color: #0b6b57 !important; }
.alert-error, .alert-error strong { color: #a5344f !important; }
.alert a { color: inherit; font-weight: 700; text-decoration: underline; }
.alert code {
    background: rgba(0,0,0,0.06) !important;
    color: #4a2fb0 !important;
    padding: 2px 8px; border-radius: 4px; font-family: monospace;
}

/* Headings / hero stats / section numbers that were var(--white). */
.hero-title, .section-title, .page-title, .stat-number,
.comparison-table th, .spec-value, .efficiency-label,
.admin-stat-number, .detail-list dd, .contact-info-item strong,
.step-card h3, .feature-card h3, .product-detail-info h4,
.template-subject, .legal-content p, .legal-content li,
.product-detail-info p, .product-detail-features li,
.feature-list-item span, .perf-label, .quick-action span {
    color: var(--ink);
}

/* Comparison table first column (was light gray). */
.comparison-table th:first-child { color: var(--muted); }

/* Muted secondary text that was gray-300/400 on dark → readable muted. */
.product-highlights li, .contact-info-item p, .form-group small,
.detail-list dt, .template-meta, .faq-answer p, .section-subtitle,
.page-subtitle, .hero-subtitle, .admin-table td { color: var(--muted); }

/* Nav links (were light gray/white). */
.nav-links a { color: var(--muted); }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-btn-outline { color: var(--primary) !important; border-color: rgba(108,60,236,0.24) !important; }

/* Buttons: gradient/primary keep WHITE text (these SHOULD stay white). */
.btn-primary, .btn-primary:hover { color: #fff !important; }
.btn-glass, .btn-glass:hover { color: #fff !important; }
.btn-white { color: var(--primary) !important; }
.btn-outline { color: var(--primary); border-color: rgba(108,60,236,0.24); }
.btn-outline:hover { color: var(--primary); }

/* Outline buttons that sit on a COLORED hero/cta band must stay white. */
.product-hero .btn-white, .cta-box .btn-white { color: var(--primary) !important; }
.product-hero .btn-glass, .cta-box .btn-glass { color: #fff !important; }

/* Elements that intentionally sit on gradient/colored backgrounds keep white. */
.product-card-header, .product-card-header h3, .product-card-header p, .product-speed,
.product-hero h1, .product-hero-speed, .product-hero-tagline, .product-hero-desc,
.cta-box h2, .cta-box p, .th-badge, .product-badge, .step-number, .admin-stat-icon,
.feature-icon { color: #fff; }

/* Textareas / code editors that were white-on-dark. */
.app-form textarea, .code-editor, textarea.code, pre {
    background: #f7f5fd !important;
    color: var(--ink) !important;
    border: 1.5px solid rgba(108,60,236,0.16) !important;
}

/* Generic anchor hover was var(--white) → keep it a readable primary tint. */
a:hover { color: var(--primary-dark); }

/* Body default text (was gray-200 light). */
body { color: var(--ink); }

/* ============================================================
   BUTTON CONTRAST HARDENING (v3)
   Kills every white-text-on-white-bg case. In this light theme
   --dark was remapped to a near-white (#FAF9FD), so any rule that
   set button text to var(--dark) or var(--white) on a light button
   rendered invisible — most visibly the hover states below.
   ============================================================ */
.btn-white,
.btn-white:hover,
.btn-white:focus {
    background: #fff !important;
    color: var(--primary) !important;
    box-shadow: 0 4px 16px rgba(108,60,236,0.16);
}
/* Outline buttons: readable ink/primary text at rest AND on hover
   (style.css turned hover text white → invisible on the light tint). */
.btn-outline {
    color: var(--primary) !important;
    border: 1.5px solid rgba(108,60,236,0.28) !important;
    background: transparent !important;
}
.btn-outline:hover,
.btn-outline:focus {
    color: var(--primary-dark) !important;
    background: rgba(108,60,236,0.08) !important;
    border-color: var(--primary) !important;
}
/* A bare .btn with no colour modifier must never be white-on-white. */
.btn:not(.btn-primary):not(.btn-white):not(.btn-glass):not(.btn-danger):not(.btn-outline) {
    color: var(--ink);
}
/* Danger stays readable on its tinted background. */
.btn-danger, .btn-danger:hover { color: #b23c5e !important; }

/* Webmail top-bar / toolbar buttons: guarantee readable text. */
.ox-btn { color: var(--ox-ink, #1A1538) !important; background: #fff; }
.ox-btn:hover { color: var(--ox-primary, #6C3CEC) !important; }
.ox-btn-primary, .ox-btn-primary:hover { color: #fff !important; }
.ox-fmt { color: #1A1538 !important; }

/* ============================================================
   MOBILE / RESPONSIVE HARDENING (all non-home pages)
   ============================================================ */

/* Any wide table scrolls horizontally instead of breaking the layout. */
.admin-table-wrapper, .table-scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    .admin-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .detail-grid, .settings-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    /* Tighter section rhythm on phones (desktop uses ~120px). */
    .section { padding: 56px 0 !important; }
    .page-hero { padding: 96px 0 32px !important; }
    .page-hero.compact { padding: 88px 0 24px !important; }
    .page-title { font-size: 1.9rem !important; }
    .page-subtitle { font-size: 1rem !important; }
    .container { padding-left: 18px !important; padding-right: 18px !important; }

    /* Stat cards + quick actions stack/wrap cleanly. */
    .admin-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .quick-actions { flex-wrap: wrap; gap: 10px; }
    .quick-actions .btn { flex: 1 1 calc(50% - 10px); justify-content: center; }

    /* Admin panel header (title + "View all") stacks. */
    .admin-panel-header { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* Forms: single column, full-width submit. */
    .form-row { grid-template-columns: 1fr !important; }
    .app-form .btn, .login-form .btn { width: 100%; }
    .form-card { padding: 22px 18px !important; }

    /* Tables become horizontally scrollable and keep readable min-width. */
    .admin-table, .mb-table { min-width: 640px; }

    /* Mailbox row action buttons wrap under each other instead of overflowing. */
    .mb-table td[style*="right"] { white-space: normal !important; }
    .mb-table td .btn, .mb-table td form { margin: 2px 0; }
    .mb-conn-grid { grid-template-columns: 1fr !important; }

    /* Comparison / spec tables scroll. */
    .comparison-table-wrapper { overflow-x: auto; }
}

@media (max-width: 480px) {
    .admin-stats { grid-template-columns: 1fr !important; }
    .quick-actions .btn { flex: 1 1 100%; }
    .page-title { font-size: 1.65rem !important; }
    .btn-lg { padding: 12px 22px; font-size: 1rem; }
}