/* Light Theme Overrides for Matchkeyz
   Purpose: Match the dark theme's comprehensive dropdown styling
   Created: 2025-10-04
   Why: theme-default.css (Sneat) doesn't define dropdown variables properly
   Load Order: After theme-default.css, before app.css

   This file provides the light theme equivalent of theme-sepia-dark.css
   to ensure dropdowns have opaque backgrounds in both light and dark modes.

   Evidence: Comments in app.css (lines 2557, 4584) explicitly mention
   "ensure opaque" backgrounds, proving developers encountered transparency
   issues. This file completes the fix by providing comprehensive light theme
   dropdown styling that was previously missing. */

:root,
[data-bs-theme="light"],
html.light-style {
    /* Dropdown variables (matching Bootstrap but ensuring they're set) */
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
    --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-bg: #f8f9fa;
    --bs-dropdown-link-hover-color: #1e2125;
    --bs-dropdown-link-active-bg: #696cff;
    --bs-dropdown-link-active-color: #ffffff;

    /* Card & Modal backgrounds (ensure opaque panels in light theme) */
    --bs-card-bg: #ffffff;
    --bs-modal-bg: #ffffff;
}

/* Direct dropdown override (matches dark theme pattern from theme-sepia-dark.css:72) */
.dropdown-menu {
    background-color: #ffffff !important;
    color: #212529;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* Ensure proper layering over navbar backdrop-filter */
    position: relative;
    z-index: 1000;
}

/* Ensure dropdown items have proper hover states */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #f8f9fa;
    color: #1e2125;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: #696cff;
    color: #ffffff;
}

/* Dropdown dividers */
.dropdown-menu .dropdown-divider {
    border-top-color: rgba(0, 0, 0, 0.15);
}

/* Dropdown headers */
.dropdown-menu .dropdown-header {
    color: #6c757d;
}