/* aeo-audit: aeo-module-header — module-tab header strip (D-101).
 * Used by partials/page-detail/module-header.php. One strip per module tab in
 * page-detail.php, above the findings list. Matches the Chrome extension's
 * per-module density: title + score + grade on row 1; weight + crit/warn/info
 * /pass pill counts on row 2.
 *
 * Score-band colours come from existing ScoreBand tokens (D-081); pill chrome
 * from neutral grays. NO new color tokens.
 */

.aeo-module-header {
    display: grid;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-base, rgb(229 231 235));
}
.dark .aeo-module-header {
    border-bottom-color: rgb(64 64 64);
}

/* Round 21 / A2 — title row uses a 3-column grid: 4px severity bar on
 * the left, title in the middle, score block on the right. Wraps below
 * 480px so the score block drops to its own line. */
.aeo-module-header__title-row {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    align-items: center;
    gap: 0.75rem;
}
@media (max-width: 480px) {
    .aeo-module-header__title-row {
        grid-template-columns: 4px 1fr;
        row-gap: 0.5rem;
    }
    .aeo-module-header__score-block,
    .aeo-module-header__coming-soon {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* Round 21 / A2 — 4px-wide × 34px-tall solid color bar at the LEFT of
 * the module-header. Color tracks the module's score band via the
 * existing aeo-band--{great|good|ok|bad|pending} modifiers (D-081).
 * Mirrors the extension's per-module-card `.mc-bar` pattern. */
.aeo-module-header__sev-bar {
    display: block;
    width: 4px;
    height: 34px;
    border-radius: 3px;
    background-color: rgb(209 213 219); /* default fallback (= pending) */
}
.aeo-module-header__sev-bar.aeo-band--great   { background-color: #22c55e; }
.aeo-module-header__sev-bar.aeo-band--good    { background-color: #3b82f6; }
.aeo-module-header__sev-bar.aeo-band--ok      { background-color: #f59e0b; }
.aeo-module-header__sev-bar.aeo-band--bad     { background-color: #ef4444; }
.aeo-module-header__sev-bar.aeo-band--pending { background-color: rgb(209 213 219); }
.dark .aeo-module-header__sev-bar.aeo-band--pending { background-color: rgb(75 85 99); }

.aeo-module-header__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(23 23 23);
    margin: 0;
}
.dark .aeo-module-header__title {
    color: #ffffff;
}

.aeo-module-header__score-block {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.aeo-module-header__score {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(23 23 23);
    line-height: 1;
}
.dark .aeo-module-header__score {
    color: #ffffff;
}

/* Score-band tints behind the numeric score — soft, not loud. */
.aeo-module-header__score.aeo-band--great   { color: #15803d; }
.aeo-module-header__score.aeo-band--good    { color: #166534; }
.aeo-module-header__score.aeo-band--ok      { color: #b45309; }
.aeo-module-header__score.aeo-band--bad     { color: #b91c1c; }
.aeo-module-header__score.aeo-band--pending { color: rgb(115 115 115); }
.dark .aeo-module-header__score.aeo-band--great   { color: #4ade80; }
.dark .aeo-module-header__score.aeo-band--good    { color: #86efac; }
.dark .aeo-module-header__score.aeo-band--ok      { color: #fbbf24; }
.dark .aeo-module-header__score.aeo-band--bad     { color: #fca5a5; }
.dark .aeo-module-header__score.aeo-band--pending { color: rgb(163 163 163); }

/* Round 21 / A4 — grade pill: solid color + white text.
 * Replaces the prior tinted-bg + colored-text version. Hex values track
 * the four ScoreBand bands (D-081); the D-grade folds into the BAD band's
 * red rather than introducing a 5th orange token, preserving the 4-band
 * mapping. Pending scores stay neutral gray.
 *
 * Score-to-grade mapping (Scorer::grade): A+/A → great, B → good,
 * C → ok, D/F → bad. The fold is intentional — both D and F are in the
 * "Critical" band so they share the same chrome.
 */
.aeo-module-header__grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
    background-color: rgb(115 115 115); /* neutral fallback */
}
.aeo-module-header__grade.aeo-band--great   { background-color: #22c55e; }
.aeo-module-header__grade.aeo-band--good    { background-color: #3b82f6; }
.aeo-module-header__grade.aeo-band--ok      { background-color: #f59e0b; }
.aeo-module-header__grade.aeo-band--bad     { background-color: #ef4444; }
.aeo-module-header__grade.aeo-band--pending {
    background-color: rgb(229 231 235);
    color: rgb(115 115 115);
}
.dark .aeo-module-header__grade.aeo-band--pending {
    background-color: rgb(64 64 64);
    color: rgb(163 163 163);
}

.aeo-module-header__coming-soon {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    background-color: rgb(219 234 254);
    color: rgb(29 78 216);
}
.dark .aeo-module-header__coming-soon {
    background-color: rgba(59, 130, 246, 0.15);
    color: rgb(147 197 253);
}

.aeo-module-header__stat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: rgb(115 115 115);
}
.dark .aeo-module-header__stat-row {
    color: rgb(163 163 163);
}

.aeo-module-header__stat {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    line-height: 1.25;
    background-color: rgb(243 244 246);
    color: rgb(64 64 64);
}
.dark .aeo-module-header__stat {
    background-color: rgb(64 64 64);
    color: rgb(212 212 212);
}

.aeo-module-header__stat--weight {
    background-color: rgb(237 233 254);
    color: rgb(91 33 182);
}
.dark .aeo-module-header__stat--weight {
    background-color: rgba(139, 92, 246, 0.15);
    color: rgb(196 181 253);
}

.aeo-module-header__stat--supplemental {
    background-color: rgb(243 244 246);
    color: rgb(82 82 82);
    font-style: italic;
}
.dark .aeo-module-header__stat--supplemental {
    background-color: rgb(64 64 64);
    color: rgb(163 163 163);
}

.aeo-module-header__stat--crit {
    background-color: #fee2e2;
    color: #b91c1c;
}
.dark .aeo-module-header__stat--crit {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.aeo-module-header__stat--warn {
    background-color: #fef3c7;
    color: #b45309;
}
.dark .aeo-module-header__stat--warn {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.aeo-module-header__stat--info {
    background-color: #dbeafe;
    color: #1d4ed8;
}
.dark .aeo-module-header__stat--info {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

.aeo-module-header__stat--pass {
    background-color: #dcfce7;
    color: #166534;
}
.dark .aeo-module-header__stat--pass {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

@media (max-width: 640px) {
    .aeo-module-header__title { font-size: 1rem; }
    .aeo-module-header__score { font-size: 1.25rem; }
}