/* Theme CSS - COMPLETELY FIXED: Dark Mode and Theme Management */

/* === GLOBAL THEME TRANSITION SYSTEM === */
/* Add smooth transitions to all theme-related properties */
*,
*::before,
*::after {
    transition:
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        fill 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Disable transitions during theme switch to prevent visual artifacts */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}

/* Override specific elements that should have faster or no transitions */
.btn,
.form-control,
.availability-cell-redesigned,
.room-card-clean {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}

/* Critical elements that need instant theme switching (no transitions) */
.theme-toggle,
.navbar-brand svg,
.icon-fallback,
.flatpickr-calendar,
.availability-table-redesigned,
.search-panel,
.pricing-controls {
    transition: none !important;
}

/* Ensure body and html background change instantly */
html,
body {
    transition: background-color 0.15s ease !important;
}

/* Prevent white flash during theme switch */
html[data-theme="dark"],
body[data-theme="dark"] {
    background-color: var(--background-color) !important;
    color: var(--text-primary) !important;
}

/* UNIFIED DARK THEME DESIGN SYSTEM */
html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"] {
    /* Surface System */
    --surface-color: #1e1e1e !important;
    --surface-elevated: #252525 !important;
    --background-color: #181818 !important;
    --background-secondary: #1a1a1a !important;

    /* Border System */
    --border-color: #333333 !important;
    --border-color-light: #2a2a2a !important;
    --border-color-strong: #404040 !important;

    /* Text Hierarchy */
    --text-primary: #ffffff !important;
    --text-secondary: #d0d0d0 !important;
    --text-muted: #a0a0a0 !important;
    --text-disabled: #707070 !important;
    --text-inverse: #181818 !important;

    /* Primary Colors (enhanced for dark theme) */
    --primary-color: #58a6ff !important;
    --primary-hover: #79b8ff !important;
    --primary-active: #409cff !important;
    --primary-light: rgba(88, 166, 255, 0.15) !important;
    --primary-lighter: rgba(88, 166, 255, 0.08) !important;

    /* Semantic Colors (dark theme optimized) */
    --success-color: #56d364 !important;
    --success-light: rgba(86, 211, 100, 0.15) !important;
    --warning-color: #f0c040 !important;
    --warning-light: rgba(240, 192, 64, 0.15) !important;
    --error-color: #f85149 !important;
    --error-light: rgba(248, 81, 73, 0.15) !important;
    --info-color: #58a6ff !important;
    --info-light: rgba(88, 166, 255, 0.15) !important;

    /* Shadow System (dark theme) */
    --shadow-color: rgba(0, 0, 0, 0.4) !important;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6) !important;
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.7) !important;

    /* Interactive States */
    --hover-bg: rgba(88, 166, 255, 0.08) !important;
    --active-bg: rgba(88, 166, 255, 0.15) !important;
    --focus-outline: rgba(88, 166, 255, 0.6) !important;
    --selected-bg: rgba(88, 166, 255, 0.15) !important;

    background-color: #181818 !important;
    color: #ffffff !important;
}

/* CRITICAL FIX: Force all major elements to use dark theme */
html[data-theme="dark"] body,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] main,
html[data-theme="dark"] section,
body[data-theme="dark"],
body[data-theme="dark"] .container,
body[data-theme="dark"] .container-fluid,
body[data-theme="dark"] main,
body[data-theme="dark"] section {
    background-color: #181818 !important;
    color: #ffffff !important;
}

/* CRITICAL FIX: Navigation bar dark theme */
html[data-theme="dark"] .header-nav,
body[data-theme="dark"] .header-nav,
[data-theme="dark"] .navbar {
    background: rgba(30, 30, 30, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom-color: #333333 !important;
    transition: all 0.3s ease !important;
}

/* Enhanced dark theme navbar when scrolled */
html[data-theme="dark"] .header-nav.scrolled,
body[data-theme="dark"] .header-nav.scrolled,
[data-theme="dark"] .navbar.scrolled {
    background: rgba(20, 20, 20, 0.95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border-bottom-color: #444444 !important;
}

html[data-theme="dark"] .navbar-brand,
body[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-brand {
    color: #ffffff !important;
}

/* CRITICAL FIX: Cards and surfaces */
html[data-theme="dark"] .fluent-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .search-panel,
body[data-theme="dark"] .fluent-card,
body[data-theme="dark"] .card,
body[data-theme="dark"] .search-panel,
[data-theme="dark"] .fluent-card,
[data-theme="dark"] .card,
[data-theme="dark"] .search-panel {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* CRITICAL FIX: Form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3) !important;
}

/* CRITICAL FIX: Buttons */
html[data-theme="dark"] .btn-outline-secondary,
body[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary {
    color: #d0d0d0 !important;
    border-color: #333333 !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover,
body[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .btn-outline-primary,
body[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary {
    color: #6B8E23 !important; /* Comment #19: Olive green */
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-primary:hover,
body[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: white !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
}

html[data-theme="dark"] .btn-outline-primary.active,
body[data-theme="dark"] .btn-outline-primary.active,
[data-theme="dark"] .btn-outline-primary.active {
    background-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: white !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
}

/* CRITICAL FIX: Text colors */
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-muted,
body[data-theme="dark"] .text-secondary,
body[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted {
    color: #d0d0d0 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] label,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6,
body[data-theme="dark"] p,
body[data-theme="dark"] span,
body[data-theme="dark"] div,
body[data-theme="dark"] label {
    color: #ffffff !important;
}

/* CRITICAL FIX: Modals */
html[data-theme="dark"] .modal-content,
body[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-content {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .modal-header,
body[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-header {
    border-bottom-color: #333333 !important;
}

html[data-theme="dark"] .modal-footer,
body[data-theme="dark"] .modal-footer,
[data-theme="dark"] .modal-footer {
    border-top-color: #333333 !important;
}

/* CRITICAL FIX: Close button */
html[data-theme="dark"] .btn-close,
body[data-theme="dark"] .btn-close,
[data-theme="dark"] .btn-close {
    filter: invert(1) !important;
}

/* CRITICAL FIX: Input groups */
html[data-theme="dark"] .input-group-text,
body[data-theme="dark"] .input-group-text,
[data-theme="dark"] .input-group-text {
    background-color: #1e1e1e !important;
    color: #d0d0d0 !important;
    border-color: #333333 !important;
}

/* CRITICAL FIX: Badges and pills */
html[data-theme="dark"] .badge.bg-light,
body[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.bg-light {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Dark theme for rate/package benefit badges */
html[data-theme="dark"] .badge.bg-primary-subtle,
body[data-theme="dark"] .badge.bg-primary-subtle,
[data-theme="dark"] .badge.bg-primary-subtle {
    background-color: rgba(0, 120, 212, 0.2) !important;
    color: #4db8ff !important;
    border-color: rgba(0, 120, 212, 0.4) !important;
}

html[data-theme="dark"] .text-primary,
body[data-theme="dark"] .text-primary,
[data-theme="dark"] .text-primary {
    color: #4db8ff !important;
}

/* Ensure consistent border radius for all badges and UI elements */
.badge {
    border-radius: 6px !important;
}

/* Consistent border radius for cards and containers */
.card, .fluent-card {
    border-radius: 8px !important;
}

/* Border radius for buttons and form controls */
.btn, .form-control, .form-select {
    border-radius: 6px !important;
}

/* Border radius for rate selection elements */
.rate-selection-highlight,
.rate-benefits-display {
    border-radius: 8px !important;
}

/* Dark theme for amenity badges in room cards */
html[data-theme="dark"] .badge.bg-light.text-dark,
body[data-theme="dark"] .badge.bg-light.text-dark,
[data-theme="dark"] .badge.bg-light.text-dark {
    background-color: #333333 !important;
    color: #d0d0d0 !important;
    border-color: #404040 !important;
}

/* CRITICAL FIX: Borders */
html[data-theme="dark"] .border,
body[data-theme="dark"] .border,
[data-theme="dark"] .border {
    border-color: #333333 !important;
}

/* CRITICAL FIX: Filter chips dark theme */
html[data-theme="dark"] .filter-chip,
body[data-theme="dark"] .filter-chip,
[data-theme="dark"] .filter-chip {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .filter-chip:hover,
body[data-theme="dark"] .filter-chip:hover,
[data-theme="dark"] .filter-chip:hover {
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: #6B8E23 !important; /* Comment #19: Olive green */
}

html[data-theme="dark"] .filter-chip.active,
body[data-theme="dark"] .filter-chip.active,
[data-theme="dark"] .filter-chip.active {
    background-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: white !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
}

/* ================================
   ENHANCED ROOM DETAILS MODAL DARK THEME
   ================================ */

/* Enhanced Dark theme modal content */
html[data-theme="dark"] #roomDetailsModal .modal-content,
body[data-theme="dark"] #roomDetailsModal .modal-content,
[data-theme="dark"] #roomDetailsModal .modal-content {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Enhanced Dark theme modal header */
html[data-theme="dark"] #roomDetailsModal .modal-header,
body[data-theme="dark"] #roomDetailsModal .modal-header,
[data-theme="dark"] #roomDetailsModal .modal-header {
    /* Comment #19: Flat design - solid olive green, no gradients */
    background-color: #6B8E23 !important;
    color: white !important;
    border-bottom: none !important;
    position: relative !important;
}

html[data-theme="dark"] #roomDetailsModal .modal-header::before,
body[data-theme="dark"] #roomDetailsModal .modal-header::before,
[data-theme="dark"] #roomDetailsModal .modal-header::before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="darkgrid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23darkgrid)"/></svg>') !important;
}

/* Enhanced Dark theme modal body */
html[data-theme="dark"] #roomDetailsModal .modal-body,
body[data-theme="dark"] #roomDetailsModal .modal-body,
[data-theme="dark"] #roomDetailsModal .modal-body {
    background: linear-gradient(135deg, #1a1a1a 0%, #1e1e1e 100%) !important;
    color: #ffffff !important;
}

/* Dark theme close button enhancement */
html[data-theme="dark"] #roomDetailsModal .btn-close,
body[data-theme="dark"] #roomDetailsModal .btn-close,
[data-theme="dark"] #roomDetailsModal .btn-close {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

html[data-theme="dark"] #roomDetailsModal .btn-close:hover,
body[data-theme="dark"] #roomDetailsModal .btn-close:hover,
[data-theme="dark"] #roomDetailsModal .btn-close:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Enhanced Dark theme modal footer */
html[data-theme="dark"] #roomDetailsModal .modal-footer,
body[data-theme="dark"] #roomDetailsModal .modal-footer,
[data-theme="dark"] #roomDetailsModal .modal-footer {
    background: linear-gradient(135deg, #1e1e1e 0%, #262626 100%) !important;
    border-top: 1px solid rgba(88, 166, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Dark theme fluent cards inside modal */
html[data-theme="dark"] #roomDetailsModal .fluent-card,
body[data-theme="dark"] #roomDetailsModal .fluent-card,
[data-theme="dark"] #roomDetailsModal .fluent-card {
    background-color: #252525 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #roomDetailsModal .fluent-card:hover,
body[data-theme="dark"] #roomDetailsModal .fluent-card:hover,
[data-theme="dark"] #roomDetailsModal .fluent-card:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%) !important;
    border-color: rgba(88, 166, 255, 0.3) !important;
    box-shadow: 0 8px 30px rgba(88, 166, 255, 0.2) !important;
}

/* Dark theme room info items */
html[data-theme="dark"] .room-overview .info-item span,
body[data-theme="dark"] .room-overview .info-item span,
[data-theme="dark"] .room-overview .info-item span {
    color: #ffffff !important;
}

html[data-theme="dark"] .room-overview .info-item .text-muted,
body[data-theme="dark"] .room-overview .info-item .text-muted,
[data-theme="dark"] .room-overview .info-item .text-muted {
    color: #d0d0d0 !important;
}

/* Dark theme amenity badges */
html[data-theme="dark"] .amenity-badge,
body[data-theme="dark"] .amenity-badge,
[data-theme="dark"] .amenity-badge {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

html[data-theme="dark"] .amenity-badge:hover,
body[data-theme="dark"] .amenity-badge:hover,
[data-theme="dark"] .amenity-badge:hover {
    background-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: white !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
}

/* Dark theme form elements in modal */
html[data-theme="dark"] #roomDetailsModal .form-select,
body[data-theme="dark"] #roomDetailsModal .form-select,
[data-theme="dark"] #roomDetailsModal .form-select {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] #roomDetailsModal .form-select:focus,
body[data-theme="dark"] #roomDetailsModal .form-select:focus,
[data-theme="dark"] #roomDetailsModal .form-select:focus {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    box-shadow: 0 0 0 0.2rem rgba(0, 120, 212, 0.25) !important;
}

/* Dark theme section headers */
html[data-theme="dark"] #roomDetailsModal h6.text-primary,
body[data-theme="dark"] #roomDetailsModal h6.text-primary,
[data-theme="dark"] #roomDetailsModal h6.text-primary {
    color: #6B8E23 !important; /* Comment #19: Olive green */
    border-bottom-color: rgba(0, 120, 212, 0.3) !important;
}

html[data-theme="dark"] #roomDetailsModal h6.text-primary i,
body[data-theme="dark"] #roomDetailsModal h6.text-primary i,
[data-theme="dark"] #roomDetailsModal h6.text-primary i {
    color: #6B8E23 !important; /* Comment #19: Olive green */
}

/* Dark theme price displays */
html[data-theme="dark"] #roomDetailsModal .price-display .h4,
body[data-theme="dark"] #roomDetailsModal .price-display .h4,
[data-theme="dark"] #roomDetailsModal .price-display .h4 {
    color: #00bcf2 !important;
}

html[data-theme="dark"] #roomDetailsModal .price-summary .h5,
body[data-theme="dark"] #roomDetailsModal .price-summary .h5,
[data-theme="dark"] #roomDetailsModal .price-summary .h5 {
    color: #107c10 !important;
}

html[data-theme="dark"] #roomDetailsModal .text-muted,
body[data-theme="dark"] #roomDetailsModal .text-muted,
[data-theme="dark"] #roomDetailsModal .text-muted {
    color: #d0d0d0 !important;
}

/* Dark theme benefits section */
html[data-theme="dark"] #roomModalBenefits,
body[data-theme="dark"] #roomModalBenefits,
[data-theme="dark"] #roomModalBenefits {
    background: rgba(16, 124, 16, 0.2) !important;
    border-color: rgba(16, 124, 16, 0.4) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #roomModalBenefits h6,
body[data-theme="dark"] #roomModalBenefits h6,
[data-theme="dark"] #roomModalBenefits h6 {
    color: #4caf50 !important;
}

html[data-theme="dark"] .benefit-item span,
body[data-theme="dark"] .benefit-item span,
[data-theme="dark"] .benefit-item span {
    color: #ffffff !important;
}

/* Dark theme availability alerts */
html[data-theme="dark"] #roomModalAvailability.alert-success,
body[data-theme="dark"] #roomModalAvailability.alert-success,
[data-theme="dark"] #roomModalAvailability.alert-success {
    background: rgba(16, 124, 16, 0.2) !important;
    border-color: rgba(16, 124, 16, 0.4) !important;
    color: #4caf50 !important;
}

html[data-theme="dark"] #roomModalAvailability.alert-warning,
body[data-theme="dark"] #roomModalAvailability.alert-warning,
[data-theme="dark"] #roomModalAvailability.alert-warning {
    background: rgba(247, 99, 12, 0.2) !important;
    border-color: rgba(247, 99, 12, 0.4) !important;
    color: #ff9800 !important;
}

html[data-theme="dark"] #roomModalAvailability.alert-danger,
body[data-theme="dark"] #roomModalAvailability.alert-danger,
[data-theme="dark"] #roomModalAvailability.alert-danger {
    background: rgba(209, 52, 56, 0.2) !important;
    border-color: rgba(209, 52, 56, 0.4) !important;
    color: #f44336 !important;
}

/* Dark theme alert text */
html[data-theme="dark"] #roomModalAvailability .fw-semibold,
html[data-theme="dark"] #roomModalAvailability .small,
body[data-theme="dark"] #roomModalAvailability .fw-semibold,
body[data-theme="dark"] #roomModalAvailability .small,
[data-theme="dark"] #roomModalAvailability .fw-semibold,
[data-theme="dark"] #roomModalAvailability .small {
    color: inherit !important;
}

/* Dark theme category badges */
html[data-theme="dark"] #roomModalCategory.bg-secondary,
body[data-theme="dark"] #roomModalCategory.bg-secondary,
[data-theme="dark"] #roomModalCategory.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #roomModalCategory.bg-info,
body[data-theme="dark"] #roomModalCategory.bg-info,
[data-theme="dark"] #roomModalCategory.bg-info {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #roomModalCategory.bg-primary,
body[data-theme="dark"] #roomModalCategory.bg-primary,
[data-theme="dark"] #roomModalCategory.bg-primary {
    background-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: #ffffff !important;
}

html[data-theme="dark"] #roomModalCategory.bg-warning,
body[data-theme="dark"] #roomModalCategory.bg-warning,
[data-theme="dark"] #roomModalCategory.bg-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

/* Dark theme description text */
html[data-theme="dark"] #roomModalDescription,
body[data-theme="dark"] #roomModalDescription,
[data-theme="dark"] #roomModalDescription {
    color: #d0d0d0 !important;
}

/* Enhanced Dark Theme Modal Elements */
html[data-theme="dark"] #roomDetailsModal .amenity-badge,
body[data-theme="dark"] #roomDetailsModal .amenity-badge,
[data-theme="dark"] #roomDetailsModal .amenity-badge {
    background: #2a2a2a !important;
    border-color: rgba(88, 166, 255, 0.2) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #roomDetailsModal .amenity-badge:hover,
body[data-theme="dark"] #roomDetailsModal .amenity-badge:hover,
[data-theme="dark"] #roomDetailsModal .amenity-badge:hover {
    /* Comment #19: Flat design - solid olive green, no gradients */
    background-color: #6B8E23 !important;
    border-color: #58a6ff !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.4) !important;
}

html[data-theme="dark"] #roomDetailsModal .btn-outline-secondary,
body[data-theme="dark"] #roomDetailsModal .btn-outline-secondary,
[data-theme="dark"] #roomDetailsModal .btn-outline-secondary {
    background: #333333 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #roomDetailsModal .btn-outline-secondary:hover,
body[data-theme="dark"] #roomDetailsModal .btn-outline-secondary:hover,
[data-theme="dark"] #roomDetailsModal .btn-outline-secondary:hover {
    background: #404040 !important;
    border-color: #666666 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #roomDetailsModal .price-display,
body[data-theme="dark"] #roomDetailsModal .price-display,
[data-theme="dark"] #roomDetailsModal .price-display {
    background: rgba(88, 166, 255, 0.08) !important;
    border-color: rgba(88, 166, 255, 0.2) !important;
}

html[data-theme="dark"] #roomDetailsModal #roomModalFeatures .feature-item,
body[data-theme="dark"] #roomDetailsModal #roomModalFeatures .feature-item,
[data-theme="dark"] #roomDetailsModal #roomModalFeatures .feature-item {
    background: rgba(88, 166, 255, 0.05) !important;
    border-color: rgba(88, 166, 255, 0.15) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #roomDetailsModal #roomModalFeatures .feature-item:hover,
body[data-theme="dark"] #roomDetailsModal #roomModalFeatures .feature-item:hover,
[data-theme="dark"] #roomDetailsModal #roomModalFeatures .feature-item:hover {
    background: rgba(88, 166, 255, 0.12) !important;
    border-color: rgba(88, 166, 255, 0.3) !important;
}

/* ================================
   ENHANCED ROOM CARD DARK THEME FIXES
   ================================ */

/* Dark theme for Features & Amenities section in room cards */
html[data-theme="dark"] .fluent-card .bg-white,
body[data-theme="dark"] .fluent-card .bg-white,
[data-theme="dark"] .fluent-card .bg-white {
    background-color: #2d2d30 !important;
    border-color: #404040 !important;
}

html[data-theme="dark"] .fluent-card .bg-white h6,
html[data-theme="dark"] .fluent-card .bg-white .fw-semibold,
body[data-theme="dark"] .fluent-card .bg-white h6,
body[data-theme="dark"] .fluent-card .bg-white .fw-semibold,
[data-theme="dark"] .fluent-card .bg-white h6,
[data-theme="dark"] .fluent-card .bg-white .fw-semibold {
    color: #ffffff !important;
}

html[data-theme="dark"] .fluent-card .text-secondary,
body[data-theme="dark"] .fluent-card .text-secondary,
[data-theme="dark"] .fluent-card .text-secondary {
    color: #d0d0d0 !important;
}

/* Dark theme for amenity badges in Features & Amenities */
html[data-theme="dark"] .fluent-card .badge.bg-light.text-dark,
html[data-theme="dark"] .fluent-card .badge.bg-light,
body[data-theme="dark"] .fluent-card .badge.bg-light.text-dark,
body[data-theme="dark"] .fluent-card .badge.bg-light,
[data-theme="dark"] .fluent-card .badge.bg-light.text-dark,
[data-theme="dark"] .fluent-card .badge.bg-light {
    background-color: #404040 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

html[data-theme="dark"] .fluent-card .badge.bg-light .text-primary,
body[data-theme="dark"] .fluent-card .badge.bg-light .text-primary,
[data-theme="dark"] .fluent-card .badge.bg-light .text-primary {
    color: #58a6ff !important;
}

/* Dark theme for rate selection section */
html[data-theme="dark"] .rate-selection-highlight,
body[data-theme="dark"] .rate-selection-highlight,
[data-theme="dark"] .rate-selection-highlight {
    background-color: #2d2d30 !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: #ffffff !important;
}

html[data-theme="dark"] .rate-selection-highlight .form-label,
html[data-theme="dark"] .rate-selection-highlight .text-primary,
body[data-theme="dark"] .rate-selection-highlight .form-label,
body[data-theme="dark"] .rate-selection-highlight .text-primary,
[data-theme="dark"] .rate-selection-highlight .form-label,
[data-theme="dark"] .rate-selection-highlight .text-primary {
    color: #58a6ff !important;
}

html[data-theme="dark"] .rate-selection-highlight .form-select,
body[data-theme="dark"] .rate-selection-highlight .form-select,
[data-theme="dark"] .rate-selection-highlight .form-select {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #404040 !important;
}

html[data-theme="dark"] .rate-selection-highlight .form-select:focus,
body[data-theme="dark"] .rate-selection-highlight .form-select:focus,
[data-theme="dark"] .rate-selection-highlight .form-select:focus {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3) !important;
}

html[data-theme="dark"] .rate-selection-highlight small,
body[data-theme="dark"] .rate-selection-highlight small,
[data-theme="dark"] .rate-selection-highlight small {
    color: #d0d0d0 !important;
}

/* Dark theme for availability badge */
html[data-theme="dark"] .availability-badge .text-success,
body[data-theme="dark"] .availability-badge .text-success,
[data-theme="dark"] .availability-badge .text-success {
    color: #4caf50 !important;
}

html[data-theme="dark"] .availability-badge .text-warning,
body[data-theme="dark"] .availability-badge .text-warning,
[data-theme="dark"] .availability-badge .text-warning {
    color: #ff9800 !important;
}

html[data-theme="dark"] .availability-badge .text-danger,
body[data-theme="dark"] .availability-badge .text-danger,
[data-theme="dark"] .availability-badge .text-danger {
    color: #f44336 !important;
}

/* Dark theme for rate benefits display */
html[data-theme="dark"] .rate-benefits-display .card,
body[data-theme="dark"] .rate-benefits-display .card,
[data-theme="dark"] .rate-benefits-display .card {
    background-color: #2d2d30 !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: #ffffff !important;
    border-radius: 8px !important;
}

html[data-theme="dark"] .rate-benefits-display .card-body,
body[data-theme="dark"] .rate-benefits-display .card-body,
[data-theme="dark"] .rate-benefits-display .card-body {
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.12) 0%, rgba(0, 120, 212, 0.05) 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

html[data-theme="dark"] .rate-benefits-display .card-title,
html[data-theme="dark"] .rate-benefits-display .text-success,
body[data-theme="dark"] .rate-benefits-display .card-title,
body[data-theme="dark"] .rate-benefits-display .text-success,
[data-theme="dark"] .rate-benefits-display .card-title,
[data-theme="dark"] .rate-benefits-display .text-success {
    color: #4db8ff !important;
}

/* Dark theme for grid view rate benefits container */
html[data-theme="dark"] .rate-benefits-display .bg-light,
body[data-theme="dark"] .rate-benefits-display .bg-light,
[data-theme="dark"] .rate-benefits-display .bg-light {
    background-color: #2d2d30 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}

html[data-theme="dark"] .rate-benefits-display .benefit-item,
body[data-theme="dark"] .rate-benefits-display .benefit-item,
[data-theme="dark"] .rate-benefits-display .benefit-item {
    color: #ffffff !important;
}

/* Dark theme button styling remains the same as primary buttons already work well */

/* OPTIMIZED: Theme transitions - performance and accessibility */
* {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body,
html {
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Performance optimizations */
.room-card-clean,
.fluent-card,
.calendar-day {
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* CRITICAL FIX: View toggle buttons dark theme */
html[data-theme="dark"] .btn-group [data-view].active,
body[data-theme="dark"] .btn-group [data-view].active,
[data-theme="dark"] .btn-group [data-view].active {
    background-color: #6B8E23 !important; /* Comment #19: Olive green */
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: white !important;
}

html[data-theme="dark"] .btn-group [data-view]:not(.active),
body[data-theme="dark"] .btn-group [data-view]:not(.active),
[data-theme="dark"] .btn-group [data-view]:not(.active) {
    background-color: #1e1e1e !important;
    color: #d0d0d0 !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .btn-group [data-view]:not(.active):hover,
body[data-theme="dark"] .btn-group [data-view]:not(.active):hover,
[data-theme="dark"] .btn-group [data-view]:not(.active):hover {
    background-color: #333333 !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: #6B8E23 !important; /* Comment #19: Olive green */
}

/* CRITICAL FIX: List view cards dark theme - Enhanced for new layout */
html[data-theme="dark"] #roomsList.rooms-list .fluent-card,
body[data-theme="dark"] #roomsList.rooms-list .fluent-card,
[data-theme="dark"] #roomsList.rooms-list .fluent-card {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] #roomsList.rooms-list .card-title,
html[data-theme="dark"] #roomsList.rooms-list .price-amount,
html[data-theme="dark"] #roomsList.rooms-list .card-body,
html[data-theme="dark"] #roomsList.rooms-list .card-body div,
html[data-theme="dark"] #roomsList.rooms-list .card-body span,
html[data-theme="dark"] #roomsList.rooms-list .card-body label,
body[data-theme="dark"] #roomsList.rooms-list .card-title,
body[data-theme="dark"] #roomsList.rooms-list .price-amount,
body[data-theme="dark"] #roomsList.rooms-list .card-body,
body[data-theme="dark"] #roomsList.rooms-list .card-body div,
body[data-theme="dark"] #roomsList.rooms-list .card-body span,
body[data-theme="dark"] #roomsList.rooms-list .card-body label,
[data-theme="dark"] #roomsList.rooms-list .card-title,
[data-theme="dark"] #roomsList.rooms-list .price-amount,
[data-theme="dark"] #roomsList.rooms-list .card-body,
[data-theme="dark"] #roomsList.rooms-list .card-body div,
[data-theme="dark"] #roomsList.rooms-list .card-body span,
[data-theme="dark"] #roomsList.rooms-list .card-body label {
    color: #ffffff !important;
}

html[data-theme="dark"] #roomsList.rooms-list .price-mode-indicator,
body[data-theme="dark"] #roomsList.rooms-list .price-mode-indicator,
[data-theme="dark"] #roomsList.rooms-list .price-mode-indicator {
    color: #d0d0d0 !important;
}

/* CRITICAL FIX: Grid view improvements for dark theme */
html[data-theme="dark"] #roomsList.rooms-grid .fluent-card,
html[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .fluent-card,
body[data-theme="dark"] #roomsList.rooms-grid .fluent-card,
body[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .fluent-card,
[data-theme="dark"] #roomsList.rooms-grid .fluent-card,
[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .fluent-card {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* CRITICAL FIX: Price display dark theme styling */
html[data-theme="dark"] .price-amount,
body[data-theme="dark"] .price-amount,
[data-theme="dark"] .price-amount {
    color: #58a6ff !important;
}

html[data-theme="dark"] .price-mode-indicator,
body[data-theme="dark"] .price-mode-indicator,
[data-theme="dark"] .price-mode-indicator {
    color: #d0d0d0 !important;
}

/* CRITICAL FIX: Room info section in list view dark theme */
html[data-theme="dark"] #roomsList.rooms-list .bg-light,
body[data-theme="dark"] #roomsList.rooms-list .bg-light,
[data-theme="dark"] #roomsList.rooms-list .bg-light {
    background-color: #2d2d30 !important;
    border-color: #404040 !important;
}

html[data-theme="dark"] #roomsList.rooms-list .bg-light small,
html[data-theme="dark"] #roomsList.rooms-list .bg-light .fw-semibold,
html[data-theme="dark"] #roomsList.rooms-list .bg-light .text-muted,
body[data-theme="dark"] #roomsList.rooms-list .bg-light small,
body[data-theme="dark"] #roomsList.rooms-list .bg-light .fw-semibold,
body[data-theme="dark"] #roomsList.rooms-list .bg-light .text-muted,
[data-theme="dark"] #roomsList.rooms-list .bg-light small,
[data-theme="dark"] #roomsList.rooms-list .bg-light .fw-semibold,
[data-theme="dark"] #roomsList.rooms-list .bg-light .text-muted {
    color: #ffffff !important;
}

/* CRITICAL FIX: Amenity badges dark theme styling */
html[data-theme="dark"] .badge.bg-light.text-dark,
html[data-theme="dark"] .badge.bg-light,
body[data-theme="dark"] .badge.bg-light.text-dark,
body[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.bg-light.text-dark,
[data-theme="dark"] .badge.bg-light {
    background-color: #404040 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

html[data-theme="dark"] .badge.bg-light .text-primary,
body[data-theme="dark"] .badge.bg-light .text-primary,
[data-theme="dark"] .badge.bg-light .text-primary {
    color: #58a6ff !important;
}

/* CRITICAL FIX: Form labels and small text dark theme */
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .small,
html[data-theme="dark"] small,
body[data-theme="dark"] .form-label,
body[data-theme="dark"] .small,
body[data-theme="dark"] small,
[data-theme="dark"] .form-label,
[data-theme="dark"] .small,
[data-theme="dark"] small {
    color: #d0d0d0 !important;
}

/* CRITICAL FIX: Card title and text dark theme */
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .text-dark,
body[data-theme="dark"] .card-title,
body[data-theme="dark"] .text-dark,
[data-theme="dark"] .card-title,
[data-theme="dark"] .text-dark {
    color: #ffffff !important;
}

/* CRITICAL FIX: Grid view amenity badges and small text */
html[data-theme="dark"] #roomsList.rooms-grid .badge,
html[data-theme="dark"] #roomsList.rooms-grid .small,
html[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .badge,
html[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .small,
body[data-theme="dark"] #roomsList.rooms-grid .badge,
body[data-theme="dark"] #roomsList.rooms-grid .small,
body[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .badge,
body[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .small,
[data-theme="dark"] #roomsList.rooms-grid .badge,
[data-theme="dark"] #roomsList.rooms-grid .small,
[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .badge,
[data-theme="dark"] #roomsList:not(.rooms-list):not(.rooms-calendar) .small {
    background-color: #404040 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    /* Auto dark mode styles if needed */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-primary: #000000;
    }

    [data-theme="dark"] {
        --border-color: #ffffff;
        --text-primary: #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Theme-specific icons */
[data-theme="dark"] .icon-moon {
    display: none;
}

[data-theme="dark"] .icon-sun {
    display: inline;
}

.icon-sun {
    display: none;
}

[data-theme="light"] .icon-moon {
    display: inline;
}

[data-theme="light"] .icon-sun {
    display: none;
}

/* CRITICAL FIX: Header title contrast for both themes - Enhanced */
.header-title {
    color: var(--text-primary, #2c3e50) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .header-title,
html:not([data-theme]) .header-title {
    color: #2c3e50 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .header-title,
body[data-theme="dark"] .header-title,
[data-theme="dark"] .header-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}


/* FIXED: Date picker theme styling */
/* Enhanced Dark Theme Flatpickr Calendar with Glass Morphism */
[data-theme="dark"] .flatpickr-calendar {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    z-index: 9999 !important;
    position: absolute !important;
    height: 420px !important;
    width: 340px !important;
    overflow: visible !important;
    padding: 20px !important;
    padding-bottom: 30px !important;
}

/* Dark theme container fixes */
[data-theme="dark"] .flatpickr-wrapper {
    z-index: 9999 !important;
    position: relative !important;
}

/* Dark theme calendar positioning when open */
[data-theme="dark"] .flatpickr-calendar.open {
    z-index: 99999 !important;
    position: absolute !important;
}

[data-theme="dark"] .flatpickr-days {
    overflow: visible !important;
    min-height: 240px !important;
    padding-bottom: 15px !important;
}

[data-theme="dark"] .flatpickr-rContainer {
    overflow: visible !important;
    min-height: 240px !important;
    padding-bottom: 15px !important;
}

/* Dark theme internal container fixes */
[data-theme="dark"] .flatpickr-innerContainer {
    overflow: visible !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding-bottom: 20px !important;
    min-height: 280px !important;
    z-index: 10000 !important;
}

[data-theme="dark"] .flatpickr-months {
    position: relative !important;
    z-index: 10001 !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

[data-theme="dark"] .flatpickr-weekdays {
    margin-bottom: 5px !important;
    z-index: 10002 !important;
    position: relative !important;
}

[data-theme="dark"] .flatpickr-month {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%) !important;
    color: #f1f5f9 !important;
    border-bottom: 1px solid rgba(71, 85, 105, 0.4) !important;
}

[data-theme="dark"] .flatpickr-current-month {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

[data-theme="dark"] .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 2px solid rgba(88, 166, 255, 0.6) !important;
    border-radius: 8px !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    min-width: 70px !important;
    text-align: center !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 10005 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Dark theme dropdown options */
[data-theme="dark"] .flatpickr-monthDropdown-months option,
[data-theme="dark"] .flatpickr-current-month input.cur-year option {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    padding: 0.5rem !important;
}

[data-theme="dark"] .flatpickr-monthDropdown-months:hover,
[data-theme="dark"] .flatpickr-current-month input.cur-year:hover {
    border-color: rgba(88, 166, 255, 0.7) !important;
    background: rgba(30, 41, 59, 1) !important;
}

[data-theme="dark"] .flatpickr-monthDropdown-months:focus,
[data-theme="dark"] .flatpickr-current-month input.cur-year:focus {
    outline: none !important;
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .flatpickr-weekday {
    background: rgba(30, 41, 59, 0.6) !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 0.75rem 0.5rem !important;
}

[data-theme="dark"] .flatpickr-day {
    background: transparent !important;
    color: #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    margin: 2px !important;
}

[data-theme="dark"] .flatpickr-day:hover {
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.8) 0%, rgba(88, 166, 255, 0.6) 100%) !important;
    color: white !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3) !important;
}

[data-theme="dark"] .flatpickr-day.selected {
    background: linear-gradient(135deg, #58a6ff 0%, #4a9eff 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.4) !important;
}

[data-theme="dark"] .flatpickr-day.today {
    border: 2px solid #58a6ff !important;
    background: rgba(88, 166, 255, 0.1) !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .flatpickr-day.today:hover {
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.9) 0%, rgba(88, 166, 255, 0.7) 100%) !important;
    border-color: #58a6ff !important;
}

[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month {
    color: #e2e8f0 !important;
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(88, 166, 255, 0.4) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    z-index: 10010 !important;
    position: relative !important;
}

[data-theme="dark"] .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-next-month:hover {
    color: #ffffff !important;
    background: #58a6ff !important;
    border-color: #58a6ff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.4) !important;
}

/* CRITICAL FIX: Enhanced calendar view dark theme */
[data-theme="dark"] .selected-date-panel {
    background-color: #2d2d30 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .selected-date-header {
    border-color: #404040 !important;
}

[data-theme="dark"] .selected-date-header h6 {
    color: #ffffff !important;
}

[data-theme="dark"] .room-type-item {
    background-color: #1e1e1e !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .room-type-item:hover {
    border-color: #58a6ff !important;
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.15) !important;
}

[data-theme="dark"] .room-type-title {
    color: #ffffff !important;
}

[data-theme="dark"] .room-count-badge {
    background-color: #1e3a5f !important;
    color: #58a6ff !important;
}

[data-theme="dark"] .rate-package-item {
    background-color: #2d2d30 !important;
    border-color: #404040 !important;
}

[data-theme="dark"] .rate-package-name {
    color: #d0d0d0 !important;
}

[data-theme="dark"] .rate-package-price {
    color: #58a6ff !important;
}

[data-theme="dark"] .selected-date-actions {
    border-color: #404040 !important;
}

/* ================================
   MOBILE INTERFACE DARK THEME FIXES
   ================================ */

/* Dark theme for mobile bottom navigation */
html[data-theme="dark"] .mobile-bottom-nav,
body[data-theme="dark"] .mobile-bottom-nav,
[data-theme="dark"] .mobile-bottom-nav {
    background: rgba(30, 30, 30, 0.95) !important;
    border-top-color: #333333 !important;
    backdrop-filter: blur(20px) !important;
}

html[data-theme="dark"] .mobile-nav-btn,
body[data-theme="dark"] .mobile-nav-btn,
[data-theme="dark"] .mobile-nav-btn {
    background: #1e1e1e !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .mobile-nav-btn:hover,
html[data-theme="dark"] .mobile-nav-btn:focus,
body[data-theme="dark"] .mobile-nav-btn:hover,
body[data-theme="dark"] .mobile-nav-btn:focus,
[data-theme="dark"] .mobile-nav-btn:hover,
[data-theme="dark"] .mobile-nav-btn:focus {
    background: #0078d4 !important;
    color: white !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3) !important;
}

html[data-theme="dark"] .mobile-nav-btn .icon,
html[data-theme="dark"] .mobile-nav-btn .label,
body[data-theme="dark"] .mobile-nav-btn .icon,
body[data-theme="dark"] .mobile-nav-btn .label,
[data-theme="dark"] .mobile-nav-btn .icon,
[data-theme="dark"] .mobile-nav-btn .label {
    color: inherit !important;
}

/* Dark theme for mobile modal overlays */
html[data-theme="dark"] .mobile-modal-overlay,
body[data-theme="dark"] .mobile-modal-overlay,
[data-theme="dark"] .mobile-modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

html[data-theme="dark"] .mobile-modal-content,
body[data-theme="dark"] .mobile-modal-content,
[data-theme="dark"] .mobile-modal-content {
    background: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

html[data-theme="dark"] .mobile-modal-header,
body[data-theme="dark"] .mobile-modal-header,
[data-theme="dark"] .mobile-modal-header {
    background: #252525 !important;
    border-bottom-color: #333333 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .mobile-modal-header h5,
body[data-theme="dark"] .mobile-modal-header h5,
[data-theme="dark"] .mobile-modal-header h5 {
    color: #ffffff !important;
}

/* Photo Gallery Modal Dark Theme */
html[data-theme="dark"] #photoGalleryModal .modal-header,
body[data-theme="dark"] #photoGalleryModal .modal-header,
[data-theme="dark"] #photoGalleryModal .modal-header {
    background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%) !important;
    color: white !important;
    border-bottom: 1px solid #333333 !important;
}

html[data-theme="dark"] #photoGalleryModal .modal-header .bi-images,
body[data-theme="dark"] #photoGalleryModal .modal-header .bi-images,
[data-theme="dark"] #photoGalleryModal .modal-header .bi-images {
    color: #58a6ff !important;
}

html[data-theme="dark"] #photoGalleryModal .modal-header .btn-close,
body[data-theme="dark"] #photoGalleryModal .modal-header .btn-close,
[data-theme="dark"] #photoGalleryModal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* Photo Gallery Loading Overlay Dark Theme */
html[data-theme="dark"] #galleryLoadingOverlay,
body[data-theme="dark"] #galleryLoadingOverlay,
[data-theme="dark"] #galleryLoadingOverlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] #galleryLoadingOverlay .spinner-border,
body[data-theme="dark"] #galleryLoadingOverlay .spinner-border,
[data-theme="dark"] #galleryLoadingOverlay .spinner-border {
    color: #58a6ff !important;
}

html[data-theme="dark"] .mobile-modal-body,
body[data-theme="dark"] .mobile-modal-body,
[data-theme="dark"] .mobile-modal-body {
    background: #1e1e1e !important;
    color: #ffffff !important;
}

/* Dark theme for mobile currency selector */
html[data-theme="dark"] .mobile-currency-grid .currency-option,
body[data-theme="dark"] .mobile-currency-grid .currency-option,
[data-theme="dark"] .mobile-currency-grid .currency-option {
    background: #252525 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .mobile-currency-grid .currency-option:hover,
html[data-theme="dark"] .mobile-currency-grid .currency-option.active,
body[data-theme="dark"] .mobile-currency-grid .currency-option:hover,
body[data-theme="dark"] .mobile-currency-grid .currency-option.active,
[data-theme="dark"] .mobile-currency-grid .currency-option:hover,
[data-theme="dark"] .mobile-currency-grid .currency-option.active {
    background: #0078d4 !important;
    border-color: #6B8E23 !important; /* Comment #19: Olive green */
    color: white !important;
}

html[data-theme="dark"] .currency-symbol,
html[data-theme="dark"] .currency-name,
body[data-theme="dark"] .currency-symbol,
body[data-theme="dark"] .currency-name,
[data-theme="dark"] .currency-symbol,
[data-theme="dark"] .currency-name {
    color: inherit !important;
}

/* Dark theme for mobile room cards in small screens */
@media (max-width: 768px) {
    html[data-theme="dark"] .fluent-card,
    body[data-theme="dark"] .fluent-card,
    [data-theme="dark"] .fluent-card {
        background-color: #1e1e1e !important;
        border-color: #333333 !important;
        color: #ffffff !important;
    }

    html[data-theme="dark"] .fluent-card .bg-light,
    body[data-theme="dark"] .fluent-card .bg-light,
    [data-theme="dark"] .fluent-card .bg-light {
        background-color: #2d2d30 !important;
        border-color: #404040 !important;
    }

    html[data-theme="dark"] .fluent-card .card-title,
    html[data-theme="dark"] .fluent-card .card-body,
    html[data-theme="dark"] .fluent-card .price-amount,
    body[data-theme="dark"] .fluent-card .card-title,
    body[data-theme="dark"] .fluent-card .card-body,
    body[data-theme="dark"] .fluent-card .price-amount,
    [data-theme="dark"] .fluent-card .card-title,
    [data-theme="dark"] .fluent-card .card-body,
    [data-theme="dark"] .fluent-card .price-amount {
        color: #ffffff !important;
    }

    html[data-theme="dark"] .fluent-card .text-muted,
    html[data-theme="dark"] .fluent-card small,
    body[data-theme="dark"] .fluent-card .text-muted,
    body[data-theme="dark"] .fluent-card small,
    [data-theme="dark"] .fluent-card .text-muted,
    [data-theme="dark"] .fluent-card small {
        color: #d0d0d0 !important;
    }

    html[data-theme="dark"] .fluent-card .badge.bg-light,
    body[data-theme="dark"] .fluent-card .badge.bg-light,
    [data-theme="dark"] .fluent-card .badge.bg-light {
        background-color: #404040 !important;
        color: #ffffff !important;
        border-color: #555555 !important;
    }

    html[data-theme="dark"] .rate-selection-highlight,
    body[data-theme="dark"] .rate-selection-highlight,
    [data-theme="dark"] .rate-selection-highlight {
        background-color: #2d2d30 !important;
        border-color: #6B8E23 !important; /* Comment #19: Olive green */
    }

    html[data-theme="dark"] .rate-benefits-display .card,
    body[data-theme="dark"] .rate-benefits-display .card,
    [data-theme="dark"] .rate-benefits-display .card {
        background-color: #2d2d30 !important;
        border-color: #6B8E23 !important; /* Comment #19: Olive green */
        border-radius: 8px !important;
    }

    html[data-theme="dark"] .rate-benefits-display .card-body,
    body[data-theme="dark"] .rate-benefits-display .card-body,
    [data-theme="dark"] .rate-benefits-display .card-body {
        background: linear-gradient(135deg, rgba(0, 120, 212, 0.12) 0%, rgba(0, 120, 212, 0.05) 100%) !important;
        border-radius: 8px !important;
    }
}

/* Dark theme for mobile specific elements */
html[data-theme="dark"] .mobile-search-panel,
body[data-theme="dark"] .mobile-search-panel,
[data-theme="dark"] .mobile-search-panel {
    background: #1e1e1e !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .mobile-filter-panel,
body[data-theme="dark"] .mobile-filter-panel,
[data-theme="dark"] .mobile-filter-panel {
    background: #1e1e1e !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* Dark theme for close buttons in mobile modals */
html[data-theme="dark"] .mobile-modal .btn-close,
body[data-theme="dark"] .mobile-modal .btn-close,
[data-theme="dark"] .mobile-modal .btn-close {
    filter: invert(1) !important;
}

/* Dark theme for mobile badge indicators */
html[data-theme="dark"] .mobile-nav-btn .badge,
body[data-theme="dark"] .mobile-nav-btn .badge,
[data-theme="dark"] .mobile-nav-btn .badge {
    background: #d73527 !important;
    color: white !important;
}