/* admin-switcher.css — SIDEBAR GAUCHE pour navigation entre admins du portfolio Réseau de sites informatifs
 * Déposé sur https://francistoussaint.com/admin-switcher.css
 * Inclus dans toutes les pages admin du portfolio.
 * Mis à jour : 2026-05-03 (v4 - fix scroll quand sidebar contient + d'admins que la viewport)
 * Précédent : 2026-04-28 (v3 - z-index renforcé + compat layouts fixed)
 */

#fto-switcher {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 100vh;                    /* v4 : force la contrainte de hauteur */
  box-sizing: border-box;           /* v4 : padding inclus dans 100vh */
  z-index: 2147483000; /* au-dessus de tout (max safe value pour z-index) */
  background: #0f1117;
  border-right: 1px solid #2d3148;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  color: #94a3b8;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2d3148 transparent;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

#fto-switcher::-webkit-scrollbar { width: 4px; }
#fto-switcher::-webkit-scrollbar-track { background: transparent; }
#fto-switcher::-webkit-scrollbar-thumb { background: #2d3148; border-radius: 2px; }

/* Décale tout le contenu du body via padding (cas standard) */
body.fto-with-switcher {
  padding-left: 200px !important;
}

/* COMPAT LAYOUTS FIXED : certains admins (airescampingcar) utilisent
 * position:fixed inset:0 sur leur conteneur principal, ce qui ignore
 * le padding du body. On les repousse manuellement. */
body.fto-with-switcher #auth-gate,
body.fto-with-switcher .admin-header,
body.fto-with-switcher .admin-main,
body.fto-with-switcher #app,
body.fto-with-switcher .dashboard,
body.fto-with-switcher .container[style*="position"],
body.fto-with-switcher .main-content,
body.fto-with-switcher header[style*="position:fixed"],
body.fto-with-switcher header[style*="position: fixed"] {
  padding-left: 0;
}

/* Sticky headers : décaler aussi */
body.fto-with-switcher header.sticky,
body.fto-with-switcher .admin-header[style*="sticky"] {
  left: 200px;
}

#fto-switcher .fto-sw-label {
  flex-shrink: 0;
  color: #64748b;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0 14px 8px;
  border-bottom: 1px solid #2d3148;
  margin-bottom: 8px;
}

#fto-switcher .fto-sw-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 6px;
  flex: 1 1 auto;                   /* v4 : remplit l'espace dispo */
  min-height: 0;                    /* v4 : autorise le rétrécissement flex pour overflow */
}

#fto-switcher .fto-sw-section {
  font-size: 9px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 8px 4px;
  font-weight: 700;
  flex-shrink: 0;                   /* v4 : empeche le titre section de retrecir */
}

#fto-switcher .fto-sw-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: transparent;
  color: #cbd5e1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  flex-shrink: 0;                   /* v4 : empeche les items de retrecir verticalement */
}

#fto-switcher .fto-sw-item:hover {
  background: #1a1d27;
  color: #86efac;
}

#fto-switcher .fto-sw-item.fto-current {
  background: #14532d;
  color: #86efac;
  border-left-color: #22c55e;
  cursor: default;
  pointer-events: none;
  font-weight: 700;
}

#fto-switcher .fto-sw-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

#fto-switcher .fto-sw-label-txt {
  font-size: 11.5px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#fto-switcher .fto-sw-warning {
  color: #fcd34d;
  font-size: 11px;
  flex-shrink: 0;
}

#fto-switcher .fto-sw-error {
  color: #ef4444;
  font-size: 10px;
  font-style: italic;
  padding: 8px 14px;
}

/* Mobile : sidebar étroite (icônes seules) */
@media (max-width: 900px) {
  #fto-switcher {
    width: 56px;
  }
  #fto-switcher .fto-sw-label-txt,
  #fto-switcher .fto-sw-label,
  #fto-switcher .fto-sw-section,
  #fto-switcher .fto-sw-warning {
    display: none;
  }
  #fto-switcher .fto-sw-item {
    justify-content: center;
    padding: 8px 4px;
  }
  body.fto-with-switcher {
    padding-left: 56px !important;
  }
  body.fto-with-switcher header.sticky,
  body.fto-with-switcher .admin-header[style*="sticky"] {
    left: 56px;
  }
}

/* Échappatoire : si une page veut désactiver le switcher */
body.fto-no-switcher #fto-switcher { display: none !important; }
body.fto-no-switcher.fto-with-switcher { padding-left: 0 !important; }