/* ============================================================================
   dark-mode.css — NWK Dashboard dark theme
   ============================================================================
   Applied when <html class="dark"> is present.

   The class is set synchronously by a tiny inline <script> near the top of
   each page's <head>, which reads localStorage.getItem('nwk_dark_mode').
   The toggle lives in Settings → Recipe Display tab.

   Strategy:
     • Override CSS custom properties on html.dark — backgrounds, text, borders
     • Keep --green-dark / --green-mid / --amber unchanged; they read fine as
       button / badge backgrounds on a dark surface
     • Push all headers to the branded dark-green background for consistency
     • Specific element overrides follow for things that hardcode hex colors
============================================================================ */

html.dark {
    color-scheme: dark;

    /* ── Backgrounds ── */
    --green-pale:  #141a14;   /* page background */
    --white:       #1b251b;   /* card / panel background */
    --green-light: #1e2d1e;   /* subtle tinted surface: table headers, badges */
    --amber-light: #26200c;   /* amber-tinted info boxes */

    /* ── Text ── */
    --text-primary: #cce0ce;
    --text-muted:   #7a9e7e;
    --text-light:   #4e6a51;

    /* ── Borders ── */
    --border: #2c3e2d;
}


/* ── Header ─────────────────────────────────────────────────────────────────
   White-header pages (recipes, recipe-edit, prep-lists, index, etc.) flip to
   the branded dark green. Dark-green-header pages (settings, ingredients,
   inventory, etc.) already use var(--green-dark) — no visible change.
---------------------------------------------------------------------------- */
html.dark .header {
    background: var(--green-dark);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* header-title: white-header pages use var(--green-dark) (now invisible on dark
   green bg); dark-header pages already use #e8f0e9. Unify to a light tone. */
html.dark .header-title { color: #c8e0ca; }
html.dark .header-sub,
html.dark .header-subtitle { color: #7a9e7e; }

/* dashboard.css sets a { color: var(--green-dark) } globally; lighten for dark bg */
html.dark a { color: #7ab880; }
html.dark a:hover { color: #9acfa0; }


/* ── Page headings ───────────────────────────────────────────────────────────
   h1/h2 use var(--green-dark) as text color — too dark on dark bg.
---------------------------------------------------------------------------- */
html.dark h1 { color: #7ab880; }
html.dark h2 { color: #7ab880; }
html.dark .card h2 { color: #7ab880; }


/* ── Tabs ────────────────────────────────────────────────────────────────── */
html.dark .settings-tab-btn { color: var(--text-muted); }
html.dark .settings-tab-btn:hover { color: #7ab880; }
html.dark .settings-tab-btn.active {
    color: #7ab880;
    border-bottom-color: #7ab880;
}

/* recipes.php tab pills */
html.dark .tab { color: var(--text-muted); }
html.dark .tab.active { background: #3d6b42; color: #e8f0e9; }

html.dark .supercat-btn { color: var(--text-muted); border-color: var(--border); }
html.dark .supercat-btn:hover { border-color: var(--green-mid); color: #7ab880; }
html.dark .supercat-btn.active {
    background: #3d6b42;
    border-color: #3d6b42;
    color: #e8f0e9;
}


/* ── Navigation links ────────────────────────────────────────────────────── */
html.dark .back-link { color: var(--text-muted); }
html.dark .back-link:hover { color: #7ab880; }
html.dark .forward-link { color: var(--text-muted); }
html.dark .forward-link:hover { color: #7ab880; }


/* ── Forms: inputs, selects, textareas ───────────────────────────────────── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.dark select,
html.dark textarea {
    background: #141a14;
    color: var(--text-primary);
    border-color: var(--border);
}
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--green-mid);
    outline: none;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--text-light); }

/* search boxes often have a .search class */
html.dark .search {
    background: #141a14;
    color: var(--text-primary);
    border-color: var(--border);
}
html.dark .search:focus { border-color: var(--green-mid); }

/* dropdowns */
html.dark .supercat-dropdown,
html.dark .toolbar-tag-select {
    background: #141a14;
    color: var(--text-primary);
    border-color: var(--border);
}


/* ── Status / alert boxes ────────────────────────────────────────────────── */
html.dark .status {
    background: #1a2a1a;
    border-color: #2c4a2d;
    color: #7ab880;
}
html.dark .info-box {
    background: #26200c;
    border-color: #3a3010;
    color: #c8a060;
}
html.dark .error {
    background: #2a1414;
    border-color: #4a2020;
    color: #e07070;
}


/* ── Archive panel (recipes.php) ─────────────────────────────────────────── */
html.dark .archive-panel-header {
    background: #26200c;
    border-bottom-color: #3a3010;
}
html.dark .archive-panel-title,
html.dark .btn-archive-close { color: #c8a060; }
html.dark .flash-archived {
    background: #26200c;
    border-color: #3a3010;
    color: #c8a060;
}


/* ── Modals ──────────────────────────────────────────────────────────────── */
html.dark .modal-backdrop { background: rgba(0, 0, 0, 0.7); }
html.dark .modal {
    background: var(--white);
    border-color: var(--border);
}
html.dark .modal h2,
html.dark .modal h3 { color: #7ab880; }


/* ── Tables ──────────────────────────────────────────────────────────────── */
html.dark .rule-table th { background: var(--green-light); color: var(--text-muted); }
html.dark .rule-table td { border-bottom-color: #1e2d1e; }
html.dark .rule-table tr:hover td { background: #1e2d1e; }


/* ── Recipe cards (recipes.php) ──────────────────────────────────────────── */
html.dark .recipe-card {
    background: var(--white);
    border-color: var(--border);
}
html.dark .recipe-card:hover { border-color: var(--green-mid); }
html.dark .recipe-name { color: var(--text-primary); }
html.dark .recipe-meta { color: var(--text-muted); }


/* ── Display-tab saved message ───────────────────────────────────────────── */
html.dark .display-saved-msg { color: #7ab880; }


/* ── Scrollbars (WebKit) ─────────────────────────────────────────────────── */
html.dark ::-webkit-scrollbar { background: #1b251b; width: 8px; height: 8px; }
html.dark ::-webkit-scrollbar-thumb {
    background: #2c3e2d;
    border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover { background: #3d6b42; }


/* ── Print: never apply dark mode to printed output ─────────────────────── */
@media print {
    html.dark { color-scheme: light; }
    html.dark * {
        background: white !important;
        color: black !important;
        border-color: #ccc !important;
    }
}
