/* aeo-audit: aeo-module-bar — per-module score bar on the dashboard.
 * Default state shows a real score (cyan/brand fill). The --pending modifier
 * is for "module not yet implemented" rows: muted grey, no fill animation.
 */

.aeo-module-bar {
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(219, 219, 219);
    overflow: hidden;
}
.dark .aeo-module-bar { background-color: rgb(75 85 99); }
.aeo-module-bar > span {
    display: block;
    height: 100%;
    background-color: var(--bg-primary);
    border-radius: inherit;
    transition: width 800ms ease;
}
.aeo-module-bar--pending > span {
    background-color: rgb(156 163 175);
}

/* D-081 score-band fill modifiers. Apply on the same element as .aeo-module-bar
 * (e.g. <div class="aeo-module-bar aeo-band--great"><span style="width:90%"></span></div>).
 * Defaults to brand purple when no band class is present. */
.aeo-module-bar.aeo-band--great > span { background-color: var(--clr-success, #16a34a); }
.aeo-module-bar.aeo-band--good  > span { background-color: var(--clr-info,    #0ea5e9); }
.aeo-module-bar.aeo-band--ok    > span { background-color: var(--clr-warning, #f59e0b); }
.aeo-module-bar.aeo-band--bad   > span { background-color: var(--clr-danger,  #dc2626); }
.aeo-module-bar.aeo-band--pending > span {
    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: the dark track (#4b5563) sinks WCAG ratios for the
 * saturated band colours (red/amber especially). Lift each band to a
 * lighter shade on dark so every band crosses the 3:1 graphical-object
 * threshold against the dark track. */
.dark .aeo-module-bar.aeo-band--great > span { background-color: #4ade80; } /* green-400 */
.dark .aeo-module-bar.aeo-band--good  > span { background-color: #38bdf8; } /* sky-400 */
.dark .aeo-module-bar.aeo-band--ok    > span { background-color: #fbbf24; } /* amber-400 */
.dark .aeo-module-bar.aeo-band--bad   > span { background-color: #f87171; } /* red-400 */
.dark .aeo-module-bar.aeo-band--pending > span { background-color: rgb(209 213 219); }
.aeo-module-bar__row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.aeo-module-bar__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}
.aeo-module-bar__name { font-weight: 500; }
.aeo-module-bar__value { color: rgb(107 114 128); }
.aeo-module-bar--pending .aeo-module-bar__value { color: rgb(209 213 219); }

@media (prefers-reduced-motion: reduce) {
    .aeo-module-bar > span { transition: none; }
}