/**
 * ParkStamps.org Theme System
 * CSS custom properties for light/dark mode support.
 * Bootstrap 5.3.3's data-bs-theme="dark" handles most components;
 * these variables cover the custom colors Bootstrap doesn't control.
 */

/* ============================================================
   Light mode (default)
   ============================================================ */
:root {
    --ps-body-bg: #f8f9fa;
    --ps-surface: #ffffff;
    --ps-surface-alt: #f8f9fa;
    --ps-surface-hover: #f8f9fa;
    --ps-surface-faint: #fafafa;
    --ps-text: #495057;
    --ps-text-muted: #6c757d;
    --ps-text-heading: #212529;
    --ps-text-lighter: #adb5bd;
    --ps-border: #dee2e6;
    --ps-border-light: #e9ecef;
    --ps-brand-green: #2c5530;
    --ps-brand-green-dark: #1a3a1e;
    --ps-gradient-start: #2c5530;
    --ps-gradient-end: #4a7c59;
    --ps-link: #2c5530;
    --ps-link-hover: #4a7c59;
    --ps-shadow: rgba(0, 0, 0, 0.075);
    --ps-shadow-heavy: rgba(0, 0, 0, 0.15);

    /* State highlights */
    --ps-unread-bg: #e8f5e9;
    --ps-unread-hover: #c8e6c9;
    --ps-selected-bg: #fff3cd;
    --ps-sticky-bg: #fffde7;
    --ps-quote-bg: #eef4ee;
    --ps-quote-border: #c5d5c5;
    --ps-quote-nested-bg: #f5f8f5;
    --ps-quote-nested-border: #d0ddd0;
    --ps-quote-deep-bg: #fafcfa;
    --ps-quote-deep-border: #dae5da;
    --ps-mention-bg: #e8f5e9;
    --ps-mention-hover: #c8e6c9;
    --ps-first-unread-bg: #e3f2fd;
    --ps-first-unread-color: #1565c0;
    --ps-first-unread-border: #90caf9;
    --ps-back-to-top-bg: rgba(44, 85, 48, 0.7);
    --ps-back-to-top-hover: rgba(44, 85, 48, 0.9);
    --ps-post-header-bg: #e2e6ea;
}

/* ============================================================
   Dark mode overrides
   ============================================================ */
[data-bs-theme="dark"] {
    --ps-body-bg: #1a1d20;
    --ps-surface: #212529;
    --ps-surface-alt: #2b3035;
    --ps-surface-hover: #2b3035;
    --ps-surface-faint: #252a2e;
    --ps-text: #c9d1d9;
    --ps-text-muted: #8b949e;
    --ps-text-heading: #e6edf3;
    --ps-text-lighter: #6e7681;
    --ps-border: #373b3e;
    --ps-border-light: #30363d;
    --ps-brand-green: #5aa567;
    --ps-brand-green-dark: #7bc48a;
    --ps-gradient-start: #2c5530;
    --ps-gradient-end: #3d7a4e;
    --ps-link: #5aa567;
    --ps-link-hover: #7bc48a;
    --ps-shadow: rgba(0, 0, 0, 0.3);
    --ps-shadow-heavy: rgba(0, 0, 0, 0.5);

    /* State highlights */
    --ps-unread-bg: #1a2e1a;
    --ps-unread-hover: #243a24;
    --ps-selected-bg: #3d3520;
    --ps-sticky-bg: #2e2c1a;
    --ps-quote-bg: #1e2a1e;
    --ps-quote-border: #2e4a2e;
    --ps-quote-nested-bg: #222e22;
    --ps-quote-nested-border: #345034;
    --ps-quote-deep-bg: #263226;
    --ps-quote-deep-border: #3a5a3a;
    --ps-mention-bg: #1a2e1a;
    --ps-mention-hover: #243a24;
    --ps-first-unread-bg: #1a2636;
    --ps-first-unread-color: #64b5f6;
    --ps-first-unread-border: #2a4a6a;
    --ps-back-to-top-bg: rgba(90, 165, 103, 0.7);
    --ps-back-to-top-hover: rgba(90, 165, 103, 0.9);
    --ps-post-header-bg: #2b3035;
}

/* ============================================================
   Body background (applied globally)
   ============================================================ */
body {
    background-color: var(--ps-body-bg);
}

/* ============================================================
   Dark mode: Summernote editor overrides
   ============================================================ */
[data-bs-theme="dark"] .note-editor {
    border-color: var(--ps-border);
}

[data-bs-theme="dark"] .note-editor .note-toolbar {
    background-color: var(--ps-surface-alt);
    border-bottom-color: var(--ps-border);
}

[data-bs-theme="dark"] .note-editor .note-toolbar .note-btn {
    background-color: transparent;
    border-color: var(--ps-border);
    color: var(--ps-text);
}

[data-bs-theme="dark"] .note-editor .note-toolbar .note-btn:hover {
    background-color: var(--ps-surface-hover);
}

[data-bs-theme="dark"] .note-editor .note-toolbar .note-btn.active {
    background-color: var(--ps-surface-hover);
}

[data-bs-theme="dark"] .note-editor .note-editable {
    background-color: var(--ps-surface);
    color: var(--ps-text);
}

[data-bs-theme="dark"] .note-editor .note-statusbar {
    background-color: var(--ps-surface-alt);
    border-top-color: var(--ps-border);
}

[data-bs-theme="dark"] .note-editor .note-statusbar .note-resizebar .note-icon-bar {
    border-top-color: var(--ps-text-muted);
}

[data-bs-theme="dark"] .note-editor .note-editing-area .note-codable {
    background-color: #1a1d20;
    color: #c9d1d9;
}

/* Summernote dropdowns in dark mode */
[data-bs-theme="dark"] .note-editor .dropdown-menu {
    background-color: var(--ps-surface-alt);
    border-color: var(--ps-border);
}

[data-bs-theme="dark"] .note-editor .dropdown-item {
    color: var(--ps-text);
}

[data-bs-theme="dark"] .note-editor .dropdown-item:hover {
    background-color: var(--ps-surface-hover);
    color: var(--ps-text-heading);
}

/* Summernote tooltips in dark mode */
[data-bs-theme="dark"] .note-tooltip .note-tooltip-content {
    background-color: var(--ps-surface-alt);
    color: var(--ps-text);
}

/* Summernote hint/autocomplete in dark mode */
[data-bs-theme="dark"] .note-hint-popover .popover-content {
    background-color: var(--ps-surface-alt);
    border-color: var(--ps-border);
}

[data-bs-theme="dark"] .note-hint-popover .popover-content .note-hint-item {
    color: var(--ps-text);
}

[data-bs-theme="dark"] .note-hint-popover .popover-content .note-hint-item.active {
    background-color: var(--ps-surface-hover);
    color: var(--ps-text-heading);
}

/* ============================================================
   Dark mode: Forum post content overrides
   WYSIWYG editors (Summernote) save inline styles like color:#000
   in post HTML. These dark colors become invisible in dark mode.
   Force them to inherit the theme text color.
   ============================================================ */
[data-bs-theme="dark"] .post-body [style*="color"],
[data-bs-theme="dark"] .post-body font[color],
[data-bs-theme="dark"] .forum-quote .quote-body [style*="color"],
[data-bs-theme="dark"] .forum-quote .quote-body font[color] {
    color: inherit !important;
}

/* Also handle Summernote editable area rendered content */
[data-bs-theme="dark"] .note-editable [style*="color"],
[data-bs-theme="dark"] .note-editable font[color] {
    color: inherit !important;
}

/* ============================================================
   Dark mode: Toastr notification overrides
   ============================================================ */
[data-bs-theme="dark"] .toast-success {
    background-color: #1a3a1e;
}

[data-bs-theme="dark"] .toast-error {
    background-color: #3a1a1a;
}

[data-bs-theme="dark"] .toast-warning {
    background-color: #3a351a;
}

[data-bs-theme="dark"] .toast-info {
    background-color: #1a2a3a;
}

/* ============================================================
   Dark mode: General link colors
   ============================================================ */
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.breadcrumb-item a):not(.footer-link):not([class*="text-"]) {
    color: var(--ps-link);
}

[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.breadcrumb-item a):not(.footer-link):not([class*="text-"]):hover {
    color: var(--ps-link-hover);
}