/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Navigation Component Styles
 * ═══════════════════════════════════════════════════════════
 * Styles pour Menu, Menubar, TabView et composants de navigation
 *
 * Version: 1.0.0
 * Date: 2 Janvier 2026
 * Author: Lions Development Team
 * Priority: CRITIQUE #25-27
 * ═══════════════════════════════════════════════════════════
 */

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

// ============================================
// 📋 MENU VERTICAL STYLES
// ============================================

.ui-menu {
  background: $lions-white;
  border: 1px solid $lions-gray-300;
  @include lions-rounded('md');
  @include lions-shadow('md');
  padding: $lions-spacing-2 0;

  .ui-menuitem {
    .ui-menuitem-link {
      padding: $lions-spacing-3 $lions-spacing-5;
      display: flex;
      align-items: center;
      gap: $lions-spacing-3;
      color: $lions-text-primary;
      text-decoration: none;
      @include lions-transition();
      cursor: pointer;

      .ui-menuitem-icon {
        font-size: 1.125rem;
        color: $lions-gray-600;
        @include lions-transition();
      }

      .ui-menuitem-text {
        @include lions-font-size('base');
        @include lions-font-weight('medium');
      }

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

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

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

      &.ui-state-active,
      &.ui-state-highlight {
        background: linear-gradient(135deg, rgba($lions-blue-100, 0.8) 0%, rgba($lions-blue-50, 0.6) 100%);
        color: $lions-blue-800;
        border-left: 4px solid $lions-blue-500;
        padding-left: calc(#{$lions-spacing-5} - 4px);

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

    // Submenu indicator
    &.ui-menu-parent {
      .ui-menuitem-link {
        position: relative;

        &::after {
          content: '\e902'; // PrimeIcons chevron-right
          font-family: 'primeicons';
          position: absolute;
          right: $lions-spacing-4;
          color: $lions-gray-500;
          @include lions-transition();
        }

        &:hover::after {
          color: $lions-blue-600;
        }
      }
    }
  }

  // Submenu
  .ui-menu-child {
    background: $lions-white;
    border: 1px solid $lions-gray-300;
    @include lions-rounded('md');
    @include lions-shadow('lg');
    padding: $lions-spacing-2 0;
    margin-left: $lions-spacing-2;

    .ui-menuitem-link {
      padding-left: $lions-spacing-6;
    }
  }

  // Separator
  .ui-menu-separator {
    border-top: 1px solid $lions-gray-300;
    margin: $lions-spacing-2 0;
  }
}

// ============================================
// 📊 MENUBAR HORIZONTAL STYLES
// ============================================

.ui-menubar {
  background: linear-gradient(135deg, rgba($lions-blue-500, 0.08) 0%, rgba($lions-blue-700, 0.04) 100%);
  border: 1px solid $lions-gray-300;
  border-left: none;
  border-right: none;
  padding: $lions-spacing-2 $lions-spacing-5;
  @include lions-shadow('sm');

  .ui-menubar-root-list {
    display: flex;
    align-items: center;
    gap: $lions-spacing-1;
    list-style: none;
    margin: 0;
    padding: 0;

    > .ui-menuitem {
      > .ui-menuitem-link {
        padding: $lions-spacing-3 $lions-spacing-4;
        display: flex;
        align-items: center;
        gap: $lions-spacing-2;
        color: $lions-text-primary;
        text-decoration: none;
        @include lions-rounded('md');
        @include lions-transition();
        cursor: pointer;
        @include lions-font-weight('medium');

        .ui-menuitem-icon {
          font-size: 1.125rem;
          color: $lions-gray-600;
          @include lions-transition();
        }

        .ui-menuitem-text {
          @include lions-font-size('base');
        }

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

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

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

        &.ui-state-active,
        &.ui-state-highlight {
          background: linear-gradient(135deg, rgba($lions-blue-500, 0.15) 0%, rgba($lions-blue-600, 0.1) 100%);
          color: $lions-blue-800;

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

      // Submenu indicator
      &.ui-menu-parent {
        > .ui-menuitem-link {
          &::after {
            content: '\e933'; // PrimeIcons chevron-down
            font-family: 'primeicons';
            margin-left: $lions-spacing-1;
            color: $lions-gray-500;
            @include lions-transition();
          }

          &:hover::after {
            color: $lions-blue-600;
          }
        }
      }
    }
  }

  // Dropdown submenu
  .ui-menu-child {
    background: $lions-white;
    border: 1px solid $lions-gray-300;
    @include lions-rounded('md');
    @include lions-shadow('xl');
    padding: $lions-spacing-2 0;
    margin-top: $lions-spacing-1;
    min-width: 200px;

    .ui-menuitem-link {
      padding: $lions-spacing-3 $lions-spacing-5;
      display: flex;
      align-items: center;
      gap: $lions-spacing-3;
      color: $lions-text-primary;
      text-decoration: none;
      @include lions-transition();

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

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

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

    .ui-menu-separator {
      border-top: 1px solid $lions-gray-300;
      margin: $lions-spacing-2 0;
    }
  }

  // Right-aligned items
  .ui-menubar-options {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: $lions-spacing-2;
  }
}

// ============================================
// 📑 TABVIEW STYLES
// ============================================

.ui-tabview {
  background: $lions-white;
  @include lions-rounded('md');
  @include lions-shadow('sm');
  overflow: hidden;

  // Tab navigation
  .ui-tabview-nav {
    background: linear-gradient(135deg, rgba($lions-gray-100, 0.8) 0%, rgba($lions-gray-50, 0.6) 100%);
    border-bottom: 2px solid $lions-gray-300;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: $lions-spacing-1;
    padding: $lions-spacing-2 $lions-spacing-4;

    .ui-tabview-nav-link {
      padding: $lions-spacing-3 $lions-spacing-5;
      display: flex;
      align-items: center;
      gap: $lions-spacing-2;
      color: $lions-text-secondary;
      text-decoration: none;
      @include lions-rounded('md');
      @include lions-rounded-bottom(0);
      @include lions-transition();
      cursor: pointer;
      border: 1px solid transparent;
      border-bottom: none;
      position: relative;
      @include lions-font-weight('medium');

      .ui-tabview-left-icon {
        font-size: 1.125rem;
        color: $lions-gray-600;
        @include lions-transition();
      }

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

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

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

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

    .ui-state-active {
      .ui-tabview-nav-link {
        background: $lions-white;
        color: $lions-blue-700;
        border-color: $lions-gray-300;
        border-bottom-color: $lions-white;
        @include lions-font-weight('bold');

        &::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          right: 0;
          height: 3px;
          background: $lions-blue-500;
          @include lions-rounded('full');
        }

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

    // Close icon
    .ui-tabview-close {
      @include lions-button-base;
      width: 1.5rem;
      height: 1.5rem;
      min-width: 1.5rem;
      padding: 0;
      @include lions-flex-center;
      background: transparent;
      border: none;
      color: $lions-gray-500;
      @include lions-transition();
      margin-left: $lions-spacing-2;

      &:hover {
        background: rgba($lions-danger-500, 0.1);
        color: $lions-danger-600;
        transform: scale(1.1);
      }
    }
  }

  // Tab panels
  .ui-tabview-panels {
    padding: $lions-spacing-6;
    background: $lions-white;

    .ui-tabview-panel {
      &:not(.ui-state-active) {
        display: none;
      }
    }
  }

  // Position variants
  &.ui-tabview-top {
    .ui-tabview-nav {
      border-bottom: 2px solid $lions-gray-300;

      .ui-state-active .ui-tabview-nav-link::after {
        bottom: -2px;
      }
    }
  }

  &.ui-tabview-bottom {
    display: flex;
    flex-direction: column-reverse;

    .ui-tabview-nav {
      border-top: 2px solid $lions-gray-300;
      border-bottom: none;

      .ui-tabview-nav-link {
        @include lions-rounded('md');
        @include lions-rounded-top(0);
      }

      .ui-state-active .ui-tabview-nav-link {
        border-bottom-color: $lions-gray-300;
        border-top-color: $lions-white;

        &::after {
          bottom: auto;
          top: -2px;
        }
      }
    }
  }

  &.ui-tabview-left {
    display: flex;

    .ui-tabview-nav {
      border-right: 2px solid $lions-gray-300;
      border-bottom: none;
      flex-direction: column;
      padding: $lions-spacing-4 $lions-spacing-2;

      .ui-tabview-nav-link {
        @include lions-rounded('md');
        @include lions-rounded-right(0);
      }

      .ui-state-active .ui-tabview-nav-link {
        border-right-color: $lions-white;

        &::after {
          right: -2px;
          left: auto;
          top: 0;
          bottom: 0;
          width: 3px;
          height: auto;
        }
      }
    }
  }

  &.ui-tabview-right {
    display: flex;
    flex-direction: row-reverse;

    .ui-tabview-nav {
      border-left: 2px solid $lions-gray-300;
      border-bottom: none;
      flex-direction: column;
      padding: $lions-spacing-4 $lions-spacing-2;

      .ui-tabview-nav-link {
        @include lions-rounded('md');
        @include lions-rounded-left(0);
      }

      .ui-state-active .ui-tabview-nav-link {
        border-left-color: $lions-white;

        &::after {
          left: -2px;
          right: auto;
          top: 0;
          bottom: 0;
          width: 3px;
          height: auto;
        }
      }
    }
  }
}

// ============================================
// 🎨 MENU SEVERITY VARIANTS
// ============================================

.ui-menu,
.ui-menubar {
  // Primary menu items
  .ui-menuitem-primary {
    .ui-menuitem-link {
      background: rgba($lions-blue-100, 0.3);
      color: $lions-blue-700;

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

      &:hover {
        background: rgba($lions-blue-100, 0.6);
      }
    }
  }

  // Success menu items
  .ui-menuitem-success {
    .ui-menuitem-link {
      background: rgba($lions-success-100, 0.3);
      color: $lions-success-700;

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

      &:hover {
        background: rgba($lions-success-100, 0.6);
      }
    }
  }

  // Danger menu items
  .ui-menuitem-danger {
    .ui-menuitem-link {
      background: rgba($lions-danger-100, 0.3);
      color: $lions-danger-700;

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

      &:hover {
        background: rgba($lions-danger-100, 0.6);
      }
    }
  }
}

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

@media (max-width: $lions-breakpoint-md) {
  .ui-menubar {
    .ui-menubar-root-list {
      flex-direction: column;
      align-items: stretch;
      gap: $lions-spacing-1;

      > .ui-menuitem {
        > .ui-menuitem-link {
          width: 100%;
        }
      }
    }

    .ui-menubar-options {
      margin-left: 0;
      margin-top: $lions-spacing-2;
      padding-top: $lions-spacing-2;
      border-top: 1px solid $lions-gray-300;
    }
  }

  .ui-tabview {
    .ui-tabview-nav {
      overflow-x: auto;
      flex-wrap: nowrap;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-track {
        background: $lions-gray-100;
      }

      &::-webkit-scrollbar-thumb {
        background: $lions-gray-400;
        @include lions-rounded('full');
      }
    }

    .ui-tabview-panels {
      padding: $lions-spacing-4;
    }
  }
}

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

.ui-menu,
.ui-menubar,
.ui-tabview {
  // Focus visible
  .ui-menuitem-link:focus-visible,
  .ui-tabview-nav-link:focus-visible {
    @include lions-focus-ring();
  }

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

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

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

// ============================================
// 🎯 UTILITY CLASSES
// ============================================

// Compact menus
.ui-menu-compact {
  .ui-menuitem-link {
    padding: $lions-spacing-2 $lions-spacing-4;
    @include lions-font-size('sm');
  }
}

// Large menus
.ui-menu-large {
  .ui-menuitem-link {
    padding: $lions-spacing-4 $lions-spacing-6;
    @include lions-font-size('lg');
  }
}

// Vertical menubar (stacked)
.ui-menubar-vertical {
  .ui-menubar-root-list {
    flex-direction: column;
    align-items: stretch;
  }
}
