/* ============================================================
   DARK MODE CSS — Slide Maker Online
   Overrides and dark-specific styles
   ============================================================ */

/* ── Dark mode body overrides ─────────────────────────────── */
[data-theme="dark"] body {
    background-color: #0D0D1A;
    color: #F0EEFF;
}

/* ── Scrollbar (dark mode) ────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #13132A; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3B1F8C; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5B21B6; }

/* ── Selection color ──────────────────────────────────────── */
[data-theme="dark"] ::selection { background: rgba(124,58,237,0.4); color: #fff; }
[data-theme="light"] ::selection { background: rgba(124,58,237,0.2); color: #1A1A2E; }

/* ── Light mode scrollbar ─────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar { width: 8px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #F5F3FF; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #C4B5FD; border-radius: 4px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #7C3AED; }

/* ── Light mode hero (different from dark) ────────────────── */
[data-theme="light"] .hero-bg-gradient {
    background: linear-gradient(135deg, #4C1D95 0%, #6D28D9 40%, #7C3AED 100%);
}
[data-theme="light"] .hero-title {
    background: linear-gradient(135deg, #FFFFFF 0%, #EDE9FE 50%, #FCD34D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .hero-subtitle { color: rgba(255,255,255,0.85); }
[data-theme="light"] .hero-tag { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.15); }
[data-theme="light"] .generator-counter { color: rgba(255,255,255,0.6); }

/* ── Inputs dark mode ─────────────────────────────────────── */
[data-theme="dark"] .smo-input,
[data-theme="dark"] .smo-select {
    background: #1A1A2E;
    border-color: rgba(124,58,237,0.3);
    color: #F0EEFF;
}
[data-theme="dark"] .smo-input::placeholder { color: #4B4875; }
[data-theme="dark"] .smo-input:focus,
[data-theme="dark"] .smo-select:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 4px rgba(124,58,237,0.25);
}

/* ── Generator card dark mode ─────────────────────────────── */
[data-theme="dark"] .generator-card {
    background: rgba(20, 20, 40, 0.85);
    border-color: rgba(124,58,237,0.3);
    box-shadow: 0 8px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Step cards dark mode ─────────────────────────────────── */
[data-theme="dark"] .step-card {
    background: #1A1A2E;
    border-color: rgba(124,58,237,0.2);
}
[data-theme="dark"] .step-card:hover { box-shadow: 0 10px 40px rgba(124,58,237,0.25); }

/* ── Feature cards dark mode ──────────────────────────────── */
[data-theme="dark"] .feature-card {
    background: linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(168,85,247,0.05) 100%);
    border-color: rgba(124,58,237,0.2);
}

/* ── Post cards dark mode ─────────────────────────────────── */
[data-theme="dark"] .post-card {
    background: #1A1A2E;
    border-color: rgba(124,58,237,0.2);
}
[data-theme="dark"] .post-card:hover { box-shadow: 0 10px 40px rgba(124,58,237,0.25); }

/* ── Loading card dark mode ───────────────────────────────── */
[data-theme="dark"] .loading-card { background: #1A1A2E; border-color: rgba(124,58,237,0.25); }

/* ── Article content dark mode ────────────────────────────── */
[data-theme="dark"] .article-content { color: #B4A9D4; }
[data-theme="dark"] .article-content h2,
[data-theme="dark"] .article-content h3 { color: #F0EEFF; }
[data-theme="dark"] .article-content code { background: #13132A; color: #C4B5FD; }
[data-theme="dark"] blockquote { border-color: #7C3AED; color: #8B7BAD; }

/* ── Author bio dark mode ─────────────────────────────────── */
[data-theme="dark"] .author-bio { background: #13132A; }

/* ── Pagination dark mode ─────────────────────────────────── */
[data-theme="dark"] .page-numbers {
    background: #1A1A2E;
    border-color: rgba(124,58,237,0.25);
    color: #B4A9D4;
}
[data-theme="dark"] .page-numbers:hover,
[data-theme="dark"] .page-numbers.current { background: #7C3AED; border-color: #7C3AED; color: #fff; }

/* ── Search form dark mode ────────────────────────────────── */
[data-theme="dark"] .search-form input[type="search"] {
    background: #1A1A2E;
    border-color: rgba(124,58,237,0.3);
    color: #F0EEFF;
}

/* ── Admin styles (both modes) ────────────────────────────── */
.smo-admin-wrap { max-width: 800px; }
.smo-admin-header {
    padding: 20px 0 16px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}
.smo-admin-header h1 { font-size: 1.5rem; color: #1f2937; }
.smo-admin-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.smo-admin-card h2 { font-size: 1.1rem; margin-bottom: 16px; color: #374151; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; }

/* ── Minimal Light Mode slide preview override ────────────── */
[data-theme="light"] .slide-theme-minimal {
    background: #fff;
    border-color: #DDD6FE;
}