/*
 * Curseurs (input type=range) au style Windows 10/11 — règle générale pour TOUTE l'application.
 *
 * Même dessin que les dialogues de Paint.NET 5.1 (relevé 1:1) :
 *   piste fine : 3 px entre deux filets #D6D6D6 (5 px au total) ;
 *   curseur 11×19 en « étiquette » pointe en bas : repos = accent, survol #171717, glissé #CCCCCC.
 * Trois familles :
 *   - curseurs « nus » (propriétés, export, vectorisation…) : la piste est dessinée par le curseur ;
 *   - curseurs .fx-range dans une piste à dégradé (.fx-track, .trk-wrapper : effets, couleurs,
 *     opacité de calque) : la piste porte le dégradé, le curseur ne dessine que l'étiquette ;
 *   - jauges du ruban (.illu-gauge-input) : curseur invisible, la jauge fait le visuel → non touchées.
 * Les couleurs en ligne (accent-color: #34d399…) sont remplacées : un seul dessin partout.
 * Portée : thème Flat Design (Windows 98 et macOS ont leurs propres curseurs), hors téléphone.
 */

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) {
    --wc-thumb: var(--mp-accent, #0078d7);
    --wc-thumb-hover: #171717;
    --wc-thumb-press: #cccccc;
    --wc-track: #e7e7e7;
    --wc-track-line: #d6d6d6;
}

body.theme-dark:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) {
    --wc-thumb-hover: #f0f0f0;
    --wc-thumb-press: #6e6e6e;
    --wc-track: #3a3a3a;
    --wc-track-line: #555555;
}

/* ---------------------------------------------------------------- base commune */
body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    accent-color: var(--wc-thumb) !important;
    height: 21px !important;
    min-height: 21px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: default;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input):focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: 1px;
}

/* piste dessinée par le curseur lui-même (curseurs nus) */
body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input):not(.fx-range)::-webkit-slider-runnable-track {
    height: 5px;
    background: var(--wc-track);
    border: 1px solid var(--wc-track-line);
    border-radius: 0;
    box-sizing: border-box;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input):not(.fx-range)::-moz-range-track {
    height: 3px;
    background: var(--wc-track);
    border: 1px solid var(--wc-track-line);
    border-radius: 0;
}

/* curseurs dans une piste à dégradé : la piste du curseur reste transparente */
body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"].fx-range::-webkit-slider-runnable-track {
    height: 5px;
    background: transparent;
    border: 0;
}

/* ---------------------------------------------------------------- l'étiquette (identique partout) */
body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input)::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 11px !important;
    height: 19px !important;
    margin-top: -8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--wc-thumb) !important;
    clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%) !important;
    cursor: default;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input):hover::-webkit-slider-thumb {
    background: var(--wc-thumb-hover) !important;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input):active::-webkit-slider-thumb {
    background: var(--wc-thumb-press) !important;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input):disabled::-webkit-slider-thumb {
    background: var(--wc-thumb-press) !important;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input)::-moz-range-thumb {
    width: 11px;
    height: 19px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--wc-thumb);
    clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%) !important;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input):hover::-moz-range-thumb {
    background: var(--wc-thumb-hover);
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) input[type="range"]:not(.illu-gauge-input):active::-moz-range-thumb {
    background: var(--wc-thumb-press);
}

/* ---------------------------------------------------------------- pistes à dégradé */
/* effets + opacité de calque : 5 px, filet #D6D6D6, pas d'arrondi */
body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .fx-track {
    height: 5px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--wc-track-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: content-box !important;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .fx-track > input[type="range"].fx-range {
    display: block;
    width: calc(100% + 12px) !important;
    margin: -8px -6px 0 !important;
}

/* fenêtre Couleurs : barres de dégradé plus hautes (la couleur doit se lire), même étiquette */
body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .trk-wrapper {
    border: 1px solid var(--wc-track-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) :is(#color-sliders-panel, .color-picker-body) .trk-wrapper.fx-track {
    height: 8px !important;
    padding: 0 !important;
}

body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) :is(#color-sliders-panel, .color-picker-body) .trk-wrapper.fx-track > input[type="range"].fx-range {
    height: 21px !important;
    margin: -7px -6px 0 !important;
}
/* l'étiquette déborde de 6 px de chaque côté de la piste : marge pour ne couvrir ni la lettre
 * (R, V, B…) ni la case numérique voisine */
body:not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) :is(#color-sliders-panel, .color-picker-body) .trk-wrapper.fx-track {
    margin-left: 8px !important;
    margin-right: 8px !important;
}