/**
 * 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;
}

/* Mobile menu container: ensure visible and not clipped */
#menu-container {
    overflow: visible;
}
#menu-container header {
    overflow: visible;
}
#mobile-menu {
    overflow: visible;
    max-height: min(80vh, 800px);
    overflow-y: auto;
}
#mobile-user-menu {
    overflow: visible;
}

/* ============================================
   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;
}

/* ============================================
   RESERVATION DATEPICKER
   bootstrap-datepicker expects Bootstrap's .dropdown-menu
   base styles (position: absolute; display: none).
   Since this project uses Tailwind instead of Bootstrap,
   we provide these essential rules here.
   Enhanced styling scoped to .reservation-datepicker
   (class added by JS at init time) so admin pickers
   are unaffected.
   ============================================ */

/* --- Bootstrap .dropdown-menu polyfill for datepicker --- */
body > .datepicker.dropdown-menu {
    position: absolute;
    display: none;
}

/* --- z-index override (beats library's inline z-index: 10) --- */
body > .datepicker {
    z-index: 1060 !important;
}
body > .datepicker-dropdown {
    z-index: 1060 !important;
}

/* --- Enhanced container (reservation only) --- */
.reservation-datepicker {
    background-color: var(--theme-background, #ffffff);
    border-radius: 0.625rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    border: 1px solid var(--theme-border, #e5e3df);
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
    padding: 0.375rem;
    user-select: none;
    z-index: 1060 !important;
    opacity: 1 !important;
}
.reservation-datepicker.datepicker-dropdown {
    z-index: 1060 !important;
}
.reservation-datepicker.dropdown-menu {
    z-index: 1060 !important;
    background-color: var(--theme-background, #ffffff);
    opacity: 1 !important;
}

/* --- Table grid --- */
.reservation-datepicker table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}

/* --- Month header (calmer) --- */
.reservation-datepicker .datepicker-switch {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text, #2c2825);
    padding: 0.25rem 0;
    cursor: default;
}

/* --- Prev / next arrows (smaller) --- */
.reservation-datepicker .prev,
.reservation-datepicker .next {
    color: var(--theme-text, #2c2825);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.15s ease;
    opacity: 0.6;
}
.reservation-datepicker .prev:hover,
.reservation-datepicker .next:hover {
    color: var(--theme-primary);
    opacity: 1;
}

/* --- Weekday headers (dow) --- */
.reservation-datepicker .datepicker-days th.dow {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--theme-text, #2c2825);
    padding-bottom: 0.25rem;
    text-align: center;
}
.reservation-datepicker .datepicker-days th.dow:first-child {
    color: var(--theme-error, #dc2626);
}
.reservation-datepicker .datepicker-days th.dow:last-child {
    color: #2563eb;
}

/* --- Day cells – uniform squares with two-line space --- */
.reservation-datepicker table tr td {
    transition: background-color 0.12s ease, color 0.12s ease;
}
.reservation-datepicker table tr td.day {
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8125rem;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: top;
    line-height: 2.35;
    padding: 0.2rem 0 0;
    border-radius: 0.375rem;
}

/* --- Hover (restrained, no scale transform) --- */
.reservation-datepicker table tr td.day:not(.disabled):not(.active):hover {
    background-color: rgba(var(--theme-primary-rgb, 139, 44, 44), 0.08);
}

/* --- Active / selected day (muted, not dominant) --- */
.reservation-datepicker table tr td.active {
    font-weight: 600 !important;
    background-color: var(--theme-primary) !important;
    color: var(--theme-background, #fff) !important;
    border-radius: 0.375rem;
}

/* --- Today outline --- */
.reservation-datepicker table tr td.today:not(.active) {
    box-shadow: inset 0 0 0 1.5px var(--theme-primary);
}

/* --- Disabled (unavailable/holiday) --- */
.reservation-datepicker table tr td.disabled {
    color: var(--theme-text, #2c2825);
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}

/* --- Sunday (red) --- */
.reservation-datepicker table tr td:first-child:not(.old):not(.new):not(.active):not(.disabled) {
    color: var(--theme-error, #dc2626);
}

/* --- Saturday (blue) --- */
.reservation-datepicker table tr td:last-child:not(.old):not(.new):not(.active):not(.disabled) {
    color: #2563eb;
}

/* --- Old/new month overflow cells --- */
.reservation-datepicker table tr td.old,
.reservation-datepicker table tr td.new {
    opacity: 0.25;
}

/* --- Mobile adjustments --- */
@media (max-width: 480px) {
    .reservation-datepicker {
        padding: 0.25rem;
    }
    .reservation-datepicker table {
        border-spacing: 1px;
    }
    .reservation-datepicker table tr td.day {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   RESERVATION PAGE - SELECT DROPDOWN
   ============================================ */

.select_people {
    max-height: 200px;
    overflow-y: auto;
    background: var(--theme-background);
    font-size: 0.95rem;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border);
    transition: all 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-secondary) var(--theme-border);
}
.select_people::-webkit-scrollbar { width: 6px; }
.select_people::-webkit-scrollbar-track { background: var(--theme-border); border-radius: 3px; }
.select_people::-webkit-scrollbar-thumb { background: var(--theme-secondary); border-radius: 3px; }
.select_people::-webkit-scrollbar-thumb:hover { background: var(--theme-secondary-hover); }

.select_people option {
    padding: 8px 12px;
    font-size: 0.95rem;
    color: var(--theme-text);
    background: var(--theme-background);
    border-bottom: 1px solid var(--theme-border);
}
.select_people option:hover { background: var(--theme-border); }
.select_people option:checked { background: var(--theme-primary); color: var(--theme-background); }
.select_people:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.1);
}
.select_people:disabled {
    background: var(--theme-border);
    color: var(--theme-text);
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .select_people { max-height: 150px; font-size: 0.85rem; }
    .select_people option { padding: 6px 10px; font-size: 0.85rem; }
}

/* ============================================
   RESERVATION PAGE - MENU BUTTONS
   ============================================ */

.order-menus {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: var(--theme-primary);
    color: white;
}
.order-menus::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}
.order-menus:hover::before { left: 100%; }
.order-menus:hover {
    background-color: var(--theme-primary-hover, var(--theme-primary)) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.order-menus:active { transform: scale(0.98); }
.order-menus:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.2);
}

/* Selected state */
.order-menus.selected {
    background-color: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4) !important;
    transform: translateY(-1px) scale(1.02) !important;
}
.order-menus.selected:hover {
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.5) !important;
}
.order-menus.selected:active {
    transform: translateY(0) scale(1.01) !important;
}

/* Selected badge animation */
.selected-badge { animation: badge-pulse 2s ease-in-out infinite; }
@keyframes badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.9; transform: scale(1.05); }
}

/* Text line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}