/*
# File: panel-manager.css - Styles génériques de panneau flottant
# Desc: Styles réutilisables pour toute fenêtre/panneau (drag, lock, titre, couleurs, disabled, etc.)
# Version 1.6.2 (padding-top sur .panel-title pour respirer sous la drag-handle)
# Author: DNAvatar.org - Arnaud Maignan
# Date: [April 20, 2026] UTC+1
# Logs:
#   - v1.6.2: .panel-floating .panel-title — padding 6px 0 3px 0 (un peu d'espace au-dessus des titres)
#   - v1.6.1: .panel-floating .panel-title — letter-spacing normal desktop (0.5em déplacé vers .touch-device)
#   - v1.6.0: Z-index élevé au rollover sur toute la fenêtre pour voir le contenu déplié
#   - v1.5.0: Correction générique hauteur zone de drag repliée - forcer 20px en mode collapsed-vertical
#   - v1.4.0: Suppression des valeurs de taille repliée (spécifiques à chaque panneau)
#   - v1.3.0: Correction largeur repliée à 25px (20px drag + 5px) pour LEFT/RIGHT
#   - v1.2.0: Ajout styles génériques pour panneaux drag LEFT (dépliage/repliage, overlay, titre)
#   - v1.1.0: Ajout styles génériques disabled pour mode 2D/3D
#   - v1.0.0: Création, extraction des styles génériques depuis panel-iso.css
*/

.panel-floating {
  position: absolute;
  background: rgb(0 0 0 / 15%);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  cursor: move;
  overflow: hidden;
  user-select: none;
  /* 🎯 CORRECTION : Ne pas intercepter les événements de souris par défaut */
  pointer-events: none;
}

/* 🎯 CORRECTION : Intercepter les événements seulement sur le drag-handle et au hover */
.panel-floating .drag-handle {
  pointer-events: auto;
}

.panel-floating:hover {
  pointer-events: auto;
}

.panel-floating.locked {
  box-shadow: none !important;
  border: 1px solid #888 !important;
}

.panel-floating .panel-title {
  text-align: left;
  background: none;
  border: none;
  margin: 0;
  /* v1.6.2 : padding-top pour respirer sous la drag-handle */
  padding: 6px 0 3px 8px;
  user-select: none;
  font-family: 'Times New Roman', serif;
  font-size: 1.0em;
  font-weight: bold;
  color: #eee;
  letter-spacing: normal;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Titres alignés à gauche uniformément. Le titre est un conteneur flex (un <div> à
   l'intérieur — ex. Topologie), donc text-align ne suffit pas : il faut justify-content.
   Exclut les panneaux dockés à gauche (titre vertical). */
.panel-floating:not(.drag-zone-left) .panel-title {
  text-align: left !important;
  justify-content: flex-start !important;
}

.panel-floating .drag-handle {
  background: #fce5e542;
  color: white !important;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  user-select: none;
  position: relative; /* Pour positionner la punaise */
}

/* 🎯 Icône de punaise pour indiquer que le panneau est lockable */
.panel-floating .drag-handle::after {
  content: "📌";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  filter: grayscale(100%) brightness(0.7); /* Gris sur fond bleu */
  display: none; /* 🎯 CORRECTION: Cachée par défaut */
  pointer-events: none; /* Ne pas interférer avec le drag */
  text-shadow: 
    0 0 1px white,
    0 0 2px white,
    0 0 3px white; /* Contour blanc fin pour la visibilité */
}

/* 🎯 CORRECTION: Pas de punaise sur les panneaux de légende */
.panel-floating[data-is-legend="true"] .drag-handle::after {
  display: none !important; /* Forcer la non-affichage sur les légendes */
}

/* 🎯 Punaise en haut pour les zones de drag LEFT et RIGHT */
.panel-floating .drag-handle.drag-zone-left::after,
.panel-floating .drag-handle.drag-zone-right::after {
  right: auto;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.panel-floating.locked .drag-handle {
  background: #ffffff2b !important; 
  color: white !important;
  border: none !important;
}

/* 🎯 Punaise rouge quand le panneau est verrouillé */
.panel-floating.locked .drag-handle::after {
  filter: none; /* Pas de grayscale - rouge sur fond rouge */
  opacity: 1;
  text-shadow: 
    0 0 1px white,
    0 0 2px white,
    0 0 3px white; /* Contour blanc fin pour la visibilité */
}

/* 🎯 Zones de drag spécifiques */
.panel-floating .drag-handle.drag-zone-top {
  width: 100%;
  height: 20px;
  border-radius: 8px 8px 0 0;
}

.panel-floating .drag-handle.drag-zone-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 100% !important;
  border-radius: 8px 0 0 8px;
}

.panel-floating .drag-handle.drag-zone-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  border-radius: 0 8px 8px 0;
}

.panel-floating .drag-handle.drag-zone-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  border-radius: 0 0 8px 8px;
}

/* 🎯 Effets hover pour toutes les zones avec mouvements adaptés */
.panel-floating .drag-handle:hover {
  background: #ffffff2f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 🎯 Swap des couleurs de la punaise au rollover - panneau déverrouillé */
.panel-floating .drag-handle:hover::after {
  filter: none; /* Rouge sur fond bleu au rollover */
  display: block; /* 🎯 CORRECTION: Visible au rollover */
  text-shadow: 
    0 0 1px white,
    0 0 2px white,
    0 0 3px white; /* Contour blanc fin pour la visibilité */
}

/* 🎯 Mouvements hover selon la zone de drag - SUPPRIMÉ pour éviter les conflits */

.panel-floating.locked .drag-handle:hover {
  background: #000000 !important; /* Rouge foncé style "Anselme Lanturlu" */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 🎯 Swap des couleurs de la punaise au rollover - panneau verrouillé */
.panel-floating.locked .drag-handle:hover::after {
  filter: grayscale(100%) brightness(0.7); /* Gris sur fond rouge au rollover */
  display: block; /* 🎯 CORRECTION: Visible au rollover */
  text-shadow: 
    0 0 1px white,
    0 0 2px white,
    0 0 3px white; /* Contour blanc fin pour la visibilité */
}

/* 🎯 État dragging */
.panel-floating.dragging {
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 4px 20px rgba(0,0,0,0.2);
  transition: none !important;
  z-index: 9999 !important; /* TAILLE FIXE - Z-index élevé pour être devant */
}

/* 🎯 Z-index élevé au rollover sur toute la fenêtre */
.panel-floating:hover {
  z-index: 9999 !important; /* Mettre au premier plan au rollover */
}

.panel-floating.dragging * {
  transition: none !important;
}



/* 🎯 Décaler le contenu de la largeur de la zone de drag pour drag left */
.panel-floating .drag-handle.drag-zone-left ~ * {
  margin-left: 20px;
}

/* 🎯 Décaler le contenu de la largeur de la zone de drag pour drag right */
.panel-floating .drag-handle.drag-zone-right ~ * {
  margin-right: 20px;
}

/* 🎯 Décaler le contenu de la hauteur de la zone de drag pour drag bottom */
.panel-floating .drag-handle.drag-zone-bottom ~ * {
  margin-bottom: 20px;
}

/* SUPPRIMÉ : Doublon avec les sélecteurs ci-dessus */

.panel-floating .drag-handle:active {
  cursor: grabbing;
}

/* 🎯 Comportement de dépliage/repliage automatique selon la zone de drag */
.panel-floating.collapsed {
  overflow: hidden !important;
}

.panel-floating.expanded {
  overflow: visible !important;
}

/* 🎯 Dépliage VERTICAL pour drag-zone-top (repliement vers le haut) */
.panel-floating.drag-zone-top.collapsed-vertical {
  height: 30px !important; /* 20px drag + 10px pour TOP */
  transform: translateY(0) !important; /* Repliement vers le haut */
}

.panel-floating.drag-zone-top.expanded-vertical {
  transform: translateY(0) !important;
}

/* 🎯 Dépliage VERTICAL pour drag-zone-bottom (repliement vers le haut aussi) */
.panel-floating.drag-zone-bottom.collapsed-vertical {
  height: 30px !important; /* 20px drag + 10px pour BOTTOM */
  transform: translateY(0) !important; /* Repliement vers le haut même pour bottom */
  /* 🎯 Forcer la position en haut même si bottom est défini */
  bottom: auto !important;
  top: 0 !important;
}

.panel-floating.drag-zone-bottom.expanded-vertical {
  transform: translateY(0) !important;
  /* 🎯 Restaurer la position normale */
  bottom: auto !important;
  top: auto !important;
}



/* 🎯 Dépliage HORIZONTAL pour drag-zone-left (repliement vers la gauche) */
.panel-floating.drag-zone-left.collapsed-horizontal {
  width: 25px !important; /* 20px drag + 5px pour LEFT */
  transform: translateX(0) !important; /* Repliement vers la gauche */
}

.panel-floating.drag-zone-left.expanded-horizontal {
  width: auto !important;
  transform: translateX(0) !important;
}

/* 🎯 Dépliage HORIZONTAL pour drag-zone-right (repliement vers la gauche aussi) */
.panel-floating.drag-zone-right.collapsed-horizontal {
  width: 25px !important; /* 20px drag + 5px pour RIGHT */
  transform: translateX(0) !important; /* Repliement vers la gauche même pour right */
}

.panel-floating.drag-zone-right.expanded-horizontal {
  width: auto !important;
  transform: translateX(0) !important;
}

/* 🎯 Masquer le contenu en mode replié selon la zone de drag */
.panel-floating.collapsed > :not(.drag-handle) {
  pointer-events: none;
}

/* 🎯 Correction générique : Forcer la hauteur de la zone de drag en mode replié */
.panel-floating.collapsed-vertical .drag-handle.drag-zone-top {
  height: 20px !important; /* Forcer la hauteur de la zone de drag en mode replié */
  min-height: 20px !important; /* Garantir la hauteur minimale */
}

.panel-floating.expanded > :not(.drag-handle) {
  pointer-events: auto;
}

/* En mode disabled, garder pointer-events: none même en expanded */
.panel-floating.disabled.expanded > :not(.drag-handle) {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* === ÉTAT DISABLED (mode 2D) === */
.panel-floating.disabled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: none !important;
  animation: none !important;
}

/* En mode disabled, la zone de drag reste interactive */
.panel-floating.disabled .drag-handle {
  pointer-events: auto !important;
  filter: none;
  cursor: grab !important;
  position: relative;
  z-index: 15;
}

.panel-floating.disabled .drag-handle:active {
  cursor: grabbing;
}

/* En mode disabled, le contenu devient grisé et inactif */
.panel-floating.disabled > :not(.drag-handle) {
  filter: grayscale(100%);
  pointer-events: none !important;
  cursor: not-allowed !important;
}

.panel-floating.disabled > :not(.drag-handle) * {
  cursor: not-allowed !important;
}

/* Surcharger le curseur move du panneau parent en mode disabled */
.panel-floating.disabled {
  cursor: not-allowed !important;
}

/* Le contenu des panneaux doit avoir le curseur par défaut (flèche) */
.panel-floating > :not(.drag-handle) {
  cursor: default;
}



/* === STYLES GÉNÉRIQUES POUR PANNEAUX DRAG LEFT === */

/* 🎯 Comportement de dépliage/repliage pour drag LEFT */
.panel-floating.drag-zone-left.locked,
.panel-floating.drag-zone-left.dragging,
.panel-floating.drag-zone-left:hover {
  overflow: visible !important;
}

/* 🎯 Titre générique pour panneaux drag LEFT */
.panel-floating.drag-zone-left .panel-title {
  text-align: center;
  padding: 2px 0 2px 0;
  margin: 0;
  user-select: none;
}

/* 🎯 Overlay générique pour mode 2D sur panneaux drag LEFT */
.panel-floating.drag-zone-left .move-overlay {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(255, 255, 255, 1);
  z-index: 1;
  display: block;
  cursor: pointer;
  border-radius: 0;
  pointer-events: all;

  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.panel-floating.drag-zone-left .move-overlay:not(.active) {
  z-index: 1;
  pointer-events: none;
  cursor: not-allowed;
}

.panel-floating.drag-zone-left .move-overlay.active ~ .drag-handle {
  pointer-events: auto;
  z-index: 15;
  position: relative;
}

.panel-floating.drag-zone-left .move-overlay.active {
  visibility: visible;
  pointer-events: all;
  background: rgba(255, 255, 255, 0.01);
  z-index: 10;
  cursor: not-allowed;
}

/* En 3D, au survol, l'overlay passe derrière les boutons */
.panel-floating.drag-zone-left:not(.disabled):hover .move-overlay {
  z-index: -1;
}

/* 🎯 Structure flex générique pour panneaux drag LEFT */
.panel-floating.drag-zone-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}