/* ==========================================================================
   Frise chronologique des périodes dans les listes Select2
   (assets/js/period-timeline.js)
   ========================================================================== */

/* Liste plus large que le champ, sans dépasser l'écran */
.select2-dropdown--timeline {
    min-width: min(500px, calc(100vw - 16px));
    border-top: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
}

/* Une ligne : nom | frise | années | pastille du compteur */
.filter-option--timeline {
    display: grid;
    /* largeurs fixes (hors nom) pour que les frises s'alignent d'une ligne à l'autre */
    grid-template-columns: minmax(8.5em, 1fr) 150px 6.2em 2.4em;
    align-items: center;
    column-gap: 0.7rem;
    width: 100%;
}

.filter-option--timeline .period-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.period-timeline {
    position: relative;
    display: block;
    height: 8px;
    border-radius: 4px;
    background: #e4e9ee;
}

/* Repères 1925, 1950, 1975, 2000... */
.period-timeline__tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.95);
}

.period-timeline__segment {
    position: absolute;
    top: -1px;
    bottom: -1px;
    border-radius: 5px;
    background: #4a6f8f;
}

/* Bornes ouvertes : pointe de flèche « avant ... » / « depuis ... » */
.period-timeline__segment--open-start,
.period-timeline__segment--open-end {
    border-radius: 0;
}
.period-timeline__segment--open-start { border-radius: 0 5px 5px 0; }
.period-timeline__segment--open-end { border-radius: 5px 0 0 5px; }

.period-timeline__segment--open-start::before,
.period-timeline__segment--open-end::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
}
.period-timeline__segment--open-start::before {
    right: 100%;
    border-left-width: 0;
    border-right-color: #4a6f8f;
}
.period-timeline__segment--open-end::after {
    left: 100%;
    border-right-width: 0;
    border-left-color: #4a6f8f;
}

/* Hors chronologie (Futur / SF) : frise en pointillés, sans segment */
.period-timeline--off {
    background: repeating-linear-gradient(90deg, #d5dce3 0 4px, transparent 4px 8px);
}
.period-timeline--off .period-timeline__tick { display: none; }

.period-years {
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #6c757d;
}

.filter-option--timeline .facet-badge {
    justify-self: end;
}

/* Ligne survolée : fond gris clair du thème, la frise fonce légèrement et
   le segment passe en vert olive (bien visible sur le gris).
   Attention : Select2 4.1 marque aussi la ligne survolée aria-selected="true" */
.select2-results__option--highlighted .period-timeline { background: #d3dae1; }

/* Période actuellement sélectionnée : fond coloré du thème, frise en blanc */
.select2-results__option--selected .period-timeline,
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .period-timeline { background: rgba(255, 255, 255, 0.3); }
.select2-results__option--selected .period-timeline__tick,
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .period-timeline__tick { background: rgba(255, 255, 255, 0.35); }
.select2-results__option--selected .period-timeline__segment,
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .period-timeline__segment { background: #fff; }
.select2-results__option--selected .period-timeline__segment--open-start::before,
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .period-timeline__segment--open-start::before { border-right-color: #fff; }
.select2-results__option--selected .period-timeline__segment--open-end::after,
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .period-timeline__segment--open-end::after { border-left-color: #fff; }
.select2-results__option--selected .period-years,
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .period-years { color: inherit; }
.select2-results__option--selected .period-timeline--off,
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .period-timeline--off {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 4px, transparent 4px 8px);
}

/* Survol, y compris de la période déjà choisie (fond gris du thème) */
.select2-results__option.select2-results__option--highlighted .period-timeline { background: #d3dae1; }
.select2-results__option.select2-results__option--highlighted .period-timeline__tick { background: rgba(255, 255, 255, 0.95); }
.select2-results__option.select2-results__option--highlighted .period-timeline__segment { background: #506443; }
.select2-results__option.select2-results__option--highlighted .period-timeline__segment--open-start::before { border-right-color: #506443; }
.select2-results__option.select2-results__option--highlighted .period-timeline__segment--open-end::after { border-left-color: #506443; }
.select2-results__option.select2-results__option--highlighted .period-years { color: #6c757d; }
.select2-results__option.select2-results__option--highlighted .period-timeline--off {
    background: repeating-linear-gradient(90deg, #b9c2cb 0 4px, transparent 4px 8px);
}

/* Petits écrans : on garde la frise, on masque les années */
@media (max-width: 575.98px) {
    .filter-option--timeline {
        grid-template-columns: minmax(7em, 1fr) 96px 2.4em;
        column-gap: 0.5rem;
    }
    .period-years { display: none; }
}