/* ============================================================================
   Admin Editorial — canonical visual language for /admin/* pages

   Loaded LAST (after editorial-final.css) so .adm-* rules win cascade.
   All hardcoded colors use var(--token, #fallback) so the same selectors
   render correctly in BOTH editorial mode (data-design-mode="editorial")
   and the legacy nexus mode.

   Reference: C:\Users\Ben\.claude\OPT-DESIGN-SYSTEM.md
   ============================================================================ */

/* ─── Page header ─── */
.adm-page-header {
    padding: 1.75rem 1.5rem 0;
    background: var(--paper, #fbfaf6);
}
.adm-page-header__eyebrow {
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3, #5d5d5a);
    margin: 0 0 0.6rem;
    padding-left: 22px;
    position: relative;
}
.adm-page-header__eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 1px;
    background: var(--ink, #0a0a0a);
}
.adm-page-header__title {
    font-family: var(--serif, "Newsreader", ui-serif, Georgia, serif);
    font-size: 2.1rem;
    font-weight: 500;
    color: var(--ink, #0a0a0a);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 0.4rem;
}
.adm-page-header__title em {
    font-style: italic;
    font-weight: 500;
}
.adm-page-header__sub {
    font-family: var(--sans, "Inter", -apple-system, system-ui, sans-serif);
    font-size: 0.88rem;
    color: var(--ink-3, #5d5d5a);
    margin: 0 0 1.25rem;
    max-width: 60ch;
}

/* ─── Segmented pill tab nav (matches Account Hub .acc-tabs) ─── */
.adm-tabs {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    gap: 4px;
    margin: 0 0 1rem;
}
[data-design-mode="nexus"] .adm-tabs {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
.adm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    color: #555;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
/* No nexus override for .adm-tab color/hover: the .adm-page-header
   background stays cream in both design modes (it's an "editorial island"
   inside the dark shell), so the base #555 / dark-hover rules give correct
   contrast regardless of design mode. The old #c8c8c8 / white-hover values
   assumed a dark header bg that doesn't exist here. */
.adm-tab:hover {
    color: #1a1a1a;
    background: rgba(0, 0, 0, 0.04);
}
.adm-tab.adm-tab--active,
.adm-tab.adm-tab--active:hover {
    background: var(--accent, #f4e14a);
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.adm-tab .bi {
    font-size: 0.95rem;
}
.adm-tab__badge {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--down, #b42318);
    color: #fff;
    line-height: 1.4;
}

/* Header bottom rule */
.adm-page-header__rule {
    height: 1px;
    border: 0;
    background: var(--rule, #d9d4c4);
    margin: 0 1.5rem 1.5rem;
}

/* ─── Section ─── */
.adm-section {
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--rule, #d9d4c4);
    background: var(--paper, #fbfaf6);
}
.adm-section:first-of-type { border-top: 0; }
.adm-section-head {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 1.25rem;
    align-items: baseline;
    margin: 0 0 1.5rem;
}
.adm-section-head__num {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-3, #5d5d5a);
    letter-spacing: 0.1em;
}
.adm-section-head__title {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink, #0a0a0a);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.adm-section-head__meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--ink-3, #5d5d5a);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.adm-section-head__meta:hover { color: var(--ink, #0a0a0a); }
@media (max-width: 768px) {
    .adm-section-head { grid-template-columns: auto 1fr; gap: 0.75rem; }
    .adm-section-head__meta { grid-column: 1 / -1; }
}

/* ─── Forms ─── */
.adm-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem 1.5rem;
}
.adm-field { display: flex; flex-direction: column; gap: 0.4rem; }
.adm-field--span2 { grid-column: span 2; }
@media (max-width: 768px) { .adm-field--span2 { grid-column: 1; } }
.adm-field__label {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3, #5d5d5a);
}
.adm-field__input,
.adm-field__select,
.adm-field__textarea {
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--ink, #0a0a0a);
    background: var(--paper, #fbfaf6);
    border: 1px solid var(--rule, #d9d4c4);
    border-radius: 2px;
    padding: 0.55rem 0.7rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
.adm-field__textarea { resize: vertical; min-height: 4.5rem; }
.adm-field__input:focus,
.adm-field__select:focus,
.adm-field__textarea:focus {
    border-color: var(--ink, #0a0a0a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(244, 225, 74, 0.22);
}
.adm-field__hint {
    font-family: var(--sans);
    font-size: 0.74rem;
    color: var(--ink-3, #5d5d5a);
    margin-top: 0.1rem;
}

/* ─── Tables ─── */
.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--ink, #0a0a0a);
    background: var(--paper, #fbfaf6);
}
.adm-table thead th {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3, #5d5d5a);
    text-align: left;
    padding: 0.85rem 0.85rem 0.7rem;
    border-bottom: 1px solid var(--rule, #d9d4c4);
    background: var(--paper, #fbfaf6);
    white-space: nowrap;
}
.adm-table tbody td {
    padding: 0.78rem 0.85rem;
    border-bottom: 1px solid var(--rule-2, #ece8da);
    vertical-align: middle;
}
.adm-table tbody tr:hover { background: var(--paper-2, #f4f1e8); }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table .num {
    font-family: var(--serif);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.adm-table .meta {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--ink-3, #5d5d5a);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.adm-table .text-end { text-align: right; }
.adm-table-wrap {
    background: var(--paper, #fbfaf6);
    border: 1px solid var(--rule, #d9d4c4);
    border-radius: 2px;
    overflow-x: auto;
}

/* ─── Status pills ─── */
.adm-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}
.adm-pill--ok    { background: var(--up-soft,   #e3f2e6); color: var(--up,   #1f7a3a); }
.adm-pill--warn  { background: rgba(228, 204, 0, 0.18);    color: #6b4d05; }
.adm-pill--bad   { background: var(--down-soft, #fbe7e3); color: var(--down, #b42318); }
.adm-pill--info  { background: #e6efff; color: #1f4a8a; }
.adm-pill--muted { background: var(--paper-2,   #f4f1e8); color: var(--ink-3, #5d5d5a); }
.adm-pill__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

/* ─── Filter chips (above tables) ─── */
.adm-filter-bar {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 1.5rem 1rem;
    background: var(--paper, #fbfaf6);
}
.adm-filter-chip {
    padding: 5px 12px;
    border: 1px solid var(--rule, #d9d4c4);
    border-radius: 999px;
    background: var(--paper, #fbfaf6);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3, #5d5d5a);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1.4;
}
.adm-filter-chip:hover {
    color: var(--ink, #0a0a0a);
    border-color: var(--ink-3, #5d5d5a);
}
.adm-filter-chip--active {
    background: var(--accent, #f4e14a);
    color: var(--accent-ink, #0a0a0a);
    border-color: var(--accent, #f4e14a);
}
.adm-filter-bar__push { flex: 1; }

/* ─── Buttons ─── */
.adm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1.1rem;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-decoration: none;
    line-height: 1.3;
}
.adm-btn--primary {
    background: var(--ink, #0a0a0a);
    color: var(--paper, #fbfaf6);
    border-color: var(--ink, #0a0a0a);
}
.adm-btn--primary:hover { filter: brightness(1.15); color: var(--paper, #fbfaf6); }
.adm-btn--accent {
    background: var(--accent, #f4e14a);
    color: var(--accent-ink, #0a0a0a);
    border-color: var(--accent, #f4e14a);
}
.adm-btn--accent:hover { filter: brightness(1.05); color: var(--accent-ink, #0a0a0a); }
.adm-btn--ghost {
    background: transparent;
    color: var(--ink, #0a0a0a);
    border-color: var(--rule, #d9d4c4);
}
.adm-btn--ghost:hover {
    border-color: var(--ink, #0a0a0a);
    color: var(--ink, #0a0a0a);
}
.adm-btn--danger {
    background: transparent;
    color: var(--down, #b42318);
    border-color: var(--down, #b42318);
}
.adm-btn--danger:hover {
    background: var(--down, #b42318);
    color: #fff;
}
.adm-btn--sm { padding: 0.35rem 0.7rem; font-size: 0.66rem; }

/* Icon-only action button (table rows) */
.adm-iconbtn {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--ink-3, #5d5d5a);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    font-size: 0.85rem;
}
.adm-iconbtn:hover {
    color: var(--ink, #0a0a0a);
    border-color: var(--rule, #d9d4c4);
    background: var(--paper-2, #f4f1e8);
}
.adm-iconbtn--danger { color: var(--down, #b42318); }
.adm-iconbtn--danger:hover {
    background: var(--down-soft, #fbe7e3);
    border-color: var(--down, #b42318);
    color: var(--down, #b42318);
}
.adm-iconbtn--accent { color: var(--ink, #0a0a0a); }
.adm-iconbtn--accent:hover {
    background: var(--accent, #f4e14a);
    border-color: var(--accent, #f4e14a);
}

/* ─── Save row (settings) ─── */
.adm-save-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--rule, #d9d4c4);
    margin-top: 1.75rem;
}

/* ─── KPI grid (Overview homepage) ─── */
.adm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule, #d9d4c4);
    border-bottom: 1px solid var(--rule, #d9d4c4);
}
.adm-kpi {
    padding: 1.5rem 1.25rem;
    border-right: 1px solid var(--rule-2, #ece8da);
}
.adm-kpi:last-child { border-right: 0; }
.adm-kpi__label {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3, #5d5d5a);
    margin: 0 0 0.5rem;
    padding-left: 18px;
    position: relative;
}
.adm-kpi__label::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 12px; height: 1px; background: var(--ink, #0a0a0a);
}
.adm-kpi__value {
    font-family: var(--serif);
    font-variant-numeric: tabular-nums;
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--ink, #0a0a0a);
    line-height: 1.05;
    margin: 0;
}
.adm-kpi__foot {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-3, #5d5d5a);
    margin: 0.45rem 0 0;
}

/* ─── Activity list (Overview) ─── */
.adm-activity { list-style: none; margin: 0; padding: 0; }
.adm-activity__row {
    display: grid;
    grid-template-columns: 130px 200px 1fr auto;
    gap: 1rem;
    align-items: baseline;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule-2, #ece8da);
    font-family: var(--sans);
    font-size: 0.86rem;
}
.adm-activity__row:last-child { border-bottom: 0; }
.adm-activity__time {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--ink-3, #5d5d5a);
    letter-spacing: 0.04em;
}
.adm-activity__action {
    color: var(--ink, #0a0a0a);
    font-weight: 500;
}
.adm-activity__actor { color: var(--ink-2, #2a2a2a); }
.adm-activity__ip {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--ink-4, #8a8882);
}
@media (max-width: 768px) {
    .adm-activity__row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ─── TOC (Settings long-scroll anchor menu) ─── */
.adm-toc {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem 0;
}
.adm-toc__link {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3, #5d5d5a);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--rule, #d9d4c4);
    border-radius: 2px;
    background: var(--paper, #fbfaf6);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.adm-toc__link:hover {
    color: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}

/* ─── "What this means" callout (editorial signature) ─── */
.adm-wim {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--accent-soft, #fef9cc);
    border-left: 3px solid var(--accent, #f4e14a);
    margin: 1.5rem 0 0;
}
.adm-wim__tag {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink, #0a0a0a);
    white-space: nowrap;
    margin-top: 0.15rem;
}
.adm-wim__body {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink, #0a0a0a);
    line-height: 1.55;
}