/* aeo-audit: aeo-finding — severity-coloured finding card.
 * Used inside the page-detail tab panels. One card per finding emitted by an
 * audit module. Severity classes set border-left + a soft tint that respects
 * dark mode.
 */

.aeo-finding {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    margin-bottom: 0.75rem;
    /* Round 21 / A3 — outer 1px border for card containment.
     * Severity hue still expressed via the 3px LEFT border below; the
     * outer border is neutral so it doesn't compete with the severity tone. */
    border: 1px solid rgb(229 231 235);
    border-left: 3px solid rgb(209 213 219);
}
.dark .aeo-finding {
    background-color: rgb(38 38 38);
    border-color: rgb(64 64 64);
    border-left-color: rgb(75 85 99);
}

.aeo-finding__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.aeo-finding__title {
    font-weight: 500;
    font-size: 0.875rem;
}
.aeo-finding__detail {
    font-size: 0.875rem;
    color: rgb(75 85 99);
    margin-top: 0.25rem;
}
.dark .aeo-finding__detail { color: rgb(212 212 212); }
.aeo-finding__hint {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}
.aeo-finding__snippet {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: rgb(23 23 23);
    color: rgb(245 245 245);
    font-size: 11px;
    border-radius: 0.25rem;
    overflow: auto;
    white-space: pre;
}

.aeo-finding--critical { border-left-color: #ef4444; background-color: #fef2f2; }
.dark .aeo-finding--critical { background-color: #3a1212; }
.aeo-finding--warning  { border-left-color: #f59e0b; background-color: #fffbeb; }
.dark .aeo-finding--warning  { background-color: #3a2a12; }
.aeo-finding--info     { border-left-color: #3b82f6; background-color: #eff6ff; }
.dark .aeo-finding--info     { background-color: #11253a; }
.aeo-finding--pass     { border-left-color: #22c55e; background-color: #f0fdf4; }
.dark .aeo-finding--pass     { background-color: #0f3a1a; }

/* D-101 — head row carries severity pill on the left + impact (H/M/L) on the right.
 * The previous layout put the severity pill on the right; the redesign moves
 * it next to the title for stronger left-edge scannability and frees the right
 * gutter for the impact indicator (which mirrors the extension's H/M/L badge).
 */
.aeo-finding__head-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}
.aeo-finding__head-right {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
}

/* Round 21 / A1 — severity badge: solid color + white text.
 * Replaces the prior tinted-bg + colored-text version (Tailwind
 * `bg-danger-100 text-danger-700` composition). The page-detail.php
 * loop now passes `aeo-finding__sev-pill--{severity}` instead of
 * composing $pillCls — see the `$sevPillCls` match block in
 * page-detail.php's finding-card render.
 *
 * Hex values match the four severity colors used elsewhere in this
 * stylesheet (no new color tokens introduced).
 */
.aeo-finding__sev-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
}
.aeo-finding__sev-pill--critical { background-color: #ef4444; }
.aeo-finding__sev-pill--warning  { background-color: #f59e0b; }
.aeo-finding__sev-pill--info     { background-color: #3b82f6; }
.aeo-finding__sev-pill--pass     { background-color: #22c55e; }

.aeo-finding__impact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}
.aeo-finding__impact--h { background-color: #fee2e2; color: #b91c1c; }
.aeo-finding__impact--m { background-color: #fef3c7; color: #b45309; }
.aeo-finding__impact--l { background-color: #dbeafe; color: #1d4ed8; }
.aeo-finding__impact--p { background-color: #dcfce7; color: #166534; }
.dark .aeo-finding__impact--h { background-color: rgba(239,68,68,0.18);  color: #fca5a5; }
.dark .aeo-finding__impact--m { background-color: rgba(245,158,11,0.18); color: #fbbf24; }
.dark .aeo-finding__impact--l { background-color: rgba(59,130,246,0.18); color: #93c5fd; }
.dark .aeo-finding__impact--p { background-color: rgba(34,197,94,0.18);  color: #86efac; }

/* D-101 — Current / Recommended two-column split.
 * Two semantic columns inside one finding card. "Current" reads detail
 * (existing field), "Recommended" reads fix_hint (existing field). On
 * narrow viewports the columns stack.
 */
.aeo-finding__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.625rem;
}
@media (max-width: 768px) {
    .aeo-finding__split { grid-template-columns: 1fr; gap: 0.5rem; }
}

.aeo-finding__col {
    min-width: 0;
}

.aeo-finding__col-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(115 115 115);
    margin-bottom: 0.25rem;
}
.dark .aeo-finding__col-label {
    color: rgb(163 163 163);
}

.aeo-finding__col-body {
    font-size: 0.8125rem;
    color: rgb(64 64 64);
    line-height: 1.5;
}
.dark .aeo-finding__col-body {
    color: rgb(212 212 212);
}

.aeo-finding__col-body--empty {
    color: rgb(163 163 163);
    font-style: italic;
}
.dark .aeo-finding__col-body--empty {
    color: rgb(115 115 115);
}

/* "Recommended" column body — green tint per extension reference. Uses the
 * existing ScoreBand "great"/"good" hue, not a new token. */
.aeo-finding__col--recommended .aeo-finding__col-label {
    color: #166534;
}
.aeo-finding__col--recommended .aeo-finding__col-body {
    color: #15803d;
}
.dark .aeo-finding__col--recommended .aeo-finding__col-label {
    color: #4ade80;
}
.dark .aeo-finding__col--recommended .aeo-finding__col-body {
    color: #86efac;
}