/*
 * MiroPets Dark Mode Overrides
 * Activated when html.dark is present.
 * Uses !important to override Tailwind utility classes.
 */

/* ============================================
   BACKGROUND COLORS
   ============================================ */

/* Page background */
html.dark .bg-gray-50 {
    background-color: #111827 !important; /* gray-900 */
}

html.dark .bg-white {
    background-color: #1f2937 !important; /* gray-800 */
}

html.dark .bg-white\/90 {
    background-color: rgba(31, 41, 55, 0.9) !important;
}

html.dark .bg-gray-100 {
    background-color: #1f2937 !important; /* gray-800 */
}

html.dark .bg-gray-200 {
    background-color: #374151 !important; /* gray-700 */
}

/* Body background override */
html.dark body.bg-gray-50 {
    background-color: #0f172a !important; /* slate-900 for main body */
}

/* ============================================
   TEXT COLORS
   ============================================ */

html.dark .text-gray-800 {
    color: #f3f4f6 !important; /* gray-100 */
}

html.dark .text-gray-700 {
    color: #e5e7eb !important; /* gray-200 */
}

html.dark .text-gray-600 {
    color: #d1d5db !important; /* gray-300 */
}

html.dark .text-gray-500 {
    color: #9ca3af !important; /* gray-400 */
}

html.dark .text-gray-400 {
    color: #9ca3af !important; /* gray-400 */
}

/* ============================================
   BORDER COLORS
   ============================================ */

html.dark .border-gray-200 {
    border-color: #374151 !important; /* gray-700 */
}

html.dark .border-gray-300 {
    border-color: #4b5563 !important; /* gray-600 */
}

html.dark .border-gray-100 {
    border-color: #374151 !important; /* gray-700 */
}

/* ============================================
   FORM INPUTS
   ============================================ */

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
html.dark textarea,
html.dark select {
    background-color: #111827 !important; /* gray-900 */
    border-color: #4b5563 !important; /* gray-600 */
    color: #f3f4f6 !important; /* gray-100 */
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #6b7280 !important; /* gray-500 */
}

html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
    background-color: #1f2937 !important;
    color: #6b7280 !important;
}

/* ============================================
   HOVER STATES
   ============================================ */

html.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important; /* gray-700 */
}

html.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important; /* gray-700 */
}

/* ============================================
   SHADOWS
   ============================================ */

html.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

html.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   DECORATIVE BLOBS - reduce opacity in dark
   ============================================ */

html.dark .blob {
    opacity: 0.4;
}

/* ============================================
   DROPDOWN MENUS (nav dropdowns)
   ============================================ */

html.dark .group-hover\:visible,
html.dark .mobile-dropdown-menu {
    background-color: #1f2937 !important;
}

/* Dropdown items in nav */
html.dark .group .bg-white,
html.dark .mobile-dropdown-menu .bg-white {
    background-color: #1f2937 !important;
}

/* ============================================
   MODALS
   ============================================ */

html.dark #searchModalContent,
html.dark #levelUpModalContent,
html.dark #randomFindModalContent,
html.dark #deleteAccountModal .bg-white {
    background-color: #1f2937 !important;
}

/* Search modal specific */
html.dark #searchInput {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

html.dark #searchModal .bg-gray-50 {
    background-color: #111827 !important;
}

/* ============================================
   FOOTER
   ============================================ */

html.dark footer.bg-gray-800 {
    background-color: #030712 !important; /* gray-950 */
}

/* ============================================
   SPECIFIC COMPONENT OVERRIDES
   ============================================ */

/* Cards/panels with bg-gray-50 inside white cards */
html.dark .bg-gray-50 .bg-white,
html.dark .bg-white .bg-gray-50 {
    background-color: #111827 !important;
}

/* Purple active states in nav - keep but darken slightly */
html.dark .bg-purple-50 {
    background-color: rgba(139, 92, 246, 0.15) !important;
}

html.dark .bg-purple-50\/50 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

/* Info/alert boxes - darken backgrounds */
html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

html.dark .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

html.dark .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.1) !important;
}

html.dark .bg-cyan-50\/30 {
    background-color: rgba(6, 182, 212, 0.08) !important;
}

html.dark .bg-indigo-50\/30 {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

/* Alert text colors - lighten for dark backgrounds */
html.dark .text-red-700 {
    color: #fca5a5 !important; /* red-300 */
}

html.dark .text-red-800 {
    color: #fca5a5 !important;
}

html.dark .text-green-700 {
    color: #86efac !important; /* green-300 */
}

html.dark .text-blue-700 {
    color: #93c5fd !important; /* blue-300 */
}

html.dark .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .text-amber-700 {
    color: #fcd34d !important; /* amber-300 */
}

html.dark .text-amber-800 {
    color: #fcd34d !important;
}

/* Alert borders - darken */
html.dark .border-red-200 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark .border-red-400 {
    border-color: rgba(239, 68, 68, 0.4) !important;
}

html.dark .border-green-200 {
    border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark .border-green-400 {
    border-color: rgba(34, 197, 94, 0.4) !important;
}

html.dark .border-blue-200 {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark .border-amber-200 {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .border-purple-200 {
    border-color: rgba(139, 92, 246, 0.3) !important;
}

html.dark .border-indigo-300 {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* ============================================
   HOVER STATES FOR ALERT BACKGROUNDS
   ============================================ */

html.dark .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .hover\:bg-purple-50:hover {
    background-color: rgba(139, 92, 246, 0.2) !important;
}

/* ============================================
   AUTH PAGES (login, register, etc.)
   gradient-bg pages don't need body bg override
   ============================================ */

html.dark .bg-white\/90 {
    background-color: rgba(31, 41, 55, 0.9) !important;
}

/* Red/green alert boxes on auth pages */
html.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

/* ============================================
   BACKDROP BLUR SUPPORT
   ============================================ */

html.dark .backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* ============================================
   TABLE STYLES
   ============================================ */

html.dark table th {
    background-color: #111827 !important;
    color: #d1d5db !important;
}

html.dark table td {
    border-color: #374151 !important;
}

html.dark table tbody tr:hover {
    background-color: #374151 !important;
}

/* ============================================
   SCROLLBAR (Webkit browsers)
   ============================================ */

html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ============================================
   PWA INSTALL BANNER
   ============================================ */

html.dark #pwa-install-banner {
    background-color: #1f2937 !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

/* ============================================
   DARK MODE TOGGLE BUTTON STYLES
   ============================================ */

.dark-mode-toggle {
    cursor: pointer;
    transition: color 0.2s;
}

.dark-mode-toggle:hover {
    color: white !important;
}

/* ============================================
   USER MENU DROPDOWN
   ============================================ */

html.dark #user-menu-dropdown {
    background-color: #1f2937 !important;
}

/* ============================================
   DIVIDE COLORS
   ============================================ */

html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #374151 !important;
}

/* ============================================
   RING COLORS (focus states)
   ============================================ */

html.dark .ring-gray-200 {
    --tw-ring-color: #374151 !important;
}

/* ============================================
   CODE/KBD ELEMENTS
   ============================================ */

html.dark kbd {
    background-color: #374151 !important;
    color: #d1d5db !important;
}

html.dark .bg-gray-100 kbd,
html.dark kbd.bg-gray-100 {
    background-color: #374151 !important;
}

/* ============================================
   PREVENT FLASH: theme-color meta update
   ============================================ */

html.dark {
    color-scheme: dark;
}