sa4cps-frontend/src/assets/scss/components/_modals.scss

// Action Modal Styles
.action-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  @include flex-center;

  &__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  &__container {
    position: relative;
    background-color: white;
    border-radius: $radius-2xl;
    box-shadow: $shadow-xl;
    max-width: 28rem;
    width: 100%;
    margin: 0 $spacing-md;
    max-height: 90vh;
    overflow-y: auto;
  }

  &__header {
    padding: $spacing-xl;
    border-bottom: 1px solid $gray-100;
    @include flex-between;

    h3 {
      font-size: 1.125rem;
      font-weight: 500;
      color: $gray-900;
      margin: 0;
    }

    p {
      font-size: 0.875rem;
      color: $gray-600;
      margin: 0;
    }
  }

  &__close-button {
    padding: $spacing-sm;
    border-radius: 50%;
    transition: background-color $transition-fast;
    background: none;
    border: none;
    cursor: pointer;

    &:hover {
      background-color: $gray-100;
    }

    svg {
      width: 1.25rem;
      height: 1.25rem;
      color: $gray-400;
    }
  }

  &__content {
    padding: $spacing-xl;

    .space-y-4 > * + * {
      margin-top: $spacing-md;
    }
  }

  &__footer {
    padding: $spacing-xl $spacing-xl $spacing-md;
    background-color: $gray-50;
    border-radius: 0 0 $radius-2xl $radius-2xl;
    display: flex;
    gap: $spacing-md;

    button {
      flex: 1;
      padding: $spacing-sm $spacing-md;
      border-radius: $radius-lg;
      font-weight: 500;
      transition: all $transition-fast;

      &.cancel {
        @include button-secondary;
      }

      &.execute {
        @include button-primary;

        &:disabled {
          background-color: #93c5fd;
          cursor: not-allowed;
        }
      }
    }
  }
}

// Range Input Styling
.range-input {
  &__container {
    .space-y-3 > * + * {
      margin-top: $spacing-md;
    }
  }

  &__slider {
    @include custom-slider;
  }

  &__labels {
    @include flex-between;
    font-size: 0.875rem;
    color: $gray-600;

    .current-value {
      font-weight: 500;
    }
  }

  &__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: $gray-700;
    margin-bottom: $spacing-sm;
  }
}

// Option Selection
.option-selection {
  &__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: $gray-700;
    margin-bottom: $spacing-sm;
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-sm;
  }

  &__button {
    padding: $spacing-md;
    border: 1px solid $gray-200;
    border-radius: $radius-lg;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all $transition-fast;
    cursor: pointer;
    background: white;
    color: $gray-700;

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

    &.selected {
      background-color: $primary;
      color: white;
      border-color: $primary;
    }
  }
}

// Toggle Control
.toggle-control {
  @include flex-between;

  &__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: $gray-700;
  }

  &__switch {
    position: relative;
    display: inline-flex;
    height: 1.5rem;
    width: 2.75rem;
    align-items: center;
    border-radius: 9999px;
    transition: background-color $transition-fast;
    cursor: pointer;
    border: none;

    &.on {
      background-color: $primary;
    }

    &.off {
      background-color: $gray-200;
    }
  }

  &__thumb {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background-color: white;
    transition: transform $transition-fast;

    &.on {
      transform: translateX(1.5rem);
    }

    &.off {
      transform: translateX(0.25rem);
    }
  }

  &__status {
    font-size: 0.875rem;
    color: $gray-500;
    margin-top: $spacing-xs;
  }
}

// Trigger Action
.trigger-action {
  &__container {
    background-color: $gray-50;
    border-radius: $radius-lg;
    padding: $spacing-md;
  }

  &__content {
    @include flex-center;
    gap: $spacing-md;

    .icon {
      font-size: 2rem;
    }

    .info {
      .title {
        font-weight: 500;
        color: $gray-900;
        margin: 0;
      }

      .description {
        font-size: 0.875rem;
        color: $gray-600;
        margin: 0;
      }
    }
  }
}