/* CARCARE - Menu latéral moderne avec mode complet et réduit */

/* Variables CSS pour la personnalisation */

:root {
    --menu-width: 225px;
    --menu-width-collapsed: 45px;
    --menu-bg-color: rgba(255, 255, 255, 0.95);
    --menu-hover-opacity: 0.2;
    --menu-transition-speed: 0.3s;
    --menu-border-color: #CCC;
    --menu-text-color: #454545;
    --menu-hover-text-color: #000;
    --toggle-btn-bg: rgba(0, 100, 255, 0.66);
    --toggle-btn-hover-bg: #0069d9;
    --hover-line-color: 0;
}

/* Side menu container - état normal */

.side-menu {
    background-color: var(--menu-bg-color);
    border-right: 1px solid var(--menu-border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transition: width var(--menu-transition-speed) ease;
    width: var(--menu-width);
    z-index: 1002;

}

/* État réduit du menu */

.side-menu.hidden {
    overflow: visible;
    width: var(--menu-width-collapsed);
}

/* En-tête du menu avec logo */

.menu-header {
    align-items: center;
    border-bottom: 1px solid rgba(204, 204, 204, 0.3);
    display: flex;
    flex-direction: row;
    height: 60px;
    justify-content: space-between;
    padding: 10px;
}

.menu-logo {
    background-image: url(../../pics/CC_vect_wo_white_box.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex: 1;
    height: 40px;
    transition: all var(--menu-transition-speed) ease-in-out;
}

#print-counters-container {
    margin-left: auto;
    margin-right: 5px;
}

.side-menu.hidden .menu-header {
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: 5px;
}

.side-menu.hidden .menu-logo {
    background-size: 100%;
    flex: none;
    width: 35px;
}

.side-menu.hidden #print-counters-container {
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.side-menu.hidden .print-counter {
    margin: 0;
    padding: 2px 2px;
}

/* Corps principal du menu */

.menu-list {
    flex-grow: 1;
    list-style: none;
    margin: 0;
    overflow-y: auto;
    padding: 0;
}

/* Sections du menu */

.menu-section {
    border-left: 3px solid rgba(var(--hover-menu-color-rgb, 0, 123, 255), 0.9);
    border-radius: 6px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    transition: all var(--menu-transition-speed) ease;
}

.side-menu.hidden .menu-section {
    border-left: none;
    border-radius: 0;
    margin: 5px 0;
}

/* Titre de section */

.menu-title {
    align-items: center;
    background-color: rgba(165, 165, 165, 0.09);
    border-radius: 4px;
    color: var(--menu-text-color);
    cursor: pointer;
    display: flex;
    font-weight: 600;
    padding: 10px;
    position: relative;
    transition: all var(--menu-transition-speed) ease;
}

.menu-title:hover {
    background: linear-gradient(to right,
    rgba(var(--hover-menu-color-rgb, 0, 123, 255), var(--menu-hover-opacity)),
    rgba(var(--hover-menu-color-rgb, 0, 123, 255), 0.05));
    color: var(--menu-hover-text-color);
}

/* Style des titres en mode réduit */

.side-menu.hidden .menu-title {
    border-radius: 0;
    height: 30px;
    justify-content: center;
    padding: 12px 0;
}

/* Icônes du menu */

.menu-icon {
    flex-shrink: 0;
    margin-right: 10px;
    text-align: center;
    transition: transform var(--menu-transition-speed) ease;
    width: 20px;
}

.side-menu.hidden .menu-title .menu-icon {
    font-size: 1.2em;
    margin-right: 0;
    width: 100%;
}

.side-menu.hidden .menu-title:hover .menu-icon {
    transform: scale(1.2);
}

/* Texte du menu */

.menu-text {
    flex-grow: 1;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(0);
    transition: transform var(--menu-transition-speed) ease, opacity var(--menu-transition-speed) ease;
    white-space: nowrap;
}

.menu-title:hover .menu-text {
    transform: translateX(5px);
}

/* Cacher le texte en mode réduit */

.side-menu.hidden .menu-title .menu-text,
.side-menu.hidden .menu-toggle-icon {
    display: none;
}

/* Icône de toggle pour les sections */

.menu-toggle-icon {
    margin-left: 10px;
}

.menu-toggle-icon i {
    color: #bbb;
    transition: transform var(--menu-transition-speed) ease;
}

.menu-section.collapsed .menu-toggle-icon i {
    transform: rotate(-90deg);
}

/* Tooltip pour le mode réduit - SUPPRIMÉ */

/* Sous-menus */

.submenu {
    list-style: none;
    margin: 0;
    max-height: 1000px;
    overflow: hidden;
    padding: 0;
    transition: max-height var(--menu-transition-speed) ease;
}

.menu-section.collapsed .submenu {
    max-height: 0;
}

/* Style des sous-menus en mode réduit */

.side-menu.hidden .submenu {
    background-color: white;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
    left: var(--menu-width-collapsed);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;

    /* Désactive les interactions avec le sous-menu quand il est caché */

    position: absolute;
    top: 0;
    transition: max-height var(--menu-transition-speed) ease,
    visibility var(--menu-transition-speed) ease,
    opacity var(--menu-transition-speed) ease;
    visibility: hidden;
    width: 210px;
    z-index: 1005;
}

.side-menu.hidden .menu-section:hover .submenu {
    max-height: 500px;
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;

    /* Réactive les interactions quand le sous-menu est visible */

    visibility: visible;
}

/* Éléments de sous-menu */

.submenu li {
    border-top: 1px solid rgba(241, 243, 245, 0.5);
}

.submenu li:first-child {
    border-top: none;
}

.submenu a {
    align-items: center;
    color: var(--menu-text-color);
    display: flex;
    overflow: hidden;
    padding: 10px 15px 10px 25px;
    position: relative;
    text-decoration: none;
    transition: all var(--menu-transition-speed) ease;
}

.side-menu.hidden .submenu a {
    padding: 10px 15px;
}

.submenu a:hover {
    background: linear-gradient(to right,
    rgba(var(--hover-color-rgb, 0, 123, 255), var(--menu-hover-opacity)),
    rgba(var(--hover-color-rgb, 0, 123, 255), 0.05));
}

.submenu a .menu-text {
    transform: translateX(0);
    transition: transform var(--menu-transition-speed) ease;
}

.submenu a:hover .menu-text {
    transform: translateX(5px);
}

/* Animation pour les éléments de menu */

.submenu a::before {
    background-color: var(--hover-line-color, #007bff);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity var(--menu-transition-speed) ease-out;
    width: 3px;
}

.submenu a:hover::before {
    opacity: 1;
}

/* Animation du texte des sous-menus en mode rétracté */

.side-menu.hidden .submenu a .menu-text {
    animation: slideIn var(--menu-transition-speed) ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

/* Élément de menu actif */

.submenu a.active {
    background-color: rgba(var(--hover-color-rgb, 0, 123, 255), 0.1);
    font-weight: 500;
}

.submenu a.active::before {
    opacity: 1;
}

/* Pied de menu avec bouton de réduction */

.menu-footer {
    border-top: 1px solid rgba(204, 204, 204, 0.3);
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}

.menu-collapse-btn {
    background: none;
    border: none;
    border-radius: 4px;
    color: #777;
    cursor: pointer;
    padding: 5px 10px;
    transition: all var(--menu-transition-speed) ease;
}

.menu-collapse-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

.side-menu.hidden .menu-footer {
    justify-content: center;
}

/* Bouton de toggle flottant */

.toggle-menu {
    align-items: center;
    background-color: var(--toggle-btn-bg);
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    height: 24px;
    justify-content: center;
    left: calc(var(--menu-width) + 10px);
    position: fixed;
    top: 10px;
    transition: all var(--menu-transition-speed) ease;
    width: 24px;
    z-index: 1001;
}

.toggle-menu.hidden {
    left: calc(var(--menu-width-collapsed) + 10px);
}

.toggle-menu:hover {
    background-color: var(--toggle-btn-hover-bg);
}

/* Ajustement du contenu principal */

body.menu-hidden #main-content {
    margin-left: var(--menu-width-collapsed);
    transition: margin-left var(--menu-transition-speed) ease, width var(--menu-transition-speed) ease;
    width: calc(100% - var(--menu-width-collapsed) - 30px);
}

#main-content {
    margin-left: var(--menu-width);
    transition: margin-left var(--menu-transition-speed) ease, width var(--menu-transition-speed) ease;
    width: calc(100% - var(--menu-width) - 30px);
}

/* Responsive */

@media (max-width: 768px) {
    :root {
        --menu-width-collapsed: 0px;
    }

    .side-menu.hidden {
        transform: translateX(-100%);
    }

    .toggle-menu.hidden {
        left: 10px;
    }

    body.menu-hidden #main-content {
        margin-left: 0;
        width: 100%;
    }

}

/* Désactiver les transitions pendant le chargement initial */

.no-transitions * {
    transition: none !important;
}

/* ============================================
   RACCOURCIS CLAVIER - Badges colorés
   ============================================ */

.shortcut-badge {
    border-radius: 3px;
    color: #ffffff;
    font-size: 9px;
    font-weight: bold;
    margin-left: auto;
    opacity: 0.85;
    padding: 3px 4px !important;
    transition: opacity 0.2s ease;
    vertical-align: text-top;
}

/* Survol du lien - plus visible */
.submenu a:hover .shortcut-badge {
    opacity: 1;
}

/* État actif */
.submenu a.active .shortcut-badge {
    opacity: 1;
}

/* ============================================
   MODE MENU RÉDUIT - Affichage des raccourcis
   ============================================ */

/* En mode réduit : afficher les badges dans le popup */
.side-menu.hidden .submenu .shortcut-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
}

.side-menu.hidden .submenu a:hover .shortcut-badge {
    opacity: 1;
}