/**
 * Blaminhor Essentials Admin Styles
 *
 * @package BlaminhorEssentials
 */

/* Legacy CSS variables removed in Q3 (cleanup).
   All design values now come from _tokens.css (loaded before this file). */

/* ========================================
   Common Button Styles
   ======================================== */

/* Buttons-with-icon pattern (.be-btn-icon) codified in _components.css §2 (after .be-danger) */

/* Sortable tables pattern (.be-sortable-table*) codified in _components.css §19 */

/* Wrap & header rules removed (markup migrated to .be-module-page / .be-dash-dashboard-*) */

.be-dash-logo {
    font-weight: 600;
    color: var(--be-color-gray-900);
}

.be-dash-logo .separator {
    color: var(--be-color-primary);
    padding: 0 1px;
}

.be-dash-tagline {
    margin: 4px 0 0;
    color: var(--be-color-gray-600);
    font-size: var(--be-font-size-md);
}

/* Content */
.be-dash-content {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-4);
}

/* Section rules removed — markup migrated to .be-section (cf. _components.css §6) */

/* What's new — inline pill badge (sits next to the dashboard <h1>) + collapsible panel */
.be-dash-whatsnew-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--be-space-1);
    margin: 0 0 0 var(--be-space-2);
    padding: 2px 10px 2px 8px;
    vertical-align: middle;
    background: var(--be-color-info-soft);
    border: 1px solid color-mix(in srgb, var(--be-color-info) 35%, transparent);
    border-radius: 999px;
    color: var(--be-color-info);
    font-size: var(--be-font-size-xs);
    font-weight: var(--be-font-weight-medium);
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--be-duration) ease, border-color var(--be-duration) ease, color var(--be-duration) ease;
    -webkit-appearance: none;
    appearance: none;
}

.be-dash-whatsnew-badge:hover,
.be-dash-whatsnew-badge:focus-visible {
    background: color-mix(in srgb, var(--be-color-info-soft) 75%, var(--be-color-info) 10%);
    border-color: color-mix(in srgb, var(--be-color-info) 55%, transparent);
    outline: none;
}

.be-dash-whatsnew-badge:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--be-color-info) 25%, transparent);
}

.be-dash-whatsnew-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.be-dash-whatsnew-badge__sep {
    opacity: 0.55;
    margin: 0 2px;
}

.be-dash-whatsnew-badge__chevron.dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    margin-left: 2px;
    transition: transform var(--be-duration) ease;
}

.be-dash-whatsnew-badge[aria-expanded="true"] .be-dash-whatsnew-badge__chevron {
    transform: rotate(90deg);
}

.be-dash-whatsnew-panel {
    padding: var(--be-space-3) var(--be-space-4);
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-left: 3px solid var(--be-color-info);
    border-radius: var(--be-radius-md);
    box-shadow: var(--be-shadow-card);
}

.be-dash-whatsnew-panel__text {
    margin: 0 0 var(--be-space-2);
    color: var(--be-text-default);
    font-size: var(--be-font-size-md);
    line-height: 1.6;
}

.be-dash-whatsnew-panel__cta {
    margin: 0;
    font-size: var(--be-font-size-sm);
}

.be-dash-whatsnew-panel__cta a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--be-color-info);
    text-decoration: none;
    font-weight: var(--be-font-weight-medium);
}

.be-dash-whatsnew-panel__cta a:hover,
.be-dash-whatsnew-panel__cta a:focus-visible {
    text-decoration: underline;
}

.be-dash-whatsnew-panel__cta .dashicons-external {
    font-size: 13px;
    width: 13px;
    height: 13px;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .be-dash-whatsnew-badge,
    .be-dash-whatsnew-badge__chevron.dashicons {
        transition: none;
    }
}

/* Module + Switch legacy rules removed — markup migrated to .be-module-card / .be-toggle */

/* Feedback Form */
.feedback-form {
    max-width: 500px;
}

.feedback-form .form-field {
    margin-bottom: 16px;
}

.feedback-form label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--be-font-size-md);
    font-weight: 600;
    color: var(--be-color-gray-900);
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form select,
.feedback-form textarea {
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--be-color-gray-600);
    border-radius: 0;
    background-color: var(--be-surface-card);
    color: var(--be-text-default);
    font-size: var(--be-font-size-lg);
    line-height: 1.5;
    box-shadow: none;
    transition: border-color var(--be-duration), box-shadow var(--be-duration);
}

.feedback-form select {
    min-height: 38px;
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23646970' stroke-width='1.5' d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.feedback-form input[type="text"]:focus,
.feedback-form input[type="email"]:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
    border-color: var(--be-color-gray-900);
    box-shadow: 0 0 0 3px var(--be-color-primary-soft);
    outline: none;
}

.feedback-form textarea {
    resize: vertical;
    min-height: 110px;
}

.feedback-form input[type="file"] {
    display: block;
    max-width: 440px;
    font-size: var(--be-font-size-md);
    color: var(--be-text-muted);
}

.feedback-form input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid var(--be-color-gray-600);
    border-radius: var(--be-radius-md);
    background: var(--be-surface-card);
    color: var(--be-text-default);
    font-size: var(--be-font-size-md);
    cursor: pointer;
    transition: background var(--be-duration);
}

.feedback-form input[type="file"]::file-selector-button:hover {
    background: var(--be-color-gray-200);
}

/* Support Links */
.support-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--be-color-gray-50);
    border-radius: var(--be-radius-sm);
    text-decoration: none;
    color: var(--be-color-gray-900);
    font-size: var(--be-font-size-md);
    transition: background-color 0.15s, color 0.15s;
}

.support-link:hover {
    background: var(--be-color-primary);
    color: var(--be-text-on-dark);
}

.support-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Credits */
.be-dash-credits {
    text-align: center;
    padding: 16px;
    /* WCAG 2.1 AA : 4.5:1 on background — gray-400 was too light (~3.2:1).
       Bumped to gray-600 which lands at ~5.4:1 against the admin bg. */
    color: var(--be-color-gray-600);
    font-size: var(--be-font-size-sm);
}

.be-dash-credits a {
    color: var(--be-color-primary);
    /* WCAG 2.1 SC 1.4.1 (Use of Color) : links in text blocks must be
       distinguishable without relying on color alone — keep the underline. */
    text-decoration: underline;
}

.be-dash-credits a:hover {
    text-decoration: none;
}

/* Settings-wrap, card, tabs-wrapper legacy rules removed — markup migrated to .be-section / .be-tabs (cf. _components.css §5+§6) */

/* Critical CSS extractor — per-row busy feedback. */
.be-critical-generate.be-busy {
    pointer-events: none;
    opacity: 0.85;
}
.be-critical-generate.be-busy .spinner {
    visibility: visible;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}
em.be-critical-cell-busy {
    color: var(--be-color-primary);
    font-style: italic;
}

/* Reusable button loading state: keeps the original label (so the button width
   never changes and inline rows don't shift) while overlaying a centered
   spinner. Apply to any WP-native .button during an async action. */
.button.be-btn-busy {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.button.be-btn-busy .spinner {
    visibility: visible;
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    transform: translate(-50%, -50%);
}

/* Settings sections inside tabs : .be-tabs__panel inherits form-table styles from WP core */

/* Notices : .be-notice pattern (cf. _components.css §6) — markup PHP/JS converti 24/05 */

/* SMTP module-specific CSS lives in assets/css/modules.css (`.be-smtp-*`). */

/* ========================================
   Utility Classes
   ======================================== */
.be-hidden { display: none !important; }
.be-inline-form { display: inline; }
.be-table-empty { text-align: center; padding: 20px; }
.be-label-block { display: block; margin-bottom: 6px; }
/* WP core stylise `.form-table td fieldset label` en inline-block, ce qui écrase
   l'intention « block » de cette utilitaire — restaurée ici avec plus de spécificité. */
.form-table fieldset label.be-label-block { display: block; }
.be-label-flex { display: flex; align-items: center; gap: 8px; }
.dashicons.be-icon-mr { margin-right: 5px; }
.dashicons.be-dashicon-align { vertical-align: text-bottom; }

/* Responsive */
@media (max-width: 782px) {
    .be-tabs__nav {
        flex-wrap: wrap;
    }

    .be-tabs__tab {
        flex: 1;
        text-align: center;
        min-width: 100px;
    }

    .be-tabs__panel .form-table th {
        display: block;
        width: 100%;
        padding-bottom: 4px;
    }

    .be-tabs__panel .form-table td {
        display: block;
        padding-top: 0;
    }
}

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

/* Settings section divider inside tabs */
.be-tabs__panel hr {
    border: none;
    border-top: 1px solid var(--be-surface-border-strong);
    margin: 24px 0;
}

/* Submit buttons alignment inside tabs — same rhythm as .be-section + .be-section */
.be-tabs__panel .submit {
    margin: var(--be-space-4) 0 0;
    padding: 0;
}

/* Setting-row highlight: applied by admin.js when the user lands on a tab
 * via an audit recommendation link (e.g. "#page-cache:browser_cache_enabled").
 * Pulses the row a few times so the eye finds the right setting fast. */
.be-dash-highlight {
    animation: be-dash-highlight-flash 1.2s ease-in-out 3;
    border-radius: 4px;
}
@keyframes be-dash-highlight-flash {
    0%, 100% { background-color: transparent; box-shadow: none; }
    50% { background-color: #fff8c5; box-shadow: 0 0 0 4px #fff8c5; }
}

/* Audit results — built by cache-admin.js renderAudit(). Token-based spacing, no inline styles. */
#be-audit-results {
    margin-top: 12px;
}
.be-audit-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-surface-border-strong);
    border-left: 4px solid var(--be-color-primary);
    border-radius: var(--be-radius-sm);
    margin-bottom: 20px;
    box-shadow: var(--be-shadow-card);
}
.be-audit-summary--good { border-left-color: var(--be-color-success); }
.be-audit-summary--warn { border-left-color: var(--be-color-warning); }
.be-audit-summary--bad  { border-left-color: var(--be-color-danger); }
.be-audit-score {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: var(--be-color-gray-900);
    min-width: 64px;
    text-align: center;
}
.be-audit-summary--good .be-audit-score { color: var(--be-color-success); }
.be-audit-summary--warn .be-audit-score { color: var(--be-color-warning); }
.be-audit-summary--bad  .be-audit-score { color: var(--be-color-danger); }
.be-audit-engine {
    flex: 1;
    min-width: 0;
}
.be-audit-engine strong {
    font-size: var(--be-font-size-lg);
    color: var(--be-color-gray-900);
}
.be-audit-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-size: var(--be-font-size-sm);
    color: var(--be-color-gray-600);
}
.be-audit-metrics code {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border-strong);
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--be-color-gray-900);
    font-size: var(--be-font-size-xs);
}
.be-audit-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 8px;
    font-size: var(--be-font-size-md);
    font-weight: 600;
    color: var(--be-color-gray-900);
}
.be-audit-group-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--be-color-gray-400);
    flex-shrink: 0;
}
.be-audit-group--plugin  .be-audit-group-dot { background: var(--be-color-success); }
.be-audit-group--mixed   .be-audit-group-dot { background: var(--be-color-warning); }
.be-audit-group--theme   .be-audit-group-dot { background: #d6a900; }
.be-audit-group--hosting .be-audit-group-dot { background: var(--be-color-danger); }
.be-audit-group-count {
    color: var(--be-color-gray-600);
    font-weight: 400;
}
.be-audit-card {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border-strong);
    border-radius: var(--be-radius-sm);
    padding: 14px 16px;
    margin: 8px 0;
    box-shadow: var(--be-shadow-card);
}
.be-audit-card-title {
    font-size: var(--be-font-size-md);
    color: var(--be-color-gray-900);
}
.be-audit-card-value {
    color: var(--be-color-gray-600);
    font-weight: 400;
    font-size: var(--be-font-size-sm);
}
.be-audit-card-desc {
    margin: 6px 0 4px;
    font-size: var(--be-font-size-md);
    color: var(--be-color-gray-900);
    line-height: 1.5;
}
.be-audit-card-guidance {
    margin: 4px 0 0;
    font-size: var(--be-font-size-sm);
    color: var(--be-color-gray-600);
    line-height: 1.5;
}
.be-audit-card .button {
    margin-top: 10px;
}
/* A recommendation whose underlying toggle is already on — kept visible so
 * the user can see what's been addressed, but visually demoted. */
.be-audit-card--resolved {
    opacity: 0.55;
    background: var(--be-color-gray-50);
}
.be-audit-card--resolved .be-audit-card-title {
    text-decoration: line-through;
}
.be-audit-card-resolved-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--be-color-success);
    color: var(--be-text-on-dark);
    font-size: var(--be-font-size-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
}
.be-audit-card-resolved-badge .dashicons {
    font-size: var(--be-font-size-lg);
    width: 14px;
    height: 14px;
}

/* ------------------------------------------------------------------ */
/*  Advanced > WP-CLI tab: per-module command cards with Copy button. */
/* ------------------------------------------------------------------ */
.be-cli-module {
    margin: 0 0 6px;
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border-strong);
    border-radius: var(--be-radius-sm);
    box-shadow: var(--be-shadow-card);
    overflow: hidden;
}
.be-cli-module-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--be-font-size-md);
    font-weight: 600;
    color: var(--be-color-gray-900);
    list-style: none;
    user-select: none;
}
.be-cli-module-summary::-webkit-details-marker {
    display: none;
}
.be-cli-module-summary:hover {
    background: var(--be-color-gray-50);
}
.be-cli-module-summary .dashicons-arrow-right-alt2 {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    color: var(--be-color-gray-600);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.be-cli-module[open] > .be-cli-module-summary .dashicons-arrow-right-alt2 {
    transform: rotate(90deg);
}
.be-cli-module-name {
    flex-shrink: 0;
}
.be-cli-module-id {
    font-size: var(--be-font-size-xs);
    color: var(--be-color-gray-600);
    background: var(--be-color-gray-50);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 400;
}
.be-cli-module-count {
    margin-left: auto;
    font-size: var(--be-font-size-xs);
    font-weight: 400;
    color: var(--be-color-gray-600);
}
.be-cli-commands {
    list-style: none;
    margin: 0;
    padding: 10px 12px 12px;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--be-color-gray-200);
    background: var(--be-color-gray-50);
}
.be-cli-command {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border-strong);
    border-radius: var(--be-radius-sm);
    padding: 10px 12px;
    box-shadow: var(--be-shadow-card);
}
.be-cli-command-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
}
.be-cli-type {
    flex-shrink: 0;
}
.be-cli-command-name {
    font-size: var(--be-font-size-sm);
    font-weight: 600;
    color: var(--be-color-gray-900);
    background: transparent;
    padding: 0;
}
.be-cli-command-desc {
    margin: 0 0 8px;
    font-size: var(--be-font-size-sm);
    color: var(--be-color-gray-600);
    line-height: 1.45;
}
.be-cli-command-example {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-color-gray-200);
    border-radius: 3px;
    padding: 6px 8px;
}
.be-cli-snippet {
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    font-size: var(--be-font-size-sm);
    color: var(--be-color-gray-900);
    background: transparent;
    padding: 0;
}
.be-cli-copy {
    flex-shrink: 0;
}

/* WP-CLI tab: filter toolbar + legend. */
.be-cli-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-2);
    margin: 0 0 var(--be-space-3);
}
.be-cli-search {
    max-width: 360px;
}
.be-cli-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0;
    font-size: var(--be-font-size-xs);
    color: var(--be-color-gray-600);
}
.be-cli-legend__hint {
    margin-right: var(--be-space-3);
}
.be-cli-command.is-hidden,
.be-cli-module.is-hidden {
    display: none;
}
.be-cli-noresults {
    margin: var(--be-space-2) 0 0;
    font-style: italic;
    color: var(--be-color-gray-600);
}
.be-cli-help-hint {
    margin-top: var(--be-space-3);
}

/* WP-CLI tab: collapsible per-command options (flags). */
.be-cli-options {
    margin: 0 0 8px;
}
.be-cli-options__summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: var(--be-font-size-sm);
    color: var(--be-color-primary);
}
.be-cli-options__summary::-webkit-details-marker {
    display: none;
}
.be-cli-options__summary::before {
    content: "\25B8"; /* ▸ */
    font-size: var(--be-font-size-sm);
}
.be-cli-options[open] .be-cli-options__summary::before {
    content: "\25BE"; /* ▾ */
}
.be-cli-options__list {
    list-style: none;
    margin: 6px 0 0;
    padding: 10px 12px;
    /* One option per line, flowing into as many ~260px columns as fit. */
    columns: 260px;
    column-gap: var(--be-space-3);
    background: var(--be-color-gray-50);
    border: 1px solid var(--be-color-gray-200);
    border-radius: var(--be-radius-sm);
}
.be-cli-options__item {
    margin: 0 0 6px;
    break-inside: avoid;
}
.be-cli-options__item:last-child {
    margin-bottom: 0;
}
.be-cli-opt-spec {
    display: inline-block;
    padding: 2px 7px;
    white-space: nowrap;
    background: var(--be-surface-card);
    border: 1px solid var(--be-color-gray-200);
    border-radius: 3px;
    color: var(--be-color-gray-900);
    font-size: var(--be-font-size-sm);
}

/* =============================================================
   v2 Dashboard - masonry category cards layout
   ============================================================= */

.be-dash-dashboard-wrap.wrap {
    background: var(--be-surface-bg);
    margin: 0 0 0 -20px;
    padding: 24px 24px 40px;
    min-height: calc(100vh - 32px);
    box-sizing: border-box;
}

.be-dash-dashboard-wrap .wp-header-end {
    visibility: hidden;
    margin: 0;
    height: 0;
    border: 0;
}

/* Header */
/* Dashboard — single vertical rhythm: one flex gap, no per-block margins.
 * Uses --be-space-3 (16px) to keep the header / search / category grid tightly
 * stacked, matching the rest of the plugin's harmonised spacing. */
.be-dash-dashboard-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--be-space-3);
}

/* WP marker hr — kept in the DOM for admin-notice positioning, out of layout. */
.be-dash-dashboard-wrap > .wp-header-end {
    display: none;
}

/* Direct children carry no vertical margin — the flex gap is the sole rhythm. */
.be-dash-dashboard-wrap > .be-dash-dashboard-header,
.be-dash-dashboard-wrap > .be-notice,
.be-dash-dashboard-wrap > .be-dash-whatsnew-panel,
.be-dash-dashboard-wrap > .be-section,
.be-dash-content > .be-section {
    margin: 0;
}

/* Cancels the global `.be-section + .be-section` rule from _components.css —
   inside the dashboard flex columns, vertical rhythm comes from the parent flex gap. */
.be-dash-dashboard-wrap > .be-section + .be-section,
.be-dash-content > .be-section + .be-section {
    margin-top: 0;
}

.be-dash-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.be-dash-dashboard-header-title h1 {
    margin: 0 0 4px;
    font-size: var(--be-font-size-xl);
    font-weight: 600;
    color: var(--be-text-default);
    padding: 0;
}

.be-dash-dashboard-header-title .be-dash-logo {
    color: inherit;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}

.be-dash-dashboard-header-title .be-dash-tagline {
    margin: 0;
    color: var(--be-text-muted);
    font-size: var(--be-font-size-md);
}

.be-dash-dashboard-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.be-dash-button-ghost.button,
.be-dash-button-ghost.button:hover,
.be-dash-button-ghost.button:focus {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    color: var(--be-text-default);
    box-shadow: var(--be-shadow-card);
    border-radius: 8px;
    padding: 4px 12px;
    height: 32px;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.be-dash-button-ghost.button:hover {
    background: var(--be-color-gray-50);
    color: var(--be-color-primary);
}

.be-dash-button-ghost.button .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

/* Search */
.be-dash-dashboard-search {
    position: relative;
}

.be-dash-dashboard-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--be-text-muted);
    pointer-events: none;
}

.be-dash-dashboard-search input.be-dash-dashboard-search-input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--be-surface-border);
    border-radius: 10px;
    background: var(--be-surface-card);
    box-shadow: var(--be-shadow-card);
    font-size: var(--be-font-size-lg);
    line-height: 44px;
    color: var(--be-text-default);
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.be-dash-dashboard-search-input::placeholder {
    color: var(--be-text-muted);
}

.be-dash-dashboard-search-input:focus {
    border-color: var(--be-color-primary);
    box-shadow: 0 0 0 3px var(--be-color-primary-soft);
}

/* Category grid — CSS Grid with stretched rows so every column ends at the
   same height (no masonry-style empty space under shorter cards). */
.be-dash-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--be-space-3);
}

@media (max-width: 1500px) {
    .be-dash-dashboard-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
    .be-dash-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
    .be-dash-dashboard-grid { grid-template-columns: 1fr; }
    .be-dash-dashboard-header { flex-direction: column; align-items: stretch; }
    .be-dash-dashboard-wrap.wrap { margin: 0 0 0 -10px; padding: 16px; }
}

/* Category card */
.be-dash-category-card {
    background: var(--be-surface-card);
    border: 1px solid var(--be-surface-border);
    border-radius: var(--be-radius-lg);
    box-shadow: var(--be-shadow-card);
    padding: 14px 16px;
    box-sizing: border-box;
}

.be-dash-category-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--be-surface-border);
}

.be-dash-category-card-title {
    margin: 0;
    font-size: var(--be-font-size-lg);
    font-weight: 600;
    color: var(--be-text-default);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.be-dash-category-card-title .dashicons {
    color: var(--be-text-muted);
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.be-dash-category-card-count {
    font-size: var(--be-font-size-sm);
    color: var(--be-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.be-dash-category-card-modules {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Module row */
.be-dash-module-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: background-color 0.12s;
}

.be-dash-module-row + .be-dash-module-row {
    margin-top: 2px;
}

.be-dash-module-row:hover {
    background: var(--be-color-gray-50);
}

.be-dash-module-row-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--be-text-default);
    text-decoration: none;
    font-size: var(--be-font-size-md);
    line-height: 1.4;
    padding: 4px 0;
    outline: none;
}

.be-dash-module-row-link:hover,
.be-dash-module-row-link:focus {
    color: var(--be-color-primary);
}

.be-dash-module-row-icon {
    display: none; /* le mockup ne montre pas d'icône par row, on garde le markup pour activation future */
}

.be-dash-module-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.be-dash-module-row.is-active .be-dash-module-row-name {
    color: var(--be-text-default);
    font-weight: 500;
}

.be-dash-module-row-switch {
    flex-shrink: 0;
}

/* "Needs setup" badge : the only in-row shortcut, shown on an active module
   that is still inert until configured (the whole row already links to the
   settings page, so no extra link is needed for configured modules). Spacing
   comes from the row's flex gap, not the badge default margin. The explicit
   [hidden] rule is required because .be-badge sets display:inline-block, which
   would otherwise win over the hidden attribute. */
.be-dash-module-row-badge {
    flex-shrink: 0;
    margin-left: 0;
    text-decoration: none;
}
.be-dash-module-row-badge[hidden] {
    display: none;
}
.be-dash-module-row-badge:hover,
.be-dash-module-row-badge:focus {
    text-decoration: underline;
}

/* "Beta" badge : sits next to the module name inside the row link, flagging a
   recently added module (registry 'beta' flag). The link is an inline-flex with
   its own gap, so drop the .be-badge default margin to avoid doubling it. */
.be-dash-module-row-beta {
    margin-left: 0;
    flex-shrink: 0;
    cursor: help;
}

/* Inline detail panel (hover tooltip) */
.be-dash-module-row-details {
    position: absolute;
    left: -8px;
    right: -8px;
    top: 100%;
    margin-top: 4px;
    background: var(--be-text-default);
    color: var(--be-text-on-dark);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: var(--be-shadow-overlay);
    z-index: 20;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
}

.be-dash-module-row:hover .be-dash-module-row-details,
.be-dash-module-row:focus-within .be-dash-module-row-details {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.be-dash-module-row-details-name {
    margin: 0 0 4px;
    font-size: var(--be-font-size-md);
    font-weight: 600;
    color: var(--be-text-on-dark);
}

.be-dash-module-row-details-desc {
    margin: 0 0 8px;
    font-size: var(--be-font-size-sm);
    line-height: 1.5;
    color: #d1d5db;
}

.be-dash-module-row-details-link {
    color: var(--be-text-on-dark);
    text-decoration: none;
    font-size: var(--be-font-size-sm);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 0.85;
}

.be-dash-module-row-details-link:hover {
    opacity: 1;
    color: var(--be-text-on-dark);
}

.be-dash-module-row-details-link .dashicons {
    width: 14px;
    height: 14px;
    font-size: var(--be-font-size-lg);
}


.be-dash-button-primary.button-primary:hover,
.be-dash-button-primary.button-primary:focus {
    background: var(--be-color-primary-hover);
    border-color: var(--be-color-primary-hover);
    color: var(--be-text-on-dark);
}

/* Search filtering */
.be-dash-module-row.be-dash-hidden {
    display: none;
}

.be-dash-category-card.be-dash-hidden {
    display: none;
}

/* Dashboard widget styles live in assets/css/dashboard-widget.css — they are
 * enqueued separately on the WP dashboard screen only (admin.css is loaded
 * only on BE plugin pages). */