/*
 * Wholesale Grocery — admin theme nudges
 *
 * unfold (Tailwind-based) hardcodes Tailwind's gray scale for backgrounds,
 * borders, and most surfaces. The storefront uses a slightly greener-warmer
 * gray progression (--bg #0a0d0c, --surface #131815, --surface2 #1a2019).
 * We can't reconfigure unfold's gray tokens directly, but we can layer
 * targeted overrides so the admin's dark theme feels like a sibling to the
 * storefront rather than a totally different product.
 *
 * Light mode is left mostly alone — the storefront's light theme uses near-
 * whites and unfold's defaults are fine there.
 */

/* ===== Dark mode body & main panels ====================================== */
html.dark body                                   { background-color: #0a0d0c; }
html.dark .bg-gray-900                           { background-color: #0a0d0c !important; }
html.dark .bg-gray-800                           { background-color: #131815 !important; }
html.dark .bg-gray-700                           { background-color: #1a2019 !important; }

/* Borders — keep them neutral but slightly less blue */
html.dark .border-gray-800,
html.dark .dark\:border-gray-800                 { border-color: #222a23 !important; }
html.dark .border-gray-700,
html.dark .dark\:border-gray-700                 { border-color: #2a342c !important; }
html.dark .border-gray-600,
html.dark .dark\:border-gray-600                 { border-color: #344038 !important; }

/* Hover surface — for sidebar items, dropdowns */
html.dark .dark\:hover\:bg-gray-700:hover,
html.dark .dark\:hover\:bg-gray-800:hover        { background-color: #1f2620 !important; }

/* Inputs / search field background in dark mode */
html.dark input,
html.dark textarea,
html.dark select                                 { background-color: #131815 !important; }

/* ===== Custom dashboard chrome alignment ================================ */
/* Make sure our dashboard's surfaces align to the same scale */
html.dark .wg-kpi,
html.dark .wg-card                               { background-color: #131815 !important; border-color: #222a23 !important; }
html.dark .wg-kpi { border-color: #222a23 !important; }

/* ===== Sharper focus / accent halos ===================================== */
/* Storefront uses a faint accent halo on focus. Matching here. */
html.dark *:focus-visible                        { outline-color: #22c55e !important; }