/* ==========================================================
   SIDEBAR
========================================================== */

.mpr-sidebar{
    background:var(--mpr-surface);
    border-right:1px solid var(--mpr-border);
    display:flex;
    flex-direction:column;
}

/* Positionnement collant (largeur, sticky, pleine hauteur) réservé au
   desktop : en dessous de 769px, base/layout.css gère seul le
   positionnement (position:fixed hors écran + .is-open, largeur 260px).
   Avant ce garde-fou, ces propriétés étaient déclarées ici sans media
   query — à spécificité égale, l'ordre d'import (sidebar.css après
   layout.css dans app.css) les faisait toujours gagner, y compris sur
   mobile : la sidebar restait "sticky" et pleinement affichée en haut de
   chaque page au lieu d'être cachée par défaut, rendant le menu mobile
   inutilisable (le bouton hamburger existait mais n'avait plus rien à
   révéler). Repéré lors du test mobile pré-panel. */
@media (min-width:769px){
    .mpr-sidebar{
        width:210px;
        position:sticky;
        top:0;
        height:100vh;
    }
}

/* Enveloppe défilante (voir includes/sidebar.php pour le détail du
   pourquoi) : porte le overflow-y:auto à la place de .mpr-sidebar
   lui-même, pour que .mpr-sidebar-bottom (compte/déconnexion), en
   dehors de cette enveloppe, reste toujours visible sans avoir à faire
   défiler la sidebar entière. min-height:0 est nécessaire ici (pas
   seulement flex:1) : un enfant flex garde min-height:auto par défaut
   et refuse de rétrécir sous la hauteur de son contenu, ce qui
   annulerait l'overflow-y:auto — même famille de bug que les
   débordements horizontaux corrigés ailleurs sur le site (min-width:0),
   simplement sur l'axe vertical ici. */
.mpr-sidebar-scroll{
    flex:1;
    min-height:0;
    overflow-y:auto;
}

/* ==========================================================
   LOGO
========================================================== */

.mpr-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    padding-top:28px;
    padding-left:28px;
    padding-bottom:22px;
}

.mpr-logo img{
    width:195px;
    max-width:100%;
    height:auto;
    display:block;
}

/* ==========================================================
   PROCHAINE COURSE
========================================================== */

.mpr-next-race{
    margin:4px 18px 18px;
    padding:14px 0;
    border-top:1px solid var(--mpr-border);
    border-bottom:1px solid var(--mpr-border);
}

.mpr-next-race-label{
    font-size:10px;
    font-weight:700;
    letter-spacing:.10em;
    color:var(--mpr-text-light);
    margin-bottom:10px;
}

.mpr-next-race-name{
    font-size:14px;
    font-weight:600;
    line-height:1.35;
    color:var(--mpr-text);
}

.mpr-next-race-meta{
    margin-top:3px;
    font-size:12px;
    color:var(--mpr-text-light);
}

.mpr-next-race-prediction{
    margin-top:10px;
    font-size:12px;
    color:var(--mpr-text-light);
}

/* ==========================================================
   MENU PRINCIPAL
========================================================== */

.mpr-nav{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:0 14px;
}

.mpr-nav-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
    padding:10px 12px 10px 18px;
    border-radius:10px;
    text-decoration:none;
    font-size:14px;
    font-weight:400;
    color:var(--mpr-text);
    transition:
        background .20s ease,
        color .20s ease,
        transform .18s ease;
}

/* Icônes */

.mpr-nav-icon{
    width:20px;
    height:20px;
    flex-shrink:0;
    color:currentColor;
    opacity:.65;
    transition:
        color .20s ease,
        opacity .20s ease;
}

/* Barre de sélection */

.mpr-nav-item::before{
    content:"";
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%) scaleY(.4);
    width:3px;
    height:20px;
    border-radius:3px;
    background:var(--mpr-primary);
    opacity:0;
    transition:
        opacity .20s ease,
        transform .20s ease;
}

/* Hover */

.mpr-nav-item:hover{
    background:#F6F6F6;
    transform:translateX(2px);
}

/* Actif */

.mpr-nav-item.active{
    background:#EDF6ED;
    color:var(--mpr-primary);
    font-weight:500;
}

.mpr-nav-item.active .mpr-nav-icon{
    color:var(--mpr-primary);
    opacity:1;
}

.mpr-nav-item.active::before{
    opacity:1;
    transform:translateY(-50%) scaleY(1);
}

/* ==========================================================
   SÉPARATEUR
========================================================== */

.mpr-sidebar-divider{
    margin:18px;
    border:none;
    border-top:1px solid var(--mpr-border);
}

/* ==========================================================
   MENU SECONDAIRE
========================================================== */

.mpr-nav-secondary{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:0 14px;
}

.mpr-nav-secondary .mpr-nav-item{
    font-size:13px;
    color:var(--mpr-text-light);
}

.mpr-nav-secondary .mpr-nav-icon{
    width:18px;
    height:18px;
    opacity:.55;
}

/* ==========================================================
   BAS DE SIDEBAR
========================================================== */

.mpr-sidebar-bottom{
    height:56px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:auto;
    padding:0 18px;
    border-top:1px solid var(--mpr-border);
}

.mpr-user-name{
    font-size:14px;
    font-weight:600;
    color:var(--mpr-text);
}

.mpr-logout{
    display:inline-block;
    margin-top:4px;
    text-decoration:none;
    font-size:13px;
    color:var(--mpr-text-light);
    transition:color .20s ease;
}

.mpr-logout:hover{
    color:var(--mpr-danger);
}