/* Admin SEO dashboard (/admin/seo).

   An operational diagnostic, so the information design differs from the rest of the admin area:
   severity is encoded in form as well as text (a coloured rail down each finding), the page table
   is dense and scannable rather than spacious, and every figure that lines up in a column uses
   tabular figures so columns can be compared by eye. */

.wr-seo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.wr-seo-toolbar-meta {
    font-size: 0.85rem;
    color: var(--wr-ink-600, #5b6472);
}

.wr-seo-toolbar-links {
    margin-left: auto;
    display: flex;
    gap: 14px;
    font-size: 0.85rem;
}

.wr-seo-note,
.wr-seo-ok {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--wr-ink-600, #5b6472);
    max-width: 78ch;
}

.wr-seo-error {
    border-left: 4px solid #d94b4b;
}

/* ---------- Findings list ---------- */

.wr-seo-issues {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wr-seo-issues li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--wr-surface-2, #f4f6f9);
    font-size: 0.87rem;
    line-height: 1.5;
    /* The severity rail. Colour alone is never the only signal -- the tag beside it spells the
       severity out, so this reads correctly without colour vision too. */
    border-left: 3px solid transparent;
}

.wr-seo-issues li.err { border-left-color: #d94b4b; }
.wr-seo-issues li.warn { border-left-color: #e0a32e; }
.wr-seo-issues li.info { border-left-color: #4a7fd4; }
.wr-seo-issues li.ok { border-left-color: #2fa66a; }

.wr-seo-issue-tag {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.wr-seo-issues li.err .wr-seo-issue-tag { background: rgba(217, 75, 75, 0.14); color: #a5312f; }
.wr-seo-issues li.warn .wr-seo-issue-tag { background: rgba(224, 163, 46, 0.16); color: #8a6212; }
.wr-seo-issues li.info .wr-seo-issue-tag { background: rgba(74, 127, 212, 0.14); color: #2f5aa5; }
.wr-seo-issues li.ok .wr-seo-issue-tag { background: rgba(47, 166, 106, 0.14); color: #1d7148; }

.wr-seo-issue-cat {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--wr-ink-700, #414a58);
}

.wr-seo-issues code {
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

/* ---------- Page table ---------- */

.wr-seo-table-scroll {
    /* The table is wide by design. It scrolls inside its own container so the page body never
       scrolls sideways. */
    overflow-x: auto;
    margin-top: 12px;
}

.wr-seo-table {
    width: 100%;
    min-width: 860px;
    font-size: 0.85rem;
}

.wr-seo-table td.num,
.wr-seo-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wr-seo-table td.num.bad {
    color: #a5312f;
    font-weight: 700;
}

.wr-seo-table tr.has-error td {
    background: rgba(217, 75, 75, 0.05);
}

.wr-seo-table td a {
    overflow-wrap: anywhere;
}

/* ---------- Configuration list ---------- */

.wr-seo-config {
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wr-seo-config > div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    align-items: baseline;
}

.wr-seo-config dt {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--wr-ink-700, #414a58);
}

.wr-seo-config dd {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--wr-ink-600, #5b6472);
    max-width: 78ch;
}

.wr-seo-config dd .wr-status-pill {
    margin-right: 8px;
}

@media (max-width: 720px) {
    .wr-seo-config > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .wr-seo-toolbar-links {
        margin-left: 0;
        width: 100%;
    }
}