/* ==========================================================================
   Timeline Era Filter (Admin)
   Horizontal chip row for filtering timeline events by era.
   Matches the frontend filter look using admin tokens.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Filter row
   ------------------------------------------------------------------------- */

.admin-timeline-era-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-border);
}

/* -------------------------------------------------------------------------
   Filter chips
   ------------------------------------------------------------------------- */

.admin-timeline-era-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-family: var(--admin-font-sans);
    color: var(--admin-text-secondary);
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-left: 3px solid var(--admin-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition:
        background var(--admin-transition),
        border-color var(--admin-transition),
        color var(--admin-transition);
    white-space: nowrap;
    min-height: 32px;
}

.admin-timeline-era-filter__chip:hover {
    background: var(--admin-surface-hover);
    color: var(--admin-text-primary);
}

.admin-timeline-era-filter__chip:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

/* Active chip */
.admin-timeline-era-filter__chip--active {
    background: var(--admin-surface-hover);
    border-color: var(--admin-accent);
    color: var(--admin-text-primary);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Era colour hooks — left border tint
   ------------------------------------------------------------------------- */

.admin-timeline-era-filter__chip.era--pre-incarnation  { border-left-color: var(--era-pre-incarnation); }
.admin-timeline-era-filter__chip.era--old-testament    { border-left-color: var(--era-old-testament); }
.admin-timeline-era-filter__chip.era--early-life       { border-left-color: var(--era-early-life); }
.admin-timeline-era-filter__chip.era--life             { border-left-color: var(--era-life); }
.admin-timeline-era-filter__chip.era--galilee-ministry { border-left-color: var(--era-galilee-ministry); }
.admin-timeline-era-filter__chip.era--judean-ministry  { border-left-color: var(--era-judean-ministry); }
.admin-timeline-era-filter__chip.era--passion-week     { border-left-color: var(--era-passion-week); }
.admin-timeline-era-filter__chip.era--post-passion     { border-left-color: var(--era-post-passion); }

/* Active chip gets a prominent era-tinted background */
.admin-timeline-era-filter__chip--active.era--pre-incarnation  { background: var(--era-pre-incarnation); border-color: var(--era-pre-incarnation); }
.admin-timeline-era-filter__chip--active.era--old-testament    { background: var(--era-old-testament); border-color: var(--era-old-testament); }
.admin-timeline-era-filter__chip--active.era--early-life       { background: var(--era-early-life); border-color: var(--era-early-life); }
.admin-timeline-era-filter__chip--active.era--life             { background: var(--era-life); border-color: var(--era-life); }
.admin-timeline-era-filter__chip--active.era--galilee-ministry { background: var(--era-galilee-ministry); border-color: var(--era-galilee-ministry); }
.admin-timeline-era-filter__chip--active.era--judean-ministry  { background: var(--era-judean-ministry); border-color: var(--era-judean-ministry); }
.admin-timeline-era-filter__chip--active.era--passion-week     { background: var(--era-passion-week); border-color: var(--era-passion-week); }
.admin-timeline-era-filter__chip--active.era--post-passion     { background: var(--era-post-passion); border-color: var(--era-post-passion); }