/**
 * MDCodeLookup Engagement Suite — Dark Mode
 * Version: 1.0.0
 *
 * Activated by adding `body.mdce-dark` class (toggled via JS).
 * Overrides engagement panel tokens and common WordPress theme elements.
 *
 * Design: Slate-900 (#0f172a) base, Slate-800 (#1e293b) cards.
 * All transitions are smooth (0.3s) to avoid flashing.
 */

/* ==========================================================================
   1. Global Transition for Smooth Toggle
   ========================================================================== */

body.mdce-dark,
body.mdce-dark *,
body.mdce-dark *::before,
body.mdce-dark *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}


/* ==========================================================================
   2. Override CSS Custom Properties (Engagement Tokens)
   ========================================================================== */

body.mdce-dark {
    /* ---- Brand (slightly brighter for dark backgrounds) ---- */
    --mdce-primary:           #38bdf8;
    --mdce-primary-hover:     #7dd3fc;
    --mdce-primary-light:     rgba(56, 189, 248, 0.12);
    --mdce-secondary:         #34d399;
    --mdce-secondary-hover:   #6ee7b7;
    --mdce-secondary-light:   rgba(52, 211, 153, 0.12);

    /* ---- Accent per action ---- */
    --mdce-save:              #34d399;
    --mdce-save-hover:        #6ee7b7;
    --mdce-print:             #60a5fa;
    --mdce-print-hover:       #93c5fd;
    --mdce-share:             #a78bfa;
    --mdce-share-hover:       #c4b5fd;
    --mdce-dashboard:         #fbbf24;
    --mdce-dashboard-hover:   #fcd34d;

    /* ---- Neutrals (inverted) ---- */
    --mdce-text:              #e2e8f0;
    --mdce-text-secondary:    #94a3b8;
    --mdce-text-muted:        #64748b;
    --mdce-border:            #334155;
    --mdce-border-hover:      #475569;
    --mdce-bg:                #0f172a;
    --mdce-bg-subtle:         #1e293b;
    --mdce-bg-muted:          #1e293b;

    /* ---- Surfaces ---- */
    --mdce-card-bg:           #1e293b;
    --mdce-card-shadow:       0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --mdce-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
    --mdce-overlay:           rgba(0, 0, 0, 0.7);

    /* ---- Focus ring ---- */
    --mdce-focus-ring:        0 0 0 3px rgba(56, 189, 248, 0.4);
}


/* ==========================================================================
   3. Body & Core WordPress Elements
   ========================================================================== */

body.mdce-dark {
    background-color: #0f172a;
    color: #e2e8f0;
}

/* Main content containers */
body.mdce-dark .site,
body.mdce-dark .site-content,
body.mdce-dark .main-container,
body.mdce-dark .container,
body.mdce-dark .content-area,
body.mdce-dark .entry-content,
body.mdce-dark main,
body.mdce-dark article,
body.mdce-dark .post,
body.mdce-dark .page,
body.mdce-dark .hentry {
    background-color: #0f172a;
    color: #e2e8f0;
}

/* Inner wrappers common in WordPress themes */
body.mdce-dark .wrap,
body.mdce-dark .wrapper,
body.mdce-dark .inner,
body.mdce-dark .page-content,
body.mdce-dark #content,
body.mdce-dark #main,
body.mdce-dark #primary {
    background-color: #0f172a;
    color: #e2e8f0;
}


/* ==========================================================================
   4. Typography
   ========================================================================== */

body.mdce-dark h1,
body.mdce-dark h2,
body.mdce-dark h3,
body.mdce-dark h4,
body.mdce-dark h5,
body.mdce-dark h6 {
    color: #f1f5f9;
}

body.mdce-dark p,
body.mdce-dark li,
body.mdce-dark span,
body.mdce-dark div,
body.mdce-dark blockquote {
    color: #e2e8f0;
}

body.mdce-dark a {
    color: #38bdf8;
}

body.mdce-dark a:hover {
    color: #7dd3fc;
}

body.mdce-dark a:visited {
    color: #a78bfa;
}

body.mdce-dark strong,
body.mdce-dark b {
    color: #f1f5f9;
}

body.mdce-dark small,
body.mdce-dark .text-muted,
body.mdce-dark figcaption,
body.mdce-dark .wp-caption-text {
    color: #94a3b8;
}

body.mdce-dark code,
body.mdce-dark pre,
body.mdce-dark kbd {
    background-color: #0f172a;
    color: #38bdf8;
    border-color: #334155;
}

body.mdce-dark hr {
    border-color: #334155;
}

body.mdce-dark blockquote {
    border-left-color: #38bdf8;
    background-color: rgba(56, 189, 248, 0.06);
}

body.mdce-dark mark {
    background-color: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}


/* ==========================================================================
   5. Header & Navigation
   ========================================================================== */

body.mdce-dark .site-header,
body.mdce-dark header,
body.mdce-dark #masthead,
body.mdce-dark .main-navigation,
body.mdce-dark .navbar,
body.mdce-dark .nav,
body.mdce-dark nav {
    background-color: #0f172a;
    border-color: #334155;
}

body.mdce-dark .site-header a,
body.mdce-dark .main-navigation a,
body.mdce-dark .navbar a,
body.mdce-dark nav a {
    color: #e2e8f0;
}

body.mdce-dark .site-header a:hover,
body.mdce-dark .main-navigation a:hover,
body.mdce-dark .navbar a:hover,
body.mdce-dark nav a:hover {
    color: #38bdf8;
}

body.mdce-dark .site-title,
body.mdce-dark .site-title a {
    color: #f1f5f9;
}

body.mdce-dark .site-description {
    color: #94a3b8;
}

/* Dropdown / sub-menus */
body.mdce-dark .sub-menu,
body.mdce-dark .dropdown-menu,
body.mdce-dark .main-navigation ul ul {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   6. Footer
   ========================================================================== */

body.mdce-dark .site-footer,
body.mdce-dark footer,
body.mdce-dark #colophon {
    background-color: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

body.mdce-dark .site-footer a,
body.mdce-dark footer a {
    color: #38bdf8;
}

body.mdce-dark .site-footer a:hover,
body.mdce-dark footer a:hover {
    color: #7dd3fc;
}


/* ==========================================================================
   7. Sidebar & Widgets
   ========================================================================== */

body.mdce-dark .sidebar,
body.mdce-dark .widget-area,
body.mdce-dark #secondary,
body.mdce-dark aside {
    background-color: #0f172a;
    color: #e2e8f0;
}

body.mdce-dark .widget,
body.mdce-dark .widget-container {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

body.mdce-dark .widget-title,
body.mdce-dark .widgettitle {
    color: #f1f5f9;
    border-color: #334155;
}


/* ==========================================================================
   8. Forms: Inputs, Selects, Textareas, Buttons
   ========================================================================== */

body.mdce-dark input[type="text"],
body.mdce-dark input[type="email"],
body.mdce-dark input[type="url"],
body.mdce-dark input[type="password"],
body.mdce-dark input[type="search"],
body.mdce-dark input[type="number"],
body.mdce-dark input[type="tel"],
body.mdce-dark input[type="date"],
body.mdce-dark input[type="datetime-local"],
body.mdce-dark input[type="range"],
body.mdce-dark select,
body.mdce-dark textarea {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #475569;
    caret-color: #38bdf8;
}

body.mdce-dark input::placeholder,
body.mdce-dark textarea::placeholder {
    color: #64748b;
}

body.mdce-dark input:focus,
body.mdce-dark select:focus,
body.mdce-dark textarea:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
    outline: none;
}

/* Option/select dropdowns */
body.mdce-dark select option {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* Checkboxes and radios (appearance-styled) */
body.mdce-dark input[type="checkbox"],
body.mdce-dark input[type="radio"] {
    accent-color: #38bdf8;
}

/* Generic buttons (not .mdce-btn which is already handled) */
body.mdce-dark button:not(.mdce-btn):not(.mdce-modal-close):not(.mdce-dark-toggle):not(.mdce-reminder-btn),
body.mdce-dark input[type="button"],
body.mdce-dark input[type="submit"],
body.mdce-dark input[type="reset"],
body.mdce-dark .button,
body.mdce-dark .btn {
    background-color: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

body.mdce-dark button:not(.mdce-btn):not(.mdce-modal-close):not(.mdce-dark-toggle):not(.mdce-reminder-btn):hover,
body.mdce-dark input[type="button"]:hover,
body.mdce-dark input[type="submit"]:hover,
body.mdce-dark input[type="reset"]:hover,
body.mdce-dark .button:hover,
body.mdce-dark .btn:hover {
    background-color: #475569;
    color: #f1f5f9;
}

/* Labels */
body.mdce-dark label {
    color: #e2e8f0;
}

body.mdce-dark fieldset {
    border-color: #334155;
}

body.mdce-dark legend {
    color: #f1f5f9;
}


/* ==========================================================================
   9. Tables
   ========================================================================== */

body.mdce-dark table {
    border-color: #334155;
    color: #e2e8f0;
}

body.mdce-dark th {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

body.mdce-dark td {
    background-color: transparent;
    color: #e2e8f0;
    border-color: #334155;
}

body.mdce-dark tr:nth-child(even) td {
    background-color: rgba(30, 41, 59, 0.5);
}

body.mdce-dark tr:hover td {
    background-color: rgba(56, 189, 248, 0.06);
}

body.mdce-dark thead {
    border-bottom-color: #475569;
}

body.mdce-dark tfoot {
    background-color: #1e293b;
    border-top-color: #334155;
}

body.mdce-dark caption {
    color: #94a3b8;
}


/* ==========================================================================
   10. WordPress-Specific Blocks & Components
   ========================================================================== */

/* WordPress block editor backgrounds */
body.mdce-dark .wp-block-group,
body.mdce-dark .wp-block-column,
body.mdce-dark .wp-block-columns {
    background-color: transparent;
}

body.mdce-dark .wp-block-group.has-background {
    background-color: #1e293b;
}

/* Cover block */
body.mdce-dark .wp-block-cover .wp-block-cover__inner-container {
    color: #e2e8f0;
}

/* Quote block */
body.mdce-dark .wp-block-quote {
    border-left-color: #38bdf8;
    color: #e2e8f0;
}

body.mdce-dark .wp-block-quote cite {
    color: #94a3b8;
}

/* Separator */
body.mdce-dark .wp-block-separator {
    border-color: #334155;
}

body.mdce-dark .wp-block-separator:not(.is-style-dots) {
    background-color: #334155;
}

/* Table block */
body.mdce-dark .wp-block-table table {
    border-color: #334155;
}

body.mdce-dark .wp-block-table figcaption {
    color: #94a3b8;
}

/* Image captions */
body.mdce-dark .wp-block-image figcaption {
    color: #94a3b8;
}

/* Search block */
body.mdce-dark .wp-block-search__input {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #475569;
}

/* File block */
body.mdce-dark .wp-block-file a {
    color: #38bdf8;
}

/* Comments */
body.mdce-dark .comment-body,
body.mdce-dark .comment-content {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

body.mdce-dark .comment-author,
body.mdce-dark .comment-metadata {
    color: #94a3b8;
}

/* Pagination */
body.mdce-dark .pagination a,
body.mdce-dark .nav-links a,
body.mdce-dark .page-numbers {
    color: #38bdf8;
    border-color: #334155;
}

body.mdce-dark .page-numbers.current {
    background-color: #38bdf8;
    color: #0f172a;
}


/* ==========================================================================
   11. Engagement Panel — Dark Mode Refinements
   ========================================================================== */

/* Dark mode toggle appearance */
body.mdce-dark .mdce-dark-toggle {
    background: #1e293b;
    border-color: #475569;
    color: #fbbf24;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.mdce-dark .mdce-dark-toggle:hover {
    border-color: #fbbf24;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Notification toast */
body.mdce-dark .mdce-notification {
    background: #f1f5f9;
    color: #0f172a;
}

body.mdce-dark .mdce-notification.mdce-notification-success {
    background: var(--mdce-save);
    color: #0f172a;
}

body.mdce-dark .mdce-notification.mdce-notification-info {
    background: var(--mdce-primary);
    color: #0f172a;
}

/* Reminder due banner */
body.mdce-dark .mdce-reminder-due {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(96, 165, 250, 0.12));
    border-color: #38bdf8;
    color: #7dd3fc;
}

body.mdce-dark .mdce-reminder-due a {
    color: #7dd3fc;
}

/* Next-step icon background */
body.mdce-dark .mdce-next-step-icon {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

/* Related icon background */
body.mdce-dark .mdce-related-icon {
    background: #0f172a;
}

/* Save form input in dark modal */
body.mdce-dark .mdce-save-form input[type="text"] {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #475569;
}

body.mdce-dark .mdce-save-form input[type="text"]:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* Reminder pill buttons */
body.mdce-dark .mdce-reminder-btn {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

body.mdce-dark .mdce-reminder-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

body.mdce-dark .mdce-reminder-btn.mdce-reminder-set {
    background: var(--mdce-secondary);
    color: #0f172a;
}

/* Dashboard button ghost on dark */
body.mdce-dark .mdce-btn-dashboard {
    color: var(--mdce-dashboard);
    border-color: var(--mdce-dashboard);
}

body.mdce-dark .mdce-btn-dashboard:hover {
    background: var(--mdce-dashboard);
    color: #0f172a;
}


/* ==========================================================================
   12. Calculator-Specific Form Elements
   ========================================================================== */

/*
 * Many calculator plugins use .calculator, .calc-form, .calc-result, etc.
 * These rules cover common patterns without breaking the existing layout.
 */

body.mdce-dark .calculator,
body.mdce-dark .calc-container,
body.mdce-dark .calc-form,
body.mdce-dark .calculator-form,
body.mdce-dark .health-calculator,
body.mdce-dark [class*="calculator-wrap"],
body.mdce-dark [class*="calc-wrap"] {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

body.mdce-dark .calc-result,
body.mdce-dark .calculator-result,
body.mdce-dark .result-box,
body.mdce-dark .result-panel,
body.mdce-dark [class*="result-container"],
body.mdce-dark [class*="calc-result"] {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}

body.mdce-dark .calc-result h2,
body.mdce-dark .calc-result h3,
body.mdce-dark .calculator-result h2,
body.mdce-dark .calculator-result h3 {
    color: #f1f5f9;
}

/* Range inputs / sliders */
body.mdce-dark input[type="range"] {
    accent-color: #38bdf8;
}

body.mdce-dark input[type="range"]::-webkit-slider-runnable-track {
    background: #334155;
}

body.mdce-dark input[type="range"]::-moz-range-track {
    background: #334155;
}

/* Progress bars */
body.mdce-dark progress {
    accent-color: #38bdf8;
}

body.mdce-dark progress::-webkit-progress-bar {
    background-color: #334155;
}

body.mdce-dark progress::-webkit-progress-value {
    background-color: #38bdf8;
}

body.mdce-dark progress::-moz-progress-bar {
    background-color: #38bdf8;
}

/* Alert / info boxes common in health calculators */
body.mdce-dark .alert,
body.mdce-dark .notice,
body.mdce-dark .info-box,
body.mdce-dark .callout {
    background-color: rgba(56, 189, 248, 0.08);
    border-color: #334155;
    color: #e2e8f0;
}


/* ==========================================================================
   13. Scrollbar Styling (Webkit & Firefox)
   ========================================================================== */

body.mdce-dark {
    scrollbar-color: #475569 #0f172a;
    scrollbar-width: thin;
}

body.mdce-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.mdce-dark ::-webkit-scrollbar-track {
    background: #0f172a;
}

body.mdce-dark ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 5px;
    border: 2px solid #0f172a;
}

body.mdce-dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

body.mdce-dark ::-webkit-scrollbar-corner {
    background: #0f172a;
}


/* ==========================================================================
   14. Images & Media
   ========================================================================== */

body.mdce-dark img {
    opacity: 0.92;
}

body.mdce-dark img:hover {
    opacity: 1;
}

/* Don't dim logos or icons */
body.mdce-dark .site-logo img,
body.mdce-dark .custom-logo,
body.mdce-dark svg,
body.mdce-dark .mdce-dark-toggle img {
    opacity: 1;
}

/* Embedded iframes get a subtle border */
body.mdce-dark iframe {
    border-color: #334155;
}


/* ==========================================================================
   15. Selection Highlight
   ========================================================================== */

body.mdce-dark ::selection {
    background-color: rgba(56, 189, 248, 0.3);
    color: #f1f5f9;
}

body.mdce-dark ::-moz-selection {
    background-color: rgba(56, 189, 248, 0.3);
    color: #f1f5f9;
}


/* ==========================================================================
   16. Reduced Motion Respect
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.mdce-dark,
    body.mdce-dark *,
    body.mdce-dark *::before,
    body.mdce-dark *::after {
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   17. Auto Dark Mode (prefers-color-scheme)

   Optional: Applies dark mode automatically if user's OS is in dark mode
   AND the JS hasn't explicitly set a preference. The body won't have
   .mdce-dark class, so we use this as a hint — JS should still add the
   class for full support. This section is a progressive enhancement.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* We only hint the dark-toggle appearance; full dark mode requires
       the JS toggle to add body.mdce-dark, which applies all rules above.
       This keeps behavior predictable and user-controlled. */
    .mdce-dark-toggle {
        border-color: #64748b;
    }
}