/* aeo-audit: aeo-page-type-performance — per-type horizontal-bar rows.
 * Each row: icon + label + (count) + score number + bar + view link.
 * Sorted worst-first by parent. Owns its own gap declarations.
 */

.aeo-page-type-perf__rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aeo-page-type-perf__row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto minmax(140px, 2fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.5rem;
    background-color: #ffffff;
}
.dark .aeo-page-type-perf__row {
    background-color: rgb(38 38 38);
    border-color: rgb(82 82 82);
}

@media (max-width: 640px) {
    .aeo-page-type-perf__row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

.aeo-page-type-perf__label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 500;
    color: rgb(17 24 39);
    font-size: 0.875rem;
    min-width: 0;
}
.dark .aeo-page-type-perf__label {
    color: #ffffff;
}
.aeo-page-type-perf__label iconify-icon {
    color: var(--bg-primary, #7e3af2);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.aeo-page-type-perf__label-count {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    font-weight: 400;
}

.aeo-page-type-perf__score {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgb(17 24 39);
    min-width: 2.75rem;
    text-align: right;
    padding-right: 0.5rem;
}
.dark .aeo-page-type-perf__score {
    color: #ffffff;
}
.aeo-page-type-perf__score--pending {
    color: rgb(156 163 175);
    font-weight: 500;
    font-size: 0.75rem;
}

.aeo-page-type-perf__bar-track {
    position: relative;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
    overflow: hidden;
}
.dark .aeo-page-type-perf__bar-track {
    background-color: rgb(75 85 99);
}
.aeo-page-type-perf__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--bg-primary, #7e3af2);
    transition: width 800ms ease;
}

/* Band-color modifiers for the bar fill */
.aeo-page-type-perf__bar-track.aeo-band--great > .aeo-page-type-perf__bar-fill { background-color: var(--clr-success, #16a34a); }
.aeo-page-type-perf__bar-track.aeo-band--good  > .aeo-page-type-perf__bar-fill { background-color: var(--clr-info,    #0ea5e9); }
.aeo-page-type-perf__bar-track.aeo-band--ok    > .aeo-page-type-perf__bar-fill { background-color: var(--clr-warning, #f59e0b); }
.aeo-page-type-perf__bar-track.aeo-band--bad   > .aeo-page-type-perf__bar-fill { background-color: var(--clr-danger,  #dc2626); }
.aeo-page-type-perf__bar-track.aeo-band--pending > .aeo-page-type-perf__bar-fill {
    background-color: rgb(156 163 175);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.18) 0,
        rgba(255, 255, 255, 0.18) 4px,
        transparent 4px,
        transparent 8px
    );
}

/* Dark-mode contrast lift — same rationale as aeo-module-bar.css. The
 * dark grey track drops the saturated band colours below WCAG 3:1 for
 * graphical objects, so use lighter shades when in dark mode. */
.dark .aeo-page-type-perf__bar-track.aeo-band--great > .aeo-page-type-perf__bar-fill { background-color: #4ade80; }
.dark .aeo-page-type-perf__bar-track.aeo-band--good  > .aeo-page-type-perf__bar-fill { background-color: #38bdf8; }
.dark .aeo-page-type-perf__bar-track.aeo-band--ok    > .aeo-page-type-perf__bar-fill { background-color: #fbbf24; }
.dark .aeo-page-type-perf__bar-track.aeo-band--bad   > .aeo-page-type-perf__bar-fill { background-color: #f87171; }
.dark .aeo-page-type-perf__bar-track.aeo-band--pending > .aeo-page-type-perf__bar-fill { background-color: rgb(209 213 219); }

.aeo-page-type-perf__action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--bg-primary, #7e3af2);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.aeo-page-type-perf__action:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .aeo-page-type-perf__bar-fill { transition: none; }
}