// Custom variables
$theme-primary: $purple-600;
$theme-primary-dark: $purple-700;
$theme-primary-light: $purple-300;
$theme-primary-lighter: $purple-100;

// Override Bootstrap's primary color
$primary: $theme-primary;

// Login section styles
.login-container {
  @include media-breakpoint-up(md) {
    max-width: 400px;
  }
}

// Dashboard section styles
.bg-primary {
  background-color: $theme-primary !important;
}

.text-primary {
  color: $theme-primary !important;
}

.btn-primary {
  background-color: $theme-primary !important;
  border-color: $theme-primary !important;

  &:hover, &:focus, &:active {
    background-color: $theme-primary-dark !important;
    border-color: $theme-primary-dark !important;
  }
}

.form-control {
  &:focus {
    border-color: $theme-primary;
    box-shadow: 0 0 0 0.25rem rgba($theme-primary, 0.25);
  }
}

.form-check-input {
  &:checked {
    background-color: $theme-primary;
    border-color: $theme-primary;
  }
}

// Dashboard cards
.dashboard-card {
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: translateY(-5px);
  }

  .progress-bar {
    background-color: $theme-primary;
  }
}

// Bootstrap carousel customization
.carousel {
  &-indicators {
    position: static;
    margin: 0;

    [data-bs-target] {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: $white;
      opacity: 0.5;
      margin: 0 4px;
      border: none;

      &.active {
        opacity: 1;
      }
    }
  }

  &-control {
    &-prev, &-next {
      opacity: 1;
      position: static;
      width: auto;
    }

    &-prev-icon, &-next-icon {
      filter: none;
    }
  }
}

// Responsive adjustments
@include media-breakpoint-down(md) {
  .dashboard-preview {
    padding: 1rem;
  }

  .carousel-indicators {
    margin-top: 0.5rem;
  }
}