/* Resource Booking Engine Grid */
.rbe-booking-grid {
    display: grid;
    min-width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: visible;
}

.grid-corner {
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
    background: #f7f7f7 !important;
    border-right: 2px solid #e5e5e5;
}

.grid-time-header {
    background: #f7f7f7;
    position: sticky;
    top: 0;
    z-index: 20;
}

.grid-resource-name {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background: #fff !important;
    border-right: 2px solid #e5e5e5;
    max-width: 150px;
}

.grid-slot {
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #f0f0f0;
    padding: 16px 8px;
    text-align: center;
    transition: all 0.15s ease;
    min-height: 60px;
    /* Note: background color is set inline via JavaScript */
}

.grid-slot[onclick]:hover {
    opacity: 0.7;
    transform: scale(1.02);
}

.grid-slot[onclick]:active {
    transform: scale(0.98);
}

/* Mobile-friendly date navigation */
@media (max-width: 640px) {
    .btn-outline.btn-primary {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    #customer-date-display {
        font-size: 0.75rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid-time-header {
        font-size: 11px;
        padding: 8px 4px;
    }
    
    .grid-resource-name {
        font-size: 12px;
        padding: 12px 8px;
        min-width: 100px;
    }
    
    .grid-slot {
        padding: 12px 4px;
        min-height: 50px;
    }
}

/* Smooth scroll */
#customer-grid-container {
    scroll-behavior: smooth;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar */
#customer-grid-container::-webkit-scrollbar {
    height: 10px;
}

#customer-grid-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

#customer-grid-container::-webkit-scrollbar-thumb {
    background: #10b981;
    border-radius: 5px;
}

#customer-grid-container::-webkit-scrollbar-thumb:hover {
    background: #059669;
}

/* Mobile slots scrollbar */
.mobile-slots-scroll {
    scrollbar-width: thin;
    scrollbar-color: #10b981 #f1f1f1;
}

.mobile-slots-scroll::-webkit-scrollbar {
    height: 6px;
}

.mobile-slots-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.mobile-slots-scroll::-webkit-scrollbar-thumb {
    background: #10b981;
    border-radius: 3px;
}

.mobile-slots-scroll::-webkit-scrollbar-thumb:hover {
    background: #059669;
}

/* Mobile slot animations */
.mobile-slot {
    -webkit-tap-highlight-color: transparent;
}

.mobile-slot:active {
    transform: scale(0.95);
}

/* Date navigation buttons */
.date-nav-btn .arrow-only {
    display: none;
}

.date-nav-btn .with-text {
    display: inline;
}

@media (max-width: 767px) {
    .date-nav-btn .arrow-only {
        display: inline;
    }
    
    .date-nav-btn .with-text {
        display: none;
    }
}