/**
 * DARK MODE — GoPure Dairy Manager
 * =================================
 * INSTALL:
 *   1. Paste this CSS at the END of your assets/css/app.css
 *   2. place feature-2-dark-mode.js in assets/js/
 *   3. enqueue the script in gopure-dairy.php (or paste at end of app.js)
 *   4. add the snippet in admin/class-admin.php to add a toggle button in the admin bar
 */

/* ─── DARK MODE VARIABLES ──────────────────────────────────────── */
[data-gp-theme="dark"] {
    --gp-bg:        #0f172a;
    --gp-card:      #1e293b;
    --gp-card2:     #273448;
    --gp-border:    #334155;
    --gp-text:      #e2e8f0;
    --gp-muted:     #94a3b8;
    --gp-heading:   #f1f5f9;
    --gp-input-bg:  #1e293b;
    --gp-input-border: #475569;
    --gp-hover:     #2d3f55;
    --gp-green:     #34d399;
    --gp-red:       #f87171;
    --gp-blue:      #60a5fa;
    --gp-yellow:    #fbbf24;
    --gp-shadow:    0 2px 12px rgba(0,0,0,.5);
}

/* ─── DARK: General elements ───────────────────────────────────── */
[data-gp-theme="dark"] body,
[data-gp-theme="dark"] .wrap,
[data-gp-theme="dark"] #wpcontent,
[data-gp-theme="dark"] #wpbody-content {
    background: var(--gp-bg) !important;
    color: var(--gp-text) !important;
}

[data-gp-theme="dark"] .gp-card,
[data-gp-theme="dark"] .gp-modal,
[data-gp-theme="dark"] .gp-chart-card,
[data-gp-theme="dark"] .gp-ds-card,
[data-gp-theme="dark"] .gp-bk-card,
[data-gp-theme="dark"] .gp-q-card,
[data-gp-theme="dark"] .gp-h-card,
[data-gp-theme="dark"] .ex-sum-card,
[data-gp-theme="dark"] .gp-lc-card,
[data-gp-theme="dark"] .idea-card {
    background: var(--gp-card) !important;
    border-color: var(--gp-border) !important;
    color: var(--gp-text) !important;
}

[data-gp-theme="dark"] .gp-tbl thead tr,
[data-gp-theme="dark"] .gp-tbl thead {
    background: #1a2744 !important;
}
[data-gp-theme="dark"] .gp-tbl thead th {
    color: #94a3b8 !important;
    border-bottom-color: var(--gp-border) !important;
}
[data-gp-theme="dark"] .gp-tbl tbody tr {
    background: transparent !important;
    border-bottom-color: var(--gp-border) !important;
}
[data-gp-theme="dark"] .gp-tbl tbody tr:hover {
    background: var(--gp-hover) !important;
}
[data-gp-theme="dark"] .gp-tbl tbody td {
    color: var(--gp-text) !important;
}

[data-gp-theme="dark"] .gp-filters,
[data-gp-theme="dark"] .gp-filter-bar {
    background: var(--gp-card) !important;
    border-color: var(--gp-border) !important;
}

[data-gp-theme="dark"] input[type="text"],
[data-gp-theme="dark"] input[type="number"],
[data-gp-theme="dark"] input[type="date"],
[data-gp-theme="dark"] input[type="month"],
[data-gp-theme="dark"] input[type="email"],
[data-gp-theme="dark"] input[type="tel"],
[data-gp-theme="dark"] select,
[data-gp-theme="dark"] textarea {
    background: var(--gp-input-bg) !important;
    border-color: var(--gp-input-border) !important;
    color: var(--gp-text) !important;
}

[data-gp-theme="dark"] label,
[data-gp-theme="dark"] .gp-fg label,
[data-gp-theme="dark"] .gp-fg2 label {
    color: var(--gp-muted) !important;
}

/* Modal overlay */
[data-gp-theme="dark"] .gp-overlay {
    background: rgba(0,0,0,.75) !important;
}
[data-gp-theme="dark"] .gp-modal-hd {
    background: #162032 !important;
    border-bottom-color: var(--gp-border) !important;
}
[data-gp-theme="dark"] .gp-modal-hd h3 {
    color: var(--gp-heading) !important;
}
[data-gp-theme="dark"] .gp-modal-ft {
    background: #162032 !important;
    border-top-color: var(--gp-border) !important;
}
[data-gp-theme="dark"] .gp-modal-bd {
    background: var(--gp-card) !important;
    color: var(--gp-text) !important;
}

/* Modal footer buttons — Cancel/Save clearly visible in dark mode */
[data-gp-theme="dark"] .gp-modal-ft .gp-btn-ghost,
[data-gp-theme="dark"] .gp-btn-ghost {
    background: var(--gp-card2) !important;
    color: var(--gp-text) !important;
    border: 1.5px solid var(--gp-border) !important;
}
[data-gp-theme="dark"] .gp-modal-ft .gp-btn-ghost:hover,
[data-gp-theme="dark"] .gp-btn-ghost:hover {
    background: var(--gp-hover) !important;
}
[data-gp-theme="dark"] .gp-modal-ft .gp-btn-primary,
[data-gp-theme="dark"] .gp-btn-primary {
    color: #fff !important;
}

/* Animal cards */
[data-gp-theme="dark"] .gp-a-card {
    background: var(--gp-card) !important;
    border-color: var(--gp-border) !important;
}
[data-gp-theme="dark"] .gp-a-name,
[data-gp-theme="dark"] .gp-a-meta,
[data-gp-theme="dark"] .gp-a-id {
    color: var(--gp-text) !important;
}

/* Dashboard header */
[data-gp-theme="dark"] .gp-dash-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #162032 100%) !important;
}

/* Ledger */
[data-gp-theme="dark"] .ex-ledger-hd {
    background: #162032 !important;
    border-bottom-color: var(--gp-border) !important;
}
[data-gp-theme="dark"] .ex-ledger-title { color: var(--gp-heading) !important; }

/* Chips / badges */
[data-gp-theme="dark"] .gp-chip-active  { background: #064e3b !important; color: #34d399 !important; }
[data-gp-theme="dark"] .gp-chip-dead    { background: #3b1515 !important; color: #f87171 !important; }

/* Scrollbar */
[data-gp-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-gp-theme="dark"] ::-webkit-scrollbar-track { background: var(--gp-bg); }
[data-gp-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }

/* Toggle button (admin bar) */
#gp-dark-toggle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 0 12px;
    color: #ccc;
    font-size: 12px;
    height: 100%;
    border: none;
    background: none;
}
#gp-dark-toggle:hover { color: #fff; }
.gp-dark-moon { font-size: 16px; line-height: 1; }

/* ─── DARK MODE TOGGLE JS ───────────────────────────────────────
   Paste this at end of assets/js/app.js  OR  as separate file
──────────────────────────────────────────────────────────────── */
/*
(function() {
    'use strict';
    var STORAGE_KEY = 'gp_dark_mode';
    var ROOT = document.documentElement;

    function applyTheme(dark) {
        if (dark) {
            ROOT.setAttribute('data-gp-theme', 'dark');
        } else {
            ROOT.removeAttribute('data-gp-theme');
        }
        var btn = document.getElementById('gp-dark-toggle');
        if (btn) {
            btn.innerHTML = dark
                ? '<span class="gp-dark-moon">☀️</span> Light Mode'
                : '<span class="gp-dark-moon">🌙</span> Dark Mode';
            btn.title = dark ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        }
    }

    function toggle() {
        var isDark = ROOT.getAttribute('data-gp-theme') === 'dark';
        var next = !isDark;
        localStorage.setItem(STORAGE_KEY, next ? '1' : '0');
        applyTheme(next);
    }

    // On load: restore saved preference
    var saved = localStorage.getItem(STORAGE_KEY);
    if (saved === '1') {
        applyTheme(true);
    } else if (saved === null) {
        // First visit: respect OS preference
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            applyTheme(true);
        }
    }

    // Wait for DOM
    document.addEventListener('DOMContentLoaded', function () {
        // Add toggle button to admin bar (top-right area)
        var bar = document.getElementById('wp-admin-bar-top-secondary');
        if (bar) {
            var li = document.createElement('li');
            li.id = 'wp-admin-bar-gp-dark';
            li.innerHTML = '<button id="gp-dark-toggle" onclick="window.__gpToggleDark()"><span class="gp-dark-moon">🌙</span> Dark Mode</button>';
            bar.appendChild(li);
        }
        // Re-apply for button text
        applyTheme(ROOT.getAttribute('data-gp-theme') === 'dark');
    });

    window.__gpToggleDark = toggle;
})();
*/