/* Modern health page — aligned with config-modern.css patterns */

body[data-layout-version="modern"] {
    --layout-radius-sm: 8px;
    --layout-radius-md: 12px;
    --layout-radius-lg: 16px;
    --layout-radius-pill: 999px;
    --layout-shadow-sm: 0 1px 3px color-mix(in srgb, var(--text-primary) 8%, transparent);
    --layout-shadow-md: 0 4px 16px color-mix(in srgb, var(--text-primary) 12%, transparent);
    --layout-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --layout-surface: var(--background-secondary);
    --layout-surface-inset: var(--background-primary);
    --layout-surface-border: var(--border-primary);
    --config-tab-gap: 0.85rem;
}

/* ─── Page shell ──────────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .health-shell {
    display: flex;
    flex-direction: column;
    gap: var(--config-tab-gap);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

body[data-layout-version="modern"] .health-header,
body[data-layout-version="modern"] .health-summary,
body[data-layout-version="modern"] .health-controls,
body[data-layout-version="modern"] .health-issues-panel,
body[data-layout-version="modern"] .health-duplicates-panel {
    margin: 0;
}

body[data-layout-version="modern"] .health-header {
    padding-bottom: 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 30%, transparent);
}

body[data-layout-version="modern"] .health-header h1,
body[data-layout-version="modern"] .health-header .title {
    opacity: 0.8;
}

body[data-layout-version="modern"] .back-link,
body[data-layout-version="modern"] .back-link-button {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.8rem;
    border-radius: var(--layout-radius-pill);
    border: 1px solid var(--layout-surface-border);
    background: var(--layout-surface);
    text-decoration: none;
    transition:
        color var(--layout-transition),
        border-color var(--layout-transition),
        background-color var(--layout-transition),
        box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .back-link:hover,
body[data-layout-version="modern"] .back-link-button:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-primary));
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--layout-surface));
    box-shadow: var(--layout-shadow-sm);
}

/* ─── Unified surfaces (stacked cards) ────────────────────────────────────── */

body[data-layout-version="modern"] :is(
    .health-page-intro,
    .health-card,
    .health-controls,
    .health-issues-panel,
    .health-duplicates-panel
) {
    border: 1px solid var(--layout-surface-border);
    border-radius: var(--layout-radius-md);
    background: var(--layout-surface);
    box-shadow: var(--layout-shadow-sm);
}

body[data-layout-version="modern"] .health-page-intro {
    padding: 0.9rem 1rem;
}

body[data-layout-version="modern"] .health-subtitle {
    margin: 0;
    max-width: none;
    opacity: 1;
    color: var(--text-secondary);
    font-size: var(--font-size-controls);
    line-height: 1.5;
}

body[data-layout-version="modern"] .health-summary {
    gap: 6px;
}

body[data-layout-version="modern"] .health-card {
    padding: 0.35rem 0.45rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-layout-version="modern"] .health-controls {
    padding: 0.4rem 0.6rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-layout-version="modern"] .health-issues-panel,
body[data-layout-version="modern"] .health-duplicates-panel {
    padding: 0.5rem 0.65rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-layout-version="modern"] .health-panel-header {
    margin-bottom: 0.75rem;
}

body[data-layout-version="modern"] .health-panel-header h2 {
    font-size: var(--font-size-category);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* ─── Forms & filters ─────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .health-filter-wrap label,
body[data-layout-version="modern"] .health-page-filter-wrap label {
    margin-bottom: 0.4rem;
    font-size: var(--font-size-controls);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

body[data-layout-version="modern"] .health-filter-wrap input,
body[data-layout-version="modern"] .health-filter-input,
body[data-layout-version="modern"] .health-page-filter,
body[data-layout-version="modern"] .health-sort-select {
    border-radius: var(--layout-radius-sm);
    border: 1px solid var(--layout-surface-border);
    background: var(--layout-surface-inset);
    padding: 0.26rem 0.45rem;
    transition: border-color var(--layout-transition), box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .health-filter-wrap input:focus,
body[data-layout-version="modern"] .health-filter-input:focus,
body[data-layout-version="modern"] .health-page-filter:focus,
body[data-layout-version="modern"] .health-sort-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

body[data-layout-version="modern"] .health-pill {
    border-radius: var(--layout-radius-pill);
    transition:
        background-color var(--layout-transition),
        border-color var(--layout-transition),
        box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .health-pill:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--layout-surface-inset));
}

body[data-layout-version="modern"] .health-pill.active {
    background: color-mix(in srgb, var(--accent-success) 14%, var(--layout-surface));
    box-shadow: var(--layout-shadow-sm);
}

body[data-layout-version="modern"] .health-pill span {
    border-radius: var(--layout-radius-pill);
    background: color-mix(in srgb, var(--text-secondary) 12%, var(--layout-surface-inset));
}

/* ─── Issue & duplicate rows ──────────────────────────────────────────────── */

body[data-layout-version="modern"] .health-issues {
    gap: var(--config-tab-gap);
}

body[data-layout-version="modern"] .health-row,
body[data-layout-version="modern"] .health-duplicate-group {
    background: var(--layout-surface-inset);
}

body[data-layout-version="modern"] .health-row {
    border-color: color-mix(in srgb, var(--border-primary) 35%, transparent);
}

body[data-layout-version="modern"] .health-duplicate-group {
    padding: 0.85rem 1rem;
    margin-bottom: 0;
}

body[data-layout-version="modern"] .health-duplicates {
    display: flex;
    flex-direction: column;
    gap: var(--config-tab-gap);
}

body[data-layout-version="modern"] .health-row-score {
    border-radius: var(--layout-radius-sm);
    background: color-mix(in srgb, var(--text-secondary) 10%, var(--layout-surface-inset));
}

body[data-layout-version="modern"] .health-row-meta span,
body[data-layout-version="modern"] .health-row-times span,
body[data-layout-version="modern"] .health-row-reasons span,
body[data-layout-version="modern"] .health-duplicate-items span {
    border-radius: var(--layout-radius-pill);
    background: color-mix(in srgb, var(--text-secondary) 10%, var(--layout-surface-inset));
}

body[data-layout-version="modern"] .health-actions-menu {
    border-radius: var(--layout-radius-md);
    background: var(--layout-surface);
    border: 1px solid var(--layout-surface-border);
    box-shadow: var(--layout-shadow-md);
}

body[data-layout-version="modern"] .health-actions-menu-item {
    border-radius: var(--layout-radius-sm);
    transition: background-color var(--layout-transition), color var(--layout-transition);
}

body[data-layout-version="modern"] .health-actions-menu-item:hover {
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--layout-surface-inset));
}

body[data-layout-version="modern"] .health-card,
body[data-layout-version="modern"] .health-panel {
    border-radius: var(--layout-radius-sm);
}

body[data-layout-version="modern"] .health-empty {
    border-radius: var(--layout-radius-sm);
    border-style: solid;
    border-color: color-mix(in srgb, var(--border-primary) 35%, transparent);
    background: var(--layout-surface-inset);
    opacity: 1;
    color: var(--text-secondary);
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .btn {
    border-radius: var(--layout-radius-sm);
    transition:
        background-color var(--layout-transition),
        border-color var(--layout-transition),
        box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .btn:hover:not(:disabled) {
    box-shadow: var(--layout-shadow-sm);
    transform: none;
}

body[data-layout-version="modern"] .health-selection-toolbar {
    border-radius: var(--layout-radius-sm);
    border-color: color-mix(in srgb, var(--accent-primary) 28%, var(--layout-surface-border));
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--layout-surface));
    box-shadow: var(--layout-shadow-sm);
}

body[data-layout-version="modern"] .health-bulk-toolbar .btn,
body[data-layout-version="modern"] .health-keep-first-btn,
body[data-layout-version="modern"] .health-merge-pick-btn {
    border-radius: var(--layout-radius-sm);
    transition:
        background-color var(--layout-transition),
        border-color var(--layout-transition),
        box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .health-row-actions .btn-small,
body[data-layout-version="modern"] .health-row-actions .btn-icon-only,
body[data-layout-version="modern"] .health-row-actions .health-action-link {
    border-radius: var(--layout-radius-sm);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
    transition:
        background-color var(--layout-transition),
        border-color var(--layout-transition),
        box-shadow var(--layout-transition);
}

body[data-layout-version="modern"] .health-row-actions .btn-primary {
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--layout-surface));
    border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--layout-surface-border));
}

body[data-layout-version="modern"] .health-bulk-toolbar .btn:hover:not(:disabled),
body[data-layout-version="modern"] .health-keep-first-btn:hover:not(:disabled),
body[data-layout-version="modern"] .health-merge-pick-btn:hover,
body[data-layout-version="modern"] .health-row-actions .btn:hover:not(:disabled),
body[data-layout-version="modern"] .health-row-actions .health-action-link:hover {
    box-shadow: var(--layout-shadow-sm);
    transform: none;
    border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--layout-surface-border));
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--layout-surface));
}

body[data-layout-version="modern"] .health-row-actions .btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-primary) 22%, var(--layout-surface));
}

body[data-layout-version="modern"] .health-row-actions .btn-icon-only[data-tooltip]::after {
    border: 1px solid var(--layout-surface-border);
    background: var(--layout-surface);
    border-radius: var(--layout-radius-sm);
    box-shadow: var(--layout-shadow-sm);
}

body[data-layout-version="modern"] .health-actions-divider {
    background: var(--layout-surface-border);
}

body[data-layout-version="modern"] .health-bulk-status {
    border-radius: var(--layout-radius-sm);
    background: var(--layout-surface-inset);
    border: 1px solid color-mix(in srgb, var(--border-primary) 30%, transparent);
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    body[data-layout-version="modern"] .health-shell {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    body[data-layout-version="modern"] .health-page-intro {
        display: none;
    }
}

/* ─── Density ─────────────────────────────────────────────────────────────── */

body[data-layout-version="modern"][data-density-mode="comfortable"] .health-row {
    padding: 0.85rem 0.95rem;
    gap: 0.65rem 0.85rem;
}

body[data-layout-version="modern"][data-density-mode="dense"] .health-row {
    padding: 0.45rem 0.55rem;
    gap: 0.35rem 0.5rem;
}

body[data-layout-version="modern"][data-density-mode="comfortable"] .health-card {
    padding: 0.5rem 0.55rem;
}

body[data-layout-version="modern"][data-density-mode="dense"] .health-card {
    padding: 0.25rem 0.35rem;
}