/**
 * Dashboard Page Styles - Enterprise SCSS Architecture
 * Professional Resume Builder
 * 
 * @author David Valera Melendez <david@valera-melendez.de>
 * @created 2025-08-08
 * @location Made in Germany 🇩🇪
 */

// ==========================================================================
// Dashboard Container
// ==========================================================================
.dashboard-container {
  padding: $spacing-lg 0;

  @include media-down($breakpoint-md) {
    padding: $spacing-base 0;
  }
}

// ==========================================================================
// Hero Section
// ==========================================================================
.hero-section {
  margin-bottom: $spacing-4xl;

  .hero-card {
    @include card-base;
    background: $gradient-primary;
    color: $white;
    border-radius: $radius-2xl;
    box-shadow: $shadow-2xl;
    border: none;
    overflow: hidden;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      @include grid-pattern(60px, rgba(255, 255, 255, 0.1));
      pointer-events: none;
    }

    .card-body {
      padding: $spacing-4xl;
      position: relative;
      z-index: 1;

      @include media-down($breakpoint-md) {
        padding: $spacing-3xl $spacing-lg;
      }
    }

    .hero-content {
      text-align: center;
      position: relative;
    }

    .hero-icon {
      margin-bottom: $spacing-xl;

      .large-icon {
        font-size: 4rem;
        transition: all $transition-base;

        &:hover {
          transform: scale(1.1) rotate(5deg);
        }

        @include media-down($breakpoint-md) {
          font-size: 3rem;
        }
      }
    }

    .hero-title {
      font-size: $font-size-4xl;
      font-weight: $font-weight-bold;
      margin-bottom: $spacing-lg;
      text-shadow: 0 2px 4px rgba($black, 0.2);

      @include media-down($breakpoint-md) {
        font-size: $font-size-3xl;
      }
    }

    .hero-subtitle {
      font-size: $font-size-lg;
      opacity: 0.9;
      margin-bottom: $spacing-lg;
      font-weight: $font-weight-light;

      @include media-down($breakpoint-md) {
        font-size: $font-size-base;
      }
    }

    .author-signature {
      font-size: $font-size-base;
      opacity: 0.8;
      margin-bottom: $spacing-2xl;
      font-weight: $font-weight-medium;
    }

    .hero-actions {
      @include flex-center;
      gap: $spacing-lg;
      flex-wrap: wrap;

      @include media-down($breakpoint-md) {
        flex-direction: column;
        gap: $spacing-base;

        .btn {
          width: 100%;
          max-width: 300px;
        }
      }

      .btn {
        @include button-base;
        padding: $spacing-md $spacing-xl;
        font-size: $font-size-base;
        font-weight: $font-weight-semibold;
        border-radius: $radius-md;
        transition: all $transition-base;

        &.btn-light {
          background-color: $white;
          color: $primary-color;

          &:hover {
            background-color: rgba($white, 0.9);
            transform: translateY(-2px);
            box-shadow: $shadow-lg;
          }
        }

        &.btn-outline-light {
          background-color: transparent;
          color: $white;
          border: 2px solid rgba($white, 0.8);

          &:hover {
            background-color: rgba($white, 0.1);
            border-color: $white;
            transform: translateY(-2px);
          }
        }
      }
    }
  }
}

// ==========================================================================
// Stats Section
// ==========================================================================
.stats-section {
  margin-bottom: $spacing-4xl;

  .stat-card {
    @include card-base;
    @include card-hover;
    border: none;
    height: 100%;
    transition: all $transition-base;

    &:hover {
      transform: translateY(-8px);
      box-shadow: $shadow-xl;

      .stat-icon {
        transform: scale(1.1) rotate(5deg);
      }
    }

    .card-body {
      padding: $spacing-2xl;
      text-align: center;
    }

    .stat-icon {
      width: 60px;
      height: 60px;
      @include flex-center;
      margin: 0 auto $spacing-lg auto;
      border-radius: $radius-full;
      transition: all $transition-base;

      i {
        font-size: $font-size-2xl;
      }

      &.bg-primary {
        background: linear-gradient(135deg, $primary-color, lighten($primary-color, 10%));
      }

      &.bg-success {
        background: linear-gradient(135deg, $success-color, lighten($success-color, 10%));
      }

      &.bg-warning {
        background: linear-gradient(135deg, $warning-color, lighten($warning-color, 10%));
      }

      &.bg-info {
        background: linear-gradient(135deg, $info-color, lighten($info-color, 10%));
      }
    }

    .stat-number {
      font-size: $font-size-3xl;
      font-weight: $font-weight-bold;
      margin-bottom: $spacing-xs;
      line-height: 1;

      &.text-primary { color: $primary-color; }
      &.text-success { color: $success-color; }
      &.text-warning { color: $warning-color; }
      &.text-info { color: $info-color; }

      @include media-down($breakpoint-md) {
        font-size: $font-size-2xl;
      }
    }

    .stat-label {
      font-size: $font-size-base;
      color: $text-muted;
      font-weight: $font-weight-medium;
      margin: 0;
    }
  }
}

// ==========================================================================
// Features Section
// ==========================================================================
.features-section {
  margin-bottom: $spacing-4xl;

  .section-title {
    font-size: $font-size-3xl;
    font-weight: $font-weight-semibold;
    color: $text-primary;
    margin-bottom: $spacing-sm;

    @include media-down($breakpoint-md) {
      font-size: $font-size-2xl;
    }
  }

  .section-subtitle {
    font-size: $font-size-lg;
    color: $text-muted;
    margin-bottom: $spacing-2xl;
  }

  .feature-card {
    @include card-base;
    @include card-hover;
    border: none;
    height: 100%;
    transition: all $transition-base;

    &:hover {
      transform: translateY(-8px);
      box-shadow: $shadow-xl;

      .feature-avatar {
        transform: scale(1.1);
      }
    }

    .card-body {
      padding: $spacing-2xl;
      text-align: center;
    }

    .feature-avatar {
      width: 80px;
      height: 80px;
      @include flex-center;
      margin: 0 auto $spacing-lg auto;
      border-radius: $radius-full;
      background-color: rgba($primary-color, 0.1);
      transition: all $transition-base;

      i {
        font-size: $font-size-3xl;
        color: $primary-color;
      }
    }

    .card-title {
      font-size: $font-size-xl;
      font-weight: $font-weight-semibold;
      color: $text-primary;
      margin-bottom: $spacing-lg;
    }

    .card-text {
      font-size: $font-size-base;
      color: $text-muted;
      line-height: $line-height-relaxed;
      margin: 0;
    }
  }
}

// ==========================================================================
// Recent Activity Section
// ==========================================================================
.recent-activity-section {
  margin-bottom: $spacing-4xl;

  .card {
    @include card-base;
    border: none;

    .card-header {
      background: transparent;
      border: none;
      padding: $spacing-xl $spacing-xl 0 $spacing-xl;

      .card-title {
        font-size: $font-size-xl;
        font-weight: $font-weight-semibold;
        color: $text-primary;
        margin: 0;

        i {
          color: $primary-color;
          margin-right: $spacing-sm;
        }
      }
    }

    .card-body {
      padding: $spacing-lg $spacing-xl $spacing-xl $spacing-xl;
    }
  }

  .activity-item {
    padding: $spacing-lg;
    border: 2px solid $border-color;
    border-radius: $radius-md;
    background-color: rgba($gray-50, 0.5);
    transition: all $transition-base;

    &:hover {
      background-color: rgba($gray-100, 0.8);
      border-color: $border-color-hover;
      transform: translateX(4px);
    }

    h6 {
      font-size: $font-size-base;
      font-weight: $font-weight-semibold;
      color: $text-primary;
      margin-bottom: $spacing-xs;
    }

    p {
      font-size: $font-size-sm;
      color: $text-muted;
      margin-bottom: $spacing-sm;
    }

    .text-muted {
      &.small {
        font-size: $font-size-xs;
        
        i {
          margin-right: $spacing-xs;
        }
      }
    }
  }
}

// ==========================================================================
// Quick Actions Section
// ==========================================================================
.quick-actions-section {
  .card {
    @include card-base;
    border: none;

    .card-header {
      background: transparent;
      border: none;
      padding: $spacing-xl $spacing-xl 0 $spacing-xl;

      .card-title {
        font-size: $font-size-xl;
        font-weight: $font-weight-semibold;
        color: $text-primary;
        margin: 0;

        i {
          color: $primary-color;
          margin-right: $spacing-sm;
        }
      }
    }

    .card-body {
      padding: $spacing-lg $spacing-xl $spacing-xl $spacing-xl;
    }
  }

  .action-card {
    @include card-base;
    text-decoration: none;
    height: 100%;
    transition: all $transition-base;
    position: relative;
    overflow: hidden;

    &.border-primary {
      border-color: rgba($primary-color, 0.3);

      &:hover {
        border-color: $primary-color;
        background-color: rgba($primary-color, 0.02);
        transform: translateY(-8px) scale(1.02);
        box-shadow: $shadow-xl;

        i {
          transform: scale(1.2) rotate(10deg);
        }
      }
    }

    &.border-success {
      border-color: rgba($success-color, 0.3);

      &:hover {
        border-color: $success-color;
        background-color: rgba($success-color, 0.02);
        transform: translateY(-8px) scale(1.02);
        box-shadow: $shadow-xl;

        i {
          transform: scale(1.2) rotate(-10deg);
        }
      }
    }

    &.border-warning {
      border-color: rgba($warning-color, 0.3);

      &:hover {
        border-color: $warning-color;
        background-color: rgba($warning-color, 0.02);
        transform: translateY(-8px) scale(1.02);
        box-shadow: $shadow-xl;

        i {
          transform: scale(1.2) rotate(5deg);
        }
      }
    }

    .card-body {
      padding: $spacing-2xl;
      text-align: center;
    }

    i {
      font-size: 4rem;
      margin-bottom: $spacing-lg;
      transition: all $transition-base;

      &.text-primary { color: $primary-color; }
      &.text-success { color: $success-color; }
      &.text-warning { color: $warning-color; }
    }

    h6 {
      font-size: $font-size-base;
      font-weight: $font-weight-semibold;
      margin-bottom: $spacing-sm;

      &.text-primary { color: $primary-color; }
      &.text-success { color: $success-color; }
      &.text-warning { color: $warning-color; }
    }

    p {
      font-size: $font-size-sm;
      color: $text-muted;
      margin: 0;
      line-height: $line-height-normal;
    }
  }
}

// ==========================================================================
// Animations
// ==========================================================================
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-container > section {
  animation: fadeInUp 0.6s ease-out;

  &:nth-child(1) { animation-delay: 0; }
  &:nth-child(2) { animation-delay: 0.1s; }
  &:nth-child(3) { animation-delay: 0.2s; }
  &:nth-child(4) { animation-delay: 0.3s; }
  &:nth-child(5) { animation-delay: 0.4s; }
}

// ==========================================================================
// Responsive Design
// ==========================================================================
@include media-down($breakpoint-lg) {
  .features-section {
    .feature-card {
      margin-bottom: $spacing-xl;
    }
  }

  .quick-actions-section {
    .action-card {
      margin-bottom: $spacing-lg;
    }
  }
}

@include media-down($breakpoint-md) {
  .dashboard-container {
    padding: $spacing-base 0;
  }

  .stats-section,
  .features-section,
  .recent-activity-section {
    margin-bottom: $spacing-2xl;
  }

  .hero-section {
    margin-bottom: $spacing-2xl;
  }

  .stat-card,
  .feature-card {
    margin-bottom: $spacing-lg;
  }

  .recent-activity-section {
    .activity-item {
      margin-bottom: $spacing-base;
    }
  }
}