/**
 * TimelineView - Base CSS Styles
 * 
 * Uses CSS variables for theming. Override variables in your page-specific CSS
 * to customize colors and spacing.
 * 
 * Default CSS variable values:
 * --timeline-slot-height: 50px
 * --timeline-border-color: #dee2e6
 * --timeline-bg-color: #f8f9fa
 * --timeline-slot-bg: white
 * --timeline-unavailable-bg: #f5f5f5
 * --timeline-available-bg: #e3f2fd
 * --timeline-selected-certain-bg: #0d6efd
 * --timeline-selected-maybe-bg: #ffc107
 * --timeline-hover-bg: #e7f3ff
 */

/* Base timeline container structure */
[class*="-timeline-wrapper"] {
    width: 100%;
    background: var(--timeline-slot-bg, white);
    position: relative;
}

[class*="-timeline-hours"] {
    width: 100%;
    background: var(--timeline-slot-bg, white);
    position: relative;
}

[class*="-timeline-row-group"] {
    margin-bottom: 8px;
}

[class*="-timeline-row-group"]:last-child {
    margin-bottom: 0;
}

/* Hour labels row */
[class*="-timeline-hours-row"] {
    display: flex;
    width: 100%;
    margin-bottom: 0;
    border: 1px solid var(--timeline-border-color, #dee2e6);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: var(--timeline-bg-color, #f8f9fa);
}

[class*="-timeline-hour-label"] {
    flex: 2; /* Take space of 2 slots (1 hour = 2 slots of 30min each) */
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    padding: 4px 2px;
    border-right: 1px solid var(--timeline-border-color, #dee2e6);
    background: var(--timeline-bg-color, #f8f9fa);
}

[class*="-timeline-hour-label"]:last-child {
    border-right: none;
}

[class*="-timeline-hour-label"].hour-mark {
    font-weight: 600;
    color: #495057;
}

[class*="-timeline-hour-label"].half-hour-mark {
    font-weight: 400;
    color: #868e96;
    font-size: 0.7rem;
}

/* Slots container */
[class*="-timeline-slots"] {
    width: 100%;
    background: var(--timeline-slot-bg, white);
    position: relative;
}

[class*="-timeline-slots-row"] {
    display: flex;
    width: 100%;
    border: 1px solid var(--timeline-border-color, #dee2e6);
    border-top: none;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    user-select: none;
}

/* Individual slot */
[class*="-timeline-slot"] {
    flex: 1;
    height: var(--timeline-slot-height, 50px);
    border-right: 1px solid #e9ecef;
    cursor: pointer;
    position: relative;
    min-width: 20px;
    transition: all 0.15s ease-in-out;
}

[class*="-timeline-slot"]:last-child {
    border-right: none;
}

/* Available time slots (owner's available times) */
[class*="-timeline-slot"].available,
[class*="-timeline-slot"].owner-available-time {
    background-color: var(--timeline-available-bg, #e3f2fd);
    border-color: #90caf9;
}

/* Unavailable slots */
[class*="-timeline-slot"].unavailable {
    background-color: var(--timeline-unavailable-bg, #f5f5f5);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        #ccc 2px,
        #ccc 4px
    );
    cursor: not-allowed;
}

/* Hover state */
[class*="-timeline-slot"]:hover:not(.unavailable) {
    background: var(--timeline-hover-bg, #e7f3ff);
    border-color: #007bff;
    z-index: 2;
}

/* Selected states - Certain (Available) */
[class*="-timeline-slot"].selected,
[class*="-timeline-slot"].selected-certain {
    border-color: var(--timeline-selected-certain-bg, #0d6efd);
    position: relative;
    background-color: var(--timeline-selected-certain-bg, #0d6efd);
    color: white;
}

/* Selected states - Maybe */
[class*="-timeline-slot"].selected-maybe {
    border-color: var(--timeline-selected-maybe-bg, #ffc107);
    position: relative;
    background-color: var(--timeline-selected-maybe-bg, #ffc107);
    color: #000;
}

/* Selected on available time (owner's time) */
[class*="-timeline-slot"].available.selected,
[class*="-timeline-slot"].available.selected-certain,
[class*="-timeline-slot"].owner-available-time.selected,
[class*="-timeline-slot"].owner-available-time.selected-certain {
    background-color: var(--timeline-selected-certain-bg, #0d6efd) !important;
    border-color: #0a58ca !important;
    color: white;
}

[class*="-timeline-slot"].available.selected-maybe,
[class*="-timeline-slot"].owner-available-time.selected-maybe {
    background-color: var(--timeline-selected-maybe-bg, #ffc107) !important;
    border-color: #ffb300 !important;
    color: #000;
}

/* Partial slot indicators (for slots that are partially selected) */
[class*="-timeline-slot"].partial-start,
[class*="-timeline-slot"].partial-end {
    background-image: linear-gradient(to right, 
        transparent var(--gradient-start, 0%), 
        currentColor var(--gradient-start, 0%), 
        currentColor var(--gradient-end, 100%), 
        transparent var(--gradient-end, 100%)
    );
    background-blend-mode: normal;
}

/* Partial slots - Certain selection */
[class*="-timeline-slot"].partial-start.selected-certain:not(.available):not(.owner-available-time),
[class*="-timeline-slot"].partial-end.selected-certain:not(.available):not(.owner-available-time) {
    background-color: transparent;
    background-image: linear-gradient(to right, 
        transparent var(--gradient-start, 0%), 
        var(--timeline-selected-certain-bg, #0d6efd) var(--gradient-start, 0%), 
        var(--timeline-selected-certain-bg, #0d6efd) var(--gradient-end, 100%), 
        transparent var(--gradient-end, 100%)
    );
}

[class*="-timeline-slot"].partial-start.available.selected-certain,
[class*="-timeline-slot"].partial-end.available.selected-certain,
[class*="-timeline-slot"].partial-start.owner-available-time.selected-certain,
[class*="-timeline-slot"].partial-end.owner-available-time.selected-certain {
    background-color: transparent;
    background-image: linear-gradient(to right, 
        var(--timeline-available-bg, #e3f2fd) var(--gradient-start, 0%), 
        var(--timeline-selected-certain-bg, #0d6efd) var(--gradient-start, 0%), 
        var(--timeline-selected-certain-bg, #0d6efd) var(--gradient-end, 100%), 
        var(--timeline-available-bg, #e3f2fd) var(--gradient-end, 100%)
    );
}

/* Partial slots - Maybe selection */
[class*="-timeline-slot"].partial-start.selected-maybe:not(.available):not(.owner-available-time),
[class*="-timeline-slot"].partial-end.selected-maybe:not(.available):not(.owner-available-time) {
    background-color: transparent;
    background-image: linear-gradient(to right, 
        transparent var(--gradient-start, 0%), 
        var(--timeline-selected-maybe-bg, #ffc107) var(--gradient-start, 0%), 
        var(--timeline-selected-maybe-bg, #ffc107) var(--gradient-end, 100%), 
        transparent var(--gradient-end, 100%)
    );
}

[class*="-timeline-slot"].partial-start.available.selected-maybe,
[class*="-timeline-slot"].partial-end.available.selected-maybe,
[class*="-timeline-slot"].partial-start.owner-available-time.selected-maybe,
[class*="-timeline-slot"].partial-end.owner-available-time.selected-maybe {
    background-color: transparent;
    background-image: linear-gradient(to right, 
        var(--timeline-available-bg, #e3f2fd) var(--gradient-start, 0%), 
        var(--timeline-selected-maybe-bg, #ffc107) var(--gradient-start, 0%), 
        var(--timeline-selected-maybe-bg, #ffc107) var(--gradient-end, 100%), 
        var(--timeline-available-bg, #e3f2fd) var(--gradient-end, 100%)
    );
}

/* Hover effect on selected slots (to remove them) */
[class*="-timeline-slot"].selected:hover,
[class*="-timeline-slot"].selected-certain:hover,
[class*="-timeline-slot"].selected-maybe:hover {
    border-color: #dc3545 !important;
    cursor: pointer;
    opacity: 0.7;
}

[class*="-timeline-slot"].selected:hover::after,
[class*="-timeline-slot"].selected-certain:hover::after,
[class*="-timeline-slot"].selected-maybe:hover::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #dc3545;
    font-weight: bold;
    font-size: 16px;
    pointer-events: none;
    z-index: 5;
}

/* Selecting state during drag */
[class*="-timeline-slots-row"].selecting [class*="-timeline-slot"].selected {
    background: var(--timeline-selected-certain-bg, #0d6efd) !important;
    border: 2px solid #0a58ca !important;
    color: white;
    z-index: 10;
    position: relative;
}

[class*="-timeline-slots-row"].selecting [class*="-timeline-slot"]:hover:not(.unavailable) {
    background-color: #bbdefb;
}

/* Drag selection visual feedback */
[class*="-timeline-slot"].selecting-start,
[class*="-timeline-slot"].selecting-end,
[class*="-timeline-slot"].selecting-range {
    background-color: #bbdefb;
    border-color: #007bff;
}

/* In-range indicator */
[class*="-timeline-slot"].in-range {
    /* Additional styling can be added here */
}

/* Invalid duration indicator */
[class*="-timeline-slot"].invalid-duration {
    border: 3px solid #dc3545 !important;
}

/* Aggregated view styles (for response viewing) */
[class*="-timeline-slot"].has-responses {
    position: relative;
}

[class*="-timeline-slot"].has-responses::after {
    content: attr(data-score);
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.65rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.7);
    z-index: 3;
}

[class*="-timeline-slot"].optimal-time.best-time {
    border: 3px solid #155724;
}

[class*="-timeline-slot"].optimal-time.worst-time {
    border: 3px solid #721c24;
}

[class*="-timeline-slot"].best-time {
    background-color: #28a745 !important;
}

[class*="-timeline-slot"].worst-time {
    background-color: #dc3545 !important;
}

/* Readonly mode */
[class*="-timeline-slot"][readonly],
[class*="-timeline-wrapper"][readonly] [class*="-timeline-slot"] {
    cursor: default;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [class*="-timeline-slot"] {
        height: 40px;
        min-width: 15px;
    }
    
    [class*="-timeline-hour-label"] {
        font-size: 0.65rem;
        padding: 2px 1px;
    }
}