/* 
File: booking-calendar.css
Last Modified: 2025-12-25
Changes: Extracted from _BookingCalendar.cshtml, added color contrast fixes
*/
/* Booking Calendar Styles */
/* Extracted from _BookingCalendar.cshtml for HTML validation compliance */

.booking-section {
    background-color: #f8f9fa;
    min-height: 600px;
}

/* Theme-aware classes */
.theme-primary {
    background-color: var(--header-bg-color, var(--bs-primary, #212529)) !important;
    color: var(--header-text-color, white) !important;
}

.theme-primary-hover:hover {
    background-color: var(--bs-primary-dark, #0b5ed7) !important;
}

/* Card header text - use header text color variable */
.card-header.theme-primary h3,
.card-header.theme-primary h4,
.card-header.theme-primary h5 {
    color: var(--header-text-color, white) !important;
}

/* Calendar text - ALWAYS use text color variable */
.calendar-table {
    color: var(--text-color, #212529) !important;
}

/* Card body - use card background and text colors */
.card-body {
    background-color: var(--card-bg-color, white) !important;
    color: var(--text-color, #212529) !important;
}

/* Booking form step content - use text color variable */
.booking-step {
    color: var(--text-color, #212529);
}

.booking-step h4 {
    color: var(--text-color, #212529) !important;
}

.booking-step label,
.booking-step input,
.booking-step .form-label {
    color: var(--text-color, #212529) !important;
}

/* Checkbox labels - ULTRA-SPECIFIC to override Bootstrap */
.booking-step .form-check .form-check-label,
.booking-step .mb-3 .form-check-label,
.card-body .booking-step .form-check-label,
#bookingFormCard .form-check-label,
.form-check-label {
    color: var(--text-color, #212529) !important;
}

/* NUCLEAR OPTION: Force checkbox labels to always be visible */
/* This overrides everything, including Bootstrap's specificity */
.booking-section .booking-step .form-check-label,
.booking-section #bookingFormCard .form-check-label,
.booking-section .card-body .form-check-label,
body .booking-section .form-check-label {
    color: var(--text-color, #212529) !important;
    opacity: 1 !important;
}

/* Calendar styles */
.calendar-table td {
    width: 60px;
    height: 60px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #212529 !important;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.calendar-table th {
    width: 60px;
    height: 40px;
    text-align: center;
    padding: 10px;
}

/* Available dates should have dark text, not blue */
.calendar-table td:not(.disabled):not(.past):not(.closed) {
    color: #212529 !important;
}

.calendar-table td:hover:not(.disabled):not(.past):not(.closed) {
    background-color: var(--bs-secondary, #495057);
    color: white !important;
    transform: scale(1.05);
}

.calendar-table td.selected {
    background-color: var(--bs-primary, #212529) !important;
    color: white !important;
    font-weight: bold;
}

.calendar-table td.disabled,
.calendar-table td.past {
    background-color: #f8f9fa;
    color: #adb5bd !important;
    cursor: not-allowed;
}

/* Closed dates styling */
.calendar-table td.closed {
    background-color: #ffe5e5;
    color: #dc3545 !important;
    cursor: not-allowed;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    transition: none;
    font-size: 14px;
    line-height: 1.2;
}

.calendar-table td.closed .closed-label {
    display: block;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2px;
    color: #dc3545;
    line-height: 1;
}

.calendar-table td.closed:hover {
    transform: none;
}

/* Time slot styles */
.time-slot {
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: white;
    color: #212529; /* Black text for readability */
}
.time-slot:hover {
    background-color: #e9ecef;
    border-color: var(--bs-primary, #212529);
    color: #212529; /* Keep black text on hover */
}
.time-slot.selected {
    background-color: var(--bs-primary, #212529);
    color: white; /* White text when selected */
    border-color: var(--bs-primary, #212529);
}
.time-slot.booked {
    background-color: #f8f9fa;
    color: #6c757d; /* Grey text for booked slots */
    cursor: not-allowed;
}

/* Button styles */
.booking-section .btn-primary {
    background-color: var(--bs-primary, #212529);
    border-color: var(--bs-primary, #212529);
    color: white; /* White text on buttons */
}
.booking-section .btn-primary:hover {
    background-color: var(--bs-primary-dark, #0b5ed7);
    border-color: var(--bs-primary-dark, #0b5ed7);
    color: white;
}
.booking-section .btn-success {
    background-color: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
    color: white;
}
.booking-section .btn-success:hover {
    background-color: var(--bs-success-dark, #146c43);
    border-color: var(--bs-success-dark, #146c43);
    color: white;
}

/* Ensure form card body uses card background and text colors */
#bookingFormCard .card-body {
    background-color: var(--card-bg-color, white);
    color: var(--text-color, #212529);
}

/* Alert boxes in booking form */
.booking-section .alert {
    color: var(--text-color, #212529);
}

.booking-section .alert-info {
    background-color: #cfe2ff;
    border-color: #b6d4fe;
    color: #084298;
}

.booking-section .alert-light {
    background-color: #f8f9fa;
    color: #212529;
}