/* ============================================================================= */
/* TIME SLIDER - Temporal range slider for time-series data visualization */
/* ============================================================================= */
/* 
   Purpose: Interactive time slider component at bottom-center of map,
   allowing users to scrub through temporal data with visual highlights
   and playback controls.
*/

/* ========================================================================= */
/* TOGGLE BUTTON - Floating button to show/hide time slider */
/* ========================================================================= */

#tsToggleBtn {
    position: absolute;
    left: var(--space-3);
    top: calc(var(--space-3) * 4 + var(--space-2));
    z-index: 7;
    padding: var(--space-sm) var(--space-sm) 0 var(--space-sm);
}

/* ========================================================================= */
/* TIME SLIDER CONTAINER - Floating panel at bottom-center */
/* ========================================================================= */

.ts-container {
    width: 80%;
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    transform: translateX(-50%);
    z-index: 8;
    transition: bottom var(--transition-normal);
    margin: 0 var(--space-1);
}

/* Closed/hidden state */
.ts-container.closed {
    bottom: -20vh;
    pointer-events: none;
}

.ts-container.hidden {
    display: none;
}

/* ========================================================================= */
/* DISABLED OVERLAY - Shows when no data available */
/* ========================================================================= */

.ts-container .disabled-text {
    display: none;
}

.ts-container.disabled .disabled-text {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: min(50vw, 1200px);
    height: 100%;
    transform: translateX(-50%) translateY(-50%);
    background-color: rgba(12, 15, 20, 0.67);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2xl);
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    z-index: var(--z-disabled-overlay);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* ========================================================================= */
/* CARD - Main time slider card */
/* ========================================================================= */

.ts-card {
    /* min-width: min(50vw, 1200px); */
    background: var(--glass-background);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-primary);
    transition: filter var(--transition-normal);
}

.ts-container.disabled .ts-card {
    opacity: 1;
    filter: blur(6px);
    background-color: var(--color-input-bg);
    pointer-events: none;
}

/* ========================================================================= */
/* HEADER - Controls and time range display */
/* ========================================================================= */

.ts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

/* Control buttons (play, pause, speed) */
.ts-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Playback speed dropdown */
.ts-speed {
    width: 88px;
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-1);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.ts-speed:focus {
    outline: none;
    border-color: var(--color-accent-green-alpha-35);
}

#tsPlay .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    vertical-align: -2px;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

#tsPlay:hover .material-symbols-outlined {
    transform: scale(1.1);
}

/* Current timestamp display */
.ts-now {
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    color: var(--color-text-tertiary);
    padding-left: var(--space-1);
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
}

/* Time range labels (start - end) */
.ts-range {
    display: flex;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
}

/* Editable range label */
.ts-range-label-editable {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-sm);
}

.ts-range-label-editable:hover {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-accent-green-alpha-65);
}

/* Inline datetime-local input for range editing */
.ts-range-input {
    background: var(--color-input-bg);
    color: var(--color-text-primary);
    border: 1px solid var(--color-accent-green-alpha-35);
    border-radius: var(--radius-md);
    padding: 1px var(--space-sm);
    font-size: 0.82rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
    outline: none;
    transition: border-color var(--transition-fast);
    cursor: pointer;
    width: 165px;
}

.ts-range-input:focus {
    border-color: var(--color-accent-green-alpha-65);
}

/* Webkit datetime input icon color */
.ts-range-input::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

/* ========================================================================= */
/* TRACK - Timeline slider track */
/* ========================================================================= */

.ts-track-wrap {
    position: relative;
    margin-top: var(--space-2);
}

.ts-track {
    position: relative;
    height: 36px;
    border-radius: var(--radius-lg);
    /* background: linear-gradient(180deg,
                                rgba(255, 255, 255, 0.06),
                                rgba(255, 255, 255, 0.03)); */
    background: rgba(200, 200, 200, 0.3);
    border: 1px solid rgba(200, 200, 200, 0.5);
    overflow: hidden;
    cursor: pointer;
}

/* Track grid/ticks (hidden for now) */
.ts-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, 0.12) 0 1px,
            transparent 1px 60px
        );
    transform-origin: left center;
    display: none;
}

/* ========================================================================= */
/* HANDLE - Draggable playhead */
/* ========================================================================= */

.ts-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    transform: translateX(-50%);
    cursor: grab;
    z-index: 9;
    user-select: none;
}

.ts-handle:active {
    cursor: grabbing;
}

/* Dot indicator */
.ts-handle-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent-green);
    box-shadow: 0 0 0 4px var(--color-accent-green-alpha-18);
    border: 1px solid var(--color-accent-green-alpha-65);
    transition: box-shadow var(--transition-fast);
}

.ts-handle:hover .ts-handle-dot {
    box-shadow: 0 0 0 6px var(--color-accent-green-alpha-18);
}

/* ========================================================================= */
/* HIGHLIGHTS - Time interval visualization */
/* ========================================================================= */

.ts-highlights {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Individual interval highlight */
.ts-highlight {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg,
                                var(--color-accent-green-alpha-2),
                                var(--color-accent-green-alpha-8));
    border-left: 1px solid var(--color-accent-green-alpha-35);
    border-right: 1px solid var(--color-accent-green-alpha-35);
    pointer-events: auto;
    z-index: 1;
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}

.ts-highlight:hover {
    background: linear-gradient(180deg,
                                var(--color-accent-green-alpha-12),
                                var(--color-accent-green-alpha-2));
}

/* ========================================================================= */
/* TOOLTIP - Time value on hover/drag */
/* ========================================================================= */

.ts-tooltip {
    position: absolute;
    left: 0;
    top: -34px;
    transform: translateX(-50%);
    background: var(--glass-background);
    padding: var(--space-sm) var(--space-1);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    color: var(--color-text-primary);
    font-size: 0.85rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    z-index: 10;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
}

/* Tooltip arrow */
.ts-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--glass-border);
}

/* ========================================================================= */
/* RESPONSIVE ADJUSTMENTS */
/* ========================================================================= */

@media (max-width: 1024px) {
    .ts-card {
        min-width: min(60vw, 900px);
    }
}

@media (max-width: 768px) {
    .ts-card {
        min-width: min(70vw, 700px);
    }
    
    .ts-header {
        flex-wrap: wrap;
        gap: var(--space-1);
    }
}

@media (max-width: 640px) {
    .ts-card {
        min-width: min(96vw, 560px);
        padding: var(--space-1) var(--space-2);
    }
    
    .ts-now {
        display: none;
    }
    
    .ts-speed {
        width: 72px;
        font-size: 0.8rem;
    }
    
    .ts-range {
        font-size: 0.75rem;
        gap: var(--space-1);
    }
}

@media (max-width: 480px) {
    .ts-card {
        min-width: calc(100vw - var(--space-2) * 2);
        padding: var(--space-sm) var(--space-2);
    }
    
    .ts-header {
        gap: var(--space-sm);
        margin-bottom: var(--space-1);
    }
    
    .ts-controls {
        gap: var(--space-sm);
    }
    
    .ts-speed {
        width: 64px;
        font-size: 0.75rem;
    }
    
    .ts-range {
        font-size: 0.7rem;
    }
    
    .ts-track {
        height: 28px;
    }
    
    .ts-handle-dot {
        width: 12px;
        height: 12px;
    }
}