/* =============================================================================
   FORMENERGIE — Menu en barre latérale (rail) pour le CRM
   -----------------------------------------------------------------------------
   À CHARGER APRÈS skin-formenergie.css, dans <head> de public/index.html :

       <link rel="stylesheet" href="skin-formenergie-rail.css">
       <script defer src="skin-rail.js"></script>

   Le <script> ne sert qu'au bouton de repli. Sans lui, le rail fonctionne
   quand même, il reste simplement toujours déployé.

   Pour tout annuler : supprime ces deux lignes.

   SÉCURITÉ MOBILE : absolument TOUT ce fichier est enfermé dans
   @media (min-width: 769px). En dessous, aucune règle ne s'applique — ta nav
   basse, ton panneau coulissant « Plus » et tes cartes empilées sont
   structurellement hors d'atteinte.
   ============================================================================= */

@media (min-width: 769px) {

  :root {
    --fe-rail-w: 252px;      /* largeur déployée */
    --fe-rail-mini: 76px;    /* largeur repliée */
    --fe-head-h: 61px;       /* hauteur du header : 12px + 36px + 12px + bordure */
  }

  /* --- Le header reste en haut, sur toute la largeur ---------------------- */
  header {
    position: sticky;
    top: 0;
    z-index: 40;
  }

  /* --- La nav devient une colonne fixe à gauche -------------------------- */
  nav#mainNav {
    position: fixed;
    top: var(--fe-head-h);
    left: 0;
    bottom: 0;
    width: var(--fe-rail-w);
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 10px 10px 16px;
    background: var(--fe-rail);
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, .07);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    z-index: 30;
    transition: width 220ms cubic-bezier(.22, 1, .36, 1);
  }
  nav#mainNav::-webkit-scrollbar { width: 8px; }
  nav#mainNav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 8px;
  }

  nav#mainNav button {
    flex: 0 0 auto;            /* sinon les 16 entrées se compressent en hauteur */
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-bottom: none;
    border-radius: 11px;
    padding: 11px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--fe-rail-ink, #AED5C7);
    background: transparent;
    transition: background 140ms cubic-bezier(.22, 1, .36, 1),
                color 140ms cubic-bezier(.22, 1, .36, 1);
  }
  nav#mainNav button:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
  }
  nav#mainNav button.active {
    background: #11493B;
    color: #fff;
    font-weight: 800;
    border-bottom-color: transparent;
  }

  /* Icônes Lucide injectées par skin-icons.js */
  nav#mainNav button > svg {
    width: 18px;
    height: 18px;
    flex: none;
    opacity: .85;
  }
  nav#mainNav button > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  nav#mainNav button.active > svg { opacity: 1; }

  /* Les séparateurs deviennent des respirations entre groupes */
  nav#mainNav .nav-sep {
    display: block;
    height: 1px;
    margin: 9px 8px;
    background: rgba(255, 255, 255, .09);
    flex: 0 0 auto;
  }

  /* --- Le contenu se décale --------------------------------------------- */
  main {
    margin-left: var(--fe-rail-w);
    margin-right: 0;
    max-width: none;
    /* Sans cette borne, `main` reste à la largeur du corps et le décalage de
       252 px pousse son contenu hors de la fenêtre. */
    width: auto;
    box-sizing: border-box;
    transition: margin-left 220ms cubic-bezier(.22, 1, .36, 1);
  }
  /* On garde une colonne de lecture confortable à l'intérieur */
  main > * {
    max-width: 1400px;
  }

  /* Sur un écran de portable, le rail et une grille 2fr/1fr ne tiennent pas
     ensemble : en dessous de 1180 px de fenêtre, la grille passe sur une
     colonne plutôt que d'écraser le tableau de droite. La règle d'origine ne
     se déclenchait qu'à 900 px, sans tenir compte des 252 px du rail. */
  @media (max-width: 1180px) {
    .dash-grid { grid-template-columns: 1fr; }
  }

  /* --- Le bouton de repli, injecté par skin-rail.js ---------------------- */
  #railToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    margin-right: 4px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    padding: 0;
    transition: background 140ms cubic-bezier(.22, 1, .36, 1);
  }
  #railToggle:hover { background: rgba(255, 255, 255, .09); color: #fff; }
  #railToggle svg { width: 17px; height: 17px; display: block; }

  /* --- État replié ------------------------------------------------------- */
  body.rail-mini nav#mainNav { width: var(--fe-rail-mini); }
  body.rail-mini main { margin-left: var(--fe-rail-mini); }
  /* Rail replié : 176 px regagnés, la grille à deux colonnes redevient tenable. */
  @media (max-width: 1180px) {
    body.rail-mini .dash-grid { grid-template-columns: 2fr 1fr; }
  }
  @media (max-width: 1000px) {
    body.rail-mini .dash-grid { grid-template-columns: 1fr; }
  }
  body.rail-mini nav#mainNav button {
    text-align: center;
    justify-content: center;
    gap: 0;
    padding: 11px 0;
    font-size: 0;               /* masque le libellé */
    line-height: 1.6;
  }
  body.rail-mini nav#mainNav button > span { display: none; }
  body.rail-mini nav#mainNav button > svg { width: 20px; height: 20px; }
  /* Repli sans skin-icons.js : l'émoji est remis par skin-rail.js */
  body.rail-mini nav#mainNav button::before {
    content: attr(data-icon);
    font-size: 19px;
    line-height: 1.2;
  }
  body.rail-mini nav#mainNav .nav-sep { margin: 9px 14px; }

  /* --- Le bouton de repli n'a pas de sens sans le rail ------------------- */
  #loginScreen ~ #railToggle { display: none; }
}

/* En dessous de 769 px : le bouton de repli disparaît, la nav basse reprend. */
@media (max-width: 768px) {
  #railToggle { display: none !important; }
}
