/* Dark mode overrides — activated by html[data-theme="dark"]
   Uses [data-theme="dark"] attribute selector for higher specificity
   than page-level <style> blocks (which use bare element/class selectors). */

/* ========== Global elements ========== */

[data-theme="dark"] body {
    background: #0f172a !important;
    color: #e2e8f0;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2 {
    color: #7dd3fc !important;
}

[data-theme="dark"] h3 {
    color: #7dd3fc;
}

[data-theme="dark"] p {
    color: #cbd5e1;
}

[data-theme="dark"] li {
    color: #cbd5e1;
}

[data-theme="dark"] strong {
    color: #e2e8f0;
}

[data-theme="dark"] a {
    color: #7dd3fc;
}

[data-theme="dark"] a:hover {
    color: #bae6fd;
}

/* Nav — already dark, just refine hover */
[data-theme="dark"] nav[aria-label="Main navigation"] a {
    color: white;
}
[data-theme="dark"] nav[aria-label="Main navigation"] a:hover {
    color: #bae6fd;
}

/* Footer — already dark background, refine link color */
[data-theme="dark"] footer a {
    color: #7dd3fc;
}

/* ========== Content cards & containers ========== */

[data-theme="dark"] .content {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .container {
    color: #e2e8f0;
}

[data-theme="dark"] .highlight {
    background-color: #1e3a5f;
    border-left-color: #38bdf8;
}

[data-theme="dark"] .highlight p,
[data-theme="dark"] .highlight strong {
    color: #e2e8f0;
}

/* ========== Breadcrumbs ========== */

[data-theme="dark"] .breadcrumb-nav a {
    color: #7dd3fc;
}
[data-theme="dark"] .breadcrumb-nav a:hover {
    color: #bae6fd;
}
[data-theme="dark"] .breadcrumb-nav .active {
    color: #94a3b8;
}
[data-theme="dark"] .breadcrumb-nav li + li::before {
    color: #64748b;
}

/* ========== Index page: Form ========== */

[data-theme="dark"] form {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] label {
    color: #e2e8f0;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b;
}

/* ========== Index page: Buttons ========== */

[data-theme="dark"] button {
    background-color: #0ea5e9;
}
[data-theme="dark"] button:hover {
    background-color: #38bdf8;
}

/* ========== Index page: Preset buttons ========== */

[data-theme="dark"] .preset-btn {
    background: #1e293b;
    color: #7dd3fc;
    border-color: #334155;
}
[data-theme="dark"] .preset-btn:hover {
    background: #334155;
}
[data-theme="dark"] .preset-btn.active {
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
}

/* ========== Index page: Custom color panel ========== */

[data-theme="dark"] #customColorPanel {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .color-picker-group label {
    color: #cbd5e1;
}

[data-theme="dark"] .color-preview-label {
    color: #94a3b8;
}

/* ========== Index page: Habit count ========== */

[data-theme="dark"] #habitCount {
    color: #94a3b8 !important;
}

/* ========== Index page: Form validation states ========== */

[data-theme="dark"] input.input-valid,
[data-theme="dark"] textarea.input-valid {
    border-color: #22c55e;
}

[data-theme="dark"] input.input-invalid,
[data-theme="dark"] textarea.input-invalid {
    border-color: #ef4444;
}

[data-theme="dark"] input.input-warning,
[data-theme="dark"] textarea.input-warning {
    border-color: #f59e0b;
}

[data-theme="dark"] .validation-hint.hint-error {
    color: #f87171;
}

[data-theme="dark"] .validation-hint.hint-warning {
    color: #fbbf24;
}

[data-theme="dark"] .validation-hint.hint-success {
    color: #4ade80;
}

/* ========== Index page: Recent trackers ========== */

[data-theme="dark"] #recentTrackers {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #recentTrackers h3 {
    color: #7dd3fc;
}

[data-theme="dark"] .history-item {
    border-bottom-color: #334155;
}

[data-theme="dark"] .history-info {
    color: #e2e8f0;
}

[data-theme="dark"] .history-info .history-meta {
    color: #94a3b8;
}

[data-theme="dark"] .history-load-btn {
    background: #0ea5e9;
}
[data-theme="dark"] .history-load-btn:hover {
    background: #38bdf8;
}

[data-theme="dark"] .history-clear {
    color: #94a3b8;
}
[data-theme="dark"] .history-clear:hover {
    color: #f87171;
}

/* ========== Index page: Tracker insights ========== */

[data-theme="dark"] #trackerInsights {
    background: #1e293b;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #trackerInsights h3 {
    color: #7dd3fc;
}

[data-theme="dark"] .insight-card {
    background: #0f172a;
    border-left-color: #0ea5e9;
}

[data-theme="dark"] .insight-card h4 {
    color: #7dd3fc;
}

[data-theme="dark"] .insight-card li {
    color: #cbd5e1;
}

[data-theme="dark"] .insight-card a {
    color: #38bdf8;
}

[data-theme="dark"] .insight-fact {
    background: linear-gradient(135deg, #1e3a5f, #1e293b) !important;
    color: #cbd5e1;
}

[data-theme="dark"] .insight-fact strong {
    color: #7dd3fc;
}

/* ========== Index page: Content sections ========== */

[data-theme="dark"] .content-section h2 {
    color: #7dd3fc;
}

[data-theme="dark"] .content-section p {
    color: #cbd5e1;
}

[data-theme="dark"] .content-section cite {
    color: #94a3b8;
}

/* How-it-works steps */
[data-theme="dark"] .how-step {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .how-step .step-num {
    background: #0ea5e9;
}

[data-theme="dark"] .how-step h3 {
    color: #7dd3fc;
}

[data-theme="dark"] .how-step p {
    color: #94a3b8;
}

/* Blog cards on homepage */
[data-theme="dark"] .blog-card {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .blog-card h3 a {
    color: #7dd3fc;
}

[data-theme="dark"] .blog-card p {
    color: #94a3b8;
}

[data-theme="dark"] .blog-card .read-time {
    color: #64748b;
}

/* ========== Index page: Inline-styled elements (need !important) ========== */

/* Info banner */
[data-theme="dark"] #main-content > div[style*="background: #f0f8ff"] {
    background: #1e293b !important;
    border-left-color: #38bdf8 !important;
}
[data-theme="dark"] #main-content > div[style*="background: #f0f8ff"] p {
    color: #cbd5e1 !important;
}

/* Gallery section */
[data-theme="dark"] #trackerGallery h2 {
    color: #7dd3fc !important;
}
[data-theme="dark"] #trackerGallery > p {
    color: #94a3b8 !important;
}
[data-theme="dark"] #trackerGallery div[style*="background:white"] {
    background: #1e293b !important;
}
[data-theme="dark"] #trackerGallery p[style*="color:#374151"] {
    color: #94a3b8 !important;
}

/* Shortcut hint */
[data-theme="dark"] #shortcutHint {
    color: #64748b !important;
}
[data-theme="dark"] #shortcutHint kbd {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* Shortcuts help modal */
[data-theme="dark"] #shortcutsHelp > div {
    background: #1e293b !important;
}
[data-theme="dark"] #shortcutsHelp h3 {
    color: #7dd3fc !important;
}
[data-theme="dark"] #shortcutsHelp td {
    color: #cbd5e1 !important;
}
[data-theme="dark"] #shortcutsHelp tr {
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] #shortcutsHelp kbd {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] #shortcutsHelp p {
    color: #64748b !important;
}
[data-theme="dark"] #shortcutsHelp button[aria-label="Close"] {
    color: #94a3b8 !important;
}

/* Onboarding overlay */
[data-theme="dark"] #onboardingOverlay > div {
    background: #1e293b !important;
}
[data-theme="dark"] #onboardingOverlay h3 {
    color: #7dd3fc !important;
}
[data-theme="dark"] #onboardingOverlay .onboarding-step p {
    color: #cbd5e1 !important;
}
[data-theme="dark"] #onboardingOverlay #onboardingNextBtn {
    background: #0ea5e9 !important;
}
/* Onboarding dots are styled entirely by JS (theme-aware) to avoid
   !important conflicts between CSS and inline style updates. */

/* ========== Blog post page ========== */

[data-theme="dark"] .article-meta {
    color: #94a3b8;
    border-bottom-color: #334155;
}

[data-theme="dark"] .tag {
    background: #1e3a5f;
    color: #7dd3fc;
}

[data-theme="dark"] .content blockquote {
    background: #0f172a;
    border-left-color: #38bdf8;
    color: #cbd5e1;
}

[data-theme="dark"] .stat-box {
    background: #0f172a;
}

[data-theme="dark"] .stat-box .number {
    color: #38bdf8;
}

[data-theme="dark"] .highlight-box {
    background: #1e3a5f;
    border-left-color: #38bdf8;
}

[data-theme="dark"] .example-box {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .cta-box {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
    border-color: #38bdf8;
}

[data-theme="dark"] .cta-box strong {
    color: #7dd3fc;
}

[data-theme="dark"] .cta-box p {
    color: #cbd5e1;
}

[data-theme="dark"] .cta-box a {
    color: #38bdf8;
}

[data-theme="dark"] .back-to-blog {
    color: #7dd3fc;
}
[data-theme="dark"] .back-to-blog:hover {
    color: #bae6fd;
}

/* Related posts (inline-styled in blog-dynamic.ejs) */
[data-theme="dark"] section[style*="margin-top: 3rem"] h2 {
    color: #7dd3fc !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] section[style*="margin-top: 3rem"] div[style*="background: white"] {
    background: #1e293b !important;
}
[data-theme="dark"] section[style*="margin-top: 3rem"] h3 a {
    color: #7dd3fc !important;
}
[data-theme="dark"] section[style*="margin-top: 3rem"] p {
    color: #94a3b8 !important;
}

/* ========== Blog index page ========== */

[data-theme="dark"] .blog-intro {
    background: #1e293b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .blog-intro p {
    color: #cbd5e1;
}

[data-theme="dark"] .blog-intro a {
    color: #7dd3fc;
}
[data-theme="dark"] .blog-intro a:hover {
    color: #bae6fd;
}

[data-theme="dark"] .intro {
    color: #94a3b8;
}

[data-theme="dark"] .blog-post {
    background: #1e293b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .blog-post:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .blog-post h2,
[data-theme="dark"] .blog-post h2 a {
    color: #7dd3fc;
}
[data-theme="dark"] .blog-post h2 a:hover {
    color: #bae6fd;
}

[data-theme="dark"] .blog-meta {
    color: #94a3b8;
}

[data-theme="dark"] .blog-post p {
    color: #cbd5e1;
}

[data-theme="dark"] .read-more {
    color: #7dd3fc;
}
[data-theme="dark"] .read-more:hover {
    color: #bae6fd;
}

[data-theme="dark"] .tags {
    border-top-color: #334155;
}

/* Blog CTA section — already dark gradient, just ensure readability */
[data-theme="dark"] .blog-cta {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}

/* ========== FAQ page ========== */

[data-theme="dark"] .faq-item {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .faq-question {
    color: #7dd3fc;
}

[data-theme="dark"] .faq-answer {
    color: #cbd5e1;
}

/* FAQ answer inline-styled links */
[data-theme="dark"] .faq-answer a {
    color: #7dd3fc !important;
}

/* ========== 404 page ========== */

[data-theme="dark"] .links a {
    background-color: #0ea5e9;
}
[data-theme="dark"] .links a:hover {
    background-color: #38bdf8;
}

/* ========== Focus styles ========== */

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] .preset-btn:focus-visible {
    outline-color: #38bdf8;
}

/* ========== Skip link ========== */

[data-theme="dark"] .skip-link {
    background: #0ea5e9;
}

/* ========== Dark mode toggle in nav ========== */

.theme-toggle,
[data-theme="dark"] .theme-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    line-height: 1;
}
.theme-toggle:hover,
[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}
.theme-toggle svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
/* Show correct icon per theme */
.theme-toggle .icon-moon {
    display: inline;
}
.theme-toggle .icon-sun {
    display: none;
}
[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun {
    display: inline;
}

/* ========== Cookie banner inline-style overrides ========== */
/* Cookie banner already has dark background (#1a3c5e) — no changes needed */

/* ========== Print: override dark mode ========== */

@media print {
    [data-theme="dark"] body {
        background: white !important;
        color: #333 !important;
    }
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3 {
        color: #1a3c5e !important;
    }
    .theme-toggle {
        display: none !important;
    }
}