/**
 * Calendar CSS
 * Contains styles for FullCalendar and calendar-related components
 */

/* Calendar container sizing */
.fc {
    height: 100% !important;
    width: 100% !important;
    transition: width 0.3s ease, all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Calendar elements transitions for sidebar toggle */
.fc-view-harness {
    transition: width 0.3s ease, height 0.3s ease, all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    width: 100% !important;
}

.fc .fc-col-header-cell,
.fc-scrollgrid-sync-table,
.fc-daygrid-body,
.fc .fc-daygrid-day {
    transition: width 0.3s ease, all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
    transition: margin 0.3s ease;
}

/* Sidebar toggle state adjustments */
html[data-toggled="open"] .main-content .fc .fc-scrollgrid-section-header,
html[data-toggled="open"] .main-content .fc .fc-scrollgrid-section-body {
    transition: width 0.3s ease;
}

html[data-toggled="close"] .main-content .fc .fc-scrollgrid-section-header,
html[data-toggled="close"] .main-content .fc .fc-scrollgrid-section-body {
    transition: width 0.3s ease;
}

/* Fix for full width calendar */
.fc-view {
    width: 100% !important;
    overflow-x: auto !important; /* Add horizontal scrolling if needed */
}

.fc-view-container {
    width: 100% !important;
}

.fc-scroller {
    width: 100% !important;
}

/* Fix for responsive calendar to show all days */
.fc-media-screen {
    min-width: 100% !important;
    overflow-x: visible !important;
}

/* Ensure table and rows take full width */
.fc-scrollgrid {
    width: 100% !important;
    table-layout: fixed !important;
}

.fc .fc-scrollgrid-section table {
    width: 100% !important;
}

/* Make calendar more responsive when sidebar is open */
html[data-toggled="open"] .fc .fc-col-header-cell,
html[data-toggled="open"] .fc .fc-daygrid-day {
    min-width: auto !important;
}

/* Set minimum sizes for day cells */
.fc .fc-daygrid-day-frame {
    min-height: 40px;
}

/* Make sure day cells shrink when needed */
.fc-dayGridMonth-view .fc-daygrid-day {
    overflow: hidden;
}

/* If days get too small, ensure at least they have proper padding */
.fc .fc-daygrid-day-top {
    padding: 2px;
}

/* Calendar events */
.fc-event {
    border-radius: 3px;
    border: none;
    padding: 2px 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

.fc-event:hover {
    filter: brightness(0.9);
}

.fc-event-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-event-time {
    opacity: 0.8;
    font-size: 0.75em;
}

/* Today highlight */
.fc-day-today {
    background-color: var(--fc-today-bg-color) !important;
}

/* Calendar toolbar */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1rem;
}

.fc .fc-button-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.fc .fc-button-primary:hover {
    background-color: rgba(var(--primary-rgb), 0.9);
    border-color: rgba(var(--primary-rgb), 0.9);
}

.fc .fc-button-primary:disabled {
    background-color: rgba(var(--primary-rgb), 0.7);
    border-color: rgba(var(--primary-rgb), 0.7);
}

.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active {
    background-color: rgba(var(--primary-rgb), 0.8);
    border-color: rgba(var(--primary-rgb), 0.8);
}

/* Mobile responsiveness for calendar */
@media (max-width: 767.98px) {
    .fc-header-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .fc-toolbar-title {
        font-size: 1.25rem !important;
    }
    
    .fc-daygrid-day-number,
    .fc-col-header-cell-cushion {
        font-size: 0.875rem;
    }
    
    .fc-event {
        font-size: 0.75rem;
    }
    
    .fc-daygrid-dot-event .fc-event-time, 
    .fc-daygrid-dot-event .fc-event-title {
        font-size: 0.75rem;
    }
}

.fc-toolbar-title {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem;
}

.fc-header-toolbar {
    margin-bottom: 1.5rem !important;
    padding: 0.5rem 0 !important;
}

/* Improved calendar day styling */
.fc-daygrid-day {
    min-height: 5rem;
}

/* More visible today highlight */
.fc-daygrid-day.fc-day-today {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
}

/* Better spacing for the filter dropdown */
#workerFilter {
    min-width: 220px;
}

/* Improve card padding consistency */
.dashboard-content .card.custom-card {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Better event styling */
.fc-event {
    border-radius: 4px !important;
    border-left: 3px solid var(--primary-color) !important;
}

/* Calendar header theme matching */
.fc-theme-standard .fc-toolbar {
    padding: 1rem;
    border-radius: 0.25rem 0.25rem 0 0;
}

/* Fix for calendar width */
#calendar {
    width: 100% !important;
    height: auto !important;
}

/* SVG path fix for console errors */
svg:not(:root) {
    overflow: hidden;
}

/* Fix Bootstrap dropdowns in calendar context */
.card-body .dropdown-menu.show {
    z-index: 1055 !important;
    position: absolute !important;
}

/* Event styling */
.fc-event {
    border-radius: 4px !important;
    border-left: 3px solid var(--primary-color) !important;
} 


/* Event hover effects */
.fc .fc-event:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    transition: all 0.2s ease;
} 

/* Resource view styles */
.fc .fc-resource-area .fc-datagrid-cell-main {
    display: flex;
    align-items: center;
    padding: 8px 4px;
    font-weight: 500;
}

.fc .fc-resource-area .fc-datagrid-cell-main img {
    margin-right: 8px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    object-fit: cover;
}

/* Employee calendar */
.fc-resource-timeline-divider,
.fc-resource-timeline-divider + .fc-scroller-liquid-absolute {
    border-left: 1px solid #ddd !important;
}

.fc-resourceTimeGridDay-view .fc-col-header-cell {
    background-color: #f8f9fa;
    padding: 10px 0;
}

.fc .fc-resource-timeline-divider {
    width: 1px !important;
    background-color: #ddd;
}

/* Highlight resource area */
.fc-resource-area.fc-datagrid-body {
    background-color: #f8f9fa;
}

/* Scrollable resource area */
.fc-scroller-liquid-absolute {
    overflow-x: auto !important;
}

/* Calendar events in resource view */
.fc-resourceTimeGridDay-view .fc-event {
    margin: 1px 4px;
    border-radius: 4px;
    padding: 4px 6px;
}

.fc-resourceTimeGridDay-view .fc-event-title {
    font-size: 0.85rem;
    font-weight: 500;
}

.fc-resourceTimeGridDay-view .fc-event-time {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-bottom: 2px;
}

/* Responsive styles for resource view */
@media (max-width: 991.98px) {
    .fc-resourceTimeGridDay-view .fc-resource-area {
        width: 120px !important;
    }
}

@media (max-width: 767.98px) {
    .fc-resourceTimeGridDay-view .fc-resource-area {
        width: 100px !important;
    }
    
    .fc-resourceTimeGridDay-view .fc-datagrid-cell-main {
        font-size: 0.8rem;
    }
}

/* Event service type colors */
.fc-event.service-hair-coloring {
    background-color: #ff9999 !important; /* Pink */
    color: #333;
}

.fc-event.service-blow-dry {
    background-color: #99ccff !important; /* Light blue */
    color: #333;
}

.fc-event.service-beard-grooming {
    background-color: #ffcc99 !important; /* Orange */
    color: #333;
}

.fc-event.service-massage {
    background-color: #99ffcc !important; /* Light green */
    color: #333;
}

.fc-event.service-hair-beard-cut {
    background-color: #cc99ff !important; /* Purple */
    color: #333;
}

/* Mobile responsiveness for calendar */
@media (max-width: 991.98px) {
    .fc-header-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .fc-toolbar-title {
        font-size: 1.25rem !important;
    }
    
    .fc-daygrid-day-number,
    .fc-col-header-cell-cushion {
        font-size: 0.875rem;
    }
    
    .fc-event {
        font-size: 0.75rem;
    }
    
    .fc-daygrid-dot-event .fc-event-time, 
    .fc-daygrid-dot-event .fc-event-title {
        font-size: 0.75rem;
    }
}