/* ==================================== */
/* NAVIGATION TABS - WORKFLOW DOTS      */
/* ==================================== */

.nav-tabs {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 12px 0 1px 0;
  background: rgba(249, 245, 240, 0.5);
  margin-bottom: 0px;
  z-index: 10;
  flex-shrink: 0;
}

.nav-tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--border-light);
}

.nav-tabs-track {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

/* Connecteur entre les dots */
.nav-connector {
  width: 80px;
  height: 2px;
  background: var(--border-medium);
  position: relative;
  /* Aligner avec le centre du dot-circle: padding-top(8px) + demi-cercle(9px) - demi-connecteur(1px) */
  align-self: flex-start;
  margin-top: 16px;
}

.nav-connector::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--connector-progress, 0%);
  background: var(--accent-primary);
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dot button */
.nav-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: all var(--transition-fast);
}

.nav-dot:focus {
  outline: none;
}

.nav-dot:focus-visible .dot-circle {
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.3);
}

/* Dot circle */
.dot-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-medium);
  background: var(--bg-canvas);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

/* Inner dot for active state */
.dot-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-dot.active .dot-circle {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: scale(1.2);
}

.nav-dot.active .dot-circle::after {
  width: 6px;
  height: 6px;
}

.nav-dot:hover:not(.active) .dot-circle {
  border-color: var(--accent-primary);
  transform: scale(1.1);
}

/* Dot label */
.dot-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-dot.active .dot-label {
  color: var(--accent-primary);
}

.nav-dot:hover:not(.active) .dot-label {
  color: var(--text-primary);
}

/* ==================================== */
/* PANELS CONTAINER                     */
/* ==================================== */

.panels-container {
  flex: 1;
  min-width: 0; /* Permet au flex item de shrink correctement */
  display: flex;
  position: relative;
  overflow: hidden;
  min-height: 0;
  gap: 24px;
}

.workflow-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-canvas);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-light);
}

/* Schema panel (SVG) */
#panel-schema {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

#panel-schema #main-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Rapport panel */
#panel-rapport {
  overflow-y: auto;
}

#panel-rapport #rapport-container {
  height: 100%;
}

/* Document panel */
#panel-document {
  overflow: visible;
}

#panel-document #document-container {
  width: 100%;
  height: 100%;
  overflow: visible;
  box-sizing: border-box;
}

/* ==================================== */
/* DESKTOP: SCHEMA+RAPPORT CÔTE À CÔTE  */
/* ==================================== */

@media (min-width: 769px) {
  .panels-container {
    gap: 0;
  }

  /* Wrapper combiné: flex côte à côte */
  .combined-desktop-wrapper {
    display: flex;
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: var(--bg-canvas);
  }

  /* Schema et Rapport côte à côte dans le wrapper */
  .combined-desktop-wrapper .workflow-panel {
    position: relative;
    flex: 1 1 50%;
    opacity: 1;
    height: 100%;
    transform: none;
    pointer-events: auto;
    border-radius: 0;
    border: none;
  }

  /* Bordure entre schema et rapport */
  .combined-desktop-wrapper #panel-schema {
    border-right: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
  }

  .combined-desktop-wrapper #panel-rapport {
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
  }

  /* Panel Document: caché par défaut, position absolue */
  #panel-document {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(30%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-light);
  }

  /* Quand on affiche Document */
  .panels-container.show-document .combined-desktop-wrapper {
    opacity: 0;
    transform: translateX(-30%);
    pointer-events: none;
    z-index: 0;
  }

  .panels-container.show-document #panel-document {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 1;
    overflow: visible;
  }

  /* Allow dropdown to overflow when document panel is shown */
  .panels-container.show-document {
    overflow: visible;
  }

  /* Desktop: dots interactifs */
  .nav-tabs {
    pointer-events: auto;
  }

  /* Etirer la piste pour aligner les dots avec la séparation verticale */
  .nav-tabs-track {
    width: min(100%, 960px);
    margin: 0 auto;
  }

  .nav-dot {
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
  }

  .nav-connector {
    flex: 0 0 80px;
  }

  /* Afficher la progression du connecteur sur desktop */
  .nav-connector::after {
    display: block;
  }

  /* Connecteur 1 (schema → rapport) */
  .nav-tabs[data-active-step="schema"] .nav-connector:nth-of-type(1)::after {
    width: 0%;
  }

  .nav-tabs[data-active-step="rapport"] .nav-connector:nth-of-type(1)::after,
  .nav-tabs[data-active-step="document"] .nav-connector:nth-of-type(1)::after {
    width: 100%;
  }

  /* Connecteur 2 (rapport → document) */
  .nav-tabs[data-active-step="schema"] .nav-connector:nth-of-type(2)::after,
  .nav-tabs[data-active-step="rapport"] .nav-connector:nth-of-type(2)::after {
    width: 0%;
  }

  .nav-tabs[data-active-step="document"] .nav-connector:nth-of-type(2)::after {
    width: 100%;
  }
}

/* ==================================== */
/* TABLET/MOBILE: SWIPE (<768px)        */
/* ==================================== */

@media (max-width: 768px) {
  /* Ignorer le wrapper sur mobile - les panels se comportent normalement */
  .combined-desktop-wrapper {
    display: contents;
  }

  .nav-tabs {
    pointer-events: auto;
    padding: 12px 0;
  }

  .nav-dot {
    cursor: pointer;
    padding: 10px 20px;
  }

  .nav-connector {
    width: 60px;
  }

  /* Connecteur 1 (schema → rapport) */
  .nav-tabs[data-active-step="schema"] .nav-connector:nth-of-type(1)::after {
    width: 0%;
  }

  .nav-tabs[data-active-step="rapport"] .nav-connector:nth-of-type(1)::after,
  .nav-tabs[data-active-step="document"] .nav-connector:nth-of-type(1)::after {
    width: 100%;
  }

  /* Connecteur 2 (rapport → document) */
  .nav-tabs[data-active-step="schema"] .nav-connector:nth-of-type(2)::after,
  .nav-tabs[data-active-step="rapport"] .nav-connector:nth-of-type(2)::after {
    width: 0%;
  }

  .nav-tabs[data-active-step="document"] .nav-connector:nth-of-type(2)::after {
    width: 100%;
  }

  .panels-container {
    gap: 0;
  }

  /* Swipe animation panels */
  .workflow-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.2s ease-out;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0;
    border: none;
  }

  .workflow-panel.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 1;
  }

  .workflow-panel.slide-out-left {
    transform: translateX(-30%);
    opacity: 0;
    z-index: 0;
  }

  .workflow-panel.slide-out-right {
    transform: translateX(30%);
    opacity: 0;
    z-index: 0;
  }

  .workflow-panel.enter-from-left {
    transform: translateX(-30%);
    opacity: 0;
    transition: none;
  }

  .workflow-panel.enter-from-right {
    transform: translateX(30%);
    opacity: 0;
    transition: none;
  }

  /* Schema panel adjustments */
  #panel-schema {
    padding: 8px;
  }

  /* Allow dropdown overflow in document panel */
  #panel-document.active {
    overflow: visible;
  }

  .panels-container:has(#panel-document.active) {
    overflow: visible;
  }
}

/* ==================================== */
/* MOBILE SMALL (<480px)                */
/* ==================================== */

@media (max-width: 480px) {
  .nav-tabs {
    padding: 8px 0;
  }

  .nav-dot {
    padding: 8px 12px;
  }

  .dot-circle {
    width: 20px;
    height: 20px;
  }

  .dot-label {
    font-size: 10px;
  }

  .nav-connector {
    width: 40px;
    /* Ajuster pour cercle de 20px: padding-top(8px) + demi-cercle(10px) - demi-connecteur(1px) */
    margin-top: 17px;
  }

  /* Faster animations on mobile */
  .workflow-panel {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease-out;
  }
}

/* ==================================== */
/* TOUCH FEEDBACK                       */
/* ==================================== */

@media (hover: none) and (pointer: coarse) {
  .nav-dot:active .dot-circle {
    transform: scale(0.95);
  }

  .nav-dot.active:active .dot-circle {
    transform: scale(1.1);
  }
}