@use 'sass:color';

// colors
$prodcalo-bg: #F5EFFF;
$prodcalo-section-bg: #E5D9F2;
$prodcalo-accent: #A594F9;
$prodcalo-border: #CDC1FF;
$prodcalo-text: #333;

.prodcalo-admin-page {
  background: $prodcalo-bg;
  padding: 2rem;
  border-radius: 1rem;
  font-family: 'Segoe UI', sans-serif;
  color: $prodcalo-text;

  &__header {
    text-align: center;
    margin-bottom: 2rem;

    .prodcalo-admin-page__title {
      font-size: 2rem;
      color: $prodcalo-accent;
      margin-bottom: 1rem;
    }
  }

  &__shortcode-panel {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;

    .prodcalo-card {
      background: $prodcalo-section-bg;
      padding: 1.5rem;
      border-radius: 0.75rem;
      border: 1px solid $prodcalo-border;
      flex: 1;
      max-width: 400px;

      strong {
        display: block;
        margin-bottom: 0.5rem;
        color: $prodcalo-accent;
      }

      code {
        background: rgba(0,0,0,0.05);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        display: inline-block;
        margin-top: 0.5rem;
      }
    }
  }

  .prodcalo-generator {
    background: $prodcalo-section-bg;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0.75rem;
    border: 1px solid $prodcalo-border;

    &__title {
      font-size: 1.2rem;
      font-weight: 600;
    }

    &__row {
      margin-bottom: 1.5rem;

      label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: $prodcalo-text;
      }

      input:not([type=checkbox]),
      select {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid $prodcalo-border;
        border-radius: 0.5rem;
        font-size: 1rem;
        max-width: 300px;
        background: white;
      }

      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A594F9'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.25rem;
        padding-right: 2.5rem;
        cursor: pointer;
        
        // Remove default arrow in IE
        &::-ms-expand {
          display: none;
        }
      }
    }
  }

  .prodcalo-generator-output {
    background: $prodcalo-section-bg;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0.75rem;
    border: 1px solid $prodcalo-border;

    label {
      display: block;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: $prodcalo-text;
    }

    &__input {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid $prodcalo-border;
      border-radius: 0.5rem;
      font-size: 1rem;
      margin-bottom: 1rem;
      background: white;
    }

    button {
      background: $prodcalo-accent;
      color: white;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background 0.3s ease;
      margin-right: 1rem;

      &:hover {
        background: color.adjust($prodcalo-accent, $lightness: 10%);
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  a {
    color: $prodcalo-accent;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.prodcalo-support-links {
    background: #f8f9fa;
    padding: 1em;
    border-left: 4px solid #3858e9;
}