/**
 * 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);
}
.features-cat-group-label {
    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;
}
/* 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: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--izi-space-xs) var(--izi-space-md);
}
#settingsThemesSection .theme-color-row {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
    padding: 2px 0;
}
#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 {
    flex: 1 1 auto;
    font-size: var(--izi-font-size-sm);
    color: var(--izi-text);
}
#settingsThemesSection .theme-color-hex {
    font-size: var(--izi-font-size-xs);
    color: var(--izi-text-secondary);
}

/* 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);
}