/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Card & Panel Component Styles
 * ═══════════════════════════════════════════════════════════
 * Amélioration visuelle complète des cartes et panneaux avec identité Lions.dev
 *
 * Version: 1.0.0
 * Date: 1er Janvier 2026
 * Author: Lions Development Team
 * Priority: CRITIQUE #9-10
 * ═══════════════════════════════════════════════════════════
 */

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

// ============================================
// 🎴 CARD BASE STYLES
// ============================================

.card {
  @include lions-card;
  @include lions-transition();

  // Card with border accent
  &.card-border-top {
    border-top: 4px solid $lions-blue-500;
  }

  &.card-border-left {
    border-left: 4px solid $lions-blue-500;
  }

  // Severity colors for border
  &.card-primary {
    border-top-color: $lions-blue-500;
    border-left-color: $lions-blue-500;
  }

  &.card-success {
    border-top-color: $lions-success-500;
    border-left-color: $lions-success-500;
  }

  &.card-info {
    border-top-color: $lions-info-500;
    border-left-color: $lions-info-500;
  }

  &.card-warning {
    border-top-color: $lions-warning-500;
    border-left-color: $lions-warning-500;
  }

  &.card-danger {
    border-top-color: $lions-danger-500;
    border-left-color: $lions-danger-500;
  }

  &.card-help {
    border-top-color: $lions-gold-500;
    border-left-color: $lions-gold-500;
  }

  // Hover effect
  &.card-hover:hover {
    @include lions-shadow('lg');
    transform: translateY(-2px);
    cursor: pointer;
  }

  // Clickable card
  &.card-clickable {
    cursor: pointer;
    @include lions-transition();

    &:hover {
      @include lions-shadow('lg');
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

// ============================================
// 📋 CARD HEADER
// ============================================

.card-header {
  padding: $lions-spacing-4 $lions-spacing-6;
  border-bottom: 1px solid $lions-gray-200;
  background: $lions-gray-50;
  @include lions-rounded('md');
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  h5, h6 {
    margin: 0;
    @include lions-font-weight('bold');
    color: $lions-text-primary;
  }

  .card-title {
    @include lions-font-size('lg');
    @include lions-font-weight('bold');
    color: $lions-text-primary;
    margin: 0;
  }

  .card-subtitle {
    @include lions-font-size('sm');
    color: $lions-text-secondary;
    margin: $lions-spacing-1 0 0 0;
  }

  // Icon in header
  .card-icon {
    font-size: 1.5rem;
    color: $lions-blue-500;
    margin-right: $lions-spacing-3;
  }

  // Actions in header (buttons, etc.)
  .card-actions {
    display: flex;
    gap: $lions-spacing-2;
    align-items: center;
  }
}

// ============================================
// 📄 CARD CONTENT
// ============================================

.card-content {
  padding: $lions-spacing-6;
  color: $lions-text-primary;
  line-height: $lions-line-height-normal;

  p:last-child {
    margin-bottom: 0;
  }
}

// Compact card content
.card-compact .card-content {
  padding: $lions-spacing-4;
}

// Large card content
.card-large .card-content {
  padding: $lions-spacing-8;
}

// ============================================
// 🦶 CARD FOOTER
// ============================================

.card-footer {
  padding: $lions-spacing-4 $lions-spacing-6;
  border-top: 1px solid $lions-gray-200;
  background: $lions-gray-50;
  @include lions-rounded('md');
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  // Actions in footer
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: $lions-spacing-2;
}

// ============================================
// 📦 PANEL STYLES (Collapsible Card)
// ============================================

.ui-panel {
  @include lions-card;
  @include lions-transition();

  .ui-panel-titlebar {
    background: $lions-gray-50;
    border-bottom: 1px solid $lions-gray-200;
    padding: $lions-spacing-4 $lions-spacing-6;
    @include lions-rounded('md');
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ui-panel-title {
      @include lions-font-size('lg');
      @include lions-font-weight('bold');
      color: $lions-text-primary;
      margin: 0;
      display: flex;
      align-items: center;
      gap: $lions-spacing-2;

      // Icon support
      i {
        font-size: 1.25rem;
        color: $lions-blue-500;
      }
    }

    .ui-panel-titlebar-icon {
      @include lions-button-base;
      width: 2rem;
      height: 2rem;
      padding: 0;
      @include lions-flex-center;
      background: transparent;
      border: none;
      color: $lions-gray-600;
      @include lions-transition();

      &:hover {
        background: $lions-gray-200;
        color: $lions-blue-500;
      }

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

  .ui-panel-content {
    padding: $lions-spacing-6;
    background: $lions-white;
    @include lions-rounded('md');
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  // Panel states
  &.ui-panel-collapsed {
    .ui-panel-content {
      display: none;
    }

    .ui-panel-titlebar {
      @include lions-rounded('md');
    }
  }
}

// ============================================
// 🎨 PANEL SEVERITY VARIANTS
// ============================================

.ui-panel-primary {
  .ui-panel-titlebar {
    background: linear-gradient(135deg, rgba($lions-blue-500, 0.1) 0%, rgba($lions-blue-700, 0.05) 100%);
    border-bottom-color: $lions-blue-200;

    .ui-panel-title i {
      color: $lions-blue-500;
    }
  }
}

.ui-panel-success {
  .ui-panel-titlebar {
    background: linear-gradient(135deg, rgba($lions-success-500, 0.1) 0%, rgba($lions-success-700, 0.05) 100%);
    border-bottom-color: $lions-success-200;

    .ui-panel-title i {
      color: $lions-success-500;
    }
  }
}

.ui-panel-info {
  .ui-panel-titlebar {
    background: linear-gradient(135deg, rgba($lions-info-500, 0.1) 0%, rgba($lions-info-700, 0.05) 100%);
    border-bottom-color: $lions-info-200;

    .ui-panel-title i {
      color: $lions-info-500;
    }
  }
}

.ui-panel-warning {
  .ui-panel-titlebar {
    background: linear-gradient(135deg, rgba($lions-warning-500, 0.1) 0%, rgba($lions-warning-700, 0.05) 100%);
    border-bottom-color: $lions-warning-200;

    .ui-panel-title i {
      color: $lions-warning-500;
    }
  }
}

.ui-panel-danger {
  .ui-panel-titlebar {
    background: linear-gradient(135deg, rgba($lions-danger-500, 0.1) 0%, rgba($lions-danger-700, 0.05) 100%);
    border-bottom-color: $lions-danger-200;

    .ui-panel-title i {
      color: $lions-danger-500;
    }
  }
}

.ui-panel-help {
  .ui-panel-titlebar {
    background: linear-gradient(135deg, rgba($lions-gold-500, 0.15) 0%, rgba($lions-gold-700, 0.08) 100%);
    border-bottom-color: $lions-gold-200;

    .ui-panel-title i {
      color: $lions-gold-600;
    }
  }
}

// ============================================
// 📐 CARD SIZES
// ============================================

.card-compact {
  padding: $lions-spacing-4;

  .card-header {
    padding: $lions-spacing-3 $lions-spacing-4;
  }

  .card-content {
    padding: $lions-spacing-4;
  }

  .card-footer {
    padding: $lions-spacing-3 $lions-spacing-4;
  }
}

.card-large {
  padding: $lions-spacing-8;

  .card-header {
    padding: $lions-spacing-6 $lions-spacing-8;
  }

  .card-content {
    padding: $lions-spacing-8;
  }

  .card-footer {
    padding: $lions-spacing-6 $lions-spacing-8;
  }
}

// ============================================
// 🎯 SPECIAL CARD VARIANTS
// ============================================

// Outlined card (no fill)
.card-outlined {
  background: transparent;
  border: 2px solid $lions-gray-300;
  box-shadow: none;

  &:hover {
    border-color: $lions-blue-500;
    @include lions-shadow('sm');
  }
}

// Elevated card (more shadow)
.card-elevated {
  @include lions-shadow('xl');

  &:hover {
    @include lions-shadow('2xl');
  }
}

// Flat card (no shadow)
.card-flat {
  box-shadow: none;
  border: 1px solid $lions-gray-200;
}

// Gradient card backgrounds
.card-gradient-blue {
  background: linear-gradient(135deg, rgba($lions-blue-500, 0.05) 0%, rgba($lions-blue-700, 0.02) 100%);
}

.card-gradient-gold {
  background: linear-gradient(135deg, rgba($lions-gold-500, 0.08) 0%, rgba($lions-gold-700, 0.03) 100%);
}

.card-gradient-success {
  background: linear-gradient(135deg, rgba($lions-success-500, 0.05) 0%, rgba($lions-success-700, 0.02) 100%);
}

// ============================================
// 📊 CARD GRID / LIST
// ============================================

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: $lions-spacing-6;

  // Responsive
  @media (max-width: $lions-breakpoint-md) {
    grid-template-columns: 1fr;
    gap: $lions-spacing-4;
  }
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: $lions-spacing-4;
}

// ============================================
// 🖼️ CARD WITH IMAGE
// ============================================

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  @include lions-rounded('md');
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.card-image-container {
  position: relative;
  overflow: hidden;
  @include lions-rounded('md');
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    @include lions-transition();
  }

  &:hover img {
    transform: scale(1.05);
  }
}

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

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

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

    &:hover {
      transform: none !important;
    }
  }
}

.ui-panel {
  @media (prefers-reduced-motion: reduce) {
    .ui-panel-content {
      transition: none !important;
    }
  }
}

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

@media (max-width: $lions-breakpoint-md) {
  .card,
  .ui-panel {
    .card-content,
    .ui-panel-content {
      padding: $lions-spacing-4;
    }

    .card-header,
    .ui-panel-titlebar {
      padding: $lions-spacing-3 $lions-spacing-4;
    }

    .card-footer {
      padding: $lions-spacing-3 $lions-spacing-4;
      flex-direction: column;
      align-items: stretch;
    }
  }
}
