/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Breadcrumb & Steps Component Styles
 * ═══════════════════════════════════════════════════════════
 * Styles pour Breadcrumb et Steps (fil d'Ariane et étapes)
 *
 * Version: 1.0.0
 * Date: 2 Janvier 2026
 * Author: Lions Development Team
 * Priority: MOYENNE #37-38
 * ═══════════════════════════════════════════════════════════
 */

@import '../variables';
@import '../mixins';

// ============================================
// 🍞 BREADCRUMB STYLES
// ============================================

.ui-breadcrumb {
  background: rgba($lions-gray-100, 0.5);
  border: 1px solid $lions-gray-300;
  @include lions-rounded('md');
  padding: $lions-spacing-3 $lions-spacing-5;
  @include lions-shadow('sm');

  .ui-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: $lions-spacing-2;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ui-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: $lions-spacing-2;

    .ui-menuitem-link {
      display: inline-flex;
      align-items: center;
      gap: $lions-spacing-2;
      padding: $lions-spacing-1 $lions-spacing-2;
      @include lions-rounded('sm');
      color: $lions-gray-600;
      text-decoration: none;
      @include lions-font-size('sm');
      @include lions-font-weight('medium');
      @include lions-transition();

      .ui-menuitem-icon {
        font-size: 1rem;
        color: $lions-gray-500;
      }

      &:hover {
        background: rgba($lions-blue-50, 0.6);
        color: $lions-blue-700;

        .ui-menuitem-icon {
          color: $lions-blue-600;
        }
      }

      &:focus-visible {
        @include lions-focus-ring();
      }
    }

    // Separator
    .ui-breadcrumb-chevron {
      color: $lions-gray-400;
      font-size: 0.875rem;
      @include lions-transition();
    }

    // Last item (current page)
    &:last-child {
      .ui-menuitem-link {
        color: $lions-text-primary;
        @include lions-font-weight('semibold');
        pointer-events: none;

        .ui-menuitem-icon {
          color: $lions-blue-600;
        }
      }
    }

    // Home icon
    &:first-child {
      .ui-menuitem-link {
        .ui-menuitem-icon {
          font-size: 1.125rem;
        }
      }
    }
  }
}

// Compact breadcrumb
.ui-breadcrumb-compact {
  padding: $lions-spacing-2 $lions-spacing-4;

  .ui-menuitem-link {
    padding: $lions-spacing-1;
    @include lions-font-size('xs');
  }

  .ui-breadcrumb-chevron {
    font-size: 0.75rem;
  }
}

// ============================================
// 📊 STEPS STYLES
// ============================================

.ui-steps {
  position: relative;
  padding: $lions-spacing-4 0;

  .ui-steps-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .ui-steps-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;

    // Connector line
    &::before {
      content: '';
      position: absolute;
      top: 1.25rem;
      left: 50%;
      right: -50%;
      height: 2px;
      background: $lions-gray-300;
      z-index: 0;
      @include lions-transition();
    }

    &:last-child::before {
      display: none;
    }

    .ui-menuitem-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: $lions-spacing-3;
      text-decoration: none;
      position: relative;
      z-index: 1;
      @include lions-transition();

      .ui-steps-number {
        width: 2.5rem;
        height: 2.5rem;
        @include lions-rounded('full');
        @include lions-flex-center;
        background: $lions-white;
        border: 2px solid $lions-gray-300;
        color: $lions-gray-600;
        @include lions-font-weight('semibold');
        @include lions-font-size('base');
        @include lions-shadow('sm');
        @include lions-transition();
      }

      .ui-steps-title {
        @include lions-font-size('sm');
        @include lions-font-weight('medium');
        color: $lions-gray-600;
        @include lions-transition();
        max-width: 150px;
      }

      &:hover {
        .ui-steps-number {
          border-color: $lions-blue-400;
          transform: scale(1.05);
        }

        .ui-steps-title {
          color: $lions-blue-700;
        }
      }

      &:focus-visible {
        .ui-steps-number {
          @include lions-focus-ring();
        }
      }
    }

    // Completed state
    &.ui-steps-completed {
      &::before {
        background: $lions-success-500;
      }

      .ui-menuitem-link {
        .ui-steps-number {
          @include lions-gradient-success;
          border-color: $lions-success-600;
          color: $lions-white;

          .pi {
            font-size: 1rem;
          }
        }

        .ui-steps-title {
          color: $lions-success-700;
          @include lions-font-weight('semibold');
        }
      }
    }

    // Active/Current state
    &.ui-steps-current {
      .ui-menuitem-link {
        .ui-steps-number {
          @include lions-gradient-blue;
          border-color: $lions-blue-600;
          color: $lions-white;
          @include lions-shadow('md');
          box-shadow: 0 0 0 4px rgba($lions-blue-500, 0.2), $lions-shadow-md;
        }

        .ui-steps-title {
          color: $lions-blue-700;
          @include lions-font-weight('bold');
        }
      }
    }

    // Disabled/Future state
    &.ui-steps-disabled {
      .ui-menuitem-link {
        pointer-events: none;

        .ui-steps-number {
          background: $lions-gray-100;
          border-color: $lions-gray-300;
          color: $lions-gray-400;
        }

        .ui-steps-title {
          color: $lions-gray-400;
        }
      }
    }
  }

  // Vertical steps
  &.ui-steps-vertical {
    .ui-steps-list {
      flex-direction: column;
      align-items: flex-start;
    }

    .ui-steps-item {
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      width: 100%;
      padding: $lions-spacing-4 0;

      &::before {
        top: 3.5rem;
        bottom: -$lions-spacing-4;
        left: 1.25rem;
        right: auto;
        width: 2px;
        height: auto;
      }

      &:last-child {
        padding-bottom: 0;

        &::before {
          display: none;
        }
      }

      .ui-menuitem-link {
        flex-direction: row;
        align-items: center;
        gap: $lions-spacing-4;
      }

      .ui-steps-title {
        text-align: left;
        max-width: none;
      }
    }
  }

  // Readonly steps
  &.ui-steps-readonly {
    .ui-steps-item .ui-menuitem-link {
      pointer-events: none;
      cursor: default;
    }
  }
}

// ============================================
// 📱 RESPONSIVE ADJUSTMENTS
// ============================================

@media (max-width: $lions-breakpoint-md) {
  .ui-breadcrumb {
    .ui-breadcrumb-list {
      gap: $lions-spacing-1;
    }

    .ui-menuitem-link {
      padding: $lions-spacing-1;
      @include lions-font-size('xs');
    }

    .ui-breadcrumb-chevron {
      font-size: 0.75rem;
    }
  }

  .ui-steps {
    // Switch to vertical on mobile
    .ui-steps-list {
      flex-direction: column;
      align-items: flex-start;
    }

    .ui-steps-item {
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      width: 100%;
      padding: $lions-spacing-3 0;

      &::before {
        top: 3rem;
        bottom: 0;
        left: 1.25rem;
        right: auto;
        width: 2px;
        height: calc(100% - 2.5rem);
      }

      &:last-child::before {
        display: none;
      }

      .ui-menuitem-link {
        flex-direction: row;
        align-items: center;
        gap: $lions-spacing-3;
      }

      .ui-steps-number {
        width: 2rem;
        height: 2rem;
        @include lions-font-size('sm');
      }

      .ui-steps-title {
        text-align: left;
        max-width: none;
        @include lions-font-size('xs');
      }
    }
  }
}

// ============================================
// ♿ ACCESSIBILITY ENHANCEMENTS
// ============================================

.ui-breadcrumb,
.ui-steps {
  // Focus visible
  .ui-menuitem-link:focus-visible {
    @include lions-focus-ring();
  }

  // High contrast mode
  @media (prefers-contrast: high) {
    border-width: 2px !important;

    .ui-menuitem-link,
    .ui-steps-number {
      border-width: 2px !important;
    }
  }

  // Reduced motion
  @media (prefers-reduced-motion: reduce) {
    * {
      transition: none !important;
      animation: none !important;
    }
  }
}

// ============================================
// 🎨 UTILITY CLASSES
// ============================================

// Large steps
.ui-steps-lg {
  .ui-steps-number {
    width: 3rem !important;
    height: 3rem !important;
    @include lions-font-size('lg');
  }

  .ui-steps-title {
    @include lions-font-size('base');
  }
}

// Compact steps
.ui-steps-sm {
  padding: $lions-spacing-2 0;

  .ui-steps-number {
    width: 2rem !important;
    height: 2rem !important;
    @include lions-font-size('sm');
  }

  .ui-steps-title {
    @include lions-font-size('xs');
  }
}
