// =============================================================================
// SETTINGS PAGE STYLES - ENHANCED APPLE-INSPIRED DESIGN
// =============================================================================

@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

// Wrap all settings styles with .alt-audit-section for CSS isolation
.alt-audit-section {
  &.alt-audit-settings {

    // Enhanced Header with Entrance Animation
    .alt-audit-header {
      margin-bottom: $space-8;
      padding: $space-8;
      border-radius: $radius-apple-lg;
      background: linear-gradient(135deg, rgba($color-info, 0.05) 0%, rgba($color-info, 0.02) 100%);
      animation: fadeInDown 0.6s $ease-apple-out;
      backdrop-filter: blur(10px);

      @keyframes fadeInDown {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      h1 {
        @include heading-large;

        margin: 0 0 $space-2;
        background: linear-gradient(135deg, $color-gray-900 0%, $color-info 100%);
        animation: fadeIn 0.8s $ease-apple-out 0.2s both;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .alt-audit-subtitle {
        @include body-large;

        margin: 0;
        color: $color-gray-600;
        animation: fadeIn 0.8s $ease-apple-out 0.4s both;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }
    }

    .settings-content {
      margin-bottom: 30px;
    }

    // Enhanced Tab Navigation with Smooth Transitions
    .settings-nav {
      position: relative;
      display: flex;
      margin-bottom: $space-8;
      padding: $space-2;
      border-radius: $radius-apple-lg;
      background: $color-background;
      overflow-x: auto;
      box-shadow: $shadow-sm;
      animation: slideUp 0.5s $ease-apple-out 0.3s both;

      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @include custom-scrollbar;

      // Active tab indicator (sliding background)
      &::before {
        content: '';
        position: absolute;
        height: calc(100% - #{$space-2} * 2);
        border-radius: $radius-apple-sm;
        background: $color-primary;
        transition: all 0.3s $ease-apple;
        pointer-events: none;
      }

      .nav-button {
        @include flex-center;

        position: relative;
        z-index: 1;
        padding: $space-3 $space-4;
        border: none;
        border-radius: $radius-apple-sm;
        background: transparent;
        color: $color-gray-600;
        font-family: $font-secondary;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.25s $ease-apple;
        cursor: pointer;

        .dashicons {
          margin-right: $space-2;
          font-size: 16px;
          transition: transform 0.25s $ease-apple;
        }

        // Hover effect with scale
        &:hover {
          background: rgba($color-primary, 0.05);
          color: $color-primary;
          transform: translateY(-1px);

          .dashicons {
            transform: scale(1.1);
          }
        }

        // Active state with enhanced styling
        &.active {
          background: $color-primary;
          color: white;
          box-shadow: $shadow-md;
          transform: translateY(0);

          .dashicons {
            transform: scale(1);
          }
        }

        // Enhanced focus state
        &:focus {
          box-shadow: $shadow-apple-focus;
          outline: none;
        }

        // Active press state
        &:active {
          transform: translateY(0) scale(0.98);
        }
      }
    }

    // Settings Content with Staggered Animations
    .settings-content {
      .settings-section {
        @include apple-card;

        margin-bottom: $space-8;
        animation: fadeInScale 0.5s $ease-apple-out both;
        animation-delay: calc(var(--section-index, 0) * 0.1s);

        @keyframes fadeInScale {
          from {
            opacity: 0;
            transform: scale(0.95);
          }

          to {
            opacity: 1;
            transform: scale(1);
          }
        }

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

        // Enhanced hover effect
        &:hover {
          box-shadow: $shadow-apple-hover;
          transform: translateY(-2px);
        }

        // Section Header with Enhanced Typography
        .section-header {
          margin-bottom: $space-6;
          padding-bottom: $space-4;
          border-bottom: 1px solid $color-gray-200;

          .section-title {
            @include heading-medium;

            margin: 0 0 $space-2;

            @include flex-start;

            .dashicons {
              margin-right: $space-3;
              color: $color-primary;
              font-size: 20px;
              transition: transform 0.3s $ease-apple;
            }

            &:hover .dashicons {
              transform: scale(1.15) rotate(5deg);
            }
          }

          .section-description {
            @include body-medium;

            margin: 0;
            color: $color-gray-600;
          }
        }

        // Enhanced Form Elements
        .form-table {
          width: 100%;
          margin: 0;

          tbody {
            tr {
              transition: background-color 0.2s $ease-apple;
              border-bottom: 1px solid $color-gray-100;

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

              // Row hover effect
              &:hover {
                background-color: rgba($color-gray-100, 0.3);
              }

              th {
                @include label-medium;

                width: 200px;
                padding: $space-4 $space-4 $space-4 0;
                vertical-align: top;

                label {
                  margin: 0;
                  font-weight: $font-weight-medium;
                  transition: color 0.2s $ease-apple;
                }
              }

              td {
                padding: $space-4 0;

                .form-field-wrapper {
                  margin-bottom: $space-3;

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

                .alt-audit-api-key {
                  display: flex;
                  gap: 10px;
                }

                .quality-threshold-display {
                  display: none;
                }

                // Enhanced Input Groups
                .input-group {
                  position: relative;
                  max-width: 450px;

                  .input-with-unit {
                    display: flex;
                    align-items: center;

                    input {
                      @include apple-input;

                      flex: 1;
                      transition: all 0.25s $ease-apple;

                      // Enhanced focus with glow effect
                      &:focus {
                        border-color: $color-primary;
                        box-shadow:
                          0 0 0 3px rgba($color-primary, 0.15),
                          0 2px 8px rgba($color-primary, 0.1);
                        transform: translateY(-1px);
                      }
                    }

                    .input-unit {
                      height: $input-height;
                      padding: 0 $space-4;
                      border: $input-border;
                      border-radius: 0 $input-radius;
                      background: $color-gray-50;
                      color: $color-gray-600;
                      font-size: $font-size-sm;
                      white-space: nowrap;
                      transition: all 0.25s $ease-apple;
                      border-left: none;
                      display: none !important;

                      @include flex-center;
                    }

                    // Sync focus state with input
                    input:focus+.input-unit {
                      border-color: $color-primary;
                      background: rgba($color-primary, 0.05);
                      color: $color-primary;
                    }
                  }

                  .input-addon {
                    position: absolute;
                    top: 50%;
                    right: $space-3;
                    color: $color-gray-500;
                    transform: translateY(-50%);
                    transition: all 0.25s $ease-apple;
                    pointer-events: none;
                  }
                }

                // Enhanced Input Styles with Glow Effects
                input[type='text'],
                input[type='email'],
                input[type='url'],
                input[type='number'],
                input[type='password'] {
                  @include apple-input;

                  transition: all 0.25s $ease-apple;

                  // Enhanced focus state with glow
                  &:focus {
                    border-color: $color-primary;
                    box-shadow:
                      0 0 0 3px rgba($color-primary, 0.15),
                      0 2px 8px rgba($color-primary, 0.1);
                    transform: translateY(-1px);
                  }

                  // Hover state
                  &:hover:not(:focus, :disabled) {
                    border-color: $color-gray-400;
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
                  }
                }

                select {
                  @include apple-input;

                  padding-right: $space-8;
                  background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23667085' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
                  background-size: 12px;
                  background-position: right $space-3 center;
                  background-repeat: no-repeat;
                  transition: all 0.25s $ease-apple;
                  max-width: 450px;

                  // Enhanced focus and hover states
                  &:focus {
                    border-color: $color-primary;
                    box-shadow:
                      0 0 0 3px rgba($color-primary, 0.15),
                      0 2px 8px rgba($color-primary, 0.1);
                    transform: translateY(-1px);
                  }

                  &:hover:not(:focus, :disabled) {
                    border-color: $color-gray-400;
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
                  }
                }

                textarea {
                  @include apple-input;

                  height: auto;
                  min-height: 120px;
                  padding: $space-3 $space-4;
                  transition: all 0.25s $ease-apple;
                  resize: vertical;
                  display: none;

                  // Enhanced focus state
                  &:focus {
                    border-color: $color-primary;
                    box-shadow:
                      0 0 0 3px rgba($color-primary, 0.15),
                      0 2px 8px rgba($color-primary, 0.1);
                    transform: translateY(-1px);
                  }

                  &:hover:not(:focus, :disabled) {
                    border-color: $color-gray-400;
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
                  }
                }

                // iOS-Style Toggle Switch (Enhanced)
                .toggle-wrapper {
                  @include flex-start;

                  input[type='checkbox'] {
                    position: relative;
                    width: 48px;
                    height: 28px;
                    margin-right: $space-3;
                    border: none;
                    border-radius: 14px;
                    background: $color-gray-300;
                    transition: all 0.3s $ease-apple;
                    cursor: pointer;
                    appearance: none;
                    flex-shrink: 0;

                    // Toggle knob
                    &::before {
                      content: '';
                      position: absolute;
                      top: 2px;
                      left: 2px;
                      width: 24px;
                      height: 24px;
                      border-radius: 50%;
                      background: white;
                      box-shadow:
                        0 2px 4px rgba(0, 0, 0, 0.15),
                        0 1px 2px rgba(0, 0, 0, 0.1);
                      transition: all 0.3s $ease-apple;
                    }

                    // Checked state
                    &:checked {
                      background: $color-primary;

                      &::before {
                        left: 22px;
                        box-shadow:
                          0 2px 6px rgba(0, 122, 255, 0.3),
                          0 1px 3px rgba(0, 0, 0, 0.15);
                      }
                    }

                    // Enhanced focus state
                    &:focus {
                      box-shadow: 0 0 0 4px rgba($color-primary, 0.2);
                      outline: none;
                    }

                    // Hover effect
                    &:hover {
                      &::before {
                        box-shadow:
                          0 3px 8px rgba(0, 0, 0, 0.2),
                          0 1px 3px rgba(0, 0, 0, 0.12);
                      }
                    }

                    // Active press effect
                    &:active::before {
                      width: 28px;
                    }

                    &:checked:active::before {
                      left: 18px;
                    }

                    // Disabled state
                    &:disabled {
                      opacity: 0.5;
                      cursor: not-allowed;
                    }
                  }

                  .toggle-content {
                    flex: 1;

                    .toggle-label {
                      @include body-medium;

                      display: block;
                      margin-bottom: $space-1;
                      color: $color-gray-900;
                      transition: color 0.2s $ease-apple;
                      cursor: pointer;

                      &:hover {
                        color: $color-primary;
                      }
                    }

                    .toggle-description {
                      @include body-small;

                      margin: 0;
                      color: $color-gray-600;
                    }
                  }
                }

                // Enhanced Custom Checkbox
                .checkbox-wrapper {
                  @include flex-start;

                  input[type='checkbox'] {
                    position: relative;
                    width: 20px;
                    height: 20px;
                    margin-right: $space-3;
                    border: 2px solid $color-gray-300;
                    border-radius: $radius-sm;
                    background: $color-background;
                    transition: all 0.25s $ease-apple;
                    cursor: pointer;
                    appearance: none;
                    flex-shrink: 0;

                    // Enhanced hover effect
                    &:hover {
                      border-color: $color-primary;
                      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                      transform: scale(1.05);
                    }

                    // Checked state with animation
                    &:checked {
                      border-color: $color-primary;
                      background: $color-primary;
                      box-shadow: 0 2px 6px rgba($color-primary, 0.3);
                      transform: scale(1);

                      &::after {
                        content: '';
                        position: absolute;
                        top: 1px;
                        left: 5px;
                        width: 6px;
                        height: 10px;
                        border: 2px solid white;
                        transform: rotate(45deg);
                        animation: checkmark 0.3s $ease-apple-out;
                        border-top: none;
                        border-left: none;
                      }

                      @keyframes checkmark {
                        0% {
                          width: 0;
                          height: 0;
                        }

                        50% {
                          width: 0;
                          height: 10px;
                        }

                        100% {
                          width: 6px;
                          height: 10px;
                        }
                      }
                    }

                    // Enhanced focus state
                    &:focus {
                      box-shadow: $shadow-apple-focus;
                      outline: none;
                    }

                    // Active press effect
                    &:active {
                      transform: scale(0.95);
                    }
                  }

                  .checkbox-content {
                    flex: 1;

                    .checkbox-label {
                      @include body-medium;

                      display: block;
                      margin-bottom: $space-1;
                      color: $color-gray-900;
                      transition: color 0.2s $ease-apple;
                      cursor: pointer;

                      &:hover {
                        color: $color-primary;
                      }
                    }

                    .checkbox-description {
                      @include body-small;

                      margin: 0;
                      color: $color-gray-600;
                    }
                  }
                }

                // Enhanced Field Help Text
                .field-help {
                  @include body-small;

                  margin-top: $space-2;
                  margin-bottom: 0;
                  color: $color-gray-500;
                  transition: color 0.2s $ease-apple;

                  &.error {
                    color: $color-error;
                    animation: shake 0.3s $ease-apple;

                    @keyframes shake {

                      0%,
                      100% {
                        transform: translateX(0);
                      }

                      25% {
                        transform: translateX(-4px);
                      }

                      75% {
                        transform: translateX(4px);
                      }
                    }
                  }

                  &.success {
                    color: $color-success;
                    animation: successPulse 0.5s $ease-apple-out;

                    @keyframes successPulse {
                      0% {
                        opacity: 0;
                        transform: scale(0.95);
                      }

                      50% {
                        transform: scale(1.02);
                      }

                      100% {
                        opacity: 1;
                        transform: scale(1);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      // Enhanced API Configuration Section
      .api-configuration {
        .api-status {
          @include flex-between;

          margin-bottom: $space-6;
          padding: $space-4;
          border-radius: $radius-apple-sm;
          background: $color-gray-50;
          transition: all 0.3s $ease-apple;

          &:hover {
            background: rgba($color-gray-100, 0.8);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          }

          .status-info {
            @include flex-start;

            .status-icon {
              @include flex-center;

              width: 32px;
              height: 32px;
              margin-right: $space-3;
              border-radius: $radius-full;
              transition: all 0.3s $ease-apple;

              // Animated status indicator
              &.connected {
                position: relative;
                background: rgba($color-success, 0.1);
                color: $color-success;

                &::after {
                  content: '';
                  position: absolute;
                  border-radius: $radius-full;
                  background: rgba($color-success, 0.3);
                  animation: pulse-ring 2s $ease-apple infinite;
                  inset: 0;
                }

                @keyframes pulse-ring {

                  0%,
                  100% {
                    opacity: 1;
                    transform: scale(1);
                  }

                  50% {
                    opacity: 0;
                    transform: scale(1.3);
                  }
                }
              }

              &.disconnected {
                background: rgba($color-error, 0.1);
                color: $color-error;
              }

              .dashicons {
                position: relative;
                z-index: 1;
                font-size: 16px;
              }
            }

            .status-text {
              .status-label {
                @include body-medium;

                margin: 0 0 $space-1;
                color: $color-gray-900;
                font-weight: $font-weight-semibold;
              }

              .status-description {
                @include body-small;

                margin: 0;
                color: $color-gray-600;
              }
            }
          }

          .test-connection {
            height: 36px;
            padding: $space-2 $space-4;
            font-size: $font-size-sm;
            transition: all 0.25s $ease-apple;

            &:hover {
              box-shadow: $shadow-md;
              transform: translateY(-2px);
            }

            &:active {
              transform: translateY(0);
            }
          }
        }
      }

      // Enhanced Quality Thresholds Section
      .quality-thresholds {
        .threshold-grid {
          display: grid;
          gap: $space-4;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          margin-bottom: $space-6;

          .threshold-card {
            padding: $space-4;
            border: 1px solid transparent;
            border-radius: $radius-apple-sm;
            background: $color-gray-50;
            text-align: center;
            transition: all 0.3s $ease-apple;

            // Enhanced hover effect
            &:hover {
              border-color: rgba($color-primary, 0.2);
              background: rgba($color-gray-100, 0.8);
              box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
              transform: translateY(-4px) scale(1.02);
            }

            .threshold-icon {
              @include flex-center;

              width: 40px;
              height: 40px;
              margin: 0 auto $space-3;
              border-radius: $radius-full;
              transition: all 0.3s $ease-apple;

              .dashicons {
                font-size: 20px;
              }
            }

            .threshold-label {
              @include label-medium;

              margin: 0 0 $space-2;
              transition: color 0.3s $ease-apple;
            }

            .threshold-range {
              @include body-small;

              margin: 0;
              color: $color-gray-600;
              transition: color 0.3s $ease-apple;
            }

            // Hover effects for icons
            &:hover .threshold-icon {
              transform: scale(1.15) rotate(5deg);
            }

            &.missing {
              .threshold-icon {
                background: rgba($color-missing, 0.1);
                color: $color-missing;
              }

              &:hover .threshold-icon {
                background: rgba($color-missing, 0.15);
                box-shadow: 0 4px 12px rgba($color-missing, 0.2);
              }
            }

            &.weak {
              .threshold-icon {
                background: rgba($color-weak, 0.1);
                color: $color-weak;
              }

              &:hover .threshold-icon {
                background: rgba($color-weak, 0.15);
                box-shadow: 0 4px 12px rgba($color-weak, 0.2);
              }
            }

            &.good {
              .threshold-icon {
                background: rgba($color-good, 0.1);
                color: $color-good;
              }

              &:hover .threshold-icon {
                background: rgba($color-good, 0.15);
                box-shadow: 0 4px 12px rgba($color-good, 0.2);
              }
            }

            &.excellent {
              .threshold-icon {
                background: rgba($color-excellent, 0.1);
                color: $color-excellent;
              }

              &:hover .threshold-icon {
                background: rgba($color-excellent, 0.15);
                box-shadow: 0 4px 12px rgba($color-excellent, 0.2);
              }
            }
          }
        }
      }

      // Enhanced WCAG Compliance Section
      .wcag-compliance {
        .compliance-levels {
          display: grid;
          gap: $space-4;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          margin-bottom: $space-6;

          .compliance-level {
            padding: $space-4;
            border: 2px solid transparent;
            border-radius: $radius-apple-sm;
            background: $color-gray-50;
            text-align: center;
            transition: all 0.3s $ease-apple;
            cursor: pointer;

            // Enhanced hover effect
            &:hover {
              border-color: rgba($color-primary, 0.3);
              background: rgba($color-primary, 0.05);
              box-shadow: 0 6px 12px rgba($color-primary, 0.15);
              transform: translateY(-4px) scale(1.03);
            }

            // Active state with enhanced styling
            &.active {
              border: 2px solid $color-primary;
              background: rgba($color-primary, 0.1);
              box-shadow: 0 4px 12px rgba($color-primary, 0.25);

              .level-badge {
                transform: scale(1.05);
              }
            }

            .level-badge {
              @include status-badge('info');

              margin-bottom: $space-2;
              transition: all 0.3s $ease-apple;

              &.level-a {
                background: rgba($color-warning, 0.1);
                color: $color-warning-dark;
              }

              &.level-aa {
                background: rgba($color-success, 0.1);
                color: $color-success-dark;
              }

              &.level-aaa {
                background: rgba($color-excellent, 0.1);
                color: $color-excellent;
              }
            }

            .level-description {
              @include body-small;

              margin: 0;
              color: $color-gray-600;
              transition: color 0.3s $ease-apple;
            }

            // Hover effect for badge
            &:hover .level-badge {
              transform: scale(1.08);
            }
          }
        }
      }

      // Enhanced Form Actions
      .form-actions {
        @include flex-between;

        margin-top: $space-8;
        padding-top: $space-6;
        border-top: 1px solid $color-gray-200;

        @include media-down(sm) {
          @include flex-column;

          gap: $space-4;
        }

        .actions-left {
          @include flex-start;

          gap: $space-4;

          @include media-down(sm) {
            justify-content: stretch;
            width: 100%;

            .button {
              flex: 1;
            }
          }
        }

        .actions-right {
          @include flex-end;

          gap: $space-3;

          @include media-down(sm) {
            justify-content: stretch;
            width: 100%;

            .button {
              flex: 1;
            }
          }
        }

        .button {
          transition: all 0.25s $ease-apple;

          &.button-primary {

            // Enhanced hover effect
            &:hover {
              box-shadow: $shadow-lg;
              transform: translateY(-2px);
            }

            &:active {
              transform: translateY(0);
            }
          }

          &.button-secondary {
            &:hover {
              box-shadow: $shadow-md;
              transform: translateY(-2px);
            }

            &:active {
              transform: translateY(0);
            }
          }

          &.button-danger {
            &:hover {
              box-shadow: $shadow-lg;
              transform: translateY(-2px);
            }

            &:active {
              transform: translateY(0);
            }
          }
        }
      }
    }

    // Enhanced Loading States with Premium Animation
    .loading {
      position: relative;
      pointer-events: none;

      // Backdrop with blur
      &::after {
        content: '';
        position: absolute;
        z-index: 9;
        border-radius: $radius-apple-sm;
        background: rgba($color-background, 0.9);
        backdrop-filter: blur(4px);
        inset: 0;

        @include flex-center;
      }

      // Spinner with gradient
      &::before {
        content: '';
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        border: 3px solid transparent;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba($color-primary, 0.2);
        transform: translate(-50%, -50%);
        animation: spin 1s $ease-apple infinite;
        border-top-color: $color-primary;
        border-right-color: $color-primary;

        @keyframes spin {
          to {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }
      }
    }

    // Modern Tooltip Styling
    .tooltip {
      position: relative;

      &::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        padding: $space-2 $space-3;
        border-radius: $radius-apple-sm;
        background: rgba($color-gray-900, 0.95);
        color: white;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        white-space: nowrap;
        opacity: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateX(-50%) translateY(-8px);
        transition: all 0.25s $ease-apple;
        pointer-events: none;
        backdrop-filter: blur(10px);
      }

      &::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 0;
        height: 0;
        opacity: 0;
        transform: translateX(-50%);
        transition: all 0.25s $ease-apple;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid rgba($color-gray-900, 0.95);
      }

      &:hover::after,
      &:hover::before {
        opacity: 1;
      }

      &:hover::after {
        transform: translateX(-50%) translateY(-4px);
      }
    }

    // Enhanced Dark Mode Support
    @include dark-mode {
      .alt-audit-header {
        background: linear-gradient(135deg, rgba($color-info, 0.1) 0%, rgba($color-info, 0.05) 100%);

        h1 {
          color: $dark-text-primary;
          -webkit-text-fill-color: $dark-text-primary;
        }

        .alt-audit-subtitle {
          color: $dark-text-secondary;
        }
      }

      .settings-nav {
        background: $dark-surface;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

        .nav-button {
          color: $dark-text-secondary;

          &:hover {
            background: rgba($color-primary, 0.15);
            color: $color-primary;
          }

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

      .settings-section {
        border-color: $dark-border;
        background: $dark-surface;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

        &:hover {
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        }

        .section-header {
          border-bottom-color: $dark-border;
        }

        .section-title {
          color: $dark-text-primary;
        }

        .section-description {
          color: $dark-text-secondary;
        }

        .form-table tbody tr {
          border-color: $dark-border;

          &:hover {
            background-color: rgba($color-gray-700, 0.3);
          }

          th label {
            color: $dark-text-primary;
          }

          td {

            input,
            select,
            textarea {
              border-color: $dark-border;
              background: rgba($color-gray-900, 0.5);
              color: $dark-text-primary;

              &:focus {
                border-color: $color-primary;
                background: rgba($color-gray-900, 0.7);
              }
            }

            .toggle-wrapper input[type='checkbox'] {
              background: $color-gray-600;

              &::before {
                background: $color-gray-300;
              }

              &:checked {
                background: $color-primary;

                &::before {
                  background: white;
                }
              }
            }

            .checkbox-label,
            .toggle-label {
              color: $dark-text-primary;
            }

            .checkbox-description,
            .toggle-description,
            .field-help {
              color: $dark-text-secondary;
            }
          }
        }
      }

      .threshold-card,
      .compliance-level {
        border: 1px solid $dark-border;
        background: $dark-surface;

        &:hover {
          border-color: rgba($color-primary, 0.3);
          background: rgba($dark-surface, 0.8);
        }

        .threshold-label {
          color: $dark-text-primary;
        }

        .threshold-range,
        .level-description {
          color: $dark-text-secondary;
        }
      }

      .api-status {
        border: 1px solid $dark-border;
        background: $dark-surface;

        &:hover {
          background: rgba($dark-surface, 0.8);
        }

        .status-label {
          color: $dark-text-primary;
        }

        .status-description {
          color: $dark-text-secondary;
        }
      }

      .form-actions {
        border-top-color: $dark-border;
      }

      .loading::after {
        background: rgba($dark-surface, 0.95);
      }

      .tooltip::after {
        background: rgba($color-gray-100, 0.95);
        color: $color-gray-900;
      }

      .tooltip::before {
        border-top-color: rgba($color-gray-100, 0.95);
      }
    }

    // Reduced Motion Support - Disable all animations
    @include reduced-motion {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .alt-audit-header,
      .settings-nav,
      .settings-section {
        animation: none;
      }

      .nav-button,
      .threshold-card,
      .compliance-level,
      .button,
      input,
      select,
      textarea {
        transition: none;
      }

      .loading::before {
        animation: none;
      }

      .status-icon.connected::after {
        animation: none;
      }
    }

    // High Contrast Mode Support
    @include high-contrast {

      .settings-section,
      .threshold-card,
      .compliance-level,
      .api-status {
        border: 2px solid currentcolor;
      }

      .nav-button.active {
        outline: 2px solid currentcolor;
        outline-offset: 2px;
      }

      input:focus,
      select:focus,
      textarea:focus {
        outline: 2px solid currentcolor;
        outline-offset: 2px;
      }
    }
  }
}

// End .alt-audit-section wrapper

// ========================================================================
// SELECT2 CUSTOMIZATIONS - Simple overrides like Alt Manager
// ========================================================================

// Select2 Container customizations (WordPress includes base Select2 CSS)
.select2-container--default {

  // Multi-select selection box
  .select2-selection--multiple {
    min-height: 44px !important;
    border: 1px solid $color-gray-300 !important;
    border-radius: $radius-apple-md !important;
    padding: 4px 8px !important;

    &:focus,
    &.select2-selection--focus {
      border-color: $color-primary !important;
      box-shadow: 0 0 0 1px $color-surface, 0 0 0 3px rgba($color-primary, 0.2) !important;
      outline: none !important;
    }

    // Selected choices/tags
    .select2-selection__choice {
      background: linear-gradient(135deg, $color-primary 0%, $color-primary-dark 100%) !important;
      border: 1px solid rgba($color-primary, 0.3) !important;
      border-radius: $radius-apple-sm !important;
      color: #fff !important;
      padding: 4px 8px !important;
      padding-left: 8px !important;
      margin: 3px 5px 3px 0 !important;
      font-family: $font-secondary !important;
      font-size: 0.875rem !important;
      font-weight: 500 !important;

      // Remove button (×)
      .select2-selection__choice__remove {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 16px !important;
        font-weight: bold !important;
        padding: 0 4px !important;
        margin-right: 4px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
        transition: all 0.2s ease !important;

        &:hover {
          color: #fff !important;
          background: rgba(255, 255, 255, 0.2) !important;
        }
      }
    }

    // Search input
    .select2-search--inline {
      .select2-search__field {
        font-family: $font-secondary !important;
        font-size: $font-size-base !important;
        margin-top: 4px !important;

        &::placeholder {
          color: $color-gray-400 !important;
        }
      }
    }
  }

  // Dropdown styling
  .select2-dropdown {
    border: 1px solid $color-gray-300 !important;
    border-radius: $radius-apple-md !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  }

  // Dropdown search field
  .select2-search--dropdown {
    .select2-search__field {
      border: 1px solid $color-gray-300 !important;
      border-radius: $radius-apple-sm !important;
      font-family: $font-secondary !important;
      padding: 6px 12px !important;

      &:focus {
        border-color: $color-primary !important;
        outline: none !important;
      }
    }
  }

  // Results options
  .select2-results__option {
    font-family: $font-secondary !important;
    padding: 8px 12px !important;

    // Highlighted state
    &.select2-results__option--highlighted {
      background-color: rgba($color-primary, 0.1) !important;
      color: $color-gray-900 !important;
    }

    // Selected state
    &[aria-selected='true'] {
      background-color: rgba($color-primary, 0.15) !important;
      color: $color-gray-900 !important;
      font-weight: 500 !important;
    }
  }

}

// =============================================================================
// ALT TEXT BUILDER STYLES
// =============================================================================

// Minimalist Alt Text Builder Styles
.alt-builder-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.alt-builder-header {
  margin-bottom: 20px;

  h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
  }

  p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
  }
}

.pattern-editor {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px;
  min-height: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;

  &:focus-within {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    background: #fff;
  }
}

.token-chip {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  cursor: grab;
  user-select: none;

  .remove-token {
    margin-left: 6px;
    color: #6b7280;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;

    &:hover {
      background: rgba(0, 0, 0, 0.1);
      color: #ef4444;
    }
  }
}

.available-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.token-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 6px 12px;
  border-radius: 100px; // Pill shape
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;

  &:hover {
    border-color: #9ca3af;
    background: #f3f4f6;
    transform: translateY(-1px);
  }

  &.separator {
    background: #f3f4f6;
    color: #6b7280;
    font-family: monospace;
  }
}

.builder-empty-state {
  color: #9ca3af;
  font-style: italic;
  font-size: 13px;
  padding: 4px;
}