/* Explain: Dark theme styles, overriding default Tailwind and theme.css for dark mode. */
/* Dark "view" mode — active when <html> has the .dark class (set by js/theme.js).
   Remaps the neutral Tailwind utilities used across the app so every page adapts,
   while var(--...) based colors switch automatically via css/theme.css. */

.dark {
    color-scheme: dark;
}

/* Surfaces */
.dark .bg-white { background-color: var(--surface-color) !important; }
.dark .bg-gray-50 { background-color: #172033 !important; }
.dark .bg-gray-100 { background-color: #1e293b !important; }
.dark .bg-gray-200 { background-color: #334155 !important; }
.dark .bg-gray-300 { background-color: #475569 !important; }

.dark .hover\:bg-white:hover { background-color: #1e293b !important; }
.dark .hover\:bg-gray-50:hover { background-color: #1e293b !important; }
.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; }
.dark .focus\:bg-white:focus { background-color: #172033 !important; }

/* Text */
.dark .text-gray-900 { color: var(--text-color) !important; }
.dark .text-gray-800 { color: var(--text-color) !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: var(--text-muted) !important; }
.dark .text-gray-500 { color: var(--text-muted) !important; }
.dark .text-gray-400 { color: #64748b !important; }
.dark .text-black { color: var(--text-color) !important; }

/* Borders */
.dark .border-gray-100 { border-color: var(--border-color) !important; }
.dark .border-gray-200 { border-color: var(--border-color) !important; }
.dark .border-gray-300 { border-color: #334155 !important; }

/* Colored tints (badges, alerts, status pills) */
.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; }
.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; }
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; }
.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.18) !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.14) !important; }

.dark .text-green-700 { color: #86efac !important; }
.dark .text-green-800 { color: #86efac !important; }
.dark .text-blue-700 { color: #93c5fd !important; }
.dark .text-amber-600 { color: #fcd34d !important; }

.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.35) !important; }
.dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.35) !important; }

/* daisyUI boxes created without an explicit surface color */
.dark .modal-box {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

/* Keep the brand wordmark legible on the dark header */
.dark header img[alt="Golf Locker Shop"] {
    filter: brightness(1.9) saturate(1.15);
}