/**
 * Theme Color Overrides for Dynamic Theming
 * 
 * This file overrides hardcoded blue colors with theme variables
 * to ensure consistent theming across the reservation system.
 * 
 * Uses CSS variables defined in ThemeService::generateCssVariables()
 */

/* ============================================
   HEADER NAVIGATION HOVER FIXES
   ============================================ */

/**
 * Header Navigation Links - Use theme colors instead of inline styles
 * Fixes hover issues with TOP, マイページ, and WEB予約 button
 */

/* Header navigation link hover states */
header nav a:not(.inline-flex) {
    transition: all 0.2s ease;
}

/* TOP link hover - use theme header link hover color */
header nav a:not(.inline-flex):hover {
    color: var(--theme-header-link-hover, #FFFFFF) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* User menu button (マイページ) hover */
header nav button#user-menu-toggle {
    transition: color 0.2s ease;
}

header nav button#user-menu-toggle:hover {
    color: var(--theme-header-link-hover, #FFFFFF) !important;
}

/* WEB予約 button hover - use theme button hover */
header nav a.inline-flex {
    transition: all 0.2s ease;
    background-color: var(--theme-button-primary) !important;
    color: var(--theme-button-text, #FFFFFF) !important;
}

header nav a.inline-flex:hover {
    background-color: var(--theme-button-primary-hover) !important;
    color: var(--theme-button-primary-text-hover, #FFFFFF) !important;
    opacity: 1 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dropdown menu items hover */
header nav .dropdown-menu a {
    transition: background-color 0.2s ease, color 0.2s ease;
}

header nav .dropdown-menu a:hover {
    background-color: var(--theme-border, #E5E3DF) !important;
    color: var(--theme-text, #2C2825) !important;
}

/* Mobile menu items hover */
#mobile-user-menu a {
    transition: background-color 0.2s ease, color 0.2s ease;
}

#mobile-user-menu a:hover {
    background-color: var(--theme-border, #E5E3DF) !important;
    color: var(--theme-text, #2C2825) !important;
}

/* ============================================
   RESERVATION PAGE COLOR OVERRIDES
   ============================================ */

/* Info/Alert Backgrounds - Use theme badge colors */
.bg-blue-50 {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
}

.bg-blue-100 {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
}

/* Info/Alert Text Colors */
.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

/* Info/Alert Icons */
.text-blue-400,
.text-blue-500 {
    color: var(--theme-primary, #8B2C2C) !important;
}

/* Info/Alert Borders */
.border-blue-200,
.border-blue-300 {
    border-color: var(--theme-border, #E5E3DF) !important;
}

.border-blue-400,
.border-blue-500 {
    border-color: var(--theme-primary, #8B2C2C) !important;
}

/* Primary Buttons - Use theme button colors */
.bg-blue-600 {
    background-color: var(--theme-button-primary, var(--theme-primary)) !important;
}

.hover\:bg-blue-700:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
}

/* Hover States for Interactive Elements */
.hover\:bg-blue-50:hover {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
}

.hover\:border-blue-300:hover {
    border-color: var(--theme-border-hover, #C9C5BD) !important;
}

.hover\:text-blue-700:hover {
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

.hover\:text-blue-600:hover {
    color: var(--theme-primary-hover, #6D2222) !important;
}

/* Focus States */
.focus\:ring-blue-200:focus {
    --tw-ring-color: var(--theme-input-focus-shadow, rgba(139, 44, 44, 0.25)) !important;
}

.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--theme-input-focus-border, var(--theme-primary)) !important;
}

/* Selected/Active States */
.bg-blue-100.border-blue-400.text-blue-800 {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
    border-color: var(--theme-primary, #8B2C2C) !important;
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

/* Links and Interactive Text */
.text-blue-600.hover\:text-blue-700:hover {
    color: var(--theme-link-hover, var(--theme-primary-hover)) !important;
}

/* Badge Overrides - Match theme badges */
.inline-flex.items-center.px-2.py-1.bg-blue-100.text-blue-800.rounded-full,
.inline-flex.items-center.bg-blue-600.text-white.rounded-md {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

/* Icon Containers */
.bg-blue-100.rounded-lg,
.bg-blue-100.rounded-full,
.bg-blue-50.rounded-xl {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
}

/* Info Messages/Alerts */
.bg-blue-50.border-l-4.border-blue-500,
.bg-blue-50.border.border-blue-200 {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
    border-color: var(--theme-primary, #8B2C2C) !important;
}

/* Tab Active States */
.bg-blue-600.text-white {
    background-color: var(--theme-button-primary, var(--theme-primary)) !important;
    color: var(--theme-button-text, #FFFFFF) !important;
}

/* Payment/Order Type Indicators */
[class*="payment_type"][class*="reservation"].bg-blue-50 {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
}

[class*="payment_type"][class*="reservation"].bg-blue-100.text-blue-600 {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

/* Category/Tag Badges in Articles */
.bg-blue-50.text-blue-700.border-blue-200 {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
    color: var(--theme-badge-info-text, #8B2C2C) !important;
    border-color: var(--theme-border, #E5E3DF) !important;
}

/* Menu/Course Selection Buttons */
.order-menus.course-menu-btn.bg-blue-600,
.reservation-form button.bg-blue-600 {
    background-color: var(--theme-button-primary, var(--theme-primary)) !important;
}

.order-menus.course-menu-btn:hover,
.reservation-form button.bg-blue-600:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
}

/* Time Slot Selection */
.time-slot-btn.hover\:bg-blue-50:hover {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
}

.time-slot-btn.hover\:border-blue-300:hover {
    border-color: var(--theme-primary, #8B2C2C) !important;
}

.time-slot-btn.hover\:text-blue-700:hover {
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

/* Guest Number Selection */
.guest-number-btn.hover\:bg-blue-50:hover {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
}

.guest-number-btn.hover\:border-blue-300:hover {
    border-color: var(--theme-primary, #8B2C2C) !important;
}

.guest-number-btn.hover\:text-blue-700:hover {
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

/* Active Selection State */
.guest-number-btn.bg-blue-100.border-blue-400.text-blue-800 {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
    border-color: var(--theme-primary, #8B2C2C) !important;
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

/* Responsive: Mobile Menu Buttons */
@media (max-width: 640px) {
    .bg-blue-600,
    .bg-blue-500 {
        background-color: var(--theme-button-primary, var(--theme-primary)) !important;
    }
    
    .hover\:bg-blue-700:hover,
    .hover\:bg-blue-600:hover {
        background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
    }
}

/* Dashboard Card Stats */
.bg-blue-100.text-blue-800.px-2.py-1.rounded-full {
    background-color: var(--theme-badge-info-bg, #FFE8E8) !important;
    color: var(--theme-badge-info-text, #8B2C2C) !important;
}

/* Links in Text */
a.text-blue-600,
a.text-blue-500 {
    color: var(--theme-link, var(--theme-primary)) !important;
}

a.text-blue-600:hover,
a.text-blue-500:hover {
    color: var(--theme-link-hover, var(--theme-primary-hover)) !important;
}

/* Utility: Ensure Theme Gradients Work */
.bg-gradient-to-r.from-blue-500.to-blue-600,
.bg-gradient-to-r.from-blue-600.to-blue-700 {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
}

/* Section Header Gradients - Reservation Info (予約情報), Summary (予約概要), Shop Info (店舗情報) */
.bg-gradient-to-r.from-blue-200.to-blue-100 {
    background: linear-gradient(to right, var(--theme-badge-info-bg), rgba(255, 255, 255, 0.9)) !important;
}

/* Stronger gradient for total amount sections */
.bg-gradient-to-r.from-blue-600.to-indigo-600 {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
}

/* Hover states for gradient buttons */
.hover\:from-blue-700:hover {
    background: linear-gradient(to right, var(--theme-primary-hover), var(--theme-secondary-hover)) !important;
}

.hover\:to-indigo-700:hover {
    background: linear-gradient(to right, var(--theme-primary-hover), var(--theme-secondary-hover)) !important;
}

/* Info note sections with gradient */
.bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(to right, var(--theme-badge-info-bg), rgba(255, 255, 255, 0.95)) !important;
}

.border-l-4.border-blue-500 {
    border-left-color: var(--theme-primary, #8B2C2C) !important;
}

/* Text colors in gradient sections */
.text-blue-900 {
    color: var(--theme-text, #2C2825) !important;
}

.text-blue-100 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Icons in section headers with gradients */
.text-blue-600,
.text-blue-500 {
    color: var(--theme-primary, #8B2C2C) !important;
}