// ========================================
// MODERN DASHBOARD COMPONENT STYLES
// ========================================


@import '../../../../styles/design-tokens';


// Dashboard Container
// ========================================

.modern-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

// Welcome Section
// ========================================

.welcome-section {
  background: linear-gradient(135deg, $primary-500 0%, $primary-700 100%);
  border-radius: $radius-2xl;
  margin-bottom: $space-8;
  overflow: hidden;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }

  .welcome-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $space-12 $space-8;
    position: relative;
    z-index: 1;

    @media (max-width: $breakpoint-lg) {
      flex-direction: column;
      text-align: center;
      gap: $space-8;
    }
  }

  .welcome-text {
    flex: 1;
    max-width: 600px;

    .welcome-title {
      font-size: $text-5xl;
      font-weight: $font-bold;
      color: $white;
      margin-bottom: $space-4;
      line-height: 1.1;

      @media (max-width: $breakpoint-md) {
        font-size: $text-4xl;
      }

      .title-accent {
        display: block;
        font-size: $text-2xl;
        font-weight: $font-medium;
        color: rgba(255, 255, 255, 0.8);
        margin-top: $space-2;

        @media (max-width: $breakpoint-md) {
          font-size: $text-xl;
        }
      }
    }

    .welcome-subtitle {
      font-size: $text-xl;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: $space-8;
      line-height: 1.6;

      @media (max-width: $breakpoint-md) {
        font-size: $text-lg;
      }
    }

    .welcome-actions {
      display: flex;
      gap: $space-4;
      flex-wrap: wrap;

      @media (max-width: $breakpoint-sm) {
        flex-direction: column;
        align-items: stretch;
      }
    }
  }

  .welcome-visual {
    flex: 0 0 300px;
    position: relative;

    @media (max-width: $breakpoint-lg) {
      flex: none;
      width: 100%;
      max-width: 400px;
    }

    .visual-container {
      position: relative;
      width: 100%;
      height: 200px;

      .floating-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: $backdrop-blur-md;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: $radius-xl;
        padding: $space-4;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $space-2;
        color: $white;
        font-size: $text-sm;
        font-weight: $font-medium;
        animation: float 3s ease-in-out infinite;

        clr-icon {
          font-size: $text-2xl;
        }

        &.card-1 {
          top: 20px;
          left: 20px;
          animation-delay: 0s;
        }

        &.card-2 {
          top: 60px;
          right: 40px;
          animation-delay: 1s;
        }

        &.card-3 {
          bottom: 20px;
          left: 60px;
          animation-delay: 2s;
        }
      }
    }
  }
}

// Stats Section
// ========================================

.stats-section {
  margin-bottom: $space-8;

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: $space-6;

    @media (max-width: $breakpoint-sm) {
      grid-template-columns: 1fr;
      gap: $space-4;
    }
  }

  .stats-card {
    padding: $space-6;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: $gradient-primary;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: $space-4;

      .stats-icon {
        width: 48px;
        height: 48px;
        border-radius: $radius-xl;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: $text-xl;

        &.primary {
          background: rgba($primary-500, 0.1);
          color: $primary-600;
        }

        &.success {
          background: rgba($accent-green, 0.1);
          color: $accent-green;
        }

        &.warning {
          background: rgba($accent-orange, 0.1);
          color: $accent-orange;
        }

        &.info {
          background: rgba($primary-500, 0.1);
          color: $primary-600;
        }
      }

      .stats-trend {
        display: flex;
        align-items: center;
        gap: $space-1;
        font-size: $text-sm;
        font-weight: $font-semibold;

        &.positive {
          color: $accent-green;
        }

        &.negative {
          color: $accent-red;
        }

        clr-icon {
          font-size: $text-sm;
        }
      }
    }

    .card-body {
      .stats-value {
        font-size: $text-3xl;
        font-weight: $font-bold;
        color: $gray-900;
        margin-bottom: $space-1;
        line-height: 1;
      }

      .stats-label {
        font-size: $text-sm;
        color: $gray-600;
        font-weight: $font-medium;
      }
    }
  }
}

// Actions Section
// ========================================

.actions-section {
  margin-bottom: $space-8;

  .section-title {
    font-size: $text-2xl;
    font-weight: $font-bold;
    color: $gray-900;
    margin-bottom: $space-6;
    text-align: center;
  }

  .actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: $space-6;

    @media (max-width: $breakpoint-sm) {
      grid-template-columns: 1fr;
      gap: $space-4;
    }
  }

  .action-card {
    display: flex;
    align-items: center;
    gap: $space-4;
    padding: $space-6;
    text-decoration: none;
    color: inherit;
    border: 1px solid $gray-200;
    transition: all $duration-300 $ease-out;

    &:hover {
      border-color: $primary-300;
      transform: translateY(-2px);
      box-shadow: $shadow-xl;
    }

    .action-icon {
      width: 56px;
      height: 56px;
      background: $gradient-primary;
      border-radius: $radius-xl;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $white;
      font-size: $text-xl;
      flex-shrink: 0;
    }

    .action-content {
      flex: 1;

      h3 {
        font-size: $text-lg;
        font-weight: $font-semibold;
        color: $gray-900;
        margin-bottom: $space-1;
      }

      p {
        font-size: $text-sm;
        color: $gray-600;
        margin: 0;
        line-height: 1.5;
      }
    }

    .action-arrow {
      color: $gray-400;
      font-size: $text-lg;
      transition: transform $duration-200 $ease-out;
    }

    &:hover .action-arrow {
      transform: translateX(4px);
    }
  }
}

// Activity Section
// ========================================

.activity-section {
  .section-title {
    font-size: $text-2xl;
    font-weight: $font-bold;
    color: $gray-900;
    margin-bottom: $space-6;
    text-align: center;
  }

  .activity-card {
    padding: 0;
    overflow: hidden;

    .activity-list {
      .activity-item {
        display: flex;
        align-items: center;
        gap: $space-4;
        padding: $space-4 $space-6;
        border-bottom: 1px solid $gray-100;
        transition: background-color $duration-200 $ease-out;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background: $gray-50;
        }

        .activity-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: $text-base;
          flex-shrink: 0;

          &.success {
            background: rgba($accent-green, 0.1);
            color: $accent-green;
          }

          &.info {
            background: rgba($primary-500, 0.1);
            color: $primary-600;
          }

          &.warning {
            background: rgba($accent-orange, 0.1);
            color: $accent-orange;
          }

          &.primary {
            background: rgba($primary-500, 0.1);
            color: $primary-600;
          }
        }

        .activity-content {
          flex: 1;

          .activity-title {
            font-size: $text-sm;
            font-weight: $font-medium;
            color: $gray-900;
            margin-bottom: 2px;
          }

          .activity-time {
            font-size: $text-xs;
            color: $gray-500;
          }
        }
      }
    }
  }
}

// Responsive Design
// ========================================

@media (max-width: $breakpoint-lg) {
  .welcome-section .welcome-content {
    padding: $space-8 $space-6;
  }

  .stats-section .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .actions-section .actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: $breakpoint-md) {
  .welcome-section .welcome-content {
    padding: $space-6 $space-4;
  }

  .welcome-text .welcome-title {
    font-size: $text-3xl;
  }

  .welcome-text .welcome-subtitle {
    font-size: $text-base;
  }

  .stats-section .stats-grid {
    grid-template-columns: 1fr;
  }

  .actions-section .actions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: $breakpoint-sm) {
  .modern-dashboard {
    padding: 0 $space-4;
  }

  .welcome-section {
    margin-bottom: $space-6;
  }

  .stats-section,
  .actions-section,
  .activity-section {
    margin-bottom: $space-6;
  }

  .welcome-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

// Animation Keyframes
// ========================================

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}