/*
 * Barre d'options « Paint.NET » (body.illu-toolbar-pdn) — alternative au ruban Microsoft.
 *
 * Mêmes éléments que le ruban (aucun contrôle dupliqué) : seule la mise en forme change.
 * Une seule rangée de 26 px, sans libellés de groupe, groupes séparés par un filet,
 * jauges « Libellé : ⊟ [valeur] ⊞ » comme « Taille du pinceau » / « Dureté » de Paint.NET.
 * Réglage : Paramètres › Apparence › Barre d'options (clé illu_toolbar_style).
 */

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 0 4px !important;
    background: var(--pdn-bar, #ffffff);
    border-bottom: 1px solid var(--pdn-border, #dadada);
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 6px !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--pdn-sep, #dcdcdc) !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 4px;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group:last-child {
    border-right: 0 !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group-label {
    display: none !important;
}

/* « Outil : » devant le sélecteur d'outil, comme Paint.NET */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group[data-illu-ribbon-group="tool"] .illu-ribbon-group-label {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    order: -1;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 3px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: var(--pdn-text, #000) !important;
    height: auto !important;
    width: auto !important;
    white-space: nowrap;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group[data-illu-ribbon-group="tool"] .illu-ribbon-group-label::after {
    content: "\00a0:";
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group-body {
    height: 26px !important;
    min-height: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 0 !important;
}

/* grilles 2×n / 3×2 du ruban → une seule ligne.
 * On ne touche JAMAIS à `display` : le code masque les contrôles inutiles pour l'outil
 * courant (attribut hidden / display:none) et doit garder la main. On aplatit seulement
 * l'orientation : flex → ligne, grille → une rangée de colonnes implicites. */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container :is(
    .illu-ribbon-grid-3x2, .illu-ribbon-selection-stack, .illu-toggle-group--compact-grid,
    .illu-ribbon-icon-only-group, .illu-ribbon-param-pack, .illu-mode-toggle-group,
    .illu-icon-toggle-group, .opt-grp, .illu-ribbon-gauge-stack, .illu-text-font-size-stack) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: auto !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 26px !important;
    gap: 1px 2px !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container :is(.illu-ribbon-group, .illu-ribbon-groups, .tool-options-bar, .tool-pinned-toggles) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container :is(.illu-ribbon-param-pack, .opt-grp) > * {
    grid-row: 1 !important;
    grid-column: auto !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-mode-toggle-item {
    height: 23px !important;
    min-height: 0 !important;
    width: auto !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-icon-toggle {
    height: 23px !important;
    min-height: 23px !important;
    min-width: 23px !important;
    width: auto !important;
    padding: 0 3px !important;
    border-width: 1px !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    gap: 3px !important;
    flex-direction: row !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-icon-toggle:hover {
    background: var(--pdn-hover, color-mix(in srgb, var(--mp-accent, #0078d4) 10%, #fff)) !important;
    border-color: var(--pdn-hover-border, color-mix(in srgb, var(--mp-accent, #0078d4) 22%, #fff)) !important;
}

/* boutons à icône : libellé en info-bulle (Paint.NET n'affiche que l'icône) */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-icon-toggle:has(> i, > svg, > .illu-cutout-dot) .illu-mode-toggle-lbl {
    display: none !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-icon-toggle svg,
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-icon-toggle i {
    width: 16px !important;
    height: 16px !important;
    font-size: 14px !important;
}

/* sélecteur d'outil : icône + flèche, sans texte */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-tool-header,
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-tool-picker,
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-tool-picker-select {
    height: 23px !important;
    min-height: 23px !important;
    width: auto !important;
    min-width: 34px !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-tool-picker {
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 0 3px !important;
    border: 1px solid transparent;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-tool-picker:hover {
    background: var(--pdn-hover, color-mix(in srgb, var(--mp-accent, #0078d4) 10%, #fff));
    border-color: var(--pdn-hover-border, color-mix(in srgb, var(--mp-accent, #0078d4) 22%, #fff));
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-tool-picker-label {
    display: none !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-tool-picker-chevron {
    position: static !important;
    font-size: 8px !important;
}

/* jauges : « Libellé : ⊟ [ piste ] ⊞ » (sans forcer l'affichage des jauges masquées) */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container :is(.illu-gauge-field, .field-row.illu-gauge-field, .illu-cutout-gauge) {
    flex-direction: row !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    height: 24px !important;
    min-height: 0 !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: auto !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-opt-lbl {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 4px 0 0 !important;
    font-size: 12px !important;
    color: var(--pdn-text, #000) !important;
    white-space: nowrap;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-opt-lbl::after {
    content: "\00a0:";
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-gauge-wrap {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    width: auto !important;
    gap: 0 !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-gauge-step {
    width: 13px !important;
    min-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    padding: 0 !important;
    margin: 0 5px !important;
    border: 1px solid var(--pdn-control-border, #7a7a7a) !important;
    border-radius: 0 !important;
    background: var(--pdn-input, #ffffff) !important;
    color: var(--pdn-text, #333) !important;
    font-size: 11px !important;
    line-height: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-gauge-step:hover {
    border-color: var(--mp-accent, #0078d4) !important;
    background: var(--pdn-hover, color-mix(in srgb, var(--mp-accent, #0078d4) 10%, #fff)) !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-gauge-track {
    width: 150px !important;
    min-width: 150px !important;
    height: 20px !important;
    border: 1px solid var(--pdn-control-border, #8d8d8d) !important;
    border-radius: 0 !important;
    background: var(--pdn-input, #ffffff) !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-gauge-fill {
    background: var(--mp-accent, #0078d4) !important;
    border-radius: 0 !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-gauge-val {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 4px !important;
    font-size: 12px !important;
    color: var(--pdn-text, #000) !important;
    mix-blend-mode: normal !important;
}

/* listes déroulantes (police, mode de fusion…) au format Paint.NET */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container select:not(.illu-tool-picker-select) {
    height: 23px !important;
    min-height: 23px !important;
    border: 1px solid var(--pdn-control-border, #8d8d8d) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    background-color: var(--pdn-input, #fff) !important;
    color: var(--pdn-text, #000) !important;
}

/* bouton « plus d'options » éventuel du ruban */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-overflow-btn {
    height: 23px !important;
    min-height: 23px !important;
    align-self: center;
}

/* ---------------------------------------------------------------- barre de commandes (sous les menus)
 * Boutons supplémentaires de Paint.NET (couper, copier, coller, rogner, désélectionner, grille,
 * règles) : visibles seulement avec la barre « Style Paint.NET ». Le zoom part dans la barre d'état. */
/* Ruban (par défaut) et téléphone : la barre garde son contenu d'origine (nouveau, ouvrir,
 * enregistrer, imprimer, annuler, rétablir, zoom). Sélecteurs volontairement lourds : les
 * thèmes forcent `display` sur .illu-menubar-icon-btn avec des chaînes de :not(). */
html body:not(.illu-toolbar-pdn) .illu-sub-menubar .illu-menubar-toolbar .illu-pdn-tb-only.illu-pdn-tb-only,
html body.illu-mobile-ui .illu-sub-menubar .illu-menubar-toolbar .illu-pdn-tb-only.illu-pdn-tb-only,
.illu-pdn-tb-only {
    display: none !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) .illu-menubar-icon-btn.illu-pdn-tb-only {
    display: inline-flex !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) .illu-menubar-toolbar__sep.illu-pdn-tb-only {
    display: inline-block !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) .illu-menubar-zoom-btn,
body.illu-toolbar-pdn:not(.illu-mobile-ui) .illu-menubar-zoom-wrap,
body.illu-toolbar-pdn:not(.illu-mobile-ui) #illu-tb-zoom-fit-row1 {
    display: none !important;
}

/* « Signaler un bug » : icône seule (le libellé reste en info-bulle) */
body.illu-toolbar-pdn:not(.illu-mobile-ui) .menubar-contact-btn {
    margin-left: auto !important;
    padding: 0 !important;
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) .menubar-contact-btn > span:not(.menu-icon) {
    display: none !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) .illu-menubar-icon-btn[aria-pressed="true"] {
    background: var(--pdn-tool-sel, color-mix(in srgb, var(--mp-accent, #0078d4) 30%, #fff)) !important;
    border-color: var(--mp-accent, #0078d4) !important;
}
/* ---------------------------------------------------------------- une seule rangée, rien de coupé
 * (l'aplatissement des grilles est fait par js/app/pdn-chrome.js → illuFlattenPdnBar) */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container :is(.illu-ribbon-group, .illu-ribbon-group-body, .illu-ribbon-groups, .tool-options-bar) {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
}

/* lignes « Libellé : contrôle » : toujours en ligne, libellé jamais écrasé */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .field-row.illu-gauge-field {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 8px !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .field-row.illu-gauge-field > .illu-opt-lbl {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* jauge Paint.NET : « ⊟ [ piste 120 px ] ⊞ », jamais rétrécie */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-gauge-wrap {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-gauge-track {
    position: relative !important;
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    height: 22px !important;
    box-sizing: border-box !important;
}

/* zone de police (comme la liste de polices de Paint.NET) */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-font-combo-wrap {
    flex: 0 0 160px !important;
    width: 160px !important;
    min-width: 160px !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-font-combo-wrap > input {
    width: 100% !important;
    height: 23px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--pdn-control-border, #8d8d8d) !important;
    border-radius: 0 !important;
    background: var(--pdn-input, #ffffff) !important;
    color: var(--pdn-text, #000) !important;
    font-size: 12px !important;
    padding: 0 4px !important;
}
/* « Outil : » aussi devant le sélecteur des outils à variantes (baguette, sélection rapide,
 * formes) — leur premier groupe s'appelle « Forme » dans le ruban */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group:is([data-illu-ribbon-group="shape-picker"], [data-illu-ribbon-group="select-picker"], :has(> .illu-ribbon-group-body .illu-tool-header)):not([data-illu-ribbon-group="tool"]) > .illu-ribbon-group-label {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    order: -1;
    position: static !important;
    margin: 0 3px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: var(--pdn-text, #000) !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    height: auto !important;
    white-space: nowrap !important;
}

body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group:is([data-illu-ribbon-group="shape-picker"], [data-illu-ribbon-group="select-picker"], :has(> .illu-ribbon-group-body .illu-tool-header)):not([data-illu-ribbon-group="tool"]) > .illu-ribbon-group-label::after {
    content: "\00a0:";
    font-size: 12px;
    color: var(--pdn-text, #000);
    white-space: nowrap;
}

/* cases à cocher internes des bascules (symétrie X / Y…) : pilotées par les boutons, jamais visibles */
body.illu-toolbar-pdn:not(.illu-mobile-ui) #tool-options-container .illu-icon-toggle-group > input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
}