/**
 * mio.land - Scrollbars harmonisees (format UX)
 *
 * Style discret : pastille capsule unie semi-transparente, rail invisible,
 * aligne sur la grille d'icones du bureau. Pas de degrade d'accent.
 *
 * Tailles (OBLIGATOIRE) :
 * - Desktop / pointeur fin : 10px (`--ux-scrollbar-size`)
 * - Tactile / mobile (`body.mode-mobile`, `html.os-mode-mobile`) : 1px
 *
 * IMPORTANT: NE PAS utiliser scrollbar-width ou scrollbar-color (Firefox)
 * car ces proprietes causent l'apparition des fleches sur certains systemes.
 * Ne PAS redefinir ::-webkit-scrollbar en local sans reprendre ces tailles.
 */

:root {
    --ux-scrollbar-size: 10px;
    --ux-scrollbar-thumb: rgba(255, 255, 255, 0.14);
    --ux-scrollbar-thumb-hover: rgba(255, 255, 255, 0.20);
}

html.os-mode-mobile,
body.mode-mobile {
    --ux-scrollbar-size: 1px;
    --ux-scrollbar-thumb: rgba(255, 255, 255, 0.32);
    --ux-scrollbar-thumb-hover: rgba(255, 255, 255, 0.45);
}

[data-theme="light"] {
    --ux-scrollbar-thumb: rgba(0, 0, 0, 0.21);
    --ux-scrollbar-thumb-hover: rgba(0, 0, 0, 0.32);
}

[data-theme="light"].os-mode-mobile,
[data-theme="light"] body.mode-mobile,
html.os-mode-mobile[data-theme="light"],
body.mode-mobile[data-theme="light"] {
    --ux-scrollbar-thumb: rgba(0, 0, 0, 0.32);
    --ux-scrollbar-thumb-hover: rgba(0, 0, 0, 0.45);
}

/* ============================
   BOUTONS - user-select: none
   ============================ */
button,
.btn,
.app-btn,
.tag-btn,
[role="button"],
[onclick],
.clickable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: var(--ux-scrollbar-size, 10px) !important;
    height: var(--ux-scrollbar-size, 10px) !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--ux-scrollbar-thumb, rgba(255, 255, 255, 0.14));
    background-image: none;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--ux-scrollbar-thumb-hover, rgba(255, 255, 255, 0.20));
    background-image: none;
}

/* Mobile : pas de bordure (sinon pastille invisible dans 1px) */
html.os-mode-mobile ::-webkit-scrollbar,
body.mode-mobile ::-webkit-scrollbar {
    width: 1px !important;
    height: 1px !important;
}

html.os-mode-mobile ::-webkit-scrollbar-thumb,
body.mode-mobile ::-webkit-scrollbar-thumb {
    border: none !important;
    background-clip: border-box;
    border-radius: 0;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* CRUCIAL: Supprimer TOUTES les fleches de scrollbar */
::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    background-color: transparent !important;
}

::-webkit-scrollbar-button:single-button {
    display: none !important;
    background: transparent !important;
}

::-webkit-scrollbar-button:single-button:vertical:decrement,
::-webkit-scrollbar-button:single-button:vertical:increment,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}