/* aeo-audit: aeo-filter-bar — shared filter-chip vocabulary.
 *
 * Used by:
 *   - history.php (scan-type chips, status chips)
 *   - compare.php (severity-filter chips on finding delta)
 *
 * The class .aeo-filter-chip was previously a JS-binding marker only
 * (declared in score-strip.php, picked up by page-detail.js at line 20).
 * Round 32 promotes it to a real shared component so chips look the
 * same across the app instead of each page rolling its own Tailwind
 * utility soup.
 *
 * The inline pill markup is:
 *   <a   class="aeo-filter-chip [aeo-filter-chip--<sev|state>] [is-active]" ...>
 *   <button class="aeo-filter-chip ..." data-filter="critical">…</button>
 *
 * Severity / state variants give the chip its accent color when inactive;
 * .is-active flips to a stronger filled treatment so the user always knows
 * which filter is on. Dark-mode-aware.
 */

/* ----- Bar layout ------------------------------------------------------- */
.aeo-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.aeo-filter-bar__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(156 163 175);
    font-weight: 600;
    margin-right: 0.25rem;
}

/* ----- Chip primitive --------------------------------------------------- */
.aeo-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    border: 1px solid transparent;
    cursor: pointer;

    /* Default (neutral) palette */
    background-color: rgb(243 244 246);
    color: rgb(75 85 99);
}
.aeo-filter-chip:hover {
    background-color: rgb(229 231 235);
    color: rgb(31 41 55);
}
.dark .aeo-filter-chip {
    background-color: rgb(55 65 81);
    color: rgb(209 213 219);
}
.dark .aeo-filter-chip:hover {
    background-color: rgb(75 85 99);
    color: rgb(243 244 246);
}

/* Iconify icons inside chips align nicely */
.aeo-filter-chip iconify-icon {
    font-size: 0.875rem;
    line-height: 1;
}

/* Count badge inside a chip (e.g. "Critical (3)") */
.aeo-filter-chip__count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    opacity: 0.8;
}

/* ----- Active state (the chip whose filter is currently on) ------------- */
.aeo-filter-chip.is-active {
    background-color: var(--bg-primary);
    color: var(--txt-white);
}
.aeo-filter-chip.is-active:hover {
    background-color: var(--bg-primary-dark);
    color: var(--txt-white);
}
.dark .aeo-filter-chip.is-active {
    background-color: var(--bg-primary-light);
}

/* ----- Severity variants (compare.php finding-delta filter bar) --------- */
/* Inactive chips carry a subtle accent that hints at the severity color
 * vocabulary (matches aeo-finding palette). Active flips to filled treatment. */
.aeo-filter-chip--critical {
    background-color: #fef2f2;
    color: #b91c1c;
}
.aeo-filter-chip--critical:hover {
    background-color: #fee2e2;
    color: #991b1b;
}
.dark .aeo-filter-chip--critical {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fecaca;
}
.aeo-filter-chip--critical.is-active {
    background-color: #ef4444;
    color: #ffffff;
}
.aeo-filter-chip--critical.is-active:hover {
    background-color: #dc2626;
}

.aeo-filter-chip--warning {
    background-color: #fffbeb;
    color: #b45309;
}
.aeo-filter-chip--warning:hover {
    background-color: #fef3c7;
    color: #92400e;
}
.dark .aeo-filter-chip--warning {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fde68a;
}
.aeo-filter-chip--warning.is-active {
    background-color: #f59e0b;
    color: #ffffff;
}
.aeo-filter-chip--warning.is-active:hover {
    background-color: #d97706;
}

.aeo-filter-chip--info {
    background-color: #eff6ff;
    color: #1d4ed8;
}
.aeo-filter-chip--info:hover {
    background-color: #dbeafe;
    color: #1e40af;
}
.dark .aeo-filter-chip--info {
    background-color: rgba(59, 130, 246, 0.15);
    color: #bfdbfe;
}
.aeo-filter-chip--info.is-active {
    background-color: #3b82f6;
    color: #ffffff;
}
.aeo-filter-chip--info.is-active:hover {
    background-color: #2563eb;
}

.aeo-filter-chip--pass {
    background-color: #f0fdf4;
    color: #166534;
}
.aeo-filter-chip--pass:hover {
    background-color: #dcfce7;
    color: #14532d;
}
.dark .aeo-filter-chip--pass {
    background-color: rgba(34, 197, 94, 0.15);
    color: #bbf7d0;
}
.aeo-filter-chip--pass.is-active {
    background-color: #22c55e;
    color: #ffffff;
}
.aeo-filter-chip--pass.is-active:hover {
    background-color: #16a34a;
}

/* ----- State variants (history.php status-filter chips) ----------------- */
/* Same shape as severity variants but mapped to scan_type / status palette. */
.aeo-filter-chip--success {
    background-color: #f0fdf4;
    color: #166534;
}
.aeo-filter-chip--success:hover { background-color: #dcfce7; color: #14532d; }
.dark .aeo-filter-chip--success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #bbf7d0;
}

.aeo-filter-chip--neutral {
    /* Identical to the unmodified base; provided as an explicit name for
     * "no semantic" chips like 'All'. */
    background-color: rgb(243 244 246);
    color: rgb(75 85 99);
}

@media (prefers-reduced-motion: reduce) {
    .aeo-filter-chip { transition: none; }
}