/* ==========================================================================
   Timeline Controls — travel/static/travel/css/timeline.css
   Styles for the Travel Timeline feature: control panel, slider, date labels,
   connecting lines, entrance animation dots, and dark mode overrides.
   ========================================================================== */

/* ---------- CSS Custom Properties (Light Mode defaults) ---------- */
:root {
    --timeline-line-color: rgba(0, 0, 0, 0.25);
    --timeline-date-bg: #e9ecef;
    --timeline-date-fg: #212529;
    --timeline-slider-track: #dee2e6;
    --timeline-slider-fill: #0d6efd;
    --timeline-panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ---------- Dark Mode Custom Properties ---------- */
[data-bs-theme="dark"] {
    --timeline-line-color: rgba(255, 255, 255, 0.35);
    --timeline-date-bg: #374151;
    --timeline-date-fg: #e5e7eb;
    --timeline-slider-track: #4b5563;
    --timeline-slider-fill: #6ea8fe;
    --timeline-panel-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   1. Timeline Control Panel Layout
   ========================================================================== */

#timeline-controls-row {
    position: relative;
    z-index: 10;
}

#timeline-panel {
    box-shadow: var(--timeline-panel-shadow);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#timeline-panel.d-none {
    opacity: 0;
    transform: translateY(-4px);
}

#timeline-panel .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ==========================================================================
   2. Custom Slider (Range Input) Styling
   ========================================================================== */

#timeline-slider {
    cursor: pointer;
    height: 1.25rem;
}

/* Globe progress slider (read-only, shows globe animation progress) */
#globe-progress-slider {
    height: 1.25rem;
    opacity: 0.8;
    pointer-events: none;
}

/* Webkit (Chrome, Safari, Edge) track */
#timeline-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--timeline-slider-track);
    transition: background 0.2s ease;
}

/* Webkit thumb */
#timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--timeline-slider-fill);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-top: -5px;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#timeline-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

#timeline-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

/* Firefox track */
#timeline-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--timeline-slider-track);
    border: none;
    transition: background 0.2s ease;
}

/* Firefox thumb */
#timeline-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--timeline-slider-fill);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#timeline-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
}

#timeline-slider::-moz-range-thumb:active {
    cursor: grabbing;
}

/* ==========================================================================
   3. Date Label Styling
   ========================================================================== */

#timeline-date-min,
#timeline-date-max {
    font-size: 0.75rem;
    min-width: 5.5em;
    text-align: center;
}

#timeline-current-date {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0.3em 0.75em;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    min-width: 8.5em;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* SVG date annotation (positioned on the map) */
.timeline-date-annotation {
    font-size: 11px;
    font-weight: 600;
    fill: var(--timeline-date-fg);
    pointer-events: none;
}

.timeline-date-annotation-bg {
    fill: var(--timeline-date-bg);
    rx: 3;
    ry: 3;
    opacity: 0.9;
}

/* ==========================================================================
   4. Connecting Lines (SVG)
   ========================================================================== */

.timeline-line {
    stroke: var(--timeline-line-color);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    pointer-events: none;
}

/* Stroke-dasharray draw animation */
.timeline-line-animated {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: timeline-draw-line 0.6s ease-out forwards;
}

@keyframes timeline-draw-line {
    to {
        stroke-dashoffset: 0;
    }
}

/* Great-circle arcs on the globe */
.timeline-arc {
    stroke: var(--timeline-line-color);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    pointer-events: none;
}

/* ==========================================================================
   5. Play/Pause and Speed Button States
   ========================================================================== */

#timeline-play-pause {
    min-width: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#timeline-play-pause:focus-visible {
    outline: 2px solid var(--timeline-slider-fill);
    outline-offset: 2px;
}

/* Speed button group — active state highlight */
#timeline-panel .btn-group .btn.active {
    font-weight: 600;
}

/* ==========================================================================
   6. Filter Dropdown Styling
   ========================================================================== */

#timeline-year-filter,
#timeline-month-filter {
    max-width: 8rem;
    transition: opacity 0.2s ease;
}

#timeline-month-filter:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   7. Dark Mode Overrides
   ========================================================================== */

[data-bs-theme="dark"] #timeline-slider::-webkit-slider-thumb {
    border-color: #1f2937;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] #timeline-slider::-moz-range-thumb {
    border-color: #1f2937;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] #timeline-panel {
    border-color: #374151;
}

/* SVG text dark mode (legend labels, annotations) */
[data-bs-theme="dark"] .legendOrdinal text {
    fill: #e5e7eb;
}

[data-bs-theme="dark"] .timeline-date-annotation {
    fill: #e5e7eb;
}

[data-bs-theme="dark"] .timeline-date-annotation-bg {
    fill: #1f2937;
}

/* Timeline info card (city label overlay) in dark mode */
[data-bs-theme="dark"] .timeline-info-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Legend items — ensure circle labels in SVG legend use proper D3 default
   (the .legendOrdinal text rule above handles this) */
[data-bs-theme="dark"] .legend-item text {
    fill: #e5e7eb;
}

/* ==========================================================================
   7b. Dark Mode — Map Backgrounds & Entrance Dots
   Ensures city dots remain visually distinct against both the light-gray
   (light mode) and dark (dark mode) map fill backgrounds.
   ========================================================================== */

[data-bs-theme="dark"] #us_map svg path {
    /* US state paths use inline style='fill:lightgray' which has higher specificity,
       so we use !important here to override the inline style in dark mode.
       This targets only the state/boundary paths, not timeline elements. */
    fill: #374151 !important;
    stroke: #4b5563 !important;
}

/* Prevent the US map dark override from affecting timeline lines */
[data-bs-theme="dark"] #us_map .timeline-line {
    fill: none !important;
    stroke: var(--timeline-line-color) !important;
}

[data-bs-theme="dark"] .land {
    fill: #374151;
}

[data-bs-theme="dark"] .fill_water {
    fill: #1e293b;
}

[data-bs-theme="dark"] .globe_stroke {
    stroke: #6b7280;
}

[data-bs-theme="dark"] .graticule {
    stroke: #4b5563;
    stroke-opacity: 0.3;
}

[data-bs-theme="dark"] .countries path {
    stroke: #4b5563;
}

/* Ensure entrance animation dots have enough contrast in dark mode.
   D3 schemeCategory10 colors are vibrant enough against dark backgrounds,
   but we increase opacity slightly for better visibility.
   Exclude timeline dots (.timeline-dot, .globe-timeline-dot) so fadeOutStatic can hide them. */
[data-bs-theme="dark"] #us_map circle:not(.timeline-dot),
[data-bs-theme="dark"] #globe_map .point:not(.globe-timeline-dot) {
    opacity: 0.85;
}

/* ==========================================================================
   8. Entrance Animation Dot Styles
   ========================================================================== */

.city-dot {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.city-dot-visible {
    opacity: 0.75;
}

/* Timeline dot appear animation */
.timeline-dot-enter {
    animation: timeline-dot-appear 0.4s ease-out forwards;
}

@keyframes timeline-dot-appear {
    0% {
        r: 0;
        opacity: 0;
    }
    70% {
        r: 5;
        opacity: 0.85;
    }
    100% {
        r: 4;
        opacity: 0.75;
    }
}

/* ==========================================================================
   9. Pulse Animation for Revisits
   ========================================================================== */

.timeline-dot-pulse {
    animation: timeline-pulse 0.5s ease-in-out;
}

@keyframes timeline-pulse {
    0% {
        r: 4;
        opacity: 0.75;
    }
    50% {
        r: 7;
        opacity: 1;
    }
    100% {
        r: 4;
        opacity: 0.75;
    }
}

/* ==========================================================================
   10. Timeline Info Card (City label overlay on maps)
   ========================================================================== */

.timeline-info-card {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: var(--timeline-date-bg);
    color: var(--timeline-date-fg);
    padding: 0.35em 0.85em;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.timeline-info-card.show {
    opacity: 1;
}

#globe_map {
    position: relative;
}

/* ==========================================================================
   11. Responsive / Mobile-Friendly Adjustments
   ========================================================================== */

/* Ensure slider thumb is large enough for touch targets (≥44px tap area) */
[id$="-tl-slider"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--timeline-slider-fill);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-top: -7px;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[id$="-tl-slider"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--timeline-slider-fill);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[id$="-tl-slider"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--timeline-slider-track);
}

[id$="-tl-slider"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--timeline-slider-track);
    border: none;
}

/* Tablet: moderate adjustments */
@media (max-width: 768px) {
    [id$="-timeline-panel"] .card-body {
        padding: 0.5rem 0.75rem !important;
    }

    /* Increase slider thumb size for easier touch targeting */
    [id$="-tl-slider"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
        margin-top: -9px;
    }

    [id$="-tl-slider"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    [id$="-tl-slider"]::-webkit-slider-runnable-track {
        height: 8px;
    }

    [id$="-tl-slider"]::-moz-range-track {
        height: 8px;
    }

    /* Give slider more vertical breathing room for fat-finger tapping */
    [id$="-tl-slider"] {
        height: 2rem;
        padding: 0.5rem 0;
    }
}

/* Small phone: compact layout */
@media (max-width: 576px) {
    [id$="-timeline-panel"] .card-body {
        padding: 0.5rem !important;
    }

    [id$="-timeline-panel"] .d-flex.flex-wrap {
        gap: 0.35rem;
    }

    [id$="-tl-year-filter"],
    [id$="-tl-month-filter"] {
        max-width: 6rem;
        font-size: 0.75rem;
    }

    [id$="-tl-date-min"],
    [id$="-tl-date-max"] {
        font-size: 0.65rem;
        min-width: 4.5em;
    }

    [id$="-tl-current-date"] {
        font-size: 0.7rem;
        min-width: 7.5em;
    }

    [id$="-timeline-panel"] .btn-group .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }

    /* Play/pause button — 44px minimum touch target */
    [id$="-tl-play-pause"] {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Exit button takes full width on small screens */
    [id$="-tl-exit"] {
        margin-left: 0 !important;
        margin-top: 0.25rem;
        width: 100%;
    }

    /* Slider thumb even larger on mobile for reliable touch */
    [id$="-tl-slider"]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -11px;
    }

    [id$="-tl-slider"]::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    [id$="-tl-slider"] {
        height: 2.5rem;
        padding: 0.75rem 0;
    }

    /* Form switches need larger tap targets */
    [id$="-timeline-panel"] .form-check.form-switch {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    [id$="-timeline-panel"] .form-check-input {
        width: 2.5em;
        height: 1.25em;
    }
}

/* ==========================================================================
   12. Edge Case: No Data / Empty State Message
   ========================================================================== */

.timeline-empty-state {
    text-align: center;
    padding: 1rem 1.5rem;
    color: var(--timeline-date-fg);
    background: var(--timeline-date-bg);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.timeline-empty-state i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

/* ==========================================================================
   13. Reduced Motion Preference — disable/simplify all animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Timeline line draw animation */
    .timeline-line-animated {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    /* Timeline dot entrance */
    .timeline-dot-enter {
        animation: none;
        opacity: 0.75;
        r: 4;
    }

    /* Revisit pulse */
    .timeline-dot-pulse {
        animation: none;
    }

    /* Slider thumb transitions */
    [id$="-tl-slider"]::-webkit-slider-thumb,
    #timeline-slider::-webkit-slider-thumb {
        transition: none;
    }

    [id$="-tl-slider"]::-moz-range-thumb,
    #timeline-slider::-moz-range-thumb {
        transition: none;
    }

    /* Panel transitions */
    [id$="-timeline-panel"] {
        transition: none;
    }

    /* City dot CSS transition */
    .city-dot {
        transition: none;
    }

    /* Info card transition */
    .timeline-info-card {
        transition: none;
    }
}