/* =============================================================================
   Correctif Safari / WebKit — animations du menu admin
   =============================================================================
   Chargé APRÈS materio/assets/vendor/css/core.css (via loadAssets dans
   admin_html_header.inc.php), donc à spécificité égale ces règles gagnent
   la cascade : pas besoin de !important.

   Pourquoi : le thème Materio déclare les transitions du menu sur des
   propriétés CSS *logiques* (block-size, inline-size, margin-inline-end),
   tandis que le JavaScript du menu (materio/js/menu.js) anime la propriété
   *physique* `height` (item.style.height). Chrome et Firefox résolvent
   logique <-> physique (block-size == height), donc la transition se déclenche.
   WebKit/Safari ne fait pas toujours cette équivalence : la transition n'est
   pas armée et l'animation « claque » au lieu de glisser.

   Correctif : on redéclare les transitions sur les propriétés *physiques*
   (on conserve les logiques pour le RTL). Neutre sur Chrome/Firefox.
   Ne PAS reporter dans core.css (régénéré par gulp) ni dans le SCSS source.
   ========================================================================== */

/* Accordéon des sous-menus : le JS écrit item.style.height (propriété physique),
   mais core.css ne transitionne que block-size (logique) => snap sur Safari. */
.menu-item.menu-item-animating {
    -webkit-transition: height .3s ease-in-out, block-size .3s ease-in-out;
    transition: height .3s ease-in-out, block-size .3s ease-in-out;
}

/* Repli / déploiement de la sidebar (largeur pilotée par swap de variable CSS). */
.menu-vertical:not(.menu-no-animation) {
    -webkit-transition: width .3s, inline-size .3s;
    transition: width .3s, inline-size .3s;
}

/* Marge de l'icône pendant le collapse (core transitionne margin-inline-end). */
.menu:not(.menu-no-animation) .menu-icon {
    -webkit-transition: margin-right .3s ease, margin-inline-end .3s ease;
    transition: margin-right .3s ease, margin-inline-end .3s ease;
}

/* -----------------------------------------------------------------------------
   Bonus (rendu, pas animation) : sur Safari < 16.2, color-mix() n'est pas
   supporté. Le fond dégradé de l'item de menu ACTIF (défini avec color-mix
   dans core.css, fallback -webkit-gradient compris) devient invalide et l'item
   perd tout son fond. On ne pose un fond plein QUE si color-mix() est absent,
   via @supports : les navigateurs récents conservent le dégradé d'origine.
   -------------------------------------------------------------------------- */
@supports not (background: color-mix(in srgb, red, blue)) {
    .menu-item.active > .menu-link:not(.menu-toggle),
    .menu.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
        background: var(--bs-primary);
    }
}