/* Booking Grid Styles */

.booking-grid-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.booking-grid-table {
    border-collapse: separate;
    border-spacing: 0;
}

.booking-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}

.booking-grid-table tbody td {
    min-height: 60px;
    vertical-align: middle;
    background-color: #F3F4F6; /* gray-100 */
    border: 1px solid #E5E7EB; /* gray-200 */
}

/* Booking Slot Styles */
.booking-slot {
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    min-height: 32px; /*50px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
}

.booking-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Payment Status Colors */
.booking-slot.status-unpaid {
    background-color: #FEE2E2; /* red-100 - soft red */
    border: 2px solid #FCA5A5; /* red-300 */
    color: #991B1B; /* red-800 */
}

.booking-slot.status-paid {
    background-color: #D1FAE5; /* green-100 */
    border: 2px solid #6EE7B7; /* green-300 */
    color: #065F46; /* green-800 */
}

.booking-slot.status-partial {
    background-color: #FED7AA; /* orange-200 */
    border: 2px solid #FDBA74; /* orange-300 */
    color: #9A3412; /* orange-800 */
}

/* Group Colors - Higher specificity to override payment status colors */
.booking-slot.group-group,
.booking-slot.status-paid.group-group,
.booking-slot.status-unpaid.group-group,
.booking-slot.status-partial.group-group {
    background-color: #b6f0ff !important;
    border: 2px solid #4ddcfc !important;
    color: #0c4a6e !important;
}

.booking-slot-partial.group-group,
.booking-slot-partial.status-paid.group-group,
.booking-slot-partial.status-unpaid.group-group,
.booking-slot-partial.status-partial.group-group {
    background: linear-gradient(to right, #b6f0ff 50%, white 50%) !important;
    border: 2px solid #4ddcfc !important;
    color: #0c4a6e !important;
}

.booking-slot.group-kids,
.booking-slot.status-paid.group-kids,
.booking-slot.status-unpaid.group-kids,
.booking-slot.status-partial.group-kids {
    background-color: #fbffd9 !important;
    border: 2px solid #acb563 !important;
    color: #365314 !important;
}

.booking-slot-partial.group-kids,
.booking-slot-partial.status-paid.group-kids,
.booking-slot-partial.status-unpaid.group-kids,
.booking-slot-partial.status-partial.group-kids {
    background: linear-gradient(to right, #fbffd9 50%, white 50%) !important;
    border: 2px solid #acb563 !important;
    color: #365314 !important;
}

.booking-slot.group-adult,
.booking-slot.status-paid.group-adult,
.booking-slot.status-unpaid.group-adult,
.booking-slot.status-partial.group-adult {
    background-color: #F3E8FF !important;
    border: 2px solid #C4B5FD !important;
    color: #6B21A8 !important;
}

.booking-slot-partial.group-adult,
.booking-slot-partial.status-paid.group-adult,
.booking-slot-partial.status-unpaid.group-adult,
.booking-slot-partial.status-partial.group-adult {
    background: linear-gradient(to right, #F3E8FF 50%, white 50%) !important;
    border: 2px solid #C4B5FD !important; /* purple-300 */
    color: #6B21A8 !important; /* purple-800 */
}

/* Double partial bookings with specific status and group combinations */

/* Kids-Adult combinations */
.booking-slot-double-partial.status-paid-kids-paid-adult {
    background: linear-gradient(to right, #fbffd9 50%, #F3E8FF 50%) !important;
    border: 2px solid #acb563 !important;
    color: #365314 !important;
}

.booking-slot-double-partial.status-paid-kids-paid-kids {
    background-color: #fbffd9 !important;
    border: 2px solid #acb563 !important;
    color: #365314 !important;
}

/* Adult-Kids combinations */
.booking-slot-double-partial.status-paid-adult-paid-kids {
    background: linear-gradient(to right, #F3E8FF 50%, #fbffd9 50%) !important;
    border: 2px solid #C4B5FD !important;
    color: #6B21A8 !important;
}

.booking-slot-double-partial.status-paid-adult-paid-adult {
    background-color: #F3E8FF !important;
    border: 2px solid #C4B5FD !important;
    color: #6B21A8 !important;
}

/* Kids and simple bookings combinations */
.booking-slot-double-partial.status-paid-kids-unpaid {
    background: linear-gradient(to right, #fbffd9 50%, #FCA5A5 50%) !important;
    border: 2px solid #acb563 !important;
    color: #365314 !important;
}
.booking-slot-double-partial.status-unpaid-paid-kids {
    background: linear-gradient(to right, #FCA5A5 50%, #fbffd9 50%) !important;
    border: 2px solid #FCA5A5 !important;
    color: #991B1B !important;
}
.booking-slot-double-partial.status-paid-kids-paid {
    background: linear-gradient(to right, #fbffd9 50%, #D1FAE5 50%) !important;
    border: 2px solid #acb563 !important;
    color: #065F46 !important;
}

.booking-slot-double-partial.status-paid-paid-kids {
    background: linear-gradient(to right, #D1FAE5 50%, #fbffd9 50%) !important;
    border: 2px solid #6EE7B7 !important;
    color: #065F46 !important;
}

/* Adult and simple bookings combinations */
.booking-slot-double-partial.status-paid-adult-unpaid {
    background: linear-gradient(to right, #F3E8FF 50%, #FCA5A5 50%) !important;
    border: 2px solid #C4B5FD !important;
    color: #6B21A8 !important;
}
.booking-slot-double-partial.status-unpaid-paid-adult {
    background: linear-gradient(to right, #FCA5A5 50%, #F3E8FF 50%) !important;
    border: 2px solid #FCA5A5 !important;
    color: #991B1B !important;
}
.booking-slot-double-partial.status-paid-paid-adult {
    background: linear-gradient(to right, #D1FAE5 50%, #F3E8FF 50%) !important;
    border: 2px solid #6EE7B7 !important;
    color: #065F46 !important;
}

.booking-slot-double-partial.status-paid-adult-paid {
    background: linear-gradient(to right, #F3E8FF 50%, #D1FAE5 50%) !important;
    border: 2px solid #6EE7B7 !important;
    color: #065F46 !important;
}

/* Group and simple bookings combinations */
.booking-slot-double-partial.status-paid-paid-group {
    background: linear-gradient(to right, #D1FAE5 50%, #b6f0ff 50%) !important;
    border: 2px solid #6EE7B7 !important;
    color: #065F46 !important;
}

.booking-slot-double-partial.status-unpaid-paid-group {
    background: linear-gradient(to right, #FCA5A5 50%, #b6f0ff 50%) !important;
    border: 2px solid #FCA5A5 !important;
    color: #991B1B !important;
}

.booking-slot-double-partial.status-paid-group-unpaid {
    background: linear-gradient(to right, #b6f0ff 50%, #FCA5A5 50%) !important;
    border: 2px solid #4ddcfc !important;
    color: #0c4a6e !important;
}

.booking-slot-double-partial.status-paid-group-paid {
    background: linear-gradient(to right, #b6f0ff 50%, #D1FAE5 50%) !important;
    border: 2px solid #4ddcfc !important;
    color: #0c4a6e !important;
}

/* Kids-Group combinations */
.booking-slot-double-partial.status-paid-paid-kids-group,
.booking-slot-double-partial.status-unpaid-unpaid-kids-group,
.booking-slot-double-partial.status-partial-partial-kids-group,
.booking-slot-double-partial.status-paid-unpaid-kids-group,
.booking-slot-double-partial.status-unpaid-paid-kids-group,
.booking-slot-double-partial.status-paid-partial-kids-group,
.booking-slot-double-partial.status-partial-paid-kids-group,
.booking-slot-double-partial.status-unpaid-partial-kids-group,
.booking-slot-double-partial.status-partial-unpaid-kids-group {
    background: linear-gradient(to right, #fbffd9 50%, #b6f0ff 50%) !important;
    border: 2px solid #acb563 !important;
    color: #365314 !important;
}

/* Group-Kids combinations */
.booking-slot-double-partial.status-paid-paid-group-kids,
.booking-slot-double-partial.status-unpaid-unpaid-group-kids,
.booking-slot-double-partial.status-partial-partial-group-kids,
.booking-slot-double-partial.status-paid-unpaid-group-kids,
.booking-slot-double-partial.status-unpaid-paid-group-kids,
.booking-slot-double-partial.status-paid-partial-group-kids,
.booking-slot-double-partial.status-partial-paid-group-kids,
.booking-slot-double-partial.status-unpaid-partial-group-kids,
.booking-slot-double-partial.status-partial-unpaid-group-kids {
    background: linear-gradient(to right, #b6f0ff 50%, #fbffd9 50%) !important;
    border: 2px solid #7DD3FC !important;
    color: #0C4A6E !important;
}

/* Adult-Group combinations */
.booking-slot-double-partial.status-paid-paid-adult-group,
.booking-slot-double-partial.status-unpaid-unpaid-adult-group,
.booking-slot-double-partial.status-partial-partial-adult-group,
.booking-slot-double-partial.status-paid-unpaid-adult-group,
.booking-slot-double-partial.status-unpaid-paid-adult-group,
.booking-slot-double-partial.status-paid-partial-adult-group,
.booking-slot-double-partial.status-partial-paid-adult-group,
.booking-slot-double-partial.status-unpaid-partial-adult-group,
.booking-slot-double-partial.status-partial-unpaid-adult-group {
    background: linear-gradient(to right, #F3E8FF 50%, #b6f0ff 50%) !important;
    border: 2px solid #C4B5FD !important;
    color: #6B21A8 !important;
}

/* Group-Adult combinations */
.booking-slot-double-partial.status-paid-paid-group-adult,
.booking-slot-double-partial.status-unpaid-unpaid-group-adult,
.booking-slot-double-partial.status-partial-partial-group-adult,
.booking-slot-double-partial.status-paid-unpaid-group-adult,
.booking-slot-double-partial.status-unpaid-paid-group-adult,
.booking-slot-double-partial.status-paid-partial-group-adult,
.booking-slot-double-partial.status-partial-paid-group-adult,
.booking-slot-double-partial.status-unpaid-partial-group-adult,
.booking-slot-double-partial.status-partial-unpaid-group-adult {
    background: linear-gradient(to right, #b6f0ff 50%, #F3E8FF 50%) !important;
    border: 2px solid #7DD3FC !important;
    color: #0C4A6E !important;
}

/* Kids-Group simple combinations */
.booking-slot-double-partial.status-paid-kids-paid-group {
    background: linear-gradient(to right, #fbffd9 50%, #b6f0ff 50%) !important;
    border: 2px solid #acb563 !important;
    color: #365314 !important;
}

.booking-slot-double-partial.status-paid-group-paid-kids {
    background: linear-gradient(to right, #b6f0ff 50%, #fbffd9 50%) !important;
    border: 2px solid #4ddcfc !important;
    color: #0c4a6e !important;
}

/* Group-Group combination */
.booking-slot-double-partial.status-paid-group-paid-group {
    background-color: #b6f0ff !important;
    border: 2px solid #4ddcfc !important;
    color: #0c4a6e !important;
}

/* Adult-Group simple combinations */
.booking-slot-double-partial.status-paid-adult-paid-group {
    background: linear-gradient(to right, #F3E8FF 50%, #b6f0ff 50%) !important;
    border: 2px solid #C4B5FD !important;
    color: #6B21A8 !important;
}

.booking-slot-double-partial.status-paid-group-paid-adult {
    background: linear-gradient(to right, #b6f0ff 50%, #F3E8FF 50%) !important;
    border: 2px solid #4ddcfc !important;
    color: #0c4a6e !important;
}

/* Empty slot hover effect */
.booking-grid-table tbody td:hover {
    background-color: #E5E7EB; /* gray-200 */
}

/* Responsive */
@media (max-width: 768px) {
    .booking-grid-table {
        font-size: 12px;
    }
    
    .booking-slot {
        padding: 4px;
        min-height: 40px;
    }
}

/* Loading animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Modal backdrop */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Legend */
.booking-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.booking-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.booking-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid;
}

.booking-legend-color.unpaid {
    background-color: #FEE2E2;
    border-color: #FCA5A5;
}

.booking-legend-color.paid {
    background-color: #D1FAE5;
    border-color: #6EE7B7;
}

.booking-legend-color.partial {
    background-color: #FED7AA;
    border-color: #FDBA74;
}

.booking-legend-color.group-group {
    background-color: #b6f0ff;
    border-color: #4ddcfc;
}

.booking-legend-color.group-kids {
    background-color: #fbffd9;
    border-color: #acb563;
}

.booking-legend-color.group-adult {
    background-color: #F3E8FF;
    border-color: #C4B5FD;
}