/**
 * Features Panel — UI for granular feature toggles.
 * Rendered by index-features-ui.js into #featuresPanelRoot.
 *
 * All colors come from the codebase's --izi-* tokens (defined in base.css)
 * which automatically swap to dark values under body.theme-dark or
 * @media (prefers-color-scheme: dark) with body.theme-auto.
 */

/* Stretch chain so the features tabs sidebar fills the available
   vertical space in the Settings modal. Without this the sidebar
   collapses to its content height (7 tabs ≈ a few hundred px) while
   the modal body is much taller — looking like a free-floating box. */
#viewSettings .modal-body {
    display: flex;
    flex-direction: column;
}

.settings-features-section {
    border-top: 1px solid var(--izi-border);
    padding-top: var(--izi-space-md);
    margin-top: var(--izi-space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#featuresPanelRoot {
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-md);
    flex: 1;
    min-height: 0;
}

/* ========== Top toolbar: preset + config on ONE row ==========
   Previously these were two full-width bars stacked above a third
   full-width search — a monotonous "empilement". Now preset and config
   share a single wrapping row, each half-width, visually distinct
   (accent preset select, labelled config group), and the search sits in
   its own rounded, icon-prefixed field below. */
.features-toolbar {
    display: flex;
    gap: var(--izi-space-md);
    align-items: center;
    flex-wrap: wrap;
}

.features-presets {
    display: flex;
    gap: var(--izi-space-sm);
    align-items: center;
    flex-wrap: nowrap;
    flex: 1 1 220px;
}

.features-preset-label,
.features-config-label {
    font-weight: 600;
    color: var(--izi-text-secondary);
    white-space: nowrap;
}

.features-preset-select {
    flex: 1;
    min-width: 110px;
    padding: var(--izi-space-sm) var(--izi-space-md);
    /* Accent border marks it as the primary control of the panel. */
    border: 1px solid color-mix(in srgb, var(--izi-primary) 45%, var(--izi-border));
    border-radius: var(--izi-radius-md, 6px);
    background: var(--izi-bg);
    color: var(--izi-text);
    cursor: pointer;
    font-weight: 600;
}

/* ========== Named config manager bar ========== */

.features-config-bar {
    display: flex;
    gap: var(--izi-space-sm);
    align-items: center;
    flex: 1 1 220px;
}

.features-config-select {
    flex: 1;
    min-width: 140px;
    padding: var(--izi-space-sm) var(--izi-space-md);
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-md, 6px);
    background: var(--izi-bg);
    color: var(--izi-text);
    cursor: pointer;
}

.features-config-btn {
    flex: 0 0 auto;
    padding: var(--izi-space-sm);
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-md, 6px);
    background: var(--izi-bg);
    color: var(--izi-text);
    cursor: pointer;
    line-height: 1;
}

.features-config-btn:hover:not(:disabled) {
    background: var(--izi-bg-hover);
}

.features-config-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.features-preset-btn {
    flex: 1;
    min-width: 80px;
    padding: var(--izi-space-sm) var(--izi-space-md);
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-md, 6px);
    background: var(--izi-bg);
    color: var(--izi-text);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.features-preset-btn:hover {
    background: var(--izi-bg-hover);
}

.features-preset-btn.active {
    background: var(--izi-primary);
    color: #fff;
    border-color: var(--izi-primary);
}

/* ========== Search input (rounded, icon-prefixed) ========== */

.features-searchbar {
    position: relative;
    display: flex;
    align-items: center;
}

.features-search-icon {
    position: absolute;
    left: var(--izi-space-md);
    pointer-events: none;
    opacity: 0.55;
    font-size: 0.85em;
    line-height: 1;
}

.features-search {
    width: 100%;
    padding: var(--izi-space-sm) var(--izi-space-md);
    padding-left: calc(var(--izi-space-md) * 2 + 0.9em);
    border: 1px solid var(--izi-border);
    border-radius: 999px;
    background: var(--izi-bg);
    color: var(--izi-text);
    font-size: var(--izi-font-size-base);
}

.features-search:focus {
    outline: none;
    border-color: var(--izi-primary);
}

.features-search::placeholder {
    color: var(--izi-text-muted);
}

/* ========== Tree (categories + features) ========== */

.features-tree {
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-xs);
}

.features-cat {
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-md, 6px);
    overflow: hidden;
    background: var(--izi-bg);
}

.features-cat-header {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
    padding: var(--izi-space-sm) var(--izi-space-md);
    cursor: pointer;
    user-select: none;
    background: var(--izi-bg-secondary);
    color: var(--izi-text);
}

.features-cat-header:hover {
    background: var(--izi-bg-hover);
}

.features-cat-toggle {
    display: inline-block;
    width: 1em;
    transition: transform 0.15s;
    color: var(--izi-text-secondary);
}

.features-cat[data-collapsed="true"] .features-cat-toggle {
    transform: rotate(-90deg);
}

.features-cat[data-collapsed="true"] .features-cat-body {
    display: none;
}

.features-cat-checkbox {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--izi-primary);
}

.features-cat-label {
    flex: 1;
    font-weight: 600;
}

.features-cat-count {
    font-size: var(--izi-font-size-base);
    color: var(--izi-text-muted);
    font-variant-numeric: tabular-nums;
}

.features-cat-body {
    padding: var(--izi-space-sm) var(--izi-space-md) var(--izi-space-md) calc(var(--izi-space-md) + 1.5em);
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-xs);
    background: var(--izi-bg);
    color: var(--izi-text);
}

.features-row {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
    color: var(--izi-text);
}

.features-row[data-hidden="true"] {
    display: none;
}

.features-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--izi-primary);
}

.features-row-label {
    flex: 1;
}

.features-row-desc {
    font-size: var(--izi-font-size-base);
    color: var(--izi-text-secondary);
}

/* ========== Slot for extras (relocated existing settings) ==========
   index-features-ui.js moves existing .settings-section nodes from the
   modal into [data-extras-slot="<categoryId>"] containers so behavior
   settings live alongside the visibility features they relate to. */

.features-cat-extras {
    border-top: 1px dashed var(--izi-border);
    margin-top: var(--izi-space-sm);
    padding-top: var(--izi-space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-sm);
}

.features-cat-extras:empty {
    display: none;
}

/* Tighten spacing of relocated .settings-section blocks inside accordions */
.features-cat-extras .settings-section {
    margin-bottom: 0;
}

/* Les cases des réglages relocalisés (p. ex. « Advanced selection mode »)
   étaient en bleu natif, dépareillées des toggles de features en violet. On
   leur applique le même `accent-color` pour une apparence cohérente. */
.features-cat-extras input[type="checkbox"] {
    accent-color: var(--izi-primary);
}

/* ========== Tabs (replaces the accordion) ==========
   Lateral layout: a 200px sidebar on the left listing the categories,
   and the active tab's content on the right. Mirrors the IziBuddy Lab
   batches sidebar visually (so the pattern reads consistently across
   the app). */

.features-layout {
    display: flex;
    flex-direction: row;
    gap: var(--izi-space-md);
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.features-tabs {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--izi-surface-elevated, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-md, 6px);
    padding: var(--izi-space-sm);
    /* La colonne est étirée (align-items: stretch) à la hauteur de la zone de
       droite. Quand celle-ci est courte (peu d'options dans l'onglet actif), la
       liste de navigation devient plus haute que la boîte : sans ceci, les
       groupes du bas (Avancé) débordaient SOUS la bordure. min-height:0 +
       overflow-y:auto la garde CONTENUE — elle défile à l'intérieur de son cadre
       si nécessaire, et reste sans scroll quand la fenêtre est assez haute. */
    min-height: 0;
    overflow-y: auto;
}

/* Screen-oriented groups in the sidebar (Principal / Éditeur / Avancé).
   Each group is a visually distinct block so the hierarchy reads clearly:
   a coloured, underlined heading, extra separation above, and indented
   items connected by a left rail. */
.features-cat-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.features-cat-group + .features-cat-group {
    margin-top: var(--izi-space-md);
    padding-top: var(--izi-space-md);
    border-top: 1px solid var(--izi-border);
}
/* En-tête de groupe = bouton d'accordéon (replie/déplie ses catégories). */
.features-cat-group-label {
    display: flex;
    align-items: center;
    gap: var(--izi-space-xs, 4px);
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: var(--izi-font-size-xs, 0.75rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--izi-primary, #6366f1);
    padding: 2px var(--izi-space-sm) var(--izi-space-xs);
    margin-bottom: 2px;
}
.features-cat-group-label:hover { filter: brightness(1.15); }
.features-cat-group-label:focus-visible {
    outline: 2px solid var(--izi-primary, #6366f1);
    outline-offset: 2px;
    border-radius: 4px;
}
.features-cat-group-caret {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 0.9em;
    line-height: 1;
}
.features-cat-group.open > .features-cat-group-label .features-cat-group-caret {
    transform: rotate(90deg);
}
/* Corps replié : masqué tant que le groupe n'est pas ouvert. */
.features-cat-group-body {
    display: none;
    flex-direction: column;
    gap: 2px;
}
.features-cat-group.open > .features-cat-group-body { display: flex; }
/* Items sit indented under their heading, joined by a subtle left rail so
   the grouping is obvious even without reading the headings. */
.features-cat-group .features-cat-tab {
    margin-left: var(--izi-space-sm);
    padding-left: var(--izi-space-sm);
    border-left: 2px solid var(--izi-border);
}
.features-cat-group .features-cat-tab:hover {
    border-left-color: var(--izi-text-secondary);
}
.features-cat-group .features-cat-tab.active {
    border-left-color: var(--izi-primary, #6366f1);
}

.features-cat-tab {
    background: none;
    border: none;
    padding: var(--izi-space-xs) var(--izi-space-sm);
    border-radius: var(--izi-radius-sm, 4px);
    cursor: pointer;
    color: var(--izi-text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--izi-space-xs);
    font-size: var(--izi-font-size-base);
    text-align: left;
    width: 100%;
}

.features-cat-tab:hover {
    color: var(--izi-text);
    background: var(--izi-surface-elevated, rgba(255, 255, 255, 0.04));
}

.features-cat-tab.active {
    background: var(--izi-primary-bg, rgba(99, 102, 241, 0.15));
    color: var(--izi-text);
    font-weight: 600;
}

.features-cat-tab-count {
    font-size: 0.85em;
    color: var(--izi-text-secondary);
    padding: 0.05rem 0.35rem;
    background: var(--izi-surface-elevated, var(--izi-bg));
    border-radius: 8px;
    flex: 0 0 auto;
}

/* Tristate dot on the tab to surface "some on / all on / all off" at a
   glance, mirroring the old category checkbox affordance. */
.features-cat-tab[data-tristate="on"] .features-cat-tab-count {
    color: var(--izi-primary);
}

.features-cat-tab[data-tristate="partial"] .features-cat-tab-count {
    color: var(--izi-warning, #c80);
}

.features-tab-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-xs);
}

.features-row-cat {
    font-size: 0.85em;
    color: var(--izi-text-secondary);
    margin-left: auto;
}

.features-empty {
    color: var(--izi-text-secondary);
    font-size: 0.9em;
    padding: var(--izi-space-md);
    text-align: center;
}

/* ── Gestionnaire de thèmes (index-themes.js, dans Options → Affichage) ───── */
#settingsThemesSection .theme-manager-row,
#settingsThemesSection .theme-manager-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--izi-space-sm);
    align-items: center;
    margin-bottom: var(--izi-space-md);
}

/* Barre d'actions du thème : icon-buttons homogènes (même jeu SVG, currentColor).
   Une seule rangée compacte ; hiérarchie primaire (accent) / destructif (rouge). */
#settingsThemesSection .theme-toolbar {
    gap: 4px;
}
#settingsThemesSection .theme-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-sm);
    background: var(--izi-bg-secondary);
    color: var(--izi-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#settingsThemesSection .theme-tool-btn:hover {
    background: var(--izi-bg-tertiary);
    color: var(--izi-text);
    border-color: var(--izi-border-strong);
}
/* Action primaire (Ajouter) : accent. */
#settingsThemesSection .theme-tool-btn.is-primary {
    color: var(--izi-primary);
    border-color: color-mix(in srgb, var(--izi-primary) 45%, var(--izi-border));
}
#settingsThemesSection .theme-tool-btn.is-primary:hover {
    background: var(--izi-primary-bg);
    color: var(--izi-primary);
    border-color: var(--izi-primary);
}
/* Action destructive (Supprimer) : rouge. */
#settingsThemesSection .theme-tool-btn.is-danger {
    color: var(--izi-error);
}
#settingsThemesSection .theme-tool-btn.is-danger:hover {
    background: color-mix(in srgb, var(--izi-error) 12%, transparent);
    color: var(--izi-error);
    border-color: var(--izi-error);
}
/* Séparateur de groupe (édition | échange). */
#settingsThemesSection .theme-tool-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: var(--izi-border);
}
#settingsThemesSection .theme-base-label {
    display: inline-flex;
    align-items: center;
    gap: var(--izi-space-xs);
    font-size: var(--izi-font-size-sm);
    color: var(--izi-text-secondary);
}
/* Couleurs / Sigils tab bar inside the theme editor. Not scoped to the id so
   it also works when the panel is rendered into a floating window. */
.theme-tabs {
    display: flex;
    gap: var(--izi-space-xs);
    border-bottom: 1px solid var(--border);
    margin: var(--izi-space-sm) 0;
}
.theme-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    padding: var(--izi-space-xs) var(--izi-space-md);
    cursor: pointer;
    font: inherit;
    margin-bottom: -1px;
}
.theme-tab:hover { color: var(--text); }
.theme-tab.active {
    color: var(--izi-primary, #5558e3);
    border-bottom-color: var(--izi-primary, #5558e3);
    font-weight: 600;
}

#settingsThemesSection .theme-color-list {
    display: flex;
    flex-direction: column;
    gap: var(--izi-space-sm);
}
.theme-color-group {
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-md, 6px);
    background: color-mix(in srgb, var(--izi-bg-secondary) 56%, transparent);
    overflow: hidden;
}
.theme-color-group-toggle {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--izi-space-sm);
    padding: var(--izi-space-sm) var(--izi-space-md);
    border: 0;
    background: transparent;
    color: var(--izi-text);
    font: inherit;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}
.theme-color-group-toggle:hover {
    background: var(--izi-bg-hover);
}
.theme-color-group-chevron {
    color: var(--izi-text-secondary);
    transition: transform var(--izi-transition-fast, 120ms ease);
}
.theme-color-group.is-open .theme-color-group-chevron {
    transform: rotate(180deg);
}
.theme-color-group-content {
    display: none;
    padding: 0 var(--izi-space-md) var(--izi-space-sm);
}
.theme-color-group.is-open .theme-color-group-content {
    display: block;
}
#settingsThemesSection .theme-color-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--izi-space-sm);
    min-height: 46px;
    padding: var(--izi-space-xs) 0;
    border-top: 1px solid color-mix(in srgb, var(--izi-border) 55%, transparent);
}
#settingsThemesSection .theme-color-input {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-sm, 4px);
    background: none;
    cursor: pointer;
    flex: 0 0 auto;
}
#settingsThemesSection .theme-color-label {
    display: block;
    font-size: var(--izi-font-size-sm);
    color: var(--izi-text);
}
#settingsThemesSection .theme-color-copy { min-width: 0; }
#settingsThemesSection .theme-color-description {
    display: block;
    margin-top: 1px;
    overflow: hidden;
    color: var(--izi-text-secondary);
    font-size: var(--izi-font-size-xs);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#settingsThemesSection .theme-color-hex {
    font-size: var(--izi-font-size-xs);
    color: var(--izi-text-secondary);
    font-family: var(--izi-font-mono, monospace);
    letter-spacing: .02em;
}

/* Lignes sigils : pastille de couleur résolue + sélecteurs compacts. */
#settingsThemesSection .theme-sigil-row { flex-wrap: wrap; }
#settingsThemesSection .theme-sig-swatch {
    width: 18px; height: 18px; flex: 0 0 18px;
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-sm, 4px);
}
#settingsThemesSection .theme-sig-mode,
#settingsThemesSection .theme-sig-ref {
    height: 28px;
    padding: 0 0.4rem;
    font-size: var(--izi-font-size-xs);
    flex: 0 0 auto;
    width: auto;
}

/* ── Sigils (layout B : libellé | Texte/Fond | mode), une ligne par sigil ─── */
#settingsThemesSection .theme-sigils-title { margin: var(--izi-space-md) 0 var(--izi-space-xs); }
#settingsThemesSection .theme-sigil-list { display: flex; flex-direction: column; gap: 2px; }
#settingsThemesSection .theme-sigil-row {
    display: flex; align-items: center; gap: var(--izi-space-sm);
    flex-wrap: wrap; padding: 3px 0;
}
#settingsThemesSection .theme-sig-swatch {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 22px; padding: 0 4px;
    font-size: 11px; font-weight: 600; font-family: var(--izi-font-mono, monospace);
    border: 1px solid var(--izi-border); border-radius: var(--izi-radius-sm, 4px);
    flex: 0 0 auto;
}
#settingsThemesSection .theme-sigil-row .theme-color-label { flex: 0 0 130px; }
#settingsThemesSection .theme-sig-pair,
#settingsThemesSection .theme-sig-refnote {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 1 1 auto; font-size: var(--izi-font-size-sm); color: var(--izi-text-secondary);
}
#settingsThemesSection .theme-sig-cap { font-size: var(--izi-font-size-xs); color: var(--izi-text-secondary); }
#settingsThemesSection .theme-sig-mode { height: 28px; padding: 0 0.4rem; font-size: var(--izi-font-size-xs); flex: 0 0 auto; width: auto; }
#settingsThemesSection .theme-sig-ref { height: 26px; padding: 0 0.3rem; font-size: var(--izi-font-size-xs); width: auto; }

/* Une seule ligne par sigil (NON négociable) : pas de wrap, contrôles compacts,
   checkbox « réf. » au lieu d'un dropdown de mode. */
#settingsThemesSection .theme-sigil-row { flex-wrap: nowrap; overflow: hidden; }
#settingsThemesSection .theme-sigil-row .theme-color-label {
    flex: 0 0 148px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#settingsThemesSection .theme-sig-refbox {
    display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
    font-size: var(--izi-font-size-xs); color: var(--izi-text-secondary); cursor: pointer;
    white-space: nowrap;
}
#settingsThemesSection .theme-sig-refbox input { margin: 0; }
#settingsThemesSection .theme-sig-pair { flex: 0 0 auto; flex-wrap: nowrap; }
#settingsThemesSection .theme-sig-refnote { flex: 1 1 auto; min-width: 0; }
#settingsThemesSection .theme-sig-ref { flex: 1 1 auto; min-width: 0; max-width: 240px; }
#settingsThemesSection .theme-sigil-row .theme-color-input { width: 30px; height: 22px; }

/* Sigil fg + bg colour swatches: identical custom controls (bordered frame +
   inset fill carrying the colour / no-colour cue). Both replace the native
   <input type=color>, which can't be sized to match. */
#settingsThemesSection .theme-sigil-row .theme-color-input.theme-swatch-btn {
    position: relative; padding: 0; overflow: hidden; background: none; cursor: pointer;
}
#settingsThemesSection .theme-swatch-fill {
    position: absolute; inset: 2px; border-radius: 2px; display: block;
}
/* Separate the Texte pair from the Fond pair (~double the inter-control gap). */
#settingsThemesSection .theme-sig-pair .theme-sig-cap-bg { margin-left: 6px; }

/* « réf. » en PREMIÈRE colonne (avant la pastille), sans libellé : petite marge
   à droite pour la séparer du sigil. L'espace libre de la ligne se place
   naturellement au centre (sélecteur de cible en mode réf., pickers en mode
   couleur). */
#settingsThemesSection .theme-sig-refbox { flex: 0 0 auto; margin-right: 2px; }

/* Case transparence du fond d'un sigil + libellé « transparent ». */
#settingsThemesSection .theme-sig-transp {
    display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer;
}
#settingsThemesSection .theme-sig-transp input { margin: 0; }
#settingsThemesSection .theme-sig-transp-txt {
    font-size: var(--izi-font-size-xs); font-style: italic;
    color: var(--izi-text-secondary); white-space: nowrap;
}

/* ===== Tiroir latéral droit « Éditeur de thème » =====
   Même mécanique que la sidebar d'historique des notifications : fixé à droite,
   hors écran (translateX 100%), slide-in au toggle, SANS backdrop pour que l'app
   reste visible derrière et que l'aperçu du thème soit live. Le corps porte l'id
   #settingsThemesSection (styles des contrôles réutilisés tels quels). */
.theme-editor-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 96vw);
    background: var(--izi-bg);
    color: var(--izi-text);
    border-left: 1px solid var(--izi-border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform var(--izi-transition-base);
    display: flex;
    flex-direction: column;
    z-index: calc(var(--izi-z-toast) - 1);
}
.theme-editor-panel.open { transform: translateX(0); }

.theme-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--izi-space-sm);
    padding: var(--izi-space-md) var(--izi-space-lg);
    border-bottom: 1px solid var(--izi-border);
    background: var(--izi-bg-secondary);
}
.theme-editor-title { margin: 0; font-size: var(--izi-font-size-md); font-weight: 600; }
.theme-editor-header-actions { display: flex; align-items: center; gap: var(--izi-space-xs); }
.theme-editor-close,
.theme-editor-float {
    width: 28px; height: 28px; border: none; background: transparent;
    color: var(--izi-text-secondary); line-height: 1;
    cursor: pointer; border-radius: var(--izi-radius-sm);
}
.theme-editor-close { font-size: 22px; }
.theme-editor-float { font-size: 16px; }
.theme-editor-close:hover,
.theme-editor-float:hover { color: var(--izi-text); background: var(--izi-bg-tertiary); }

/* En mode fenêtre flottante, le corps de l'éditeur (nœud hôte déplacé dans la
   FloatingWindow) doit remplir la fenêtre et scroller à l'intérieur. */
.fw-window.theme-editor-float .theme-editor-body,
.fw-window.theme-editor-float #settingsThemesSection {
    height: 100%;
    overflow-y: auto;
    padding: var(--izi-space-md) var(--izi-space-lg);
    box-sizing: border-box;
}

/* Corps scrollable ; l'éditeur (long) tient dans le tiroir. */
.theme-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--izi-space-md) var(--izi-space-lg);
}

/* ── TRACES DE LA CONSOLE (Options → Avancé) ─────────────────────────────────
   Deux axes, un fil d'Ariane, un filtre. La liste vient d'IziTrace — sa
   LONGUEUR n'est pas connue à l'avance et grandit à chaque module converti,
   d'où une hauteur bornée qui défile plutôt qu'une pile qui pousse le pied du
   panneau hors de l'écran. */

/* Tout l'en-tête sur une ligne. Le filtre prend ce qui reste : c'est le seul
   des trois qui gagne à être large. */
.izi-traces-tete {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
    margin-bottom: var(--izi-space-sm);
}
.izi-traces-tete .settings-checkbox-label { margin: 0; flex: none; white-space: nowrap; }
.izi-traces-mini {
    flex: none;
    background: var(--izi-bg); color: var(--izi-text);
    border: 1px solid var(--izi-border-strong, var(--izi-border));
    border-radius: 5px; padding: 4px 6px; font-size: 0.8125rem; cursor: pointer;
}
/* Armer : « ce que je règle sera encore là au retour ». Le point rouge dit
   l'état sans mot — allumé, ça enregistre. */
.izi-traces-armer {
    flex: none;
    background: var(--izi-bg); color: var(--izi-text-secondary, var(--izi-text));
    border: 1px solid var(--izi-border-strong, var(--izi-border));
    border-radius: 5px; padding: 3px 7px; font-size: 0.9375rem; line-height: 1.1;
    cursor: pointer;
}
.izi-traces-armer.est-arme {
    color: var(--izi-danger, #ef4444);
    border-color: var(--izi-danger, #ef4444);
}
.izi-traces-armer:hover { border-color: var(--izi-accent, var(--izi-border-strong)); }

/* Relire la source. Dans la ligne, pas sur une ligne à lui. */
.izi-traces-relire {
    flex: none;
    background: var(--izi-bg); color: var(--izi-text-secondary, var(--izi-text));
    border: 1px solid var(--izi-border-strong, var(--izi-border));
    border-radius: 5px; padding: 3px 7px; font-size: 0.9375rem; line-height: 1.1;
    cursor: pointer;
}
.izi-traces-relire:hover { color: var(--izi-text); border-color: var(--izi-accent, var(--izi-border-strong)); }
.izi-traces-filtre {
    flex: 1; min-width: 0;
    background: var(--izi-bg-secondary); color: var(--izi-text);
    border: 1px solid var(--izi-border); border-radius: 5px;
    padding: 5px 8px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.8125rem;
}

/* Le fil d'Ariane, libellé de la bascule tri-état. */
.izi-traces-fil {
    display: flex; align-items: center; gap: var(--izi-space-sm);
    padding: var(--izi-space-xs) var(--izi-space-sm);
    background: var(--izi-bg-secondary);
    border: 1px solid var(--izi-border);
    border-radius: 5px;
    margin-top: var(--izi-space-sm);
}
.izi-traces-fil.est-inerte { opacity: 0.5; }
.izi-traces-ariane { display: flex; align-items: center; gap: 3px; min-width: 0; }
.izi-traces-ariane button {
    background: none; border: 0; padding: 2px 3px; cursor: pointer;
    color: var(--izi-primary); font-size: 0.8125rem;
}
.izi-traces-ariane button:hover { text-decoration: underline; }
.izi-traces-ici {
    font-family: 'Consolas', 'Monaco', monospace; font-size: 0.8125rem;
    color: var(--izi-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.izi-traces-sep { color: var(--izi-text-secondary); }
/* Le compte EST la portée : sans lui, « tout » est l'endroit où l'on coche
   trente paires en croyant en cocher trois. */
.izi-traces-portee {
    margin-left: auto; flex: none; padding-left: var(--izi-space-sm);
    font-family: 'Consolas', 'Monaco', monospace; font-size: 0.75rem;
    color: var(--izi-text-secondary); font-variant-numeric: tabular-nums;
}

/* La liste : une rangée par ligne, tout l'espace au nom. La grille en colonnes
   faisait déborder les noms longs les uns sur les autres. */
.izi-traces-modules {
    max-height: 300px; overflow-y: auto;
    margin-top: var(--izi-space-xs);
    border: 1px solid var(--izi-border); border-radius: 5px;
}

/* Le préfixe pointé en gris : la partie qui DISTINGUE est la dernière, et
   c'est elle qu'une grille en colonnes coupait. */
.izi-traces-prefixe { color: var(--izi-text-secondary); }
.izi-traces-vide { color: var(--izi-text-secondary); }
.izi-traces-rangee {
    display: grid; grid-template-columns: auto 1fr auto auto;
    align-items: center; gap: var(--izi-space-sm);
    padding: 5px var(--izi-space-sm);
}
.izi-traces-rangee:hover { background: var(--izi-bg-tertiary); }
.izi-traces-corps {
    background: none; border: 0; padding: 0; margin: 0; text-align: left;
    color: inherit; cursor: pointer; min-width: 0; width: 100%;
}
.izi-traces-rangee.est-feuille .izi-traces-corps { cursor: default; }
.izi-traces-nom {
    font-family: 'Consolas', 'Monaco', monospace; font-size: 0.8125rem;
    overflow-wrap: anywhere;
}
.izi-traces-compte {
    flex: none; font-size: 0.6875rem; font-variant-numeric: tabular-nums;
    color: var(--izi-success, var(--izi-text-secondary));
    border: 1px solid currentColor; border-radius: 3px; padding: 1px 5px;
}
.izi-traces-chevron { color: var(--izi-text-secondary); }
.izi-traces-chevron.est-creux { visibility: hidden; }

/* La note « imposé par l'adresse » : elle explique pourquoi les cases ne
   répondent pas. */
.izi-traces-forcee {
    font-style: italic;
    color: var(--izi-warning, var(--izi-text-secondary));
}

/* Un module sans `logger.debug()` dans son code : inerte, et DIT pourquoi.
   Utilisé par le panneau serveur (Administration → Traces). */
.izi-traces-inerte {
    flex: none;
    font-size: 0.6875rem;
    color: var(--izi-text-secondary);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 1px 5px;
}
.izi-traces-rangee input:disabled ~ .izi-traces-nom { opacity: 0.55; }

/* ── L'ONGLET « TRACES » DES OPTIONS VA JUSQU'EN BAS ─────────────────────────
   Même défaut que dans l'Administration, et même remède. L'écran des traces a
   désormais son propre onglet : il y est SEUL, donc une liste plafonnée à
   300 px laisse les deux tiers du dialogue vides, avec un ascenseur pour dix
   lignes alors que la place est là, dessous, inutilisée.
   La colonne flexible existait déjà jusqu'à `.features-tab-content` ; il
   manquait les quatre maillons suivants — la fente d'extras, la section, son
   hôte, puis la liste. Un seul `min-height: 0` oublié dans la chaîne et tout
   le reste ne sert à rien : un élément flex refuse par défaut de descendre
   sous la hauteur de son contenu, et la liste repousse alors le bas du
   dialogue au lieu de se borner à ce qui reste.
   Tout est cadré sur la fente `traces` : les autres onglets rangent des
   réglages qui se lisent de haut en bas et n'ont rien à étirer. */
.features-tab-content { min-height: 0; }
.features-cat-extras[data-extras-slot="traces"],
.features-cat-extras[data-extras-slot="traces"] > #settingsTracesSection,
#settingsTracesHote {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* La fente porte un liseré pointillé et une marge qui séparent un réglage
   relocalisé des cases au-dessus. Ici il n'y a pas de cases : l'onglet ne
   contient QUE cet écran, et le liseré soulignerait le vide. */
.features-cat-extras[data-extras-slot="traces"] {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}
#settingsTracesHote .izi-traces-modules {
    flex: 1;
    /* `max-height` fixe ET `flex: 1` se contrediraient : la borne saute, c'est
       la place disponible qui décide. */
    max-height: none;
    min-height: 0;
}

/* ── LE PANNEAU SERVEUR VA JUSQU'EN BAS ──────────────────────────────────────
   Dans l'Administration, le contenu d'onglet est haut : une liste plafonnée à
   300 px y laissait les deux tiers du dialogue vides, avec un ascenseur pour
   dix lignes. Le panneau devient une colonne flexible et la liste prend ce qui
   reste. `switchAdminTab` pose un `display` VIDE (pas « block ») précisément
   pour que ces règles s'appliquent. */
#adminPanelTraces {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
#adminTracesContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
#adminTracesContent .izi-traces-modules {
    flex: 1;
    /* `max-height` fixe ET `flex: 1` se contrediraient : la borne saute, c'est
       la place disponible qui décide. */
    max-height: none;
    min-height: 0;
}