/* ==========================================================================
   API-SHOWCASE.CSS - Styles pour visualisation API workflow
   ==========================================================================

   ✅ PHASE 3 - 28 décembre 2024

   Styles pour les diagrammes de flux API et les cercles de processus
   dans le portail développeur (developers/portal.html).

   Utilise les variables de couleurs centralisées pour cohérence visuelle.

   Référence : COLORS_CENTRALIZATION_PLAN.md - Phase 3
   ========================================================================== */

/* ==========================================================================
   API STEP CIRCLES - Cercles pour les étapes de processus API
   ========================================================================== */

.api-step-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.api-step-circle:hover {
  transform: scale(1.05);
}

/* Cercle Primary (Violet Fidoren) */
.api-step-primary {
  background: linear-gradient(135deg,
    rgba(var(--theme-primary-rgb), 0.15) 0%,
    rgba(var(--theme-primary-rgb), 0.05) 100%);
  border-color: var(--theme-primary);
}

.api-step-primary .api-step-icon {
  color: var(--theme-primary);
}

/* Cercle Success (Vert Emerald) */
.api-step-success {
  background: linear-gradient(135deg,
    rgba(var(--theme-success-rgb), 0.15) 0%,
    rgba(var(--theme-success-rgb), 0.05) 100%);
  border-color: var(--theme-success);
}

.api-step-success .api-step-icon {
  color: var(--theme-success);
}

/* Cercle Warning (Orange Fidoren) */
.api-step-warning {
  background: linear-gradient(135deg,
    rgba(var(--theme-warning-rgb), 0.15) 0%,
    rgba(var(--theme-warning-rgb), 0.05) 100%);
  border-color: var(--theme-warning);
}

.api-step-warning .api-step-icon {
  color: var(--theme-warning);
}

/* Cercle Danger (Rouge) */
.api-step-danger {
  background: linear-gradient(135deg,
    rgba(var(--theme-danger-rgb), 0.15) 0%,
    rgba(var(--theme-danger-rgb), 0.05) 100%);
  border-color: var(--theme-danger);
}

.api-step-danger .api-step-icon {
  color: var(--theme-danger);
}

/* Cercle Info (générique) */
.api-step-info {
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(99, 102, 241, 0.05) 100%);
  border-color: #6366f1;
}

.api-step-info .api-step-icon {
  color: #6366f1;
}

/* Icônes à l'intérieur des cercles */
.api-step-icon {
  width: 32px;
  height: 32px;
}

/* ==========================================================================
   API CONNECTORS - Lignes connectant les étapes
   ========================================================================== */

.api-connector {
  width: 40px;
  height: 2px;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.api-connector:hover {
  opacity: 0.6;
}

/* Connecteur Primary → Success */
.api-connector-primary-success {
  background: linear-gradient(90deg,
    var(--theme-primary) 0%,
    var(--theme-success) 100%);
}

/* Connecteur Success → Primary */
.api-connector-success-primary {
  background: linear-gradient(90deg,
    var(--theme-success) 0%,
    var(--theme-primary) 100%);
}

/* Connecteur Primary → Warning */
.api-connector-primary-warning {
  background: linear-gradient(90deg,
    var(--theme-primary) 0%,
    var(--theme-warning) 100%);
}

/* Connecteur Warning → Primary */
.api-connector-warning-primary {
  background: linear-gradient(90deg,
    var(--theme-warning) 0%,
    var(--theme-primary) 100%);
}

/* Connecteur Success → Warning */
.api-connector-success-warning {
  background: linear-gradient(90deg,
    var(--theme-success) 0%,
    var(--theme-warning) 100%);
}

/* Connecteur Info (bleu) */
.api-connector-info {
  background: linear-gradient(90deg,
    #6366f1 0%,
    #10b981 100%);
}

/* ==========================================================================
   API FEATURE BOXES - Boîtes de features API
   ========================================================================== */

.api-feature-box {
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.api-feature-box:hover {
  transform: translateY(-4px);
}

/* Feature box Primary */
.api-feature-box-primary {
  border-color: var(--theme-primary);
  background: linear-gradient(135deg,
    rgba(var(--theme-primary-rgb), 0.05) 0%,
    rgba(var(--theme-primary-rgb), 0.02) 100%);
}

/* Feature box Success */
.api-feature-box-success {
  border-color: var(--theme-success);
  background: linear-gradient(135deg,
    rgba(var(--theme-success-rgb), 0.05) 0%,
    rgba(var(--theme-success-rgb), 0.02) 100%);
}

/* Feature box Warning */
.api-feature-box-warning {
  border-color: var(--theme-warning);
  background: linear-gradient(135deg,
    rgba(var(--theme-warning-rgb), 0.05) 0%,
    rgba(var(--theme-warning-rgb), 0.02) 100%);
}

/* Icon dans feature box */
.api-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.api-feature-icon-primary {
  background: rgba(var(--theme-primary-rgb), 0.2);
  color: var(--theme-primary);
}

.api-feature-icon-success {
  background: rgba(var(--theme-success-rgb), 0.2);
  color: var(--theme-success);
}

.api-feature-icon-warning {
  background: rgba(var(--theme-warning-rgb), 0.2);
  color: var(--theme-warning);
}

/* ==========================================================================
   API ENDPOINT SHOWCASE - Mise en valeur des endpoints
   ========================================================================== */

.api-endpoint {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 1rem;
  font-family: monospace;
  font-size: 0.875rem;
}

.api-endpoint-method {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.api-endpoint-method-get {
  background: rgba(var(--theme-success-rgb), 0.1);
  color: var(--theme-success);
}

.api-endpoint-method-post {
  background: rgba(var(--theme-primary-rgb), 0.1);
  color: var(--theme-primary);
}

.api-endpoint-method-put {
  background: rgba(var(--theme-warning-rgb), 0.1);
  color: var(--theme-warning);
}

.api-endpoint-method-delete {
  background: rgba(var(--theme-danger-rgb), 0.1);
  color: var(--theme-danger);
}

.api-endpoint-path {
  color: var(--theme-text);
  margin-left: 0.5rem;
}

/* ==========================================================================
   API DASHED BORDERS - Bordures pointillées pour conteneurs
   ========================================================================== */

.api-dashed-border {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 2rem;
}

.api-dashed-border-primary {
  border-color: var(--theme-primary);
}

.api-dashed-border-success {
  border-color: var(--theme-success);
}

.api-dashed-border-warning {
  border-color: var(--theme-warning);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .api-step-circle {
    width: 56px;
    height: 56px;
  }

  .api-step-icon {
    width: 24px;
    height: 24px;
  }

  .api-connector {
    width: 30px;
  }

  .api-feature-icon {
    width: 48px;
    height: 48px;
  }

  .api-feature-box {
    padding: 1rem;
  }
}