/* Staff Timeline Calendar Styles */

/* Ensure the timeline container has proper height */
#staffTimelineCalendar {
    min-height: 500px;
}

/* Fix for resource area being covered after date navigation or data update */
#staffTimelineCalendar .fc-datagrid {
    background: #fff;
}

/* Resource area styling */
.fc-datagrid-cell-frame {
    display: flex;
    align-items: center;
    background: #fff;
}

.fc-datagrid-cell-main {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Staff avatar circle */
.staff-avatar-circle {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* Resource header styling */
.fc .fc-datagrid-header .fc-datagrid-cell-frame {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* Timeline event styling */
.fc-timeline-event {
    border-radius: 4px !important;
    margin: 2px 0 !important;
}

.fc-timeline-event .fc-event-main {
    padding: 4px 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Status colors for timeline events */
.timeline-shift-status-1 { /* Pending */
    background-color: #ffc107 !important;
    border-color: #e0a800 !important;
}

.timeline-shift-status-2 { /* Booked */
    background-color: #0d6efd !important;
    border-color: #0b5ed7 !important;
}

.timeline-shift-status-3 { /* Approved */
    background-color: #198754 !important;
    border-color: #157347 !important;
}

.timeline-shift-status-4 { /* Rejected */
    background-color: #dc3545 !important;
    border-color: #bb2d3b !important;
}

.timeline-shift-status-5 { /* Cancelled */
    background-color: #6c757d !important;
    border-color: #5c636a !important;
}

.timeline-shift-status-6 { /* Invoiced */
    background-color: #20c997 !important;
    border-color: #1aa179 !important;
}

/* Virtual/Recurring shift styling */
.virtual-shift {
    opacity: 0.6 !important;
    border-style: dashed !important;
    cursor: not-allowed !important;
}

/* Resource row hover effect */
.fc-datagrid-body tr:hover .fc-datagrid-cell-frame {
    background-color: rgba(102, 126, 234, 0.05);
}

/* Unassigned row styling */
.fc-datagrid-cell[data-resource-id="unassigned"] .fc-datagrid-cell-main {
    color: #dc3545;
    font-style: italic;
}

/* Timeline slot styling */
.fc .fc-timeline-slot-lane {
    border-right: 1px solid #e9ecef;
}

.fc .fc-timeline-slot-frame {
    height: 100%;
}

/* Now indicator */
.fc .fc-timeline-now-indicator-line {
    border-color: #dc3545;
    border-width: 2px;
}

/* Selection highlight */
.fc .fc-highlight {
    background: rgba(102, 126, 234, 0.2) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fc-datagrid-cell-main {
        font-size: 12px;
    }
    
    .staff-avatar-circle {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 10px !important;
    }
}

/* Timeline view tabs */
.timeline-view-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.timeline-view-tabs .btn-group .btn {
    font-size: 0.875rem;
}

/* Quick date navigation */
.quick-date-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.quick-date-nav .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}