/**
 * Disposition / taille icônes + texte — menu principal uniquement.
 * Hauteur fixe uniforme. Zones distinctes (CSS Grid). Sans position absolute pour le texte.
 * Variables : --menu-main-icon, --menu-main-svg, --menu-main-icon-gap,
 *             --menu-main-font-size, --menu-main-btn-height, --menu-main-btn-min-width
 */

:root {
    --menu-main-icon: 32px;
    --menu-main-svg: 16px;
    --menu-main-icon-gap: 0.45rem;
    --menu-main-font-size: 0.8125rem;
    --menu-main-btn-height: 44px;
    --menu-main-btn-pad-x: 0.55rem;
    --menu-main-btn-min-width: 0px;
}

/* Exclure l’app mobile / vues embarquées */
html[data-mobile-app="1"] .sidebar .nav-link,
html[data-mobile-app="1"] .sidebar .nav-group-toggle,
html.medsoft-mobile .sidebar .nav-link,
html.medsoft-mobile .sidebar .nav-group-toggle {
    /* laisse les styles mobiles inchangés */
}

/* ——— Base : hauteur fixe, grille, police ——— */
html[data-menu-icon-layout] .sidebar .nav-link,
html[data-menu-icon-layout] .sidebar .nav-group-toggle {
    display: grid;
    align-items: center;
    box-sizing: border-box;
    height: var(--menu-main-btn-height);
    min-height: var(--menu-main-btn-height);
    max-height: var(--menu-main-btn-height);
    overflow: hidden;
    column-gap: var(--menu-main-icon-gap);
    row-gap: 0;
    padding-left: var(--menu-main-btn-pad-x);
    padding-right: var(--menu-main-btn-pad-x);
    padding-top: 0;
    padding-bottom: 0;
    min-width: var(--menu-main-btn-min-width, 0px);
}

html[data-menu-icon-layout] .sidebar .nav-link-inner {
    display: contents;
}

html[data-menu-icon-layout] .sidebar .nav-icon,
html[data-menu-icon-layout] .sidebar-nav .nav-icon {
    width: var(--menu-main-icon);
    height: var(--menu-main-icon);
    max-width: var(--menu-main-icon);
    max-height: var(--menu-main-icon);
    flex-shrink: 0;
    overflow: hidden;
}

html[data-menu-icon-layout] .sidebar .nav-icon svg,
html[data-menu-icon-layout] .sidebar-nav .nav-icon svg {
    width: var(--menu-main-svg);
    height: var(--menu-main-svg);
    max-width: 100%;
    max-height: 100%;
}

html[data-menu-icon-layout] .sidebar .nav-label {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    font-size: var(--menu-main-font-size);
    align-self: center;
}

html[data-menu-icon-layout] .sidebar .nav-chevron {
    flex-shrink: 0;
    margin-left: 0;
    align-self: center;
}

/* Menu haut / bas : hauteur = hauteur modèle existante */
html[data-menu-position="top"][data-menu-icon-layout] .sidebar .nav-link,
html[data-menu-position="top"][data-menu-icon-layout] .sidebar .nav-group-toggle,
html[data-menu-position="bottom"][data-menu-icon-layout] .sidebar .nav-link,
html[data-menu-position="bottom"][data-menu-icon-layout] .sidebar .nav-group-toggle {
    height: var(--menu-top-btn-height, var(--menu-main-btn-height));
    min-height: var(--menu-top-btn-height, var(--menu-main-btn-height));
    max-height: var(--menu-top-btn-height, var(--menu-main-btn-height));
    font-size: var(--menu-main-font-size, var(--menu-top-font-size));
}

html[data-menu-position="top"][data-menu-icon-layout] .sidebar .nav-label,
html[data-menu-position="bottom"][data-menu-icon-layout] .sidebar .nav-label {
    font-size: var(--menu-main-font-size, var(--menu-top-font-size));
}

/* ——— 1. Icône à gauche, texte à côté ——— */
html[data-menu-icon-layout="icon-left-text-beside"] .sidebar .nav-link {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
}

html[data-menu-icon-layout="icon-left-text-beside"] .sidebar .nav-group-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

html[data-menu-icon-layout="icon-left-text-beside"] .sidebar .nav-label {
    text-align: left;
    justify-self: stretch;
}

/* ——— 2. Icône à gauche, texte centré (colonnes équilibrées, sans absolute) ——— */
html[data-menu-icon-layout="icon-left-text-center"] .sidebar .nav-link {
    grid-template-columns: var(--menu-main-icon) minmax(0, 1fr) var(--menu-main-icon);
}

html[data-menu-icon-layout="icon-left-text-center"] .sidebar .nav-group-toggle {
    grid-template-columns: var(--menu-main-icon) minmax(0, 1fr) auto;
}

html[data-menu-icon-layout="icon-left-text-center"] .sidebar .nav-icon {
    grid-column: 1;
    justify-self: start;
}

html[data-menu-icon-layout="icon-left-text-center"] .sidebar .nav-label {
    grid-column: 2;
    text-align: center;
    justify-self: stretch;
    /* Zone de sécurité : le texte reste dans la colonne centrale */
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

html[data-menu-icon-layout="icon-left-text-center"] .sidebar .nav-chevron {
    grid-column: 3;
    justify-self: end;
}

/* ——— 3. Icône à gauche, texte à droite ——— */
html[data-menu-icon-layout="icon-left-text-right"] .sidebar .nav-link {
    grid-template-columns: auto minmax(0, 1fr);
}

html[data-menu-icon-layout="icon-left-text-right"] .sidebar .nav-group-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

html[data-menu-icon-layout="icon-left-text-right"] .sidebar .nav-label {
    text-align: right;
    justify-self: stretch;
}

html[data-menu-icon-layout="icon-left-text-right"] .sidebar .nav-icon {
    justify-self: start;
}

/* ——— 4. Icône en haut, texte en bas — hauteur inchangée ——— */
html[data-menu-icon-layout="icon-top-text-bottom"] .sidebar .nav-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    row-gap: 2px;
    column-gap: 0;
}

html[data-menu-icon-layout="icon-top-text-bottom"] .sidebar .nav-group-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    row-gap: 2px;
}

html[data-menu-icon-layout="icon-top-text-bottom"] .sidebar .nav-icon {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: end;
}

html[data-menu-icon-layout="icon-top-text-bottom"] .sidebar .nav-label {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: start;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
}

html[data-menu-icon-layout="icon-top-text-bottom"] .sidebar .nav-chevron {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    align-self: start;
    margin-top: 0.15rem;
}

html[data-menu-icon-layout="icon-top-text-bottom"] .sidebar .nav-group.open .nav-chevron {
    transform: rotate(180deg);
}

/* Sync modèles menu-haut (--tm-icon) */
html[data-menu-position="top"][data-top-menu-theme] {
    --tm-icon: var(--menu-main-icon, 34px);
}

html[data-menu-position="top"][data-top-menu-theme][data-menu-icon-layout] .sidebar .nav-link-inner {
    display: contents;
}

html[data-menu-position="top"][data-top-menu-theme][data-menu-icon-layout] .sidebar .nav-icon svg,
html[data-menu-position="top"][data-top-menu-theme][data-menu-icon-layout] .sidebar-nav .nav-icon svg {
    width: var(--menu-main-svg, 18px);
    height: var(--menu-main-svg, 18px);
}

/* Annuler flex-colonne / absolute des thèmes menu-haut (priorité grille) */
html[data-menu-position="top"][data-top-menu-theme][data-menu-icon-layout] .sidebar .nav-link,
html[data-menu-position="top"][data-top-menu-theme][data-menu-icon-layout] .sidebar .nav-group-toggle {
    display: grid !important;
    height: var(--menu-top-btn-height, var(--menu-main-btn-height)) !important;
    min-height: var(--menu-top-btn-height, var(--menu-main-btn-height)) !important;
    max-height: var(--menu-top-btn-height, var(--menu-main-btn-height)) !important;
    overflow: hidden;
}

html[data-menu-position="top"][data-top-menu-theme][data-menu-icon-layout] .sidebar .nav-icon,
html[data-menu-position="top"][data-top-menu-theme][data-menu-icon-layout] .sidebar .nav-label {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Sidebar replié : icône seule, hauteur conservée */
html.sidebar-collapsed[data-menu-icon-layout] .sidebar .nav-link,
html.sidebar-collapsed[data-menu-icon-layout] .sidebar .nav-group-toggle {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    min-width: 0;
}

html.sidebar-collapsed[data-menu-icon-layout] .sidebar .nav-icon {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

html.sidebar-collapsed[data-menu-icon-layout] .sidebar .nav-label,
html.sidebar-collapsed[data-menu-icon-layout] .sidebar .nav-chevron {
    display: none;
}