/* ============================================================
 * admin-theme.css
 *
 * Visual tokens + component primitives for the admin UI theme.
 * Loaded on every admin page (admin_header.php, login.php, and the
 * sidebar layout).
 *
 * Naming: --cms-admin-* prefix (ExciteCore). The colour role names mirror
 * the design handoff exactly so a token swap maps 1:1 to the design.
 *
 * Older variables (--brand-color, --cms-admin-*) are re-pointed at these
 * --cms-admin-* values in admin-dashboard-styles.css so legacy buttons /
 * cards / inputs pick up the new palette without per-rule edits.
 * ============================================================ */

:root {
    /* Neutrals — body text, surfaces, dark dashboards. */
    --cms-admin-ink:        #0d1117;  /* default text on light surfaces */
    --cms-admin-paper:      #f4f5f7;  /* app background, table header band */
    --cms-admin-surface:    #ffffff;  /* cards, table body */
    --cms-admin-slate-900:  #13181f;  /* dark sidebar / primary button bg */
    --cms-admin-slate-800:  #1c232c;  /* inner panels on dark (user chip) */
    --cms-admin-slate-700:  #2a323e;  /* active nav row, body text on light */
    --cms-admin-slate-500:  #5b6573;  /* secondary text */
    --cms-admin-slate-400:  #8a93a1;  /* tertiary text, icon defaults on dark */
    --cms-admin-slate-300:  #c6ccd5;  /* body text on dark */
    --cms-admin-slate-200:  #e2e5eb;  /* borders, dividers */
    --cms-admin-slate-100:  #eef0f4;  /* subtle row separators, button bg */

    /* Brand greens. Replaces the prior #4CBA74 / #3a9d5f pair —
       slightly more grassy / less mint. Used for primary actions
       on dark, accents on light, and the EC monogram's seam. */
    --cms-admin-green:      #6fb53a;
    --cms-admin-green-deep: #4f8826;
    --cms-admin-green-soft: #e2efce;

    /* Status colours (used by status pill — see below). */
    --cms-admin-warn:       #d4a73a;

    /* Type stacks — IBM Plex Sans + Mono via Google Fonts. The mono
       face is used heavily for IDs, domains, eyebrow captions, and
       keyboard hints, so it's not optional. */
    --cms-admin-font:       'IBM Plex Sans', 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --cms-admin-mono:       'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================
 * EC wordmark — mark + "excitecore" + CMS pill
 *
 * The mark itself is rendered as inline SVG by AdminUi::ecMark()
 * (or the `ecMark` Twig function) — no CSS needed for it. The
 * wordmark wrapper below styles the surrounding text + pill.
 * ============================================================ */

.cms-admin-wordmark {
    display: inline-flex;
    align-items: center;
    font-family: var(--cms-admin-font);
}
.cms-admin-wordmark-name {
    font-weight: 600;
    letter-spacing: -0.02em;
}
.cms-admin-wordmark-pill {
    font-family: var(--cms-admin-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 4px;
    border: 1px solid var(--cms-admin-slate-200);
    padding: 2px 6px;
    color: var(--cms-admin-slate-500);
}
.cms-admin-wordmark.is-light .cms-admin-wordmark-pill {
    color: var(--cms-admin-slate-300);
    border-color: rgba(255, 255, 255, 0.18);
}
.cms-admin-wordmark.is-light .cms-admin-wordmark-name {
    color: #ffffff;
}

/* ============================================================
 * Status pill — used in the sites list table.
 * Rendered by AdminUi::statusPill($s). The pill colour is
 * picked from --cms-admin-status-* variables scoped to the variant
 * class so all four variants share the same shape rule.
 * ============================================================ */

.cms-admin-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 4px;
    font-family: var(--cms-admin-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.cms-admin-status-pill .cms-admin-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.cms-admin-status-pill.is-live      { background: var(--cms-admin-green-soft); color: var(--cms-admin-green-deep); }
.cms-admin-status-pill.is-live      .cms-admin-status-dot { background: var(--cms-admin-green); }
.cms-admin-status-pill.is-draft     { background: #fef1d8; color: #8a5a14; }
.cms-admin-status-pill.is-draft     .cms-admin-status-dot { background: var(--cms-admin-warn); }
.cms-admin-status-pill.is-staging   { background: #e1e9f5; color: #2f4d80; }
.cms-admin-status-pill.is-staging   .cms-admin-status-dot { background: #3d6bbf; }
.cms-admin-status-pill.is-archived  { background: var(--cms-admin-slate-100); color: var(--cms-admin-slate-500); }
.cms-admin-status-pill.is-archived  .cms-admin-status-dot { background: var(--cms-admin-slate-400); }

/* Inline status switcher (sites list) — pill + dropdown to change status without
   opening Site Settings. */
.cms-admin-status-switch { position: relative; display: inline-block; }
.cms-admin-status-switch-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 3px; font-family: var(--cms-admin-font);
}
.cms-admin-status-switch-btn svg { color: var(--cms-admin-slate-400); flex-shrink: 0; }
.cms-admin-status-switch-btn:hover svg { color: var(--cms-admin-slate-600); }
.cms-admin-status-menu {
    position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 4px;
    background: #fff; border: 1px solid var(--cms-admin-slate-200); border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10); min-width: 130px; padding: 4px;
}
.cms-admin-status-menu-item {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 6px 10px; font-size: 13px; border-radius: 6px; cursor: pointer;
    font-family: var(--cms-admin-font); color: var(--cms-admin-slate-700);
}
.cms-admin-status-menu-item:hover { background: var(--cms-admin-slate-100); }
.cms-admin-status-menu-item.is-current { font-weight: 600; color: var(--cms-admin-green-deep); }
.cms-admin-status-nudge {
    display: block; margin-top: 4px; background: none; border: 0; padding: 0;
    font-size: 11px; color: var(--cms-admin-green-deep); cursor: pointer;
    text-decoration: underline; font-family: var(--cms-admin-font);
}
.cms-admin-status-nudge:hover { color: var(--cms-admin-green); }

/* ============================================================
 * Mono caption / eyebrow — used as the small uppercase
 * labels above headings ("// internal · excite media",
 * "auth // sso", "Workspace · Sites"). Used as a class so
 * markup can be more semantic (<p> or <span>) than div soup.
 * ============================================================ */

.cms-admin-eyebrow {
    font-family: var(--cms-admin-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cms-admin-slate-500);
}
.cms-admin-eyebrow.is-light      { color: var(--cms-admin-slate-400); }
.cms-admin-eyebrow.is-green      { color: var(--cms-admin-green); }

/* ============================================================
 * Sidebar layout
 *
 * Full-viewport grid: 232px dark sidebar | flexible main content.
 * Used by admin_layout_sidebar.php for the sites list (and future
 * Templates / Activity pages once they exist).
 *
 * Sidebar contains: wordmark, workspace nav, user chip at the bottom.
 * Main is left open for the page header / toolbar / table.
 * ============================================================ */

.cms-admin-layout {
    display: grid;
    grid-template-columns: 232px 1fr;
    font-family: var(--cms-admin-font);
    color: var(--cms-admin-ink);
    background: var(--cms-admin-paper);
    min-height: 100vh;
}

.cms-admin-sidebar {
    background: var(--cms-admin-slate-900);
    color: #ffffff;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Sidebar is sticky so it doesn't scroll out of view on long tables. */
    position: sticky;
    top: 0;
    height: 100vh;
}
.cms-admin-sidebar-section { display: flex; flex-direction: column; }
.cms-admin-sidebar-caption {
    font-family: var(--cms-admin-mono);
    font-size: 10px;
    color: var(--cms-admin-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 6px 10px;
    margin: 0;
}

.cms-admin-sidebar-nav {
    width: 100%;
    padding: 9px 10px;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
    background: transparent;
    color: var(--cms-admin-slate-300);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 2px;
    font-family: var(--cms-admin-font);
    text-align: left;
    text-decoration: none;
    transition: background-color 0.12s, color 0.12s;
}
.cms-admin-sidebar-nav:hover:not(.is-active):not(.is-disabled) {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}
.cms-admin-sidebar-nav.is-active {
    background: var(--cms-admin-slate-700);
    color: #ffffff;
}
.cms-admin-sidebar-nav.is-disabled {
    color: var(--cms-admin-slate-500);
    cursor: default;
    pointer-events: none;
}
.cms-admin-sidebar-nav-icon {
    color: var(--cms-admin-slate-400);
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.cms-admin-sidebar-nav.is-active .cms-admin-sidebar-nav-icon { color: var(--cms-admin-green); }
.cms-admin-sidebar-nav-label { flex: 1; }
.cms-admin-sidebar-nav-badge {
    font-family: var(--cms-admin-mono);
    font-size: 11px;
    color: var(--cms-admin-slate-400);
}

.cms-admin-sidebar-user {
    margin-top: auto;
    padding: 10px;
    border-radius: 8px;
    background: var(--cms-admin-slate-800);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cms-admin-sidebar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cms-admin-green);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}
.cms-admin-sidebar-user-text { flex: 1; min-width: 0; }
.cms-admin-sidebar-user-name { font-size: 13px; font-weight: 500; }
.cms-admin-sidebar-user-email {
    font-size: 11px;
    color: var(--cms-admin-slate-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cms-admin-sidebar-user-logout {
    background: transparent;
    border: 0;
    color: var(--cms-admin-slate-400);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
}
.cms-admin-sidebar-user-logout:hover { color: #ffffff; }

.cms-admin-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
}

/* ---- Page header (above the toolbar) ---- */
.cms-admin-page-header {
    padding: 24px 32px 18px;
    border-bottom: 1px solid var(--cms-admin-slate-200);
    background: var(--cms-admin-surface);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.cms-admin-page-header-title h1 {
    margin: 4px 0 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.cms-admin-page-header-count {
    color: var(--cms-admin-slate-400);
    font-weight: 400;
}
.cms-admin-page-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* "Back to sites"-style breadcrumb link rendered above the page H1.
   Used by form pages (Add site / Import / Clone) to give users a one-click
   path back to the list. The arrow is part of the link text so it stays
   together when hovered. */
.cms-admin-page-header-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cms-admin-slate-500);
    text-decoration: none;
    font-family: var(--cms-admin-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.cms-admin-page-header-back:hover { color: var(--cms-admin-slate-900); }
.cms-admin-page-header-back svg { width: 12px; height: 12px; }

/* Content wrapper for "single form" pages — centres a max-width column
   inside the main area so the card sits balanced under the full-width
   page header rather than hanging flush-left in a wide layout. */
.cms-admin-form-page {
    padding: 28px 32px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.cms-admin-form-page-wide {
    max-width: 1180px;
}
/* Bordered card that sits inside .cms-admin-form-page. Matches the "single
   surface inside a surface" pattern used elsewhere in the EC theme. */
.cms-admin-form-card {
    background: var(--cms-admin-surface);
    border: 1px solid var(--cms-admin-slate-200);
    border-radius: 10px;
    padding: 24px 26px;
}

/* Header & toolbar buttons */
.cms-admin-btn-secondary-sm {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--cms-admin-slate-200);
    background: var(--cms-admin-surface);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cms-admin-slate-700);
    text-decoration: none;
    font-family: var(--cms-admin-font);
    transition: background-color 0.12s, border-color 0.12s;
}
.cms-admin-btn-secondary-sm:hover { background: var(--cms-admin-paper); border-color: var(--cms-admin-slate-400); }
.cms-admin-btn-primary-sm {
    padding: 9px 16px;
    border-radius: 8px;
    border: 0;
    background: var(--cms-admin-slate-900);
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
    font-family: var(--cms-admin-font);
    transition: background-color 0.12s;
}
.cms-admin-btn-primary-sm:hover { background: #000; }

/* ---- Toolbar (search + filters + view toggle) ---- */
.cms-admin-toolbar {
    padding: 14px 32px;
    border-bottom: 1px solid var(--cms-admin-slate-200);
    background: var(--cms-admin-surface);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cms-admin-search {
    flex: 1;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--cms-admin-slate-200);
    background: var(--cms-admin-paper);
}
.cms-admin-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    font-family: var(--cms-admin-font);
}
.cms-admin-search-kbd {
    font-family: var(--cms-admin-mono);
    font-size: 11px;
    color: var(--cms-admin-slate-400);
    border: 1px solid var(--cms-admin-slate-200);
    padding: 1px 5px;
    border-radius: 4px;
    background: #ffffff;
}

/* Site count next to the search input — mono caption, calm grey.
   Reads as "N sites" by default, "X of N sites" while filtering. */
.cms-admin-toolbar-count {
    font-family: var(--cms-admin-mono);
    font-size: 12px;
    color: var(--cms-admin-slate-500);
    margin-left: 14px;
    white-space: nowrap;
}

.cms-admin-view-toggle {
    display: flex;
    border-radius: 8px;
    border: 1px solid var(--cms-admin-slate-200);
    padding: 2px;
}
.cms-admin-view-toggle button {
    padding: 6px 9px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--cms-admin-slate-500);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--cms-admin-font);
    font-size: 12px;
}
.cms-admin-view-toggle button.is-active {
    background: var(--cms-admin-slate-900);
    color: #ffffff;
}

/* ---- Sites table ---- */
.cms-admin-table-wrap {
    flex: 1;
    overflow: auto;
    background: var(--cms-admin-surface);
}
.cms-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cms-admin-table thead tr {
    background: var(--cms-admin-paper);
    position: sticky;
    top: 0;
    z-index: 1;
}
.cms-admin-table thead th {
    text-align: left;
    padding: 10px 16px;
    font-family: var(--cms-admin-mono);
    font-size: 11px;
    color: var(--cms-admin-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-bottom: 1px solid var(--cms-admin-slate-200);
    white-space: nowrap;
}
.cms-admin-table tbody tr {
    border-bottom: 1px solid var(--cms-admin-slate-100);
}
.cms-admin-table tbody tr:nth-child(even) { background: #fafbfc; }
.cms-admin-table tbody tr:hover { background: #f5f7fb; }
.cms-admin-table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}
.cms-admin-table-site-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cms-admin-table-site-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--cms-admin-slate-100);
    color: var(--cms-admin-slate-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    font-family: var(--cms-admin-font);
    flex-shrink: 0;
}
.cms-admin-table-site-name { font-weight: 600; color: var(--cms-admin-ink); font-size: 14px; }
.cms-admin-table-site-slug { color: var(--cms-admin-slate-500); font-size: 12px; }
.cms-admin-table-mono { font-family: var(--cms-admin-mono); font-size: 12px; color: var(--cms-admin-slate-700); }
.cms-admin-table-mono-muted { font-family: var(--cms-admin-mono); font-size: 12px; color: var(--cms-admin-slate-500); }
.cms-admin-table-mono-link { font-family: var(--cms-admin-mono); font-size: 12px; color: var(--cms-admin-green-deep); text-decoration: none; }
.cms-admin-table-mono-link:hover { text-decoration: underline; }
.cms-admin-table-empty { color: var(--cms-admin-slate-400); }

/* Prominent per-row "Open Editor" button — launches the site editor.
   Sits in its own column to the right of the data columns, before the
   kebab. Brand green to match the grid view's "Launch Site Editor" —
   reads as the primary action FOR THIS ROW (different scope from the
   page-header "+ New site" CTA which is the global primary). */
.cms-admin-row-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border-radius: 6px;
    background: var(--cms-admin-green);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.12s, transform 0.05s;
    line-height: 1;
}
.cms-admin-row-open:hover { background: var(--cms-admin-green-deep); }
.cms-admin-row-open:active { transform: scale(0.97); }

.cms-admin-kebab {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--cms-admin-slate-400);
    padding: 4px 6px;
    border-radius: 4px;
    display: inline-flex;
}
.cms-admin-kebab:hover { background: var(--cms-admin-slate-100); color: var(--cms-admin-slate-700); }
.cms-admin-kebab-menu {
    position: absolute;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid var(--cms-admin-slate-200);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 10;
    padding: 4px;
}
.cms-admin-kebab-menu a,
.cms-admin-kebab-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border-radius: 4px;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: var(--cms-admin-slate-700);
    text-decoration: none;
    font-family: var(--cms-admin-font);
    cursor: pointer;
}
.cms-admin-kebab-menu a:hover,
.cms-admin-kebab-menu button:hover { background: var(--cms-admin-slate-100); color: var(--cms-admin-ink); }
.cms-admin-kebab-menu .cms-admin-kebab-menu-danger { color: #b91c1c; }
.cms-admin-kebab-menu .cms-admin-kebab-menu-danger:hover { background: #fef2f2; }
.cms-admin-kebab-menu-divider { height: 1px; background: var(--cms-admin-slate-100); margin: 4px 0; }

/* =====================================================================
   Shared diff renderer (cms-admin-diff-*)
   Unified line-diff display fed by the LineDiff engine. Reusable across
   any feature that needs a before/after view; the entity-history viewer
   is the first consumer.
   ===================================================================== */
.cms-admin-diff-field { margin-bottom: 14px; }
.cms-admin-diff-field:last-child { margin-bottom: 0; }
.cms-admin-diff-field-name {
    font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #475569;
    margin-bottom: 4px;
}
.cms-admin-diff-lines {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
    max-height: 360px;
    overflow: auto;
}
.cms-admin-diff-line {
    display: flex;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 0 6px;
}
.cms-admin-diff-pair { display: flex; flex: 1; min-width: 0; }
.cms-admin-diff-line-added { background: #e6ffec; }
.cms-admin-diff-line-removed { background: #ffeef0; }
.cms-admin-diff-line-context { background: #fff; color: #475569; }
.cms-admin-diff-line-context_summary,
.cms-admin-diff-line-truncated { background: #f1f5f9; }
.cms-admin-diff-marker {
    width: 1.4em;
    flex: none;
    text-align: center;
    user-select: none;
    color: #94a3b8;
    white-space: pre;
}
.cms-admin-diff-line-added .cms-admin-diff-marker { color: #1a7f37; }
.cms-admin-diff-line-removed .cms-admin-diff-marker { color: #cf222e; }
.cms-admin-diff-text {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.cms-admin-diff-summary {
    color: #64748b;
    font-style: italic;
    padding: 1px 0;
}

/* =====================================================================
   Entity version-history viewer (cms-admin-eh-*)
   The modal opened by window.openEntityHistory().
   ===================================================================== */
/* Two-class selector so it beats any single-class .modal-<size> width rule. */
.cms-admin-eh-modal.cms-admin-eh-modal { width: min(960px, 94vw); max-width: 94vw; }
.cms-admin-eh {
    padding: 20px 22px;
    font-size: 14px;
    color: #1e293b;
}
.cms-admin-eh-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cms-admin-eh-title { font-size: 16px; }
.cms-admin-eh-modes {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}
.cms-admin-eh-modes button {
    border: 0;
    background: #fff;
    padding: 6px 12px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}
.cms-admin-eh-modes button + button { border-left: 1px solid #cbd5e1; }
.cms-admin-eh-modes button.active { background: #2563eb; color: #fff; }
.cms-admin-eh-mode-hint {
    color: #64748b;
    font-size: 12px;
    margin: 6px 0 14px;
}
.cms-admin-eh-loading,
.cms-admin-eh-empty,
.cms-admin-eh-error {
    padding: 14px;
    border-radius: 6px;
    font-size: 13px;
}
.cms-admin-eh-loading { color: #64748b; }
.cms-admin-eh-empty { color: #64748b; background: #f8fafc; }
.cms-admin-eh-error { color: #b91c1c; background: #fef2f2; }
.cms-admin-eh-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.cms-admin-eh-item + .cms-admin-eh-item { border-top: 1px solid #e2e8f0; }
.cms-admin-eh-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
}
.cms-admin-eh-row:hover { background: #f8fafc; }
.cms-admin-eh-caret { width: 1em; flex: none; color: #94a3b8; }
.cms-admin-eh-badge {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    white-space: nowrap;
}
.cms-admin-eh-badge.cms-admin-eh-badge-before_delete { background: #fee2e2; color: #b91c1c; }
.cms-admin-eh-badge.cms-admin-eh-badge-manual { background: #dbeafe; color: #1e40af; }
.cms-admin-eh-badge.cms-admin-eh-badge-before_publish { background: #dcfce7; color: #166534; }
.cms-admin-eh-when { flex: none; color: #475569; white-space: nowrap; }
.cms-admin-eh-meta { flex: none; color: #64748b; font-size: 12px; white-space: nowrap; }
.cms-admin-eh-notes {
    flex: 1;
    min-width: 0;
    color: #64748b;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cms-admin-eh-restore {
    margin-left: auto;
    flex: none;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}
.cms-admin-eh-restore:hover { background: #f1f5f9; }
.cms-admin-eh-restore:disabled { opacity: 0.6; cursor: default; }
.cms-admin-eh-diff-wrap {
    padding: 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.cms-admin-eh-diff-head {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}
.cms-admin-eh-note {
    font-size: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
 * Site tags (cms-admin-tag-*) — the admin-only labels used to organise the
 * sites list. Shared by AdminUi::tagChips (read-only chips on the list +
 * assign modal), the toolbar filter (toggle chips), and the manage page.
 * ------------------------------------------------------------------------- */

/* Read-only chip (rendered by AdminUi::tagChip). The dot honours a per-tag
   --cms-admin-tag-color when set, otherwise a neutral slate. */
.cms-admin-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cms-admin-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    background: var(--cms-admin-slate-100);
    color: var(--cms-admin-slate-700);
    border: 1px solid var(--cms-admin-slate-200);
    white-space: nowrap;
}
.cms-admin-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: none;
    background: var(--cms-admin-tag-color, var(--cms-admin-slate-400));
}

/* Toolbar filter row: a label, toggle chips, and a clear control. */
.cms-admin-tag-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 32px;
    border-bottom: 1px solid var(--cms-admin-slate-200);
    background: var(--cms-admin-surface);
}
.cms-admin-tag-filter-label {
    font-size: 12px;
    color: var(--cms-admin-slate-500);
    margin-right: 2px;
}
.cms-admin-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    background: var(--cms-admin-paper);
    color: var(--cms-admin-slate-700);
    border: 1px solid var(--cms-admin-slate-200);
    cursor: pointer;
    font-family: var(--cms-admin-font);
}
.cms-admin-tag-chip:hover { background: var(--cms-admin-slate-100); }
.cms-admin-tag-chip.is-active {
    background: var(--cms-admin-green-soft);
    color: var(--cms-admin-green-deep);
    border-color: var(--cms-admin-green);
}
.cms-admin-tag-chip .cms-admin-tag-dot { background: var(--cms-admin-tag-color, var(--cms-admin-slate-400)); }
.cms-admin-tag-chip-group { font-weight: 400; opacity: 0.6; }
.cms-admin-tag-filter-clear {
    font-size: 12px;
    color: var(--cms-admin-slate-500);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--cms-admin-font);
}
.cms-admin-tag-filter-count {
    font-size: 12px;
    color: var(--cms-admin-slate-500);
    margin-left: auto;
}
.cms-admin-tag-filter-manage {
    margin-left: 6px;
    font-size: 12px;
    color: var(--cms-admin-slate-500);
    text-decoration: none;
    white-space: nowrap;
}
.cms-admin-tag-filter-manage:hover { text-decoration: underline; color: var(--cms-admin-slate-700); }

/* Sites-list status filter — single-select segmented control, mirrors the
   tag-filter bar. Visible to all users (status is not admin-only). */
.cms-admin-status-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 32px;
    border-bottom: 1px solid var(--cms-admin-slate-200);
    background: var(--cms-admin-surface);
}
.cms-admin-status-filter-label {
    font-size: 12px;
    color: var(--cms-admin-slate-500);
    margin-right: 2px;
}
.cms-admin-status-filter-btn {
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    background: var(--cms-admin-paper);
    color: var(--cms-admin-slate-700);
    border: 1px solid var(--cms-admin-slate-200);
    cursor: pointer;
    font-family: var(--cms-admin-font);
}
.cms-admin-status-filter-btn:hover { background: var(--cms-admin-slate-100); }
.cms-admin-status-filter-btn.is-active {
    background: var(--cms-admin-green-soft);
    color: var(--cms-admin-green-deep);
    border-color: var(--cms-admin-green);
}

/* Archived sites read as "parked": dimmed in both views until hovered. */
.cms-admin-table .site-row.status-archived { opacity: 0.55; }
.cms-admin-table .site-row.status-archived:hover { opacity: 1; }
.site-item.status-archived { opacity: 0.6; }
.site-item.status-archived:hover { opacity: 1; }

/* ---- Term picker (page edit form, any taxonomy) — cms-admin-term-* ---- */
/* Chips listing a page's attached terms, above the add-a-term input. */
.cms-admin-term-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cms-admin-term-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: #eef2f7; border: 1px solid #d5dce5;
    font-size: 0.85em; line-height: 1.4;
}
.cms-admin-term-chip button {
    border: none; background: none; padding: 0; cursor: pointer;
    font-size: 1.1em; line-height: 1; color: #64748b;
}
.cms-admin-term-chip button:hover { color: #dc2626; }