/**
 * Blaminhor Essentials Module-Specific Styles
 *
 * @package BlaminhorEssentials
 */

/* ============================================
   Shared Components
   ============================================ */

/* Loop badge / loop row : module-specific, moved to Redirections section. */

/* Import source card pattern (.be-import-source*) codified in _components.css §17 */

/* ============================================
   Common Tab Styles (with URL hash support)
   ============================================ */

/* Spinner: use .be-anim-spin (defined in _components.css). */

/* ============================================
   Image Sizes Module
   ============================================ */

/* All Sizes table — visual state on a row whose size is disabled. */
.be-image-sizes-row--disabled {
    background-color: var(--be-color-danger-soft);
}
.be-image-sizes-row--disabled td {
    color: var(--be-color-gray-400);
}
.be-image-sizes-code--disabled {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Crop column tokens. */
.be-image-sizes-crop--yes { color: var(--be-color-success); }
.be-image-sizes-crop--no  { color: var(--be-color-gray-600); }

/* Source column tokens. */
.be-image-sizes-source--core {
    color: var(--be-color-primary);
    font-weight: var(--be-font-weight-medium);
}
.be-image-sizes-source--theme,
.be-image-sizes-source--plugin {
    color: var(--be-color-gray-600);
}
.be-image-sizes-source--custom {
    color: var(--be-color-info);
    font-weight: var(--be-font-weight-medium);
}

/* Toggle buttons on a registered size row. */
.be-image-sizes-btn--enable {
    background: var(--be-color-danger-soft) !important;
    border-color: var(--be-color-danger) !important;
    color: var(--be-color-danger) !important;
}
.be-image-sizes-btn--enable:hover {
    background: var(--be-color-danger-soft) !important;
    filter: brightness(0.96);
}
.be-image-sizes-btn--enable .dashicons,
.be-image-sizes-btn--disable .dashicons {
    font-size: var(--be-font-size-lg);
    width: var(--be-space-3);
    height: var(--be-space-3);
    vertical-align: text-bottom;
    margin-right: 3px;
}
.be-image-sizes-btn--disable {
    background: var(--be-color-success-soft) !important;
    border-color: var(--be-color-success) !important;
    color: var(--be-color-success) !important;
}
.be-image-sizes-btn--disable:hover {
    background: var(--be-color-success-soft) !important;
    filter: brightness(0.96);
}
.be-image-sizes-btn--delete {
    color: var(--be-color-danger) !important;
    padding: 0 var(--be-space-1) !important;
    min-width: auto !important;
}
.be-image-sizes-btn--delete .dashicons {
    font-size: var(--be-font-size-lg);
    width: var(--be-space-3);
    height: var(--be-space-3);
    vertical-align: text-bottom;
}
.be-image-sizes-btn--delete:hover {
    color: var(--be-color-danger) !important;
    border-color: var(--be-color-danger) !important;
    filter: brightness(0.85);
}

/* "*" required marker next to a label. */
.be-image-sizes-required {
    color: var(--be-color-danger);
}
/* Legacy alias — favicon still uses class="required". */
.required {
    color: var(--be-color-danger);
}

/* Regen / cleanup options blocks (sit between the stat-grid and the controls). */
.be-image-sizes-regen-options,
.be-image-sizes-cleanup-options {
    background: var(--be-color-gray-50);
    padding: var(--be-space-3) var(--be-space-4);
    border-radius: var(--be-radius-md);
    border: 1px solid var(--be-surface-border);
}
.be-image-sizes-regen-options h4,
.be-image-sizes-cleanup-options h4 {
    margin-top: 0;
}

/* Side-by-side action buttons (start / stop). */
.be-image-sizes-controls {
    display: flex;
    gap: var(--be-space-2);
    align-items: center;
}

/* Cleanup checkbox list (column of disabled sizes). */
.be-image-sizes-cleanup-list code {
    background: var(--be-surface-card);
    padding: 2px var(--be-space-1);
    border-radius: var(--be-radius-sm);
    margin-left: var(--be-space-1);
}

/* Action notices (top-of-page banners: "regeneration recommended" / "clean up unused thumbnails"). */
.be-image-sizes-action-notice {
    display: flex;
    align-items: center;
    gap: var(--be-space-3);
    padding: var(--be-space-3) var(--be-space-4);
    border-radius: var(--be-radius-md);
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    box-shadow: var(--be-shadow-card);
}
.be-image-sizes-action-notice--regen {
    border-left: 4px solid var(--be-color-primary);
}
.be-image-sizes-action-notice--cleanup {
    border-left: 4px solid var(--be-color-warning);
}
.be-image-sizes-action-notice__icon {
    flex-shrink: 0;
}
.be-image-sizes-action-notice__icon .dashicons {
    font-size: var(--be-space-5);
    width: var(--be-space-5);
    height: var(--be-space-5);
}
.be-image-sizes-action-notice--regen .be-image-sizes-action-notice__icon .dashicons {
    color: var(--be-color-primary);
}
.be-image-sizes-action-notice--cleanup .be-image-sizes-action-notice__icon .dashicons {
    color: var(--be-color-warning);
}
.be-image-sizes-action-notice__content {
    flex: 1;
}
.be-image-sizes-action-notice__content strong {
    display: block;
    margin-bottom: var(--be-space-1);
}
.be-image-sizes-action-notice__content p {
    margin: 0;
    color: var(--be-text-muted);
}
.be-image-sizes-action-notice__content code {
    background: var(--be-color-gray-50);
    padding: 2px var(--be-space-1);
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-sm);
}
.be-image-sizes-action-notice__actions {
    display: flex;
    gap: var(--be-space-2);
    flex-shrink: 0;
}

/* ----- Shared progress-bar / progress-header / notice-actions ----- */
/* Progress bar pattern (.be-progress-bar*) codified in _components.css §18 */

/* Badge pattern (.be-badge + variants statuts) codified in _components.css §20 */

/* ============================================
   Broken Links Module
   ============================================
   Le markup est passé au design system : classes `.be-broken-links-*`,
   tokens `--be-*`, helpers `render_*`. Toutes les classes legacy
   ont été supprimées (cache était le dernier consommateur). */

.be-broken-links-controls {
    display: flex;
    gap: var(--be-space-2);
    align-items: center;
    margin-bottom: var(--be-space-3);
}

/* Compteur de l'onglet "Scan" (émis par render_tabs_nav() comme
 * `.be-tabs__tab-count`). Le pattern n'est pas encore stylé dans
 * `_components.css` — en attendant qu'un second module en ait besoin,
 * la règle reste scopée au module. */
.be-tabs__tab-count {
    display: inline-block;
    margin-left: var(--be-space-1);
    padding: 0 var(--be-space-2);
    background: var(--be-color-gray-600);
    color: var(--be-text-on-dark);
    border-radius: var(--be-radius-lg);
    font-size: var(--be-font-size-sm);
    font-weight: var(--be-font-weight-semibold);
    line-height: 1.6;
    vertical-align: middle;
}

/* Section progression du scan : header (status / compteur) + barre
 * `.be-progress-bar*` partagés — voir _components.css §18. */
.be-broken-links-progress {
    margin-top: var(--be-space-3);
    margin-bottom: var(--be-space-3);
}

/* Terminal de scan : tout le chrome est apporté par `.be-terminal`
 * (voir `_components.css`). Seul le rythme inter-bloc propre au module
 * reste ici. */
#be-broken-links-log {
    margin-bottom: var(--be-space-3);
}

.be-broken-links-log-title {
    color: var(--be-terminal-line);
    font-weight: var(--be-font-weight-medium);
}

.be-broken-links-log-meta {
    color: var(--be-terminal-muted);
    margin-left: var(--be-space-2);
}

.be-broken-links-url {
    word-break: break-all;
    font-size: var(--be-font-size-sm);
    background: var(--be-color-gray-50);
    padding: var(--be-space-1) var(--be-space-2);
    border-radius: var(--be-radius-sm);
}

.be-broken-links-anchor {
    color: var(--be-text-muted);
}

.be-broken-links-status {
    display: inline-block;
    padding: var(--be-space-1) var(--be-space-2);
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-sm);
}

.be-broken-links-status--error {
    background: var(--be-color-danger-soft);
    color: var(--be-color-danger);
}

.be-broken-links-row--new {
    animation: be-broken-links-row-highlight 2s ease-out;
}

@keyframes be-broken-links-row-highlight {
    0%   { background-color: var(--be-color-danger-soft); }
    100% { background-color: transparent; }
}

/* ============================================
   Favicon Module
   ============================================ */

.be-favicon-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--be-space-2);
}

.be-favicon-file {
    display: flex;
    align-items: flex-start;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-3);
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
}

.be-favicon-file .dashicons-yes { color: var(--be-color-success); }
.be-favicon-file .dashicons-no  { color: var(--be-color-danger); }

.be-favicon-file--missing { opacity: 0.6; }

.be-favicon-file__label { flex: 1; }

.be-favicon-file__link code {
    font-size: var(--be-font-size-xs);
    background: var(--be-color-gray-200);
    padding: 2px var(--be-space-1);
    border-radius: var(--be-radius-sm);
}

/* Shared image-selector pattern : favicon + maintenance. */
.be-image-selector {
    display: flex;
    align-items: center;
    gap: var(--be-space-3);
}

.be-image-preview {
    width: 100px;
    height: 100px;
    border: 2px dashed var(--be-surface-border);
    border-radius: var(--be-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--be-color-gray-50);
    overflow: hidden;
}

.be-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.be-image-preview--empty .dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: var(--be-color-gray-400);
}

/* ============================================
   Content Duplicator Module
   ============================================ */

/* `.duplicator-post-types` is kept as an alias for the not-yet-migrated
 * post-types-order module. Remove the alias when that module switches to
 * `.be-duplicator-post-types` or to its own dedicated class. */
.be-duplicator-post-types,
.duplicator-post-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--be-space-1);
}

.be-duplicator-post-types label,
.duplicator-post-types label {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-2);
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
    cursor: pointer;
    transition: background var(--be-duration) var(--be-ease);
    font-size: var(--be-font-size-md);
}

.be-duplicator-post-types label:hover,
.duplicator-post-types label:hover {
    background: var(--be-color-gray-200);
}

.be-duplicator-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-1);
}

/* ============================================
   Database Optimizer Module
   ============================================ */

/* Backup notice (warning banner + action row above the stat grid). */
.be-db-optimizer-backup-notice {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-2);
}

.be-db-optimizer-backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-space-2);
}

/* Quick Actions buttons row inside the .be-section body. */
.be-db-optimizer-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-space-2);
}

/* Cleanup tab — responsive grid of per-type cleanup cards. */
.be-db-optimizer-cleanup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--be-space-3);
}

.be-db-optimizer-cleanup-card {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    padding: var(--be-space-3);
    transition: box-shadow var(--be-duration) var(--be-ease);
}

.be-db-optimizer-cleanup-card:hover {
    box-shadow: var(--be-shadow-card);
}

.be-db-optimizer-cleanup-header {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-1);
}

.be-db-optimizer-cleanup-header .dashicons {
    color: var(--be-color-primary);
}

.be-db-optimizer-cleanup-title {
    margin: 0;
    font-size: var(--be-font-size-md);
    font-weight: var(--be-font-weight-semibold);
}

.be-db-optimizer-cleanup-desc {
    color: var(--be-text-muted);
    font-size: var(--be-font-size-sm);
    margin: 0 0 var(--be-space-2);
}

.be-db-optimizer-cleanup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--be-space-2);
    border-top: 1px solid var(--be-surface-border);
}

.be-db-optimizer-cleanup-count {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}

/* Tables tab — intro row + sortable widefat table. */
.be-db-optimizer-tables-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--be-space-3);
    flex-wrap: wrap;
    gap: var(--be-space-2);
}

.be-db-optimizer-tables-intro {
    margin: 0;
    color: var(--be-text-muted);
}

#be-db-optimizer-tables-list code {
    background: var(--be-color-gray-50);
    padding: 2px 6px;
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-sm);
}

.be-db-optimizer-overhead--warning {
    color: var(--be-color-danger);
    font-weight: var(--be-font-weight-medium);
}

.be-db-optimizer-overhead--ok {
    color: var(--be-text-muted);
}

/* Inline description warning under a checkbox. */
.be-db-optimizer-desc-danger {
    color: var(--be-color-danger);
}

@media (max-width: 782px) {
    .be-db-optimizer-cleanup-grid {
        grid-template-columns: 1fr;
    }

    .be-db-optimizer-tables-header {
        flex-direction: column;
        gap: var(--be-space-2);
        align-items: flex-start;
    }
}

/* Bloc `.ap-db-modal*` purgé 23/05/2026 — convergence post-Phase 1.
 * 0 consommateur restant après migration de seo-manager + backup + db-optimizer
 * vers `.be-modal-overlay` / `.be-modal__header/__body/__footer`. */

/* ============================================
   Backup Module
   ============================================ */

/* Pre-restore notice action row : sits inside `.be-notice__body`. */
.be-backup-notice-actions {
    display: flex;
    gap: var(--be-space-2);
    flex-wrap: wrap;
    margin-top: var(--be-space-2);
}

/* Create-Backup tab — component selection grid */
.be-backup-options {
    margin-bottom: var(--be-space-3);
}

.be-backup-options__title {
    margin: 0 0 var(--be-space-3);
    font-size: var(--be-font-size-md);
    font-weight: var(--be-font-weight-semibold);
    color: var(--be-text-default);
}

.be-backup-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-space-2);
    align-items: stretch;
}

.be-backup-card {
    display: flex;
    cursor: pointer;
    position: relative;
    width: 180px;
}

.be-backup-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.be-backup-card__inner {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-3);
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    transition: border-color var(--be-duration) var(--be-ease),
                background-color var(--be-duration) var(--be-ease);
    box-sizing: border-box;
    flex: 1;
    width: 100%;
}

.be-backup-card:hover .be-backup-card__inner,
.be-backup-card input:checked + .be-backup-card__inner {
    border-color: var(--be-color-primary);
    background: var(--be-color-primary-soft);
}

.be-backup-card__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--be-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.be-backup-card__icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Backup component icon color variants. */
.be-backup-card__icon--db { background: var(--be-color-primary-soft); }
.be-backup-card__icon--db .dashicons { color: var(--be-color-primary); }
.be-backup-card__icon--plugins { background: var(--be-color-danger-soft); }
.be-backup-card__icon--plugins .dashicons { color: var(--be-color-danger); }
.be-backup-card__icon--themes { background: var(--be-color-success-soft); }
.be-backup-card__icon--themes .dashicons { color: var(--be-color-success); }
.be-backup-card__icon--uploads { background: var(--be-color-warning-soft); }
.be-backup-card__icon--uploads .dashicons { color: var(--be-color-warning); }
.be-backup-card__icon--content { background: var(--be-color-gray-50); }
.be-backup-card__icon--content .dashicons { color: var(--be-text-muted); }
.be-backup-card__icon--core { background: var(--be-color-info-soft); }
.be-backup-card__icon--core .dashicons { color: var(--be-color-info); }

.be-backup-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.be-backup-card__text strong {
    font-size: var(--be-font-size-md);
    font-weight: var(--be-font-weight-semibold);
    color: var(--be-text-default);
    line-height: 1.3;
}

.be-backup-card__text small {
    /* WCAG 2.1 AA : `--be-text-muted` (#6b7280) sits at ~3.6:1 against the
       card's tinted background, missing the 4.5:1 bar. Step one shade darker
       for body text < 14px (which requires the stricter AA-large fallback). */
    color: var(--be-color-gray-900);
    line-height: 1.3;
    font-size: var(--be-font-size-xs);
}

.be-backup-card input:checked + .be-backup-card__inner .be-backup-card__text strong {
    /* Keep `--be-text-default` instead of `--be-color-info` — info on
       info-soft background sits at ~3.6:1, below WCAG 2.1 AA 4.5:1 for body
       text. Visual selection state stays carried by the border + bg tint. */
    color: var(--be-text-default);
}

/* Backup type badge (column "Type" of the backups table). */
.be-backup-type {
    display: inline-block;
    padding: 3px var(--be-space-2);
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-xs);
    font-weight: var(--be-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--be-color-gray-50);
    color: var(--be-text-muted);
}
.be-backup-type--full        { background: var(--be-color-success-soft); color: var(--be-color-success); }
.be-backup-type--database    { background: var(--be-color-primary-soft); color: var(--be-color-primary); }
.be-backup-type--files       { background: var(--be-color-warning-soft); color: var(--be-color-warning); }
.be-backup-type--pre-restore { background: var(--be-color-info-soft);    color: var(--be-color-info); }
.be-backup-type--uploaded    { background: var(--be-color-info-soft);    color: var(--be-color-info); }
.be-backup-type--scheduled   { background: var(--be-color-info-soft);    color: var(--be-color-info); }
.be-backup-type--interrupted { background: var(--be-color-danger-soft);  color: var(--be-color-danger); }

/* Backups table row meta. */
.be-backup-file-prefix { font-size: var(--be-font-size-sm); }
.be-backup-file-meta {
    font-size: var(--be-font-size-xs);
    color: var(--be-text-muted);
    margin-top: 3px;
}
.be-backup-target { color: var(--be-text-muted); }

/* Cell holding the row action buttons. */
.be-backup-actions-cell { white-space: nowrap; }
.be-backup-actions-cell .button + .button { margin-left: var(--be-space-1); }

/* Bulk actions bar (above the backups table). */
.be-backup-bulk-actions {
    display: none;
    margin-bottom: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-3);
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
    align-items: center;
    gap: var(--be-space-2);
}
.be-backup-bulk-actions.is-visible { display: flex; }
.be-backup-bulk-actions__count { font-weight: var(--be-font-weight-semibold); }
.be-backup-bulk-actions__delete-btn { color: var(--be-color-danger); }

/* Backup progress (Create tab + in-list row). */
.be-backup-progress-box {
    background: var(--be-color-primary-soft);
    border: 1px solid var(--be-color-primary);
    border-radius: var(--be-radius-md);
    padding: var(--be-space-3) var(--be-space-4);
}
.be-backup-progress-inner {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-2);
}
.be-backup-progress-label { line-height: 20px; }
.be-backup-in-progress td {
    background: var(--be-color-primary-soft);
    vertical-align: middle;
}
.be-backup-in-progress__spinner-cell { text-align: center; }
.be-backup-in-progress__spinner-cell .spinner { margin: 0; float: none; }
.be-backup-progress-row-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--be-space-3);
    margin-bottom: var(--be-space-2);
}
.be-backup-progress-status { font-weight: var(--be-font-weight-semibold); }
.be-backup-progress-percent {
    color: var(--be-color-primary);
    font-variant-numeric: tabular-nums;
}

/* Create-Backup tab — call-to-action wrap. */
.be-backup-create-action {
    margin: var(--be-space-3) 0 0;
}
.be-backup-create-action .button { display: inline-flex; align-items: center; gap: var(--be-space-1); }
.be-backup-storage-path { margin-top: var(--be-space-3); }
.be-backup-log-toggle-btn { margin-bottom: var(--be-space-2); display: inline-flex; align-items: center; gap: var(--be-space-1); }

/* Restore modal — option list inside the modal body. */
.be-backup-restore-options { margin-top: var(--be-space-2); }
.be-backup-restore-option {
    display: block;
    margin-bottom: var(--be-space-1);
}

/* "Different domain detected" panel inside the restore modal. */
.be-backup-restore-domain {
    margin-top: var(--be-space-3);
    padding: var(--be-space-3);
    background: var(--be-color-warning-soft);
    border-left: 4px solid var(--be-color-warning);
    border-radius: var(--be-radius-sm);
}
.be-backup-restore-domain__title {
    margin: 0 0 var(--be-space-2);
    font-weight: var(--be-font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
}
.be-backup-restore-domain__info {
    margin: 0 0 var(--be-space-2);
    font-size: var(--be-font-size-sm);
}

/* Restore-in-progress strip (inside the modal body). */
.be-backup-restore-progress-box {
    margin-top: var(--be-space-3);
    background: var(--be-color-primary-soft);
    border: 1px solid var(--be-color-primary);
    border-radius: var(--be-radius-sm);
    padding: var(--be-space-3);
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
}

/* Backup log modal — dark terminal body. */
.be-backup-log-modal .be-backup-log-modal__dialog { max-width: 700px; }
.be-backup-log-modal__terminal {
    flex: 1;
    overflow-y: auto;
    max-height: 60vh;
}

/* Schedule grid (Settings tab). */
.be-backup-schedule-options { margin-top: var(--be-space-2); }
.be-backup-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--be-space-3);
    margin: var(--be-space-3) 0;
}
.be-backup-schedule-card {
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    padding: var(--be-space-3) var(--be-space-4);
}
.be-backup-schedule-card__title {
    margin: 0 0 var(--be-space-2);
    font-size: var(--be-font-size-md);
    font-weight: var(--be-font-weight-semibold);
    color: var(--be-text-default);
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
}
.be-backup-schedule-card__title .dashicons { color: var(--be-color-primary); }
.be-backup-schedule-card .description {
    margin: 0;
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}
.be-backup-schedule-field {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-2);
}
.be-backup-schedule-field label {
    font-weight: var(--be-font-weight-medium);
    font-size: var(--be-font-size-sm);
    color: var(--be-text-default);
    min-width: 70px;
}
.be-backup-input-narrow { width: 60px; }
@media (max-width: 782px) {
    .be-backup-schedule-grid {
        grid-template-columns: 1fr;
    }
}

/* Settings tab — stacked checkboxes block (Include by Default group). */
.be-backup-stack-label {
    display: block;
    margin-bottom: var(--be-space-1);
}

/* Upload area (Upload tab). */
.be-backup-upload-area { max-width: 600px; }
.be-backup-upload-dropzone {
    border: 2px dashed var(--be-surface-border);
    border-radius: var(--be-radius-md);
    padding: 40px var(--be-space-4);
    text-align: center;
    background: var(--be-color-gray-50);
    transition: border-color var(--be-duration) var(--be-ease),
                background-color var(--be-duration) var(--be-ease);
    cursor: pointer;
}
.be-backup-upload-dropzone:hover,
.be-backup-upload-dropzone.is-dragover {
    border-color: var(--be-color-primary);
    background: var(--be-color-primary-soft);
}
.be-backup-upload-dropzone .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--be-color-gray-400);
    margin-bottom: var(--be-space-3);
}
.be-backup-upload-dropzone:hover .dashicons,
.be-backup-upload-dropzone.is-dragover .dashicons {
    color: var(--be-color-primary);
}
.be-backup-upload-dropzone p {
    margin: 0 0 var(--be-space-2);
    color: var(--be-text-muted);
    font-size: var(--be-font-size-md);
}
.be-backup-upload-or {
    color: var(--be-color-gray-400);
    font-size: var(--be-font-size-sm);
    text-transform: uppercase;
}
.be-backup-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.be-backup-upload-max { margin-top: var(--be-space-3); }

.be-backup-upload-queue { margin-top: var(--be-space-3); }
.be-backup-upload-queue h4 { margin: 0 0 var(--be-space-2); }
.be-backup-upload-queue__actions {
    display: flex;
    gap: var(--be-space-2);
    margin-top: var(--be-space-2);
}

.be-backup-upload-progress {
    margin-top: var(--be-space-3);
    text-align: center;
}
.be-backup-upload-current-file {
    margin-bottom: var(--be-space-2);
    font-weight: var(--be-font-weight-medium);
}
.be-backup-upload-progress-bar {
    height: 8px;
    background: var(--be-color-gray-200);
    border-radius: var(--be-radius-sm);
    overflow: hidden;
    margin-bottom: var(--be-space-2);
}
.be-backup-upload-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--be-color-primary);
    transition: width var(--be-duration) var(--be-ease);
}
.be-backup-upload-result { margin-top: var(--be-space-3); }

.be-backup-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.be-backup-file-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--be-space-2) var(--be-space-3);
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
    margin-bottom: var(--be-space-1);
}
.be-backup-file-list__name { display: inline-flex; align-items: center; gap: var(--be-space-1); }
.be-backup-file-list__name .dashicons { color: var(--be-color-primary); }
.be-backup-file-list__name small { color: var(--be-text-muted); margin-left: var(--be-space-1); }
.be-backup-remove-file {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--be-color-danger);
    padding: 0;
    display: inline-flex;
    align-items: center;
}

/* Form-guard pattern (.be-unsaved-notice + .be-btn-pulse) codified in _components.css §21 */

/* Legacy modal (.ap-modal*) and important-notes box (.ap-important-notes*) removed
 * 24/05 — 0 consumer after Phase 1 migration. Use .be-modal* and .be-notice* instead. */

/* ============================================
   SEO Manager Module
   ============================================ */

/* SEO Meta Box — post editor */
.be-seo-metabox {
    padding: var(--be-space-3) 0;
}

.be-seo-metabox__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--be-surface-border);
    margin-bottom: var(--be-space-3);
}

.be-seo-metabox__tab {
    padding: var(--be-space-2) var(--be-space-3);
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    background: none;
    font-size: var(--be-font-size-md);
    color: var(--be-text-muted);
    margin-bottom: -1px;
}

.be-seo-metabox__tab:hover {
    color: var(--be-color-primary);
}

.be-seo-metabox__tab.is-active {
    background: var(--be-surface-card);
    border-color: var(--be-surface-border);
    border-bottom-color: var(--be-surface-card);
    color: var(--be-text-default);
    font-weight: var(--be-font-weight-medium);
}

.be-seo-metabox__panel {
    display: none;
}

.be-seo-metabox__panel.is-active {
    display: block;
}

.be-seo-meta-section {
    padding: var(--be-space-3) 0;
    border-bottom: 2px solid var(--be-surface-border);
}

.be-seo-meta-section:first-child {
    padding-top: 0;
}

.be-seo-meta-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.be-seo-meta-section__title {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    font-size: var(--be-font-size-lg);
    font-weight: var(--be-font-weight-semibold);
    color: var(--be-text-default);
    margin: 0 0 var(--be-space-2) 0;
    padding: 0;
}

.be-seo-meta-section__title .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--be-color-primary);
}

.be-seo-field {
    margin-bottom: var(--be-space-3);
}

.be-seo-field label {
    display: block;
    font-weight: var(--be-font-weight-medium);
    margin-bottom: var(--be-space-1);
    color: var(--be-text-default);
}

.be-seo-field__label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.be-seo-field__label-medium {
    font-weight: var(--be-font-weight-medium);
}

.be-seo-field input[type="text"],
.be-seo-field input[type="url"],
.be-seo-field textarea,
.be-seo-field select {
    width: 100%;
}

.be-seo-field textarea {
    min-height: 80px;
    resize: vertical;
}

.be-seo-field .description {
    margin-top: var(--be-space-1);
    color: var(--be-text-muted);
    font-size: var(--be-font-size-sm);
}

.be-seo-char-count {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}

.be-seo-char-count.is-warning {
    color: var(--be-color-warning);
}

.be-seo-char-count.is-error {
    color: var(--be-color-danger);
}

.be-seo-progress {
    height: 4px;
    background: var(--be-color-gray-200);
    border-radius: var(--be-radius-sm);
    margin-top: var(--be-space-1);
    overflow: hidden;
}

.be-seo-progress__bar {
    height: 100%;
    width: 0%;
    background: var(--be-color-success);
    transition: width var(--be-duration) var(--be-ease), background var(--be-duration) var(--be-ease);
}

.be-seo-progress__bar.is-error    { background: var(--be-color-danger); }
.be-seo-progress__bar.is-warning  { background: var(--be-color-warning); }
.be-seo-progress__bar.is-info     { background: var(--be-color-info); }
.be-seo-progress__bar.is-success  { background: var(--be-color-success); }

/* SERP preview — Google search result emulation */
.be-seo-serp {
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
    padding: var(--be-space-3);
    margin-top: var(--be-space-3);
}

.be-seo-serp--tight {
    padding: var(--be-space-2);
    margin-top: var(--be-space-2);
}

.be-seo-serp__header {
    display: flex;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-3);
    align-items: center;
}

.be-seo-serp__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-space-3);
}

.be-seo-serp__grid--stacked {
    flex-direction: column;
}

.be-seo-serp__device {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
    margin-bottom: var(--be-space-1);
}

.be-seo-serp__device .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.be-seo-serp__preview {
    background: var(--be-surface-card);
    border-radius: var(--be-radius-sm);
    font: 400 14px/1.58 arial, sans-serif;
    letter-spacing: normal;
    word-spacing: normal;
    box-sizing: border-box;
}

.be-seo-serp__preview--mobile {
    width: 375px;
    max-width: 375px;
    padding: var(--be-space-3);
}

.be-seo-serp__preview--desktop {
    width: 640px;
    max-width: 640px;
    padding: var(--be-space-3);
}

.be-seo-serp__title {
    /* SERP brand-accurate colors — these emulate Google rendering. */
    color: #1a0dab;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 4px;
}

.be-seo-serp__title:hover {
    text-decoration: underline;
}

.be-seo-serp__url {
    color: #202124;
    font-size: var(--be-font-size-lg);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-2);
}

.be-seo-serp__url-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f3f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.be-seo-serp__url-icon img {
    border-radius: 50%;
    width: 18px;
    height: 18px;
}

.be-seo-serp__url-icon .dashicons {
    color: var(--be-color-gray-600);
}

.be-seo-serp__url-info {
    min-width: 0;
    overflow: hidden;
}

.be-seo-serp__url-text {
    color: #4d5156;
    font-size: var(--be-font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.be-seo-serp__site-name {
    font-size: var(--be-font-size-lg);
    color: #202124;
    line-height: 1.3;
}

.be-seo-serp__desc {
    color: #4d5156;
    font-size: var(--be-font-size-lg);
    font-weight: 400;
    line-height: 1.58;
    cursor: pointer;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.be-seo-serp__desc:hover {
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
}

.be-seo-serp__preview--mobile .be-seo-serp__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.be-seo-serp__preview--desktop .be-seo-serp__desc {
    -webkit-line-clamp: 2;
}

.be-seo-serp__preview--mobile .be-seo-serp__desc {
    -webkit-line-clamp: 3;
}

.be-seo-serp__date {
    color: #70757a;
    font-size: var(--be-font-size-lg);
}

.be-seo-serp__body {
    display: flex;
    gap: var(--be-space-3);
    align-items: flex-start;
}

.be-seo-serp__body .be-seo-serp__desc {
    flex: 1;
    min-width: 0;
}

.be-seo-serp__thumbnail {
    width: 104px;
    height: 104px;
    border-radius: var(--be-radius-lg);
    object-fit: cover;
    flex-shrink: 0;
}

/* Hidden measure node used by JS to compute SERP truncation in the same CSS context. */
.be-seo-serp-measure {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    top: 0;
    left: 0;
    height: auto;
    max-height: none;
    font: 400 14px/1.58 arial, sans-serif;
    letter-spacing: normal;
    word-spacing: normal;
    padding: 0;
    margin: 0;
    border: 0;
    white-space: normal;
    overflow: visible;
    display: block;
    box-sizing: content-box;
}

.be-seo-checkbox {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-2);
}

.be-seo-checkbox input {
    margin: 0;
}

.be-seo-checkbox label {
    display: inline;
    font-weight: var(--be-font-weight-regular);
    margin-bottom: 0;
}

/* Stacked checkbox labels (fieldset rows) */
.be-seo-checkbox-line {
    display: block;
    margin-bottom: var(--be-space-1);
}

/* SEO Content List (settings tab Overview) */
.be-seo-toolbar {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-3);
}

.be-seo-toolbar__label {
    margin-right: var(--be-space-1);
}

.be-seo-content-table td {
    vertical-align: middle;
}

.be-seo-col-title     { width: 22%; }
.be-seo-col-seo-title { width: 18%; }
.be-seo-col-desc      { width: 25%; }
.be-seo-col-keywords  { width: 18%; }
.be-seo-col-index     { width: 8%; }
.be-seo-col-actions   { width: 9%; }

.be-seo-table-empty {
    text-align: center;
    padding: var(--be-space-3);
    color: var(--be-text-muted);
}

.be-seo-not-set {
    color: var(--be-color-gray-600);
}

.be-seo-default-desc {
    color: var(--be-color-gray-600);
    font-style: italic;
}

.be-seo-pagination {
    margin-top: var(--be-space-3);
}

.be-seo-status {
    font-weight: var(--be-font-weight-medium);
}

.be-seo-status--yes {
    color: var(--be-color-success);
}

.be-seo-status--no {
    color: var(--be-color-danger);
}

/* Criteria pips — at-a-glance SEO title / meta description / schema state in
 * the overview Status column. Missing pips are buttons that reuse the row
 * editor (.be-seo-edit-btn) so a click jumps straight to the fix; the hover
 * title explains what is missing and how to resolve it. */
.be-seo-status-cell {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    flex-wrap: wrap;
}
.be-seo-pips {
    display: inline-flex;
    align-items: center;
    gap: var(--be-space-1);
}
.be-seo-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--be-radius-sm);
    line-height: 1;
}
.be-seo-pip .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}
.be-seo-pip--pass {
    background: var(--be-color-success-soft);
    color: var(--be-color-success);
}
.be-seo-pip--miss {
    background: var(--be-color-warning-soft);
    color: var(--be-color-warning);
    border-color: var(--be-color-warning);
    cursor: pointer;
    transition: background var(--be-duration) var(--be-ease),
                color var(--be-duration) var(--be-ease),
                transform var(--be-duration) var(--be-ease);
}
.be-seo-pip--miss:hover,
.be-seo-pip--miss:focus-visible {
    background: var(--be-color-warning);
    color: var(--be-text-on-dark);
    transform: translateY(-1px);
}
.be-seo-pip--miss:focus-visible {
    outline: 2px solid var(--be-color-primary);
    outline-offset: 1px;
}
.be-seo-pip {
    cursor: help;
}
.be-seo-pip--miss {
    cursor: pointer;
}

/* Floating variant of .be-tooltip used for the criteria pips: pinned to the
 * viewport so it escapes the .be-data-view__table-wrap overflow:hidden clip
 * (a plain absolute tooltip would be cut off on the top rows). Positioning is
 * set inline by showPipTip(); this only switches it to fixed + caps the width. */
.be-tooltip--floating {
    position: fixed;
    max-width: 260px;
}

.be-seo-edit-inline {
    cursor: pointer;
    border-bottom: 1px dashed var(--be-color-primary);
}

.be-seo-edit-inline:hover {
    color: var(--be-color-primary);
}

/* Form-submit button row — hidden on tabs without settings (overview, import). */
.be-seo-form-submit {
    margin-top: var(--be-space-3);
}

/* Tab Info inline : équivalent de .be-seo-info quand le contenu est court
 * (1 phrase ≤ 100 caractères) et que le collapse n'apporte rien. Même
 * couleur muted que .be-seo-info__content, sans cadre. */
.be-seo-info-inline {
    margin: 0 0 var(--be-space-3) 0;
    color: var(--be-text-muted);
    font-size: var(--be-font-size-md);
    line-height: var(--be-line-height-base);
}

/* Tab Info Accordion (details/summary) */
.be-seo-info {
    background: var(--be-color-primary-soft);
    border: 1px solid var(--be-surface-border);
    border-left: 4px solid var(--be-color-primary);
    border-radius: var(--be-radius-sm);
    margin-bottom: var(--be-space-3);
    padding: 0;
}

.be-seo-info summary {
    padding: var(--be-space-2) var(--be-space-3);
    cursor: pointer;
    font-size: var(--be-font-size-md);
    color: var(--be-color-primary);
    font-weight: var(--be-font-weight-medium);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
}

.be-seo-info summary::-webkit-details-marker {
    display: none;
}

.be-seo-info summary .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    transition: transform var(--be-duration) var(--be-ease);
}

.be-seo-info[open] summary .dashicons-arrow-right-alt2 {
    transform: rotate(90deg);
}

.be-seo-info__content {
    padding: 0 var(--be-space-3) var(--be-space-2);
    color: var(--be-text-muted);
    font-size: var(--be-font-size-md);
    line-height: 1.6;
    border-top: 1px solid var(--be-surface-border);
}

.be-seo-info__content p {
    margin: var(--be-space-2) 0 0;
}

/* SEO Title Templates — Accordion & Variables */
.be-seo-title-field {
    margin-bottom: var(--be-space-3);
}

.be-seo-title-field > label {
    display: block;
    margin-bottom: var(--be-space-1);
}

.be-seo-accordion {
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
    margin-bottom: var(--be-space-1);
    background: var(--be-surface-card);
}

.be-seo-accordion__header {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-3);
    cursor: pointer;
    user-select: none;
    transition: background var(--be-duration) var(--be-ease);
}

.be-seo-accordion__header:hover {
    background: var(--be-color-gray-50);
}

.be-seo-accordion__header .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--be-text-muted);
    transition: transform var(--be-duration) var(--be-ease);
    flex-shrink: 0;
}

.be-seo-accordion.is-open .be-seo-accordion__header .dashicons {
    transform: rotate(90deg);
}

.be-seo-accordion__header code {
    font-size: var(--be-font-size-xs);
    background: var(--be-color-gray-50);
    padding: 2px var(--be-space-1);
    border-radius: var(--be-radius-sm);
}

.be-seo-accordion__preview {
    margin-left: auto;
    color: var(--be-text-muted);
    font-size: var(--be-font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    font-style: italic;
}

.be-seo-accordion__body {
    display: none;
    padding: 0 var(--be-space-3) var(--be-space-3);
    border-top: 1px solid var(--be-surface-border);
}

.be-seo-accordion.is-open .be-seo-accordion__body {
    display: block;
}

.be-seo-vars {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-space-1);
    margin-top: var(--be-space-2);
}

.be-seo-var-btn {
    display: inline-block;
    padding: 3px var(--be-space-2);
    font-size: var(--be-font-size-sm);
    line-height: 1.4;
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-surface-border);
    border-radius: 12px;
    cursor: pointer;
    color: var(--be-color-primary);
    transition: background-color var(--be-duration) var(--be-ease), border-color var(--be-duration) var(--be-ease);
}

.be-seo-var-btn:hover {
    background: var(--be-color-primary-soft);
    border-color: var(--be-color-primary);
}

.be-seo-var-btn:active {
    background: var(--be-color-primary-soft);
    filter: brightness(0.95);
}

.be-seo-title-preview {
    margin-top: var(--be-space-2);
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
    padding: var(--be-space-1) var(--be-space-2);
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
    border-left: 3px solid var(--be-color-primary);
}

.be-seo-title-preview span {
    color: var(--be-text-default);
    font-weight: var(--be-font-weight-medium);
}

/* SEO Keywords Tags (Meta Box + Edit Modal) */
.be-seo-keywords {
    border: 1px solid var(--be-color-gray-400);
    border-radius: var(--be-radius-sm);
    background: var(--be-surface-card);
    padding: var(--be-space-2);
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-space-1);
    align-items: center;
}

.be-seo-keywords:focus-within {
    border-color: var(--be-color-primary);
    box-shadow: 0 0 0 1px var(--be-color-primary);
}

.be-seo-keywords__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-space-1);
    align-items: center;
}

.be-seo-keyword {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--be-color-primary);
    color: var(--be-text-on-dark);
    padding: 4px var(--be-space-2);
    border-radius: 20px;
    font-size: var(--be-font-size-sm);
    line-height: 1.4;
    white-space: nowrap;
}

.be-seo-keyword__remove {
    background: none;
    border: none;
    color: var(--be-text-on-dark);
    opacity: 0.8;
    cursor: pointer;
    padding: 0 2px;
    font-size: var(--be-font-size-lg);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--be-duration) var(--be-ease);
}

.be-seo-keyword__remove:hover {
    opacity: 1;
}

.be-seo-keywords__input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    flex: 1;
    min-width: 150px;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: var(--be-font-size-md);
}

.be-seo-keywords__input:focus {
    box-shadow: none !important;
}

/* Keywords display in Content Overview table */
.be-seo-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--be-space-1);
}

.be-seo-keyword-badge {
    display: inline-block;
    background: var(--be-color-gray-50);
    color: var(--be-text-muted);
    padding: 2px var(--be-space-2);
    border-radius: 12px;
    font-size: var(--be-font-size-xs);
    line-height: 1.4;
}

/* Edit modal — wider than default to fit SERP previews. */
.be-seo-edit-modal__dialog {
    max-width: 720px;
    width: calc(100vw - 2 * var(--be-space-4));
}

/* Detected schemas list (FAQ / HowTo / Video). */
.be-seo-detected {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-1);
}

.be-seo-detected__item {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
    color: var(--be-color-success);
    font-size: var(--be-font-size-md);
}

/* JSON-LD custom textarea + status indicator. */
.be-seo-schema-json {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--be-font-size-sm);
    min-height: 120px;
}

.be-seo-schema-json__status {
    margin-top: var(--be-space-1);
    font-size: var(--be-font-size-sm);
}

.be-seo-schema-json__status.is-valid {
    color: var(--be-color-success);
}

.be-seo-schema-json__status.is-invalid {
    color: var(--be-color-danger);
}

/* Generated JSON-LD preview blocks. */
.be-seo-schema-preview {
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
    padding: var(--be-space-2);
    margin-bottom: var(--be-space-2);
}

.be-seo-schema-preview__label {
    font-weight: var(--be-font-weight-semibold);
    color: var(--be-color-primary);
    margin-bottom: var(--be-space-1);
    font-size: var(--be-font-size-sm);
}

.be-seo-schema-preview__json {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--be-font-size-xs);
    line-height: 1.5;
    color: var(--be-text-default);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow: auto;
}

/* Sitemap list — Sitemap tab "Active" notice. */
.be-seo-sitemaps {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-1);
    margin-top: var(--be-space-2);
}

.be-seo-sitemap-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-3);
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
}

.be-seo-sitemap-item__info {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    min-width: 0;
    flex: 1;
}

.be-seo-sitemap-item__info code {
    font-size: var(--be-font-size-xs);
    background: var(--be-color-gray-50);
    padding: 2px var(--be-space-1);
    border-radius: var(--be-radius-sm);
    color: var(--be-text-muted);
}

.be-seo-sitemap-item .dashicons {
    color: var(--be-color-primary);
}

.be-seo-sitemap-item .button .dashicons {
    color: inherit;
    font-size: var(--be-font-size-lg);
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* ============================================
   Post Types Order Module
   ============================================ */

/* Toolbar (type selector + actions) above the sortable list. */
.be-pto-toolbar {
    display: flex;
    gap: var(--be-space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--be-space-3);
}

.be-pto-toolbar__label {
    margin-right: var(--be-space-1);
}

/* Loading indicator (dashicon + label). */
.be-pto-loading {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    color: var(--be-text-muted);
    padding: var(--be-space-2) 0;
}

/* Inline label shown next to a .be-toggle on the Settings tab. */
.be-pto-toggle-label {
    margin-left: var(--be-space-2);
    vertical-align: middle;
}

.be-pto-sortable-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.be-pto-sortable-list li {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-3);
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-bottom: none;
    cursor: default;
    transition: background var(--be-duration) var(--be-ease);
}

.be-pto-sortable-list li:first-child {
    border-radius: var(--be-radius-sm) var(--be-radius-sm) 0 0;
}

.be-pto-sortable-list li:last-child {
    border-bottom: 1px solid var(--be-surface-border);
    border-radius: 0 0 var(--be-radius-sm) var(--be-radius-sm);
}

.be-pto-sortable-list li:only-child {
    border-radius: var(--be-radius-sm);
    border-bottom: 1px solid var(--be-surface-border);
}

.be-pto-sortable-list li:hover {
    background: var(--be-color-gray-50);
}

.be-pto-handle {
    cursor: grab;
    color: var(--be-color-gray-400);
    font-size: 18px;
    flex-shrink: 0;
}

.be-pto-handle:hover {
    color: var(--be-color-primary);
}

.be-pto-order-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-sm);
    font-weight: var(--be-font-weight-semibold);
    color: var(--be-text-muted);
    flex-shrink: 0;
}

.be-pto-item-title {
    flex: 1;
    font-weight: var(--be-font-weight-medium);
    color: var(--be-text-default);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.be-pto-item-meta {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
    flex-shrink: 0;
}

.be-pto-status-badge {
    display: inline-block;
    padding: 2px var(--be-space-2);
    border-radius: var(--be-radius-lg);
    font-size: var(--be-font-size-xs);
    font-weight: var(--be-font-weight-medium);
    flex-shrink: 0;
}

.be-pto-status-publish {
    background: var(--be-color-success-soft);
    color: var(--be-color-success);
}

.be-pto-status-draft {
    background: var(--be-color-gray-50);
    color: var(--be-text-muted);
}

.be-pto-status-pending {
    background: var(--be-color-warning-soft);
    color: var(--be-color-warning);
}

.be-pto-status-private {
    background: var(--be-color-info-soft);
    color: var(--be-color-info);
}

.be-pto-placeholder {
    border: 2px dashed var(--be-color-primary);
    background: var(--be-color-primary-soft);
    height: 44px;
    margin: 0;
    list-style: none;
}

.be-pto-sortable-list .ui-sortable-helper {
    box-shadow: var(--be-shadow-card);
    border-radius: var(--be-radius-sm);
    border: 1px solid var(--be-color-primary);
}

/* Admin list table drag & drop (edit.php / edit-tags.php). */
.be-pto-list-handle {
    cursor: grab;
    color: var(--be-color-gray-400);
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: var(--be-space-1);
    vertical-align: middle;
    display: inline-block;
}

.be-pto-list-handle:hover {
    color: var(--be-color-primary);
}

.be-pto-list-placeholder {
    background: var(--be-color-primary-soft) !important;
    border: 2px dashed var(--be-color-primary) !important;
}

.be-pto-list-placeholder td {
    border: none !important;
}

#the-list .ui-sortable-helper {
    background: var(--be-surface-card);
    box-shadow: var(--be-shadow-card);
}

#the-list tr {
    cursor: default;
}

/* WP-native notice dropped under the list-table heading after a successful
 * reorder save on edit.php / edit-tags.php. Tighter margin than core to
 * stay close to the action that triggered it. */
.be-pto-list-notice {
    margin: var(--be-space-1) 0 var(--be-space-3);
}

/* ============================================
   User Role Editor Module
   ============================================ */

/* Layout: sidebar (role list) + main (cap editor). */
.be-user-role-editor-layout {
    display: flex;
    gap: var(--be-space-3);
    min-height: 500px;
}

.be-user-role-editor-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
}

.be-user-role-editor-sidebar__header {
    padding: var(--be-space-2);
    border-bottom: 1px solid var(--be-surface-border);
}

.be-user-role-editor-sidebar__header input {
    width: 100%;
}

.be-user-role-editor-role-list {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

.be-user-role-editor-role-item {
    padding: var(--be-space-2) var(--be-space-2);
    cursor: pointer;
    border-bottom: 1px solid var(--be-surface-border);
    transition: background var(--be-duration) var(--be-ease);
}

.be-user-role-editor-role-item:hover {
    background: var(--be-surface-card);
}

.be-user-role-editor-role-item.is-active {
    background: var(--be-color-primary-soft);
    border-left: 3px solid var(--be-color-primary);
    padding-left: calc(var(--be-space-2) - 3px);
}

.be-user-role-editor-role-item__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.be-user-role-editor-role-item__name {
    font-weight: var(--be-font-weight-medium);
    color: var(--be-text-default);
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
}

.be-user-role-editor-role-item__name .dashicons {
    font-size: var(--be-font-size-lg);
    width: 14px;
    height: 14px;
    color: var(--be-color-warning);
}

.be-user-role-editor-role-item__count {
    background: var(--be-color-gray-200);
    color: var(--be-text-muted);
    padding: 2px var(--be-space-2);
    border-radius: 10px;
    font-size: var(--be-font-size-sm);
}

.be-user-role-editor-sidebar__actions {
    padding: var(--be-space-2);
    border-top: 1px solid var(--be-surface-border);
    display: flex;
    gap: var(--be-space-2);
}

.be-user-role-editor-sidebar__actions .button {
    flex: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--be-space-1);
}

.be-user-role-editor-sidebar__actions .button .dashicons {
    font-size: var(--be-font-size-lg);
    width: 16px;
    height: 16px;
}

/* Main editor panel */
.be-user-role-editor-main {
    flex: 1;
    min-width: 0;
}

.be-user-role-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--be-space-3);
    margin-bottom: var(--be-space-3);
    border-bottom: 1px solid var(--be-surface-border);
}

.be-user-role-editor-header__title {
    margin: 0;
    font-size: var(--be-font-size-lg);
}

.be-user-role-editor-header__actions {
    display: flex;
    gap: var(--be-space-2);
}

.be-user-role-editor-header__actions .button .dashicons {
    font-size: var(--be-font-size-lg);
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-right: 2px;
}

.be-user-role-editor-caps-toolbar {
    display: flex;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-3);
    align-items: center;
}

#be-user-role-editor-cap-search {
    flex: 1;
    max-width: 300px;
}

/* Save notice host: leaves room for inline .be-notice when present. */
#be-user-role-editor-save-notice-host:not(:empty) {
    margin-bottom: var(--be-space-2);
}

/* Capability groups */
.be-user-role-editor-cap-group {
    margin-bottom: var(--be-space-3);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
    overflow: hidden;
}

.be-user-role-editor-cap-group__header {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-2);
    background: var(--be-color-gray-50);
    font-weight: var(--be-font-weight-semibold);
    cursor: pointer;
    user-select: none;
}

.be-user-role-editor-cap-group__toggle {
    font-size: var(--be-font-size-lg);
    width: 16px;
    height: 16px;
    color: var(--be-text-muted);
}

.be-user-role-editor-cap-group__count {
    margin-left: auto;
    background: var(--be-color-primary);
    color: var(--be-text-on-dark);
    padding: 2px var(--be-space-2);
    border-radius: 10px;
    font-size: var(--be-font-size-sm);
    font-weight: var(--be-font-weight-medium);
}

.be-user-role-editor-cap-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--be-space-1);
    padding: var(--be-space-2);
    background: var(--be-surface-card);
}

.be-user-role-editor-cap-group.is-collapsed .be-user-role-editor-cap-list {
    display: none;
}

.be-user-role-editor-cap-item {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
    padding: var(--be-space-1) var(--be-space-2);
    border-radius: var(--be-radius-sm);
    cursor: pointer;
    font-size: var(--be-font-size-md);
}

.be-user-role-editor-cap-item:hover {
    background: var(--be-color-gray-50);
}

.be-user-role-editor-cap-item input {
    margin: 0;
}

/* Capability label display modes */
.be-user-role-editor-cap-item__label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.be-user-role-editor-cap-item__friendly {
    color: var(--be-text-default);
    font-weight: var(--be-font-weight-medium);
}

.be-user-role-editor-cap-item__technical {
    color: var(--be-text-muted);
    font-size: var(--be-font-size-sm);
    font-family: monospace;
}

/* When only technical name is shown */
.be-user-role-editor-cap-item[data-label-mode="technical"] .be-user-role-editor-cap-item__technical {
    font-size: var(--be-font-size-md);
    font-family: inherit;
    color: var(--be-text-default);
}

/* When only friendly name is shown */
.be-user-role-editor-cap-item[data-label-mode="friendly"] .be-user-role-editor-cap-item__friendly {
    font-weight: var(--be-font-weight-regular);
}

/* Adjust padding when both labels shown */
.be-user-role-editor-cap-item[data-label-mode="both"] {
    padding: 6px var(--be-space-2);
}

.be-user-role-editor-cap-item--from-role {
    opacity: 0.5;
}

.be-user-role-editor-footer {
    padding-top: var(--be-space-3);
    margin-top: var(--be-space-3);
    border-top: 1px solid var(--be-surface-border);
}

.be-user-role-editor-footer .button .dashicons {
    font-size: var(--be-font-size-lg);
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-right: var(--be-space-1);
}

/* Users tab */
.be-user-role-editor-users-header {
    display: flex;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-3);
}

.be-user-role-editor-users-header input {
    flex: 1;
    max-width: 300px;
}

/* Import/Export tab */
.be-user-role-editor-import-options {
    margin-bottom: var(--be-space-3);
}

.be-user-role-editor-import-options p {
    margin: var(--be-space-2) 0;
}

/* Custom capabilities tags */
.be-user-role-editor-custom-cap-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--be-space-1);
    background: var(--be-color-primary);
    color: var(--be-text-on-dark);
    padding: var(--be-space-1) var(--be-space-2);
    border-radius: 20px;
    font-size: var(--be-font-size-sm);
    margin: var(--be-space-1) var(--be-space-1) var(--be-space-1) 0;
}

.be-user-role-editor-custom-cap-tag__remove {
    background: none;
    border: none;
    color: var(--be-text-on-dark);
    opacity: 0.8;
    cursor: pointer;
    font-size: var(--be-font-size-lg);
    line-height: 1;
    padding: 0 2px;
}

.be-user-role-editor-custom-cap-tag__remove:hover {
    opacity: 1;
}

.be-user-role-editor-caps-block {
    margin: var(--be-space-3) 0;
}

.be-user-role-editor-row-flex {
    display: flex;
    gap: var(--be-space-2);
    align-items: center;
}

/* User caps modal */
.be-user-role-editor-user-cap-group {
    margin-bottom: var(--be-space-3);
}

.be-user-role-editor-user-cap-group h4 {
    margin: 0 0 var(--be-space-2);
    padding: var(--be-space-2);
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-md);
}

.be-user-role-editor-user-cap-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--be-space-1);
    padding: 0 var(--be-space-2);
}

.be-user-role-editor-user-cap-search {
    display: none;
    width: 100%;
    margin-top: var(--be-space-2);
}

.be-user-role-editor-user-caps-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: var(--be-space-3);
}

/* Modal width modifiers (URE-only consumers of the legacy ap-modal-w*) */
.be-modal.be-user-role-editor-modal--w400 { max-width: 400px; }
.be-modal.be-user-role-editor-modal--w500 { max-width: 500px; }
.be-modal.be-user-role-editor-modal--w600 { max-width: 600px; }

/* Responsive */
@media (max-width: 900px) {
    .be-user-role-editor-layout {
        flex-direction: column;
    }

    .be-user-role-editor-sidebar {
        width: 100%;
    }

    .be-user-role-editor-role-list {
        max-height: 200px;
    }
}

/* ============================================
   Mini Progress Bar (imports, SEO edit)
   ============================================ */
/* Mini progress bar = .be-progress-bar.be-progress-bar--mini — codified in _components.css §18 */

/* ============================================
   Shared Module Layout Components
   ============================================ */

/* Import sources / source card / layout — pattern .be-import-source* codified in _components.css §17 */

/* SMTP module-specific CSS lives at the SMTP Mailer section at the bottom of this file. */

/* Domain Changer - Preview list bullets (preview HTML is generated by JS) */
.be-domain-changer-preview__list {
	margin: var(--be-space-2) 0 0 var(--be-space-3);
	list-style: disc;
}

/* Warning text (description with danger color) — db-optimizer, user-role-editor. */
.be-desc-danger { color: var(--be-color-danger); }

/* Pagination centered — user-role-editor. */
.be-pagination { margin-top: 15px; text-align: center; }

/* Table column widths — shared by image-sizes, broken-links, backup. */
.be-col-checkbox { width: 35px; text-align: center; }
.be-col-actions-sm { width: 100px; }
.be-col-actions-md { width: 160px; }
.be-col-actions-lg { width: 200px; }
.be-col-actions-xl { width: 260px; }

/* Maintenance admin bar badge */
.be-maintenance-bar-badge { background: var(--be-color-danger); color: var(--be-text-on-dark); padding: 0 8px; border-radius: 3px; font-size: var(--be-font-size-sm); }

/* Schema JSON-LD textarea (metabox) */

/* ============================================
   Key Takeaways - Metabox
   ============================================ */

.be-seo-takeaway {
    display: flex;
    gap: var(--be-space-1);
    margin-bottom: var(--be-space-1);
    align-items: center;
}

.be-seo-takeaway input[type="text"] {
    flex: 1;
}

.be-seo-takeaway__remove {
    min-width: 30px;
    padding: 0;
    font-size: 18px;
    line-height: 28px;
    color: var(--be-color-danger);
    cursor: pointer;
}

/* ============================================
   Key Takeaways - Frontend
   ============================================ */

.blaminhor-key-takeaways {
    background: #f0f7ff;
    border-left: 4px solid var(--be-color-primary);
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.blaminhor-key-takeaways-title {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 10px;
    color: var(--be-text-default);
}

.blaminhor-key-takeaways ul {
    margin: 0;
    padding-left: 20px;
}

.blaminhor-key-takeaways li {
    margin-bottom: 4px;
    line-height: 1.6;
}

/* ============================================
   Table of Contents - Frontend
   ============================================ */

.blaminhor-toc {
    background: #f8f9fa;
    border: 1px solid var(--be-surface-border);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
    max-width: 600px;
}

.blaminhor-toc-title {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 10px;
    color: var(--be-text-default);
}

.blaminhor-toc-list {
    margin: 0;
    padding-left: 22px;
}

.blaminhor-toc-list ol,
.blaminhor-toc-list ul {
    padding-left: 18px;
    margin: 2px 0;
}

.blaminhor-toc-list li {
    margin-bottom: 3px;
    line-height: 1.5;
}

.blaminhor-toc-list a {
    text-decoration: none;
    color: var(--be-color-primary);
}

.blaminhor-toc-list a:hover {
    text-decoration: underline;
}

.blaminhor-toc-plain {
    list-style: none;
    padding-left: 0;
}

/* ============================================
   GEO Score - Metabox
   ============================================ */

.be-seo-score__loading {
    color: var(--be-text-muted);
    font-style: italic;
    padding: var(--be-space-2) 0;
}

.be-seo-score__header {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-2);
}

.be-seo-score__value {
    font-size: var(--be-font-size-xl);
    font-weight: var(--be-font-weight-semibold);
    white-space: nowrap;
}

/* Score variant tints — applied to value + bar fill via the parent .be-seo-score--* class. */
.be-seo-score--success .be-seo-score__value     { color: var(--be-color-success); }
.be-seo-score--warning .be-seo-score__value     { color: var(--be-color-warning); }
.be-seo-score--danger  .be-seo-score__value     { color: var(--be-color-danger); }
.be-seo-score--success .be-seo-score__bar-fill  { background: var(--be-color-success); }
.be-seo-score--warning .be-seo-score__bar-fill  { background: var(--be-color-warning); }
.be-seo-score--danger  .be-seo-score__bar-fill  { background: var(--be-color-danger); }

.be-seo-score__bar {
    flex: 1;
    height: 8px;
    background: var(--be-color-gray-200);
    border-radius: var(--be-radius-sm);
    overflow: hidden;
}

.be-seo-score__bar-fill {
    height: 100%;
    border-radius: var(--be-radius-sm);
    transition: width var(--be-duration) var(--be-ease);
}

.be-seo-score__section {
    margin-bottom: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-2);
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
}

.be-seo-score__section-header {
    display: flex;
    justify-content: space-between;
    font-weight: var(--be-font-weight-semibold);
    font-size: var(--be-font-size-md);
    margin-bottom: var(--be-space-1);
    color: var(--be-text-default);
}

.be-seo-score__section-pts {
    color: var(--be-text-muted);
    font-weight: var(--be-font-weight-regular);
}

.be-seo-score__item {
    font-size: var(--be-font-size-sm);
    line-height: 1.8;
    color: var(--be-text-default);
}

.be-seo-score__source {
    color: var(--be-color-gray-400);
    text-decoration: none;
    vertical-align: middle;
}

.be-seo-score__source:hover {
    color: var(--be-color-primary);
}

.be-seo-score__source .dashicons {
    font-size: var(--be-font-size-sm);
    width: 12px;
    height: 12px;
    line-height: 12px;
}

.be-seo-score__pass {
    color: var(--be-color-success);
    font-weight: var(--be-font-weight-semibold);
    margin-right: 4px;
}

.be-seo-score__fail {
    color: var(--be-color-danger);
    font-weight: var(--be-font-weight-semibold);
    margin-right: 4px;
}

.be-seo-score__actions {
    display: flex;
    align-items: center;
    gap: var(--be-space-3);
    margin-top: var(--be-space-1);
    background: var(--be-color-primary-soft);
    border: 1px solid var(--be-surface-border);
    border-left: 4px solid var(--be-color-primary);
    border-radius: var(--be-radius-sm);
    padding: var(--be-space-2) var(--be-space-3);
}

.be-seo-score__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--be-space-1);
    font-size: var(--be-font-size-md);
    font-weight: var(--be-font-weight-medium);
    color: var(--be-color-primary);
    text-decoration: none;
    cursor: pointer;
}

.be-seo-score__toggle:hover {
    color: var(--be-color-primary-hover);
}

.be-seo-score__toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    transition: transform var(--be-duration) var(--be-ease);
}

.be-seo-score__toggle .dashicons.is-rotated {
    transform: rotate(90deg);
}

.be-seo-score__refresh {
    display: inline-flex;
    align-items: center;
    gap: var(--be-space-1);
    font-size: var(--be-font-size-md);
    font-weight: var(--be-font-weight-medium);
    color: var(--be-text-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.be-seo-score__refresh:hover {
    color: var(--be-color-primary);
}

.be-seo-score__refresh .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

.be-seo-score__refresh.is-spinning .dashicons {
    animation: be-spin 1s linear infinite;
}

.be-seo-score__details {
    display: none;
    margin-top: var(--be-space-2);
}

.be-seo-score__note {
    margin: var(--be-space-2) 0 0;
    padding: var(--be-space-1) 0 0;
    border-top: 1px solid var(--be-surface-border);
    font-size: var(--be-font-size-xs);
    font-style: italic;
    color: var(--be-text-muted);
    line-height: 1.5;
}

/* -------------------------------------------------------------------- */
/*  Cache module — Preload status banner                                 */
/* -------------------------------------------------------------------- */
.be-preload-banner {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-left: 3px solid var(--be-color-primary);
    border-radius: var(--be-radius-sm);
    margin: var(--be-space-1) 0 var(--be-space-2);
    padding: 6px var(--be-space-3);
}
.be-preload-banner-header {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
}
.be-preload-banner-icon {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--be-color-primary);
}
.be-preload-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--be-space-1) var(--be-space-2);
}
.be-preload-banner-title {
    font-size: var(--be-font-size-sm);
    font-weight: 600;
    line-height: 1.4;
}
.be-preload-banner-meta {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}
.be-preload-banner-toggle {
    flex: 0 0 auto;
    text-decoration: none;
    font-size: var(--be-font-size-sm);
}
.be-preload-banner-dismiss {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--be-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--be-radius-sm);
}
.be-preload-banner-dismiss:hover { background: rgba(0, 0, 0, 0.05); color: var(--be-text-default); }
.be-preload-banner-toggle-hide,
.be-preload-banner.be-preload-banner-collapsed .be-preload-banner-toggle-show {
    display: inline;
}
.be-preload-banner-toggle-show,
.be-preload-banner.be-preload-banner-collapsed .be-preload-banner-toggle-hide {
    display: none;
}
.be-preload-banner-progress {
    margin-top: var(--be-space-1);
    height: 2px;
    background: var(--be-color-gray-50);
    border-radius: 1px;
    overflow: hidden;
}
.be-preload-banner-progress-bar {
    height: 100%;
    background: var(--be-color-primary);
    transition: width var(--be-duration) var(--be-ease);
}
/* Fully preloaded — hide the progress bar, the title already says so. */
.be-preload-banner[data-progress="100"] .be-preload-banner-progress {
    display: none;
}

/* -------------------------------------------------------------------- */
/*  Cache module — Editor entry-point CTA (classic settings page header) */
/* -------------------------------------------------------------------- */
.be-cache-editor-cta {
    display: flex;
    align-items: center;
    gap: var(--be-space-3);
    padding: var(--be-space-2) var(--be-space-3);
    margin: var(--be-space-1) 0 var(--be-space-2);
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-left: 3px solid var(--be-color-primary);
    border-radius: var(--be-radius-sm);
}
.be-cache-editor-cta__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--be-space-2);
    align-items: baseline;
}
.be-cache-editor-cta__text strong {
    font-size: var(--be-font-size-sm);
    font-weight: 600;
}
.be-cache-editor-cta__text span {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}
.be-cache-editor-cta .button {
    flex-shrink: 0;
}
.be-preload-banner-details {
    margin-top: var(--be-space-2);
    padding-top: var(--be-space-2);
    border-top: 1px solid var(--be-surface-border);
}
.be-preload-banner-details .description {
    margin: 0;
}
.be-preload-banner.be-preload-banner-collapsed .be-preload-banner-details {
    display: none;
}
/* "Off" state — softer accent, not a warning. */
.be-preload-banner[data-progress="0"] {
    border-left-color: var(--be-color-gray-400);
}
.be-preload-banner[data-progress="0"] .be-preload-banner-icon {
    background: var(--be-color-gray-400);
    box-shadow: none;
}
.be-preload-banner[data-progress="0"] .be-preload-banner-progress-bar {
    background: var(--be-color-gray-400);
}

/* -------------------------------------------------------------------- */
/*  Cache module — Cached pages table (Preload tab)                      */
/* -------------------------------------------------------------------- */
.be-cached-pages {
    margin-top: var(--be-space-3);
}
.be-cached-pages-header {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--be-space-1);
}
.be-cached-pages-header h3 {
    margin: 0;
}
.be-cached-pages-search {
    flex: 1 1 220px;
    max-width: 320px;
}
.be-cached-pages-count {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
    margin: 0 0 var(--be-space-1);
}
.be-cached-pages-pager {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
    margin-top: var(--be-space-2);
}
.be-cached-pages-position {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}
.be-cached-pages-empty {
    text-align: center;
    color: var(--be-text-muted);
    padding: var(--be-space-4) !important;
}
.be-cached-pages-kind {
    display: inline-block;
    padding: 1px var(--be-space-1);
    margin-left: var(--be-space-1);
    border-radius: 2px;
    font-size: 10px;
    text-transform: uppercase;
    background: var(--be-color-gray-50);
    color: var(--be-text-muted);
    vertical-align: middle;
}

/* -------------------------------------------------------------------- */
/*  Critical CSS — error cells                                           */
/* -------------------------------------------------------------------- */
.be-critical-cell-error {
    color: var(--be-color-danger);
    font-style: normal;
    cursor: help;
}
.be-critical-cell-error::before {
    content: "";
    display: inline-block;
    width: var(--be-space-1);
    height: var(--be-space-1);
    margin-right: var(--be-space-1);
    border-radius: 50%;
    background: var(--be-color-danger);
    vertical-align: middle;
    opacity: .7;
}

/* Cookies — color picker fields (light + dark theme tabs) */
.be-cookies-color-grid {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-2);
    margin-top: var(--be-space-1);
}
.be-cookies-color-row {
    display: flex;
    align-items: center;
    gap: var(--be-space-3);
}
.be-cookies-color-label {
    min-width: 140px;
    color: var(--be-text-default);
    font-size: var(--be-font-size-md);
}
/* Color picker (swatch + hex input) — favicon + maintenance. */
.be-color-control {
    display: inline-flex;
    align-items: center;
    gap: var(--be-space-1);
}
.be-color-swatch {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
    background: none;
    cursor: pointer;
    vertical-align: middle;
}
.be-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.be-color-swatch::-webkit-color-swatch { border: none; border-radius: 3px; }
.be-color-swatch::-moz-color-swatch { border: none; border-radius: 3px; }
.be-color-hex {
    width: 90px;
    font-family: var(--be-font-mono);
    font-size: var(--be-font-size-md);
    text-transform: uppercase;
    padding: 3px var(--be-space-1);
}
.be-color-hex--invalid {
    border-color: var(--be-color-danger) !important;
    box-shadow: 0 0 0 1px var(--be-color-danger);
}

/* Cookies — services list (Services tab) */
.be-cookies-services__category {
    margin: var(--be-space-3) 0 var(--be-space-1);
    font-size: var(--be-font-size-lg);
}
.be-cookies-services__category:first-child {
    margin-top: var(--be-space-1);
}
.be-cookies-services__table .check-column {
    width: var(--be-space-5);
    text-align: center;
    padding: var(--be-space-2) 0;
}
.be-cookies-services__table .check-column input[type="checkbox"] {
    margin: 0;
}
.be-cookies-services__table thead .check-column {
    border-bottom: 1px solid var(--be-surface-border);
}
.be-cookies-list {
    margin: var(--be-space-2) 0 var(--be-space-2) var(--be-space-4);
}

/* ============================================
   Inline-style extraction — shared static classes
   (replaces former style="" attributes in module markup)
   ============================================ */

/* Column widths shared across modules (cache, seo-manager, user-role-editor,
 * broken-links). The smaller widths previously living here were cache-only
 * and have moved into the .be-cache-* section. */
.be-col-15 { width: 15%; }
.be-col-20 { width: 20%; }
.be-col-25 { width: 25%; }

/* ============================================
   Fatal Error Recovery Module
   ============================================ */

/* Recovery URL box — highlighted container around the read-only URL field
   and its action buttons. Sits inside .be-section__body. */
.be-fer-recovery-url {
    padding: var(--be-space-3);
    background: var(--be-color-primary-soft);
    border: 1px solid var(--be-color-primary);
    border-radius: var(--be-radius-md);
}
.be-fer-recovery-url__row {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    flex-wrap: wrap;
}
.be-fer-url-input {
    flex: 1;
    min-width: 240px;
    font-family: monospace;
}

/* Numbered steps in the "How It Works" section. */
.be-fer-steps {
    margin-left: var(--be-space-4);
    line-height: 2;
}

/* Admin-bar shield icon (top-right WP bar shortcut). */
.be-fer-admin-bar-icon {
    font-family: dashicons;
    font-size: var(--be-font-size-xl);
    margin-top: 2px;
}

/* --- Cookies diagnostic --- */
.be-cookies-diag-status {
    margin-left: var(--be-space-3);
    color: var(--be-text-muted);
}
.be-cookies-diag-group + .be-cookies-diag-group {
    margin-top: var(--be-space-3);
}
.be-cookies-diag-group__title {
    margin: 0 0 var(--be-space-2);
}
.be-cookies-diag-group__title--danger { color: var(--be-color-danger); }
.be-cookies-diag-group__title--success { color: var(--be-color-success); }
.be-cookies-diag-group__title--muted { color: var(--be-text-muted); }
.be-cookies-diag-count {
    font-weight: var(--be-font-weight-regular);
    color: var(--be-text-muted);
    margin-left: var(--be-space-1);
}
.be-cookies-diag-faint {
    opacity: 0.7;
    font-size: var(--be-font-size-sm);
}
.be-cookies-diag-url {
    font-size: var(--be-font-size-xs);
}

/* ============================================
   Cache & Performance Module
   ============================================
   Markup migré au design system : helpers `render_*`, classes `.be-cache-*`,
   tokens `--be-*`. Les patterns transverses (`be-toggle`, `be-notice`,
   `be-modal`, `be-tabs`) sont définis dans `_components.css`. Seules les
   pièces propres au module restent ici. */

/* --- Status colour utilities — used by inline status spans, JS-rendered
       feedback, the health-check summary, and the watchdog log row.
       Tokens only — never paste a hex from a design Figma here. */
.be-cache-status--success { color: var(--be-color-success); }
.be-cache-status--warning { color: var(--be-color-warning); }
.be-cache-status--danger  { color: var(--be-color-danger); }
.be-cache-status--info    { color: var(--be-color-info); }
.be-cache-status--muted   { color: var(--be-text-muted); }
.be-cache-status-strong { font-weight: var(--be-font-weight-semibold); }
.be-cache-status-label { font-weight: var(--be-font-weight-semibold); }

/* Coloured dot used in the Advanced tab "Drop-in" row. Identical glyph,
   variant changes the colour. */
.be-cache-status-dot { font-size: var(--be-font-size-md); }
.be-cache-status-dot--success { color: var(--be-color-success); }
.be-cache-status-dot--warning { color: var(--be-color-warning); }
.be-cache-status-dot--danger  { color: var(--be-color-danger); }

/* Description paragraphs that carry a soft warning tint (Heartbeat,
   Delay-JS risk, …). Avoid `.be-notice--warning` here because the markup
   is a `<p class="description">` inside a form-table cell. */
.be-cache-desc-warning { color: var(--be-color-warning); }

/* "Locked" label wrapper — applied when Critical CSS async loading
   cannot be enabled yet. Mirrors the old inline `opacity:0.55` look. */
.be-cache-locked {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Help cursor on the (i) hint icon in the Preload tab table header. */
.be-cache-help-cursor {
    cursor: help;
    color: var(--be-text-muted);
    font-weight: var(--be-font-weight-regular);
}

/* Indented <pre><code> snippet used to surface the WP_CACHE line. */
.be-cache-pre-define {
    margin: 0 0 0 var(--be-space-4);
}

/* Inline status pill — small label next to a button while AJAX runs. */
.be-cache-inline-status {
    margin-left: var(--be-space-2);
    color: var(--be-text-muted);
}

/* Compact label used inline next to a checkbox under a multi-row form table
   (Theme & builder compatibility cell). */
.be-cache-label-inline-top {
    margin-top: var(--be-space-1);
    display: inline-block;
}

/* "Pre-filled from your SEO module" hint under the sitemap URL. */
.be-cache-status-hint {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
}
.be-cache-status-hint--success { color: var(--be-color-success); }
.be-cache-status-hint .dashicons {
    font-size: var(--be-font-size-lg);
    width: auto;
    height: auto;
}

/* --- Audit tab: two-column comparison of PSI vs internal --- */
.be-cache-audit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--be-space-3);
    margin-bottom: var(--be-space-3);
}
@media (max-width: 782px) {
    .be-cache-audit-grid { grid-template-columns: 1fr; }
}
.be-cache-audit-card {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    box-shadow: var(--be-shadow-card);
    padding: var(--be-space-3);
}
.be-cache-audit-card__title { margin-top: 0; }
.be-cache-audit-details { margin: var(--be-space-2) 0; }
.be-cache-audit-step-note { margin: var(--be-space-2) 0 0; }
.be-cache-audit-steps { margin: var(--be-space-2) 0 0 var(--be-space-4); }

/* PSI test status box appended after the "Test" button. */
.be-cache-psi-test-status {
    margin-top: var(--be-space-2);
    font-size: var(--be-font-size-md);
    line-height: 1.5;
}
.be-cache-notice-inline {
    margin: 0;
    padding: var(--be-space-2) var(--be-space-3);
}

/* PSI score history block. */
.be-cache-audit-history-title {
    margin-top: var(--be-space-3);
}
.be-cache-delta {
    margin-left: var(--be-space-2);
    font-size: var(--be-font-size-md);
    font-weight: var(--be-font-weight-regular);
}
.be-cache-delta--up   { color: var(--be-color-success); }
.be-cache-delta--down { color: var(--be-color-danger); }
.be-cache-delta--flat { color: var(--be-text-muted); }
.be-cache-chart-graph {
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
}

/* Watchdog status under the "Check rendering now" button. */
.be-cache-watchdog-ok {
    margin-top: var(--be-space-2);
    color: var(--be-color-success);
}
.be-cache-watchdog-details { margin-top: var(--be-space-2); }

/* --- Files tab: Critical CSS templates table + extractor iframe --- */
.be-cache-critical-table { max-width: 900px; }
.be-cache-critical-status { margin-left: var(--be-space-3); }
/* The Critical CSS extractor renders the target URL in a sandboxed iframe
   pinned off-screen. visibility:hidden so it cannot steal focus, fixed
   position so it never affects page layout. */
.be-cache-critical-iframe-offscreen {
    position: fixed;
    top: -10000px;
    left: -10000px;
    width: 1280px;
    height: 720px;
    visibility: hidden;
}

/* --- Preload tab: live progress + table columns --- */
.be-cache-progress-wrap { margin-top: var(--be-space-3); }
.be-cache-preload-table { margin-top: var(--be-space-3); }
.be-cache-col-10 { width: 10%; }
.be-cache-col-14 { width: 14%; }
.be-cache-col-60 { width: 60%; }
.be-cache-url-code {
    word-break: break-all;
    font-size: var(--be-font-size-sm);
    background: var(--be-color-gray-50);
    padding: var(--be-space-1) var(--be-space-2);
    border-radius: var(--be-radius-sm);
}

/* Status badges inside the Preload live table and Cached pages table.
   Variants follow the BE colour semantics, no hex inline. */
.be-cache-status-badge {
    display: inline-block;
    padding: var(--be-space-1) var(--be-space-2);
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-sm);
}
.be-cache-status-badge--success {
    background: var(--be-color-success-soft);
    color: var(--be-color-success);
}
.be-cache-status-badge--warning {
    background: var(--be-color-warning-soft);
    color: var(--be-color-warning);
}
.be-cache-status-badge--danger {
    background: var(--be-color-danger-soft);
    color: var(--be-color-danger);
}
.be-cache-status-badge--info {
    background: var(--be-color-info-soft);
    color: var(--be-color-info);
}

/* --- Web Vitals tab: per-metric chart cards + SVG block --- */
.be-cache-rum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--be-space-3);
}
@media (max-width: 782px) {
    .be-cache-rum-grid { grid-template-columns: 1fr; }
}
.be-cache-rum-card {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    box-shadow: var(--be-shadow-card);
    padding: var(--be-space-2);
}
.be-cache-rum-empty { margin: var(--be-space-2) 0 0; }
.be-cache-rum-svg { width: 100%; height: auto; display: block; }
.be-cache-rum-worst { max-width: 1000px; }

/* --- Advanced tab: health-check report --- */
.be-cache-summary-toggle {
    cursor: pointer;
    color: var(--be-text-muted);
}
.be-cache-health-json-payload {
    font-family: Consolas, Monaco, monospace;
    font-size: var(--be-font-size-xs);
}
.be-cache-health-group-title {
    margin: var(--be-space-3) 0 var(--be-space-1);
    text-transform: capitalize;
}
.be-cache-health-table { margin-bottom: var(--be-space-1); }
.be-cache-health-col-status { width: 80px; }
.be-cache-health-col-label { width: 32%; }
.be-cache-health-id {
    font-size: var(--be-font-size-xs);
    color: var(--be-text-muted);
}
.be-cache-health-details { margin-top: var(--be-space-1); }
.be-cache-health-details-summary {
    cursor: pointer;
    color: var(--be-text-muted);
    font-size: var(--be-font-size-xs);
}
.be-cache-health-details-pre {
    white-space: pre-wrap;
    font-size: var(--be-font-size-xs);
    margin: var(--be-space-1) 0 0;
}
.be-cache-health-env { margin-top: var(--be-space-3); }
.be-cache-health-badge {
    display: inline-block;
    padding: 2px var(--be-space-2);
    border-radius: var(--be-radius-sm);
    color: var(--be-text-on-dark);
    font-size: var(--be-font-size-xs);
    font-weight: var(--be-font-weight-semibold);
    text-transform: uppercase;
}
.be-cache-health-badge--success { background: var(--be-color-success); }
.be-cache-health-badge--danger  { background: var(--be-color-danger); }
.be-cache-health-badge--warning { background: var(--be-color-warning); }
.be-cache-health-badge--muted   { background: var(--be-text-muted); }

/* Builder-compat badge column. Match the visual weight of the WP-native
   "Active" pill, but with BE tokens. */
.be-cache-builder-badge {
    display: inline-block;
    padding: 2px var(--be-space-2);
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-sm);
}
.be-cache-builder-badge--active {
    background: var(--be-color-success-soft);
    color: var(--be-color-success);
}
.be-cache-builder-badge--warn {
    background: var(--be-color-warning-soft);
    color: var(--be-color-warning);
    margin-left: var(--be-space-1);
}
.be-cache-builder-badge--off {
    background: var(--be-color-gray-200);
    color: var(--be-text-muted);
}

/* Misc utility — monospace one-liner used in the watchdog log row. */
.be-cache-code-xs { font-size: var(--be-font-size-xs); }

/* Dashicon inline helpers used by JS-rendered fragments. Re-creates the
   look of the old `style="vertical-align:text-bottom;font-size:14px;..."`
   without paste-ing the inline rule on every span. */
.be-cache-dashicon-inline {
    vertical-align: text-bottom;
    margin-right: var(--be-space-1);
    font-size: var(--be-font-size-lg);
    width: var(--be-font-size-lg);
    height: var(--be-font-size-lg);
    line-height: 1;
}
.be-cache-dashicon-sm {
    vertical-align: text-bottom;
    font-size: var(--be-font-size-lg);
    width: var(--be-font-size-lg);
    height: var(--be-font-size-lg);
    line-height: 1;
}
.be-cache-dashicon-lg {
    vertical-align: text-bottom;
    margin-right: var(--be-space-1);
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
    color: var(--be-color-success);
}
.be-cache-spinner-inline {
    float: none;
    margin: 0 var(--be-space-1) 0 0;
}

/* Status message tints inside the import/export status zone. */
.be-cache-import-msg { font-weight: var(--be-font-weight-medium); }

/* --- Redirections --- */

/* Slug-change admin notice (lives at admin-wide level, not inside .be-module-page). */
.be-redirections-promo { padding: var(--be-space-2); }
.be-redirections-promo__label {
    margin: 0 0 var(--be-space-2);
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.be-redirections-promo__text { margin: 0 0 var(--be-space-2); }
.be-redirections-promo__note {
    margin: 0 0 var(--be-space-2);
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}
.be-redirections-promo__actions { margin: 0; display: flex; gap: var(--be-space-2); flex-wrap: wrap; }

/* Toolbar above the table. */
.be-redirections-toolbar {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-bottom: var(--be-space-3);
}

/* Bulk actions bar (shown when at least one row is checked). */
.be-redirections-bulk-actions {
    display: none;
    align-items: center;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-3);
    margin-bottom: var(--be-space-2);
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
}
.be-redirections-bulk-actions.is-visible { display: flex; }
.be-redirections-bulk-actions__count { font-weight: var(--be-font-weight-semibold); }
.be-redirections-bulk-delete-btn { color: var(--be-color-danger); }

/* Table column widths + status row. */
.be-redirections-col--check { width: 30px; }
.be-redirections-col--url { width: 32%; word-break: break-all; }
.be-redirections-col--type { width: 8%; }
.be-redirections-col--hits { width: 7%; }
.be-redirections-col--actions { width: 15%; white-space: nowrap; }
.be-redirections-table-status {
    text-align: center;
    padding: var(--be-space-3) var(--be-space-2);
    color: var(--be-text-muted);
}
.be-redirections-table-status--error { color: var(--be-color-danger); }
.be-redirections-url {
    font-size: var(--be-font-size-sm);
    background: var(--be-color-gray-50);
}

/* Loop row + loop badge. */
.be-redirections-loop-row { background-color: var(--be-color-warning-soft) !important; }
.be-redirections-loop-badge {
    display: inline-block;
    margin-left: var(--be-space-1);
    padding: 1px 7px;
    font-size: var(--be-font-size-sm);
    font-weight: var(--be-font-weight-semibold);
    color: var(--be-color-warning);
    background: var(--be-color-warning-soft);
    border-radius: var(--be-radius-sm);
    vertical-align: middle;
}
.be-redirections-loop-badge .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
    vertical-align: middle;
}

/* Pagination row. */
.be-redirections-pagination {
    margin-top: var(--be-space-3);
    display: flex;
    gap: var(--be-space-1);
    flex-wrap: wrap;
}

/* ============================================
   Classic Editor Module
   ============================================ */
.be-editor-choice { display: inline-flex; flex-wrap: wrap; gap: var(--be-space-1) var(--be-space-3); }
.be-editor-choice__option { display: inline-flex; align-items: center; gap: 4px; margin-right: var(--be-space-3); }
.be-editor-choice__option:last-child { margin-right: 0; }

/* ============================================
   SMTP Mailer Module
   ============================================ */

/* General settings form — 2 columns + a horizontal options row. */
.be-smtp-general-form .be-smtp-settings-row {
    display: flex;
    gap: var(--be-space-4);
    margin-bottom: var(--be-space-3);
}
.be-smtp-general-form .be-smtp-setting-col {
    flex: 1;
    max-width: 320px;
}
.be-smtp-field-label {
    display: block;
    font-size: var(--be-font-size-md);
    font-weight: var(--be-font-weight-semibold);
    color: var(--be-text-default);
    margin-bottom: var(--be-space-1);
}
.be-smtp-general-form .be-smtp-setting-col input[type="email"],
.be-smtp-general-form .be-smtp-setting-col input[type="text"] {
    width: 100%;
    margin-bottom: var(--be-space-2);
}
.be-smtp-options-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--be-space-2);
    padding-top: var(--be-space-2);
    border-top: 1px solid var(--be-surface-border);
}
.be-smtp-option-separator {
    color: var(--be-color-gray-400);
}
.be-smtp-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--be-space-1);
    font-size: var(--be-font-size-md);
    color: var(--be-text-default);
    cursor: pointer;
}
.be-smtp-checkbox-inline input[type="checkbox"] {
    margin: 0;
}
.be-smtp-retention-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--be-space-1);
    font-size: var(--be-font-size-md);
    color: var(--be-text-default);
}
.be-smtp-retention-input {
    width: 60px;
}
.be-smtp-save-btn {
    margin-left: auto;
}

@media (max-width: 782px) {
    .be-smtp-general-form .be-smtp-settings-row { flex-direction: column; gap: var(--be-space-3); }
    .be-smtp-general-form .be-smtp-setting-col { max-width: 100%; }
    .be-smtp-options-row { flex-direction: column; align-items: flex-start; }
    .be-smtp-option-separator { display: none; }
    .be-smtp-save-btn { margin-left: 0; margin-top: var(--be-space-2); }
}

/* Provider select + compare link. */
.be-smtp-provider-select-wrapper {
    margin-bottom: var(--be-space-3);
}
.be-smtp-provider-select-row {
    display: flex;
    align-items: center;
    gap: var(--be-space-3);
}
.be-smtp-provider-select {
    min-width: 250px;
}
.be-smtp-compare-link {
    color: var(--be-color-primary);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--be-font-size-md);
}
.be-smtp-compare-link:hover {
    color: var(--be-color-primary-hover);
}

/* Provider tutorial block. */
.be-smtp-tutorial {
    margin: 0 0 var(--be-space-3);
    padding: var(--be-space-3) var(--be-space-4);
    background: var(--be-color-primary-soft);
    border: 1px solid var(--be-surface-border);
    border-left: 4px solid var(--be-color-primary);
    border-radius: var(--be-radius-sm);
}
.be-smtp-tutorial h4 {
    margin: 0 0 var(--be-space-2);
    font-size: var(--be-font-size-lg);
    color: var(--be-text-default);
}
.be-smtp-tutorial ol {
    margin: 0 0 var(--be-space-2);
    padding-left: var(--be-space-4);
    line-height: 1.8;
}
.be-smtp-tutorial .description {
    margin: 0;
    font-style: italic;
}

/* Required marker on the From Email label. */
.be-smtp-required-marker {
    color: var(--be-color-danger);
    font-weight: var(--be-font-weight-regular);
    margin-left: var(--be-space-1);
}

/* Form title above the add/edit relay form. */
.be-smtp-form-title {
    margin: 0 0 var(--be-space-3);
    font-size: var(--be-font-size-lg);
    font-weight: var(--be-font-weight-semibold);
}

/* Inline hint above the relays list: drag handles reorder and auto-save. */
.be-smtp-reorder-hint {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
    margin: 0 0 var(--be-space-2);
    color: var(--be-text-muted);
}
.be-smtp-reorder-hint .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Relays list — primary card + ordered fallback items. */
.be-smtp-relays-list {
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-sm);
    overflow: hidden;
    box-shadow: var(--be-shadow-card);
}
.be-smtp-relay-item {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    padding: var(--be-space-3) var(--be-space-4);
    background: var(--be-surface-card);
    border-bottom: 1px solid var(--be-surface-border);
    transition: background var(--be-duration) var(--be-ease);
}
.be-smtp-relay-item:last-child {
    border-bottom: none;
}
.be-smtp-relay-item.is-primary {
    background: var(--be-color-primary-soft);
    border-left: 4px solid var(--be-color-primary);
    padding-left: var(--be-space-3);
}
.be-smtp-relay-item.is-disabled {
    background: var(--be-color-gray-50);
    opacity: 0.7;
}
.be-smtp-relay-item.is-disabled .be-smtp-relay-item__name,
.be-smtp-relay-item.is-disabled .be-smtp-relay-item__host {
    color: var(--be-color-gray-400);
}
.be-smtp-relay-item.is-disabled .be-smtp-relay-item__name {
    text-decoration: line-through;
}
.be-smtp-relay-item--placeholder {
    height: 56px;
    background: var(--be-color-primary-soft);
    border: 2px dashed var(--be-color-primary);
}
.be-smtp-relay-item__handle {
    cursor: grab;
    color: var(--be-color-gray-400);
    font-size: 16px;
}
.be-smtp-relay-item__handle:hover {
    color: var(--be-color-gray-600);
}
.be-smtp-relay-item__info {
    flex: 1;
    min-width: 0;
}
.be-smtp-relay-item__name {
    font-weight: var(--be-font-weight-semibold);
    font-size: var(--be-font-size-md);
    margin-bottom: 2px;
    color: var(--be-text-default);
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
}
.be-smtp-relay-item__primary-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--be-color-primary);
    color: var(--be-text-on-dark);
    font-size: 10px;
    font-weight: var(--be-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 10px;
}
.be-smtp-relay-item__host {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}
.be-smtp-relay-item__status {
    padding: 3px 8px;
    border-radius: var(--be-radius-sm);
    font-size: var(--be-font-size-xs);
    font-weight: var(--be-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.be-smtp-relay-item__status--active {
    background: var(--be-color-success-soft);
    color: var(--be-color-success);
}
.be-smtp-relay-item__status--inactive {
    background: var(--be-color-gray-50);
    color: var(--be-text-muted);
}
.be-smtp-relay-item__actions {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
}
.be-smtp-relay-item__actions .button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.be-smtp-relay-item__actions .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.be-smtp-relay-item__action-label {
    display: inline;
}

@media (max-width: 782px) {
    .be-smtp-relay-item { flex-wrap: wrap; }
    .be-smtp-relay-item__actions {
        width: 100%;
        margin-top: var(--be-space-2);
        padding-top: var(--be-space-2);
        border-top: 1px solid var(--be-surface-border);
        justify-content: flex-end;
    }
    .be-smtp-relay-item__action-label { display: none; }
}

/* Inline test-email feedback container (under the test form). */
.be-smtp-test-result {
    margin-top: var(--be-space-3);
}

/* Logs tab. */
.be-smtp-logs-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--be-space-3);
}
.be-smtp-log-table .be-smtp-log-status--sent {
    color: var(--be-color-success);
    font-weight: var(--be-font-weight-semibold);
}
.be-smtp-log-table .be-smtp-log-status--failed {
    color: var(--be-color-danger);
    font-weight: var(--be-font-weight-semibold);
}
.be-smtp-log-error {
    display: block;
    font-weight: var(--be-font-weight-regular);
    color: var(--be-text-muted);
    margin-top: 2px;
}

.be-smtp-goto-config {
    background: none;
    border: 0;
    padding: 0;
    color: var(--be-color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}
.be-smtp-goto-config:hover {
    color: var(--be-color-primary-hover);
}

/* Import preview table inside .be-import-source. */
.be-smtp-import-preview {
    width: 100%;
    font-size: var(--be-font-size-sm);
}
.be-smtp-import-preview td {
    padding: 3px 0;
}
.be-smtp-import-preview td:first-child {
    padding-right: var(--be-space-2);
    color: var(--be-text-muted);
    width: 120px;
}
.be-smtp-import-result {
    margin-top: var(--be-space-3);
}

/* ============================================================================
 * Cache module — Live editor (2.1.0)
 *
 * 3-column layout : sidebar (toggles + autopilot + import/export) / iframe
 * preview / state panel. Tokens-only — no hardcoded colours, no `transition:
 * all`. Patterns named `.be-cache-editor*` because they are specific to this
 * module and intentionally NOT factored into _components.css (they only
 * appear in one place).
 * ============================================================================ */

.be-cache-editor {
    display: grid;
    /* Validation state spans a full-width bar on top (it's the outcome you
     * watch while previewing — including JS errors), then toggles + a wide
     * preview below. The preview is the point, so it gets the lion's share. */
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas:
        "state state"
        "sidebar preview";
    gap: var(--be-space-3);
    align-items: stretch;
    min-height: 82vh;
}
.be-cache-editor__sidebar { grid-area: sidebar; }
.be-cache-editor__preview { grid-area: preview; }
.be-cache-editor__state   { grid-area: state; }

@media (max-width: 782px) {
    .be-cache-editor {
        grid-template-columns: 1fr;
        grid-template-areas: "state" "sidebar" "preview";
    }
}

/* --- Sidebar ----------------------------------------------------------- */

.be-cache-editor__sidebar {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    box-shadow: var(--be-shadow-card);
    padding: var(--be-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--be-space-3);
}

.be-cache-editor__sidebar-actions {
    display: flex;
    gap: var(--be-space-2);
    flex-wrap: wrap;
}
.be-cache-editor__sidebar-actions .button {
    flex: 1 1 auto;
}

/* The auto-pilot now lives in the Cache & Performance hero bar; the editor
 * keeps only a short pointer to it (its scan results still show as per-toggle
 * badges below). */
.be-cache-editor__autopilot-hint {
    margin: 0 0 var(--be-space-2);
    padding-bottom: var(--be-space-3);
    border-bottom: 1px solid var(--be-surface-border);
    color: var(--be-text-muted);
    font-size: var(--be-font-size-sm);
    line-height: 1.5;
}

.be-cache-editor__toggles {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-3);
    margin: 0;
}
.be-cache-editor__section {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--be-space-1);
}
.be-cache-editor__section-title {
    font-weight: 600;
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0;
    margin-bottom: var(--be-space-1);
}
.be-cache-editor__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-space-2);
    padding: 4px 0;
}
.be-cache-editor__row-label {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}
.be-cache-editor__row-label span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.be-cache-editor__badge {
    font-size: var(--be-font-size-xs);
    padding: 2px 8px;
    border-radius: var(--be-radius-sm);
    line-height: 1.4;
    white-space: nowrap;
    font-weight: 500;
}
.be-cache-editor__badge--ok {
    background: var(--be-color-success-soft);
    color: var(--be-color-success);
}
.be-cache-editor__badge--ko {
    background: var(--be-color-danger-soft);
    color: var(--be-color-danger);
}

.be-cache-editor__sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-1);
    padding-top: var(--be-space-3);
    border-top: 1px solid var(--be-surface-border);
    font-size: var(--be-font-size-sm);
}
.be-cache-editor__import-label {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    color: var(--be-color-primary);
    text-decoration: underline;
    text-align: left;
}

/* --- Centre column (iframe) ------------------------------------------- */

.be-cache-editor__preview {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-1);
    min-height: 80vh;
}
.be-cache-editor__status-bar {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-3);
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    box-shadow: var(--be-shadow-card);
    font-size: var(--be-font-size-sm);
}
.be-cache-editor__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--be-color-gray-400);
    display: inline-block;
    flex-shrink: 0;
}
.be-cache-editor__status-dot--loading {
    background: var(--be-color-warning);
    animation: be-cache-editor-pulse 1.6s ease-in-out infinite;
}
.be-cache-editor__status-dot--success {
    background: var(--be-color-success);
}
.be-cache-editor__status-dot--error {
    background: var(--be-color-danger);
}
@keyframes be-cache-editor-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.be-cache-editor__iframe {
    flex: 1 1 auto;
    min-height: 72vh;
    width: 100%;
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    background: #fff;
    box-shadow: var(--be-shadow-card);
}

/* --- State panel ------------------------------------------------------ */

.be-cache-editor__state {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-md);
    box-shadow: var(--be-shadow-card);
    padding: var(--be-space-2) var(--be-space-3);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--be-space-2) var(--be-space-4);
}
.be-cache-editor__state-title {
    margin: 0;
    font-size: var(--be-font-size-md);
    font-weight: 600;
    flex-shrink: 0;
}
.be-cache-editor__state-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--be-space-2) var(--be-space-4);
}
.be-cache-editor__state-list li {
    display: flex;
    align-items: center;
    gap: var(--be-space-1);
    font-size: var(--be-font-size-sm);
}
.be-cache-editor__state-icon {
    width: 1.4em;
    flex-shrink: 0;
    text-align: center;
    color: var(--be-color-gray-400);
    font-weight: 700;
}
.be-cache-editor__state-icon--ok     { color: var(--be-color-success); }
.be-cache-editor__state-icon--warn   { color: var(--be-color-warning); }
.be-cache-editor__state-icon--danger { color: var(--be-color-danger); }
.be-cache-editor__state-icon--pending { color: var(--be-color-gray-400); }
.be-cache-editor__state-label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--be-text-default);
}
.be-cache-editor__state-footer {
    margin-left: auto;
    color: var(--be-text-muted);
    word-break: break-all;
}

/* ============================================================================
 * Cache module — Auto-pilot hero (2.2.0)
 *
 * The headline scan surface, sat above the manual-tuning tabs. Reuses DS
 * components (.be-stat-grid/.be-stat-card, .be-progress-bar, .be-badge,
 * .be-notice) — this block only lays out the hero shell. Tokens-only.
 * ============================================================================ */

.be-cache-pilote {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-lg);
    box-shadow: var(--be-shadow-card);
    margin-bottom: var(--be-space-4);
    overflow: hidden;
}

/* The progress + notice slots are toggled via the [hidden] attribute; the
 * .be-notice component sets display:flex, which would otherwise win over the
 * UA [hidden] rule and leave an empty box showing. */
.be-cache-pilote [hidden] { display: none !important; }

/* Always-visible bar: title + last-run status + chevron + inline Scan button.
 * Tinted (primary-soft) so the headline feature stands out, while collapsing
 * the rest of the pilote so it does not dominate the top of every tab. */
.be-cache-pilote__bar {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-2);
    padding: var(--be-space-2) var(--be-space-4) var(--be-space-3);
    background: var(--be-color-primary-soft);
    border-left: 3px solid var(--be-color-primary);
}
.be-cache-pilote__bar .be-cache-pilote__cta { margin: 0; }
/* Scope text fills the empty space next to the Scan button (same row), so the
 * user reads what the auto-pilot covers without expanding and with no extra height. */
.be-cache-pilote__scope {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
    line-height: 1.4;
}
.be-cache-pilote__bar-toggle {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--be-space-2) 0;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--be-text-default);
}
.be-cache-pilote__bar-icon { color: var(--be-color-primary); flex-shrink: 0; }
.be-cache-pilote__bar-title {
    font-weight: var(--be-font-weight-semibold);
    font-size: var(--be-font-size-lg);
    flex-shrink: 0;
}
.be-cache-pilote__bar-status {
    color: var(--be-text-muted);
    font-size: var(--be-font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.be-cache-pilote__bar-chevron {
    color: var(--be-text-muted);
    flex-shrink: 0;
    margin-left: auto;
    transition: transform var(--be-duration) ease;
}
.be-cache-pilote__bar-toggle[aria-expanded="true"] .be-cache-pilote__bar-chevron { transform: rotate(180deg); }
.be-cache-pilote__bar-scan { flex-shrink: 0; }

.be-cache-pilote__body {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-3);
    padding: 0 var(--be-space-4) var(--be-space-4);
    border-top: 1px solid var(--be-surface-border);
    padding-top: var(--be-space-3);
}

.be-cache-pilote__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--be-space-3);
    flex-wrap: wrap;
}


.be-cache-pilote__editor-link {
    flex-shrink: 0;
    white-space: nowrap;
}

.be-cache-pilote__cta {
    display: flex;
    align-items: center;
    gap: var(--be-space-3);
    flex-wrap: wrap;
}

.be-cache-pilote__status {
    color: var(--be-text-muted);
    font-size: var(--be-font-size-sm);
}

.be-cache-pilote__verdict-summary {
    cursor: pointer;
    padding: var(--be-space-2) 0;
    color: var(--be-text-default);
    font-weight: var(--be-font-weight-medium);
    user-select: none;
}
.be-cache-pilote__verdict-summary:hover { color: var(--be-color-primary); }

.be-cache-pilote__verdict-table {
    margin-top: var(--be-space-2);
}

.be-cache-pilote__verdict-note {
    color: var(--be-text-muted);
    font-size: var(--be-font-size-sm);
}

.be-cache-pilote__health {
    border-top: 1px solid var(--be-surface-border);
    padding-top: var(--be-space-3);
}

.be-cache-pilote__health-actions {
    display: inline-flex;
    gap: var(--be-space-1);
    margin-top: var(--be-space-1);
}

.be-cache-pilote__health-hint {
    display: block;
    margin-top: var(--be-space-1);
    color: var(--be-text-muted);
    font-size: var(--be-font-size-xs);
    line-height: 1.4;
}

/* Safe mode is a destructive control, not a status — keep it out of the
 * status-card grid, on its own muted row with a warning accent when active. */
.be-cache-pilote__safemode {
    display: flex;
    align-items: center;
    gap: var(--be-space-2);
    margin-top: var(--be-space-3);
    padding: var(--be-space-2) var(--be-space-3);
    border: 1px solid var(--be-surface-border);
    border-left: 3px solid var(--be-color-gray-400);
    border-radius: var(--be-radius-md);
    background: var(--be-color-gray-50);
}
.be-cache-pilote__safemode.is-active {
    border-left-color: var(--be-color-warning);
    background: var(--be-color-warning-soft);
}
.be-cache-pilote__safemode-text {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}
.be-cache-pilote__safemode-text strong {
    color: var(--be-text-default);
    margin-right: var(--be-space-1);
}
.be-cache-pilote__diagnostic {
    margin-top: var(--be-space-3);
    padding-top: var(--be-space-3);
    border-top: 1px solid var(--be-surface-border);
}
.be-cache-pilote__diagnostic-intro {
    margin: 0 0 var(--be-space-2);
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
}
.be-cache-pilote__diagnostic-intro strong {
    color: var(--be-text-default);
    margin-right: var(--be-space-1);
}