// =============================================================================
// BULK TOOLS PAGE STYLES - PREMIUM APPLE-INSPIRED DESIGN
// =============================================================================

@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;
@use 'sass:color';

// Wrap all bulk-tools styles with .alt-audit-section for CSS isolation
.alt-audit-section {
  &.alt-audit-bulk {
    // Enhanced Header with Premium Gradient & Subtle Animation
    .alt-audit-header {
      position: relative;
      margin-bottom: $space-8;
      padding: $space-8;
      border-radius: $radius-apple-lg;
      background: linear-gradient(135deg, rgba($color-primary, 0.05) 0%, rgba($color-purple, 0.03) 100%);
      overflow: hidden;
      animation: fadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      backdrop-filter: blur(20px);

      // Premium gradient overlay effect
      &::before {
        content: '';
        position: absolute;
        border-radius: $radius-apple-lg;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1) 0%,
          transparent 50%,
          rgba($color-primary, 0.05) 100%
        );
        opacity: 0;
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        inset: 0;
        pointer-events: none;
      }

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

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

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

      h1 {
        @include heading-large;

        position: relative;
        margin: 0 0 $space-2;
        background: linear-gradient(135deg, $color-gray-900 0%, $color-primary 100%);
        background-size: 200% 200%;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

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

        position: relative;
        margin: 0;
        color: $color-gray-600;
        animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
      }

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

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

    // Bulk Operations Container
    .alt-audit-bulk-container {
      animation: slideUp 0.5s $ease-apple-out 0.3s both;

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

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

    // Operations Grid Layout
    .bulk-operations-grid {
      display: grid;
      gap: $space-6;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      margin-bottom: $space-8;

      @include media-down(md) {
        grid-template-columns: 1fr;
      }
    }

    // Premium Operation Card with Enhanced Micro-interactions
    .bulk-operation-card {
      @include apple-card($space-6, $shadow-apple-card);

      position: relative;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      animation: fadeInScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(var(--card-index, 0) * 0.1s);

      // Premium multi-layer shadow system
      &::before {
        content: '';
        position: absolute;
        border-radius: $radius-apple-md;
        opacity: 0;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.02),
          0 2px 4px rgba(0, 0, 0, 0.03),
          0 4px 8px rgba(0, 0, 0, 0.04);
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        inset: 0;
        pointer-events: none;
      }

      // Subtle gradient overlay on hover
      &::after {
        content: '';
        position: absolute;
        border-radius: $radius-apple-md;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        inset: 0;
        pointer-events: none;
      }

      @keyframes fadeInScale {
        from {
          opacity: 0;
          transform: scale(0.96) translateY(10px);
        }

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

      // Premium hover state with lift effect
      &:hover {
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.03),
          0 4px 8px rgba(0, 0, 0, 0.04),
          0 8px 16px rgba(0, 0, 0, 0.06),
          0 16px 32px rgba(0, 0, 0, 0.08);
        transform: translateY(-6px) scale(1.01);

        &::before {
          opacity: 1;
        }

        &::after {
          opacity: 1;
        }
      }

      // Press feedback
      &:active {
        transform: translateY(-2px) scale(0.99);
        transition-duration: 0.1s;
      }

      @include reduced-motion {
        &:hover {
          transform: none;
        }

        &:active {
          transform: none;
        }
      }

      // Operation Header
      .operation-header {
        @include flex-start;

        position: relative;
        flex-wrap: wrap;
        gap: $space-4;
        margin-bottom: $space-6;
        padding-bottom: $space-4;
        border-bottom: 1px solid $color-gray-200;

        .operation-icon {
          @include flex-center;

          position: relative;
          z-index: 1;
          width: 48px;
          height: 48px;
          border-radius: $radius-apple-md;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          flex-shrink: 0;

          // Premium icon glow effect
          &::before {
            content: '';
            position: absolute;
            z-index: -1;
            border-radius: calc($radius-apple-md + 4px);
            background: inherit;
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            inset: -4px;
            filter: blur(12px);
          }

          .dashicons {
            font-size: 24px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          }

          &.ai-icon {
            background: linear-gradient(135deg, rgba($color-primary, 0.15) 0%, rgba($color-primary, 0.08) 100%);
            color: $color-primary;
            box-shadow: 0 2px 8px rgba($color-primary, 0.15);

            .dashicons {
              animation: rotate 3s linear infinite;

              @keyframes rotate {
                from {
                  transform: rotate(0deg);
                }

                to {
                  transform: rotate(360deg);
                }
              }

              @include reduced-motion {
                animation: none;
              }
            }

            &::before {
              background: linear-gradient(135deg, $color-primary 0%, rgba($color-primary, 0.8) 100%);
            }
          }

          &.analytics-icon {
            background: linear-gradient(135deg, rgba($color-info, 0.15) 0%, rgba($color-info, 0.08) 100%);
            color: $color-info;
            box-shadow: 0 2px 8px rgba($color-info, 0.15);

            &::before {
              background: linear-gradient(135deg, $color-info 0%, rgba($color-info, 0.8) 100%);
            }
          }

          &.export-icon {
            background: linear-gradient(135deg, rgba($color-success, 0.15) 0%, rgba($color-success, 0.08) 100%);
            color: $color-success;
            box-shadow: 0 2px 8px rgba($color-success, 0.15);

            &::before {
              background: linear-gradient(135deg, $color-success 0%, rgba($color-success, 0.8) 100%);
            }
          }

          &.import-icon {
            background: linear-gradient(135deg, rgba($color-warning, 0.15) 0%, rgba($color-warning, 0.08) 100%);
            color: $color-warning;
            box-shadow: 0 2px 8px rgba($color-warning, 0.15);

            &::before {
              background: linear-gradient(135deg, $color-warning 0%, rgba($color-warning, 0.8) 100%);
            }
          }

          &.free-icon {
            background: linear-gradient(135deg, rgba($color-success, 0.15) 0%, rgba($color-success, 0.08) 100%);
            color: $color-success;
            box-shadow: 0 2px 8px rgba($color-success, 0.15);

            .dashicons {
              animation: pulse 2s ease-in-out infinite;

              @keyframes pulse {
                0%,
                100% {
                  transform: scale(1);
                }

                50% {
                  transform: scale(1.05);
                }
              }

              @include reduced-motion {
                animation: none;
              }
            }

            &::before {
              background: linear-gradient(135deg, $color-success 0%, rgba($color-success, 0.8) 100%);
            }
          }

          // Enhanced hover effect
          .bulk-operation-card:hover & {
            transform: scale(1.1) rotate(5deg);

            &::before {
              opacity: 0.6;
            }

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

          @include reduced-motion {
            .bulk-operation-card:hover & {
              transform: none;

              .dashicons {
                transform: none;
              }
            }
          }
        }

        .operation-info {
          flex: 1;
          min-width: 0;

          h3 {
            @include heading-small;

            margin: 0 0 $space-2;
          }

          p {
            @include body-small;

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

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

            position: relative;
            font-weight: $font-weight-semibold;
            letter-spacing: 0.01em;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

            // Subtle pulse effect
            &::before {
              content: '';
              position: absolute;
              z-index: -1;
              border-radius: inherit;
              background: inherit;
              opacity: 0;
              transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
              inset: -2px;
              filter: blur(8px);
            }

            &.assessment-type {
              border: 1px solid rgba($color-info, 0.2);
              background: linear-gradient(135deg, rgba($color-info, 0.12) 0%, rgba($color-info, 0.08) 100%);
              color: $color-info-dark;

              &::before {
                background: $color-info;
              }
            }

            &.export-type {
              border: 1px solid rgba($color-success, 0.2);
              background: linear-gradient(135deg, rgba($color-success, 0.12) 0%, rgba($color-success, 0.08) 100%);
              color: $color-success-dark;

              &::before {
                background: $color-success;
              }
            }

            &.import-type {
              border: 1px solid rgba($color-warning, 0.2);
              background: linear-gradient(135deg, rgba($color-warning, 0.12) 0%, rgba($color-warning, 0.08) 100%);
              color: $color-warning-dark;

              &::before {
                background: $color-warning;
              }
            }

            &.free-badge {
              border: 1px solid rgba($color-success, 0.3);
              background: linear-gradient(135deg, rgba($color-success, 0.15) 0%, rgba($color-success, 0.1) 100%);
              color: $color-success-dark;
              font-weight: $font-weight-bold;
              animation: free-pulse 2s ease-in-out infinite;

              @keyframes free-pulse {
                0%,
                100% {
                  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba($color-success, 0.4);
                }

                50% {
                  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 8px 2px rgba($color-success, 0.4);
                }
              }

              &::before {
                background: $color-success;
              }

              @include reduced-motion {
                animation: none;
              }
            }

            &.ai-badge {
              border: 1px solid rgba($color-primary, 0.2);
              background: linear-gradient(135deg, rgba($color-primary, 0.12) 0%, rgba($color-primary, 0.08) 100%);
              color: $color-primary;

              &::before {
                background: $color-primary;
              }
            }

            .bulk-operation-card:hover & {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
              transform: scale(1.05);

              &::before {
                opacity: 0.3;
              }
            }

            @include reduced-motion {
              .bulk-operation-card:hover & {
                transform: none;

                &::before {
                  opacity: 0;
                }
              }
            }
          }
        }
      }

      // Operation Content
      .operation-content {
        // Options Section
        .operation-options {
          margin-bottom: $space-6;

          .options-title {
            @include heading-small;

            margin: 0 0 $space-4;
            font-size: $font-size-base;
          }

          .option-group {
            margin-bottom: $space-4;

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

            // Premium iOS-Style Toggle Switch
            .modern-checkbox-label {
              @include flex-start;

              position: relative;
              gap: $space-3;
              padding: $space-3;
              border-radius: $radius-apple-sm;
              background: transparent;
              transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
              cursor: pointer;

              &:hover {
                background: rgba($color-gray-50, 0.8);
              }

              input[type='checkbox'] {
                position: relative;
                width: 48px;
                height: 28px;
                border: none;
                border-radius: 14px;
                background: $color-gray-300;
                box-shadow:
                  inset 0 1px 3px rgba(0, 0, 0, 0.15),
                  0 1px 2px rgba(0, 0, 0, 0.05);
                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                cursor: pointer;
                appearance: none;
                flex-shrink: 0;

                // Toggle knob
                &::before {
                  content: '';
                  position: absolute;
                  top: 2px;
                  left: 2px;
                  width: 24px;
                  height: 24px;
                  border-radius: 12px;
                  background: white;
                  box-shadow:
                    0 2px 4px rgba(0, 0, 0, 0.1),
                    0 4px 8px rgba(0, 0, 0, 0.08);
                  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                }

                &:hover {
                  background: $color-gray-400;

                  &::before {
                    box-shadow:
                      0 2px 6px rgba(0, 0, 0, 0.12),
                      0 4px 12px rgba(0, 0, 0, 0.1);
                  }
                }

                &:checked {
                  background: linear-gradient(
                    135deg,
                    $color-primary 0%,
                    color.adjust($color-primary, $lightness: -5%) 100%
                  );
                  box-shadow:
                    inset 0 1px 3px rgba(0, 0, 0, 0.1),
                    0 0 0 0 rgba($color-primary, 0.3),
                    0 2px 8px rgba($color-primary, 0.25);

                  &::before {
                    box-shadow:
                      0 2px 6px rgba(0, 0, 0, 0.15),
                      0 4px 12px rgba($color-primary, 0.3);
                    transform: translateX(20px);
                  }

                  &:hover {
                    background: linear-gradient(
                      135deg,
                      color.adjust($color-primary, $lightness: 5%) 0%,
                      $color-primary 100%
                    );
                  }
                }

                &:focus {
                  box-shadow:
                    inset 0 1px 3px rgba(0, 0, 0, 0.15),
                    0 0 0 4px rgba($color-primary, 0.15);
                  outline: none;
                }

                &:active {
                  &::before {
                    width: 28px;
                  }

                  &:checked::before {
                    transform: translateX(16px);
                  }
                }

                @include reduced-motion {
                  transition: background 0.1s ease;

                  &::before {
                    transition: transform 0.1s ease;
                  }
                }
              }

              .checkbox-custom {
                display: none;
              }

              .checkbox-text {
                flex: 1;
                user-select: none;

                strong {
                  @include body-medium;

                  display: block;
                  margin-bottom: $space-1;
                  color: $color-gray-900;
                  font-weight: $font-weight-semibold;
                  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                }

                .checkbox-description {
                  @include body-small;

                  display: block;
                  color: $color-gray-600;
                  line-height: $line-height-relaxed;
                  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                }
              }

              // Highlight text on checked state
              input[type='checkbox']:checked ~ .checkbox-text {
                strong {
                  color: $color-primary;
                }
              }
            }
          }

          // Premium Form Field with Enhanced Focus States
          .form-field {
            margin-top: $space-4;

            .form-label {
              @include label-medium;

              display: block;
              margin-bottom: $space-2;
              color: $color-gray-900;
              font-weight: $font-weight-semibold;
              transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .form-select {
              @include apple-input;

              height: auto;
              padding: $space-3 $space-4;
              box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.08),
                0 1px 2px rgba(0, 0, 0, 0.04);
              transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

              option {
                padding: $space-2;
              }

              &:hover {
                box-shadow:
                  0 0 0 1px rgba(0, 0, 0, 0.12),
                  0 2px 4px rgba(0, 0, 0, 0.06);
              }

              &:focus {
                box-shadow:
                  0 0 0 3px rgba($color-primary, 0.15),
                  0 0 0 1px $color-primary,
                  0 2px 8px rgba($color-primary, 0.2);
                outline: none;
              }
            }

            .field-description {
              @include body-small;

              margin-top: $space-2;
              margin-bottom: 0;
              color: $color-gray-500;
              line-height: $line-height-relaxed;
            }

            // Focus state label highlight
            .form-select:focus ~ .form-label,
            .form-select:focus + .form-label {
              color: $color-primary;
            }
          }
        }

        // Premium Feature List with Staggered Animation
        .operation-features {
          margin-bottom: $space-6;

          .feature-list {
            display: flex;
            flex-direction: column;
            gap: $space-3;

            .feature-item {
              @include flex-start;

              gap: $space-3;
              padding: $space-3;
              border: 1px solid rgba($color-success, 0.08);
              border-radius: $radius-apple-sm;
              background: rgba($color-success, 0.04);
              transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
              animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
              animation-delay: calc(var(--item-index, 0) * 0.05s);

              @keyframes slideInLeft {
                from {
                  opacity: 0;
                  transform: translateX(-10px);
                }

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

              .dashicons {
                color: $color-success;
                font-size: 18px;
                transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
                flex-shrink: 0;
              }

              span {
                @include body-medium;

                color: $color-gray-700;
                transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
              }

              &:hover {
                border-color: rgba($color-success, 0.2);
                background: rgba($color-success, 0.1);
                box-shadow: 0 2px 8px rgba($color-success, 0.15);
                transform: translateX(6px);

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

                span {
                  color: $color-gray-900;
                }
              }

              @include reduced-motion {
                animation: none;

                &:hover {
                  transform: none;

                  .dashicons {
                    transform: none;
                  }
                }
              }
            }
          }
        }

        // Format Selection (for export)
        .format-selection {
          margin-bottom: $space-6;

          .options-title {
            @include heading-small;

            margin: 0 0 $space-4;
            font-size: $font-size-base;
          }

          .format-options {
            display: grid;
            gap: $space-4;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

            .format-option {
              cursor: pointer;

              input[type='radio'] {
                position: absolute;
                opacity: 0;
                pointer-events: none;

                &:checked + .format-card {
                  border-color: $color-primary;
                  background: rgba($color-primary, 0.05);
                  box-shadow: 0 4px 12px rgba($color-primary, 0.2);

                  .format-icon {
                    transform: scale(1.1);
                  }
                }

                &:focus + .format-card {
                  box-shadow: $shadow-apple-focus;
                }
              }

              .format-card {
                @include flex-column;

                align-items: center;
                padding: $space-4;
                border: 2px solid $color-gray-200;
                border-radius: $radius-apple-sm;
                background: $color-background;
                text-align: center;
                transition: all 0.25s $ease-apple;

                &:hover {
                  border-color: $color-primary;
                  background: rgba($color-primary, 0.03);
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
                  transform: translateY(-2px);
                }

                .format-icon {
                  margin-bottom: $space-2;
                  font-size: $font-size-3xl;
                  transition: transform 0.25s $ease-apple;
                }

                .format-name {
                  @include body-medium;

                  display: block;
                  margin-bottom: $space-1;
                  color: $color-gray-900;
                  font-weight: $font-weight-semibold;
                }

                .format-description {
                  @include body-small;

                  display: block;
                  color: $color-gray-600;
                }
              }
            }
          }
        }

        // Premium File Upload Area with Enhanced Drag & Drop
        .file-upload-area {
          margin-bottom: $space-6;

          .upload-zone {
            position: relative;
            padding: $space-8;
            border: 2px dashed $color-gray-300;
            border-radius: $radius-apple-md;
            background: rgba($color-gray-50, 0.5);
            text-align: center;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;

            // Premium gradient background
            &::before {
              content: '';
              position: absolute;
              background: linear-gradient(
                135deg,
                rgba($color-primary, 0.03) 0%,
                transparent 50%,
                rgba($color-info, 0.02) 100%
              );
              opacity: 0;
              transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              inset: 0;
              pointer-events: none;
            }

            &:hover {
              border-color: $color-primary;
              background: rgba($color-primary, 0.04);
              box-shadow: 0 4px 12px rgba($color-primary, 0.08);
              transform: translateY(-2px);

              &::before {
                opacity: 1;
              }

              .upload-icon .dashicons {
                color: $color-primary;
                transform: scale(1.15) translateY(-4px);
              }

              .upload-text h4 {
                color: $color-primary;
              }
            }

            &.drag-over {
              border-style: solid;
              border-color: $color-primary;
              background: rgba($color-primary, 0.1);
              box-shadow:
                inset 0 0 0 2px rgba($color-primary, 0.2),
                0 8px 24px rgba($color-primary, 0.15);
              transform: scale(1.02);

              &::before {
                opacity: 1;
              }

              .upload-icon .dashicons {
                color: $color-primary;
                transform: scale(1.2);
                animation: bounce 0.5s ease infinite;

                @keyframes bounce {
                  0%,
                  100% {
                    transform: translateY(0) scale(1.2);
                  }

                  50% {
                    transform: translateY(-8px) scale(1.2);
                  }
                }

                @include reduced-motion {
                  animation: none;
                }
              }
            }

            .upload-icon {
              @include flex-center;

              margin-bottom: $space-4;

              .dashicons {
                color: $color-gray-400;
                font-size: 48px;
                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              }
            }

            .upload-text {
              h4 {
                @include heading-small;

                margin: 0 0 $space-2;
                font-size: $font-size-base;
                transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              }

              p {
                @include body-small;

                margin: 0;
                color: $color-gray-600;
                line-height: $line-height-relaxed;
              }
            }

            .file-input {
              position: absolute;
              opacity: 0;
              cursor: pointer;
              inset: 0;
            }

            @include reduced-motion {
              &:hover,
              &.drag-over {
                transform: none;
              }
            }
          }
        }

        // Import Options
        .import-options {
          margin-bottom: $space-6;

          .option-group {
            margin-bottom: $space-4;

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

        // Premium Operation Actions with Enhanced States
        .operation-actions {
          margin-top: $space-6;

          // Button styles defined in _buttons.scss - no need to redefine here

          .operation-stats {
            @include flex-between;

            gap: $space-4;
            padding: $space-4;
            border-radius: $radius-apple-sm;
            background: rgba($color-gray-50, 0.8);

            .stat-item {
              @include flex-column;

              flex: 1;
              align-items: center;
              text-align: center;

              .stat-number {
                @include heading-medium;

                margin-bottom: $space-1;
                color: $color-primary;
                font-size: $font-size-2xl;
              }

              .stat-label {
                @include body-small;

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

          // Credits Action Button
          .credits-action {
            margin-top: $space-4;

            #buy-credits-button {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: $space-2;
              width: 100%;
              padding: $space-3 $space-6;
              font-weight: 500;
              transition: all 0.2s $ease-apple-out;

              .dashicons {
                font-size: 18px;
              }

              // Normal state - standard secondary button
              &.credits-normal {
                background: $color-gray-100;
                color: $color-gray-700;
                border-color: $color-gray-300;

                &:hover {
                  background: $color-gray-200;
                  border-color: $color-gray-400;
                  transform: translateY(-1px);
                }
              }

              // Low credits - warning/orange state
              &.credits-low {
                background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
                color: #fff;
                border-color: #f57c00;
                box-shadow: 0 2px 4px rgba(#ff9800, 0.2);

                &:hover {
                  background: linear-gradient(135deg, #fb8c00 0%, #ef6c00 100%);
                  border-color: #ef6c00;
                  box-shadow: 0 4px 8px rgba(#ff9800, 0.3);
                  transform: translateY(-1px);
                }
              }

              // Empty credits - urgent/red state (uses button-primary)
              &.credits-empty {
                background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
                color: #fff;
                border-color: #d32f2f;
                box-shadow: 0 2px 4px rgba(#f44336, 0.3);
                animation: pulse-urgent 2s ease-in-out infinite;

                &:hover {
                  background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
                  border-color: #c62828;
                  box-shadow: 0 4px 8px rgba(#f44336, 0.4);
                  transform: translateY(-1px);
                }
              }
            }

            // Pulse animation for urgent state
            @keyframes pulse-urgent {
              0%,
              100% {
                box-shadow: 0 2px 4px rgba(#f44336, 0.3), 0 0 0 0 rgba(#f44336, 0.4);
              }

              50% {
                box-shadow: 0 4px 8px rgba(#f44336, 0.4), 0 0 0 6px rgba(#f44336, 0);
              }
            }
          }

          .operation-note {
            @include body-small;

            margin: 0;
            color: $color-gray-500;
            text-align: center;
          }
        }
      }

      // Free Card Specific Styling
      &.free-card {
        border: 1px solid rgba($color-success, 0.15);
        background: linear-gradient(
          135deg,
          rgba($color-success, 0.02) 0%,
          rgba($color-background, 1) 50%,
          rgba($color-success, 0.01) 100%
        );

        &::before {
          box-shadow:
            0 0 0 1px rgba($color-success, 0.05),
            0 2px 4px rgba($color-success, 0.08),
            0 4px 8px rgba($color-success, 0.1);
        }

        &:hover {
          border-color: rgba($color-success, 0.25);
          box-shadow:
            0 0 0 1px rgba($color-success, 0.1),
            0 4px 8px rgba($color-success, 0.12),
            0 8px 16px rgba($color-success, 0.15),
            0 16px 32px rgba(0, 0, 0, 0.08);

          &::after {
            background: linear-gradient(135deg, rgba($color-success, 0.08) 0%, transparent 50%);
          }
        }

        .operation-stats .stat-item {
          .stat-number {
            &.free-label {
              color: $color-success;
              font-size: $font-size-3xl;
            }
          }
        }
      }

      // AI Card Specific Styling
      &.ai-card {
        border: 1px solid rgba($color-primary, 0.12);

        &:hover {
          border-color: rgba($color-primary, 0.2);
        }
      }
    }

    // Progress Container
    .bulk-progress-container {
      margin-bottom: $space-8;
      animation: slideUp 0.5s $ease-apple-out;

      .progress-card {
        @include apple-card($space-6, $shadow-apple-card);

        .progress-header {
          @include flex-between;

          margin-bottom: $space-6;
          padding-bottom: $space-4;
          border-bottom: 1px solid $color-gray-200;

          .progress-title {
            @include heading-medium;
            @include flex-start;

            gap: $space-3;
            margin: 0;

            .dashicons {
              position: relative;
              color: $color-primary;
              animation: premium-spin 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;

              // Premium gradient spinner with glow
              &::before {
                content: '';
                position: absolute;
                border-radius: 50%;
                background: conic-gradient(from 0deg, transparent, $color-primary, transparent);
                opacity: 0.3;
                animation: premium-spin 1s linear infinite;
                inset: -4px;
                filter: blur(4px);
              }

              @keyframes premium-spin {
                0% {
                  transform: rotate(0deg);
                }

                50% {
                  transform: rotate(180deg) scale(1.05);
                }

                100% {
                  transform: rotate(360deg);
                }
              }

              @include reduced-motion {
                animation: none;

                &::before {
                  display: none;
                }
              }
            }
          }

          .cancel-button {
            height: 36px;
            padding: $space-2 $space-4;
            font-size: $font-size-sm;

            .dashicons {
              margin-right: $space-2;
            }
          }
        }

        .progress-content {
          .progress-bar-container {
            @include flex-between;

            gap: $space-4;
            margin-bottom: $space-4;

            .modern-progress {
              position: relative;
              flex: 1;
              height: 10px;
              border-radius: $radius-full;
              background: $color-gray-200;
              overflow: hidden;
              box-shadow:
                inset 0 1px 3px rgba(0, 0, 0, 0.1),
                0 1px 2px rgba(0, 0, 0, 0.05);

              // Premium shimmer effect
              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                animation: shimmer 2s infinite;

                @keyframes shimmer {
                  0% {
                    left: -100%;
                  }

                  100% {
                    left: 100%;
                  }
                }

                @include reduced-motion {
                  animation: none;
                }
              }

              .progress-fill {
                position: relative;
                height: 100%;
                border-radius: $radius-full;
                background: linear-gradient(
                  90deg,
                  $color-primary 0%,
                  color.adjust($color-primary, $lightness: 10%) 50%,
                  $color-info 100%
                );
                background-size: 200% 100%;
                box-shadow:
                  0 0 12px rgba($color-primary, 0.5),
                  0 2px 8px rgba($color-primary, 0.3);
                transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                animation: gradient-flow 3s ease infinite;

                // Animated gradient flow
                @keyframes gradient-flow {
                  0%,
                  100% {
                    background-position: 0% 50%;
                  }

                  50% {
                    background-position: 100% 50%;
                  }
                }

                // Progress glow effect
                &::after {
                  content: '';
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 40px;
                  height: 100%;
                  border-radius: $radius-full;
                  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
                  animation: glow-pulse 2s ease infinite;

                  @keyframes glow-pulse {
                    0%,
                    100% {
                      opacity: 0.5;
                    }

                    50% {
                      opacity: 1;
                    }
                  }
                }

                @include reduced-motion {
                  animation: none;

                  &::after {
                    animation: none;
                  }
                }
              }
            }

            .progress-percentage {
              @include body-medium;

              min-width: 50px;
              color: $color-primary;
              font-weight: $font-weight-bold;
              text-align: right;
              transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              font-variant-numeric: tabular-nums;
            }
          }

          .progress-text {
            @include body-medium;

            margin-bottom: $space-6;
            color: $color-gray-700;
            text-align: center;
          }

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

            .stat-item {
              @include flex-column;

              position: relative;
              align-items: center;
              padding: $space-4;
              border: 1px solid rgba(0, 0, 0, 0.05);
              border-radius: $radius-apple-sm;
              background: rgba($color-gray-50, 0.8);
              text-align: center;
              transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
              animation-delay: calc(var(--stat-index, 0) * 0.1s);

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

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

              // Subtle glow effect
              &::before {
                content: '';
                position: absolute;
                z-index: -1;
                border-radius: calc($radius-apple-sm + 2px);
                background: inherit;
                opacity: 0;
                transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                inset: -2px;
                filter: blur(12px);
              }

              .stat-number {
                @include heading-medium;

                margin-bottom: $space-1;
                color: $color-primary;
                font-weight: $font-weight-bold;
                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                font-variant-numeric: tabular-nums;
              }

              .stat-label {
                @include body-small;

                color: $color-gray-600;
                font-weight: $font-weight-medium;
                transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              }

              &#success-count {
                .stat-number {
                  color: $color-success;
                }

                &::before {
                  background: linear-gradient(
                    135deg,
                    $color-success 0%,
                    color.adjust($color-success, $lightness: 10%) 100%
                  );
                }

                &:hover {
                  border-color: rgba($color-success, 0.2);
                  background: rgba($color-success, 0.08);

                  &::before {
                    opacity: 0.4;
                  }
                }
              }

              &#error-count {
                .stat-number {
                  color: $color-error;
                }

                &::before {
                  background: linear-gradient(
                    135deg,
                    $color-error 0%,
                    color.adjust($color-error, $lightness: 10%) 100%
                  );
                }

                &:hover {
                  border-color: rgba($color-error, 0.2);
                  background: rgba($color-error, 0.08);

                  &::before {
                    opacity: 0.4;
                  }
                }
              }

              &:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                transform: translateY(-4px);

                .stat-number {
                  transform: scale(1.1);
                }

                .stat-label {
                  color: $color-gray-700;
                }
              }

              @include reduced-motion {
                animation: none;

                &:hover {
                  transform: none;

                  .stat-number {
                    transform: none;
                  }

                  &::before {
                    opacity: 0;
                  }
                }
              }
            }
          }

          .progress-log {
            margin-top: $space-6;
            padding: $space-4;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: $radius-apple-sm;
            background: rgba($color-gray-50, 0.5);

            h4 {
              @include heading-small;

              margin: 0 0 $space-3;
              font-size: $font-size-base;
              font-weight: $font-weight-semibold;
            }

            .log-container {
              max-height: 300px;
              margin-bottom: $space-3;
              padding: $space-3;
              border-radius: $radius-apple-sm;
              background: $color-gray-900;
              overflow-y: auto;
              box-shadow:
                inset 0 2px 4px rgba(0, 0, 0, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.1);

              // Premium scrollbar styling
              &::-webkit-scrollbar {
                width: 10px;
              }

              &::-webkit-scrollbar-track {
                border-radius: $radius-apple-sm;
                background: rgba(0, 0, 0, 0.2);
              }

              &::-webkit-scrollbar-thumb {
                border: 2px solid $color-gray-900;
                border-radius: $radius-apple-sm;
                background: linear-gradient(135deg, rgba($color-success, 0.6) 0%, rgba($color-success, 0.4) 100%);
                transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);

                &:hover {
                  background: linear-gradient(135deg, rgba($color-success, 0.8) 0%, rgba($color-success, 0.6) 100%);
                }

                &:active {
                  background: $color-success;
                }
              }

              // Firefox scrollbar
              scrollbar-width: thin;
              scrollbar-color: rgba($color-success, 0.6) rgba(0, 0, 0, 0.2);

              .log-content {
                @include body-small;

                color: $color-success-light;
                font-family: $font-mono;
                line-height: $line-height-relaxed;

                // Terminal-like glow effect
                animation: terminal-glow 2s ease-in-out infinite;
                text-shadow: 0 0 8px rgba($color-success-light, 0.3);

                @keyframes terminal-glow {
                  0%,
                  100% {
                    text-shadow: 0 0 8px rgba($color-success-light, 0.3);
                  }

                  50% {
                    text-shadow: 0 0 12px rgba($color-success-light, 0.5);
                  }
                }

                @include reduced-motion {
                  animation: none;
                  text-shadow: 0 0 8px rgba($color-success-light, 0.3);
                }
              }
            }

            .toggle-log {
              height: 32px;
              padding: $space-1 $space-3;
              font-size: $font-size-sm;
              transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

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

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

              @include reduced-motion {
                &:hover,
                &:active {
                  transform: none;
                }
              }
            }
          }

          .toggle-log {
            display: block;
            width: 100%;
            height: 36px;
            margin-top: $space-4;
          }
        }
      }
    }

    // Results Container
    .bulk-results-container {
      animation: slideUp 0.5s $ease-apple-out;

      .results-card {
        @include apple-card($space-6, $shadow-apple-card);

        // View Toggle Container
        .results-header-flex {
          @include flex-between;

          flex-wrap: wrap;
          gap: $space-4;
          margin-bottom: $space-4;

          .results-stats-grid {
            display: grid;
            gap: $space-4;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            flex: 1;

            .result-stat {
              @include flex-column;

              align-items: center;
              padding: $space-4;
              border: 1px solid rgba(0, 0, 0, 0.05);
              border-radius: $radius-apple-sm;
              background: rgba($color-gray-50, 0.8);
              text-align: center;
              transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

              .stat-number {
                @include heading-medium;

                margin-bottom: $space-1;
                color: $color-primary;
                font-weight: $font-weight-bold;
              }

              .stat-label {
                @include body-small;

                color: $color-gray-600;
              }

              &.result-stat-success .stat-number {
                color: $color-success;
              }

              &.result-stat-errors .stat-number {
                color: $color-error;
              }
            }
          }

          .view-toggle-container {
            @include flex-end;

            gap: $space-2;
            border: 1px solid $color-gray-300;
            border-radius: $radius-apple-sm;
            background: $color-background;
            padding: $space-1;
            box-shadow: $shadow-apple-sm;

            .view-toggle-btn {
              @include flex-center;

              width: 40px;
              height: 40px;
              padding: 0;
              border: none;
              border-radius: $radius-sm;
              background: transparent;
              color: $color-gray-600;
              cursor: pointer;
              transition: all 0.25s $ease-apple;

              .dashicons {
                font-size: 20px;
              }

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

              &.active {
                background: linear-gradient(135deg, $color-primary 0%, color.adjust($color-primary, $lightness: -5%) 100%);
                color: white;
                box-shadow: 0 2px 8px rgba($color-primary, 0.3);
              }
            }
          }
        }

        // Results Toolbar - Apple-Inspired Design
        .results-toolbar {
          @include flex-between;

          gap: $space-4;
          margin-bottom: $space-6;
          padding: $space-4;
          border-radius: $radius-apple-lg;
          background: $color-background;
          border: 1px solid $color-gray-200;
          box-shadow: $shadow-apple-sm;
          flex-wrap: wrap;

          @include media-down(lg) {
            flex-direction: column;
            align-items: stretch;
          }

          // Toolbar Left Section
          .toolbar-left {
            @include flex-start;

            gap: $space-4;
            flex: 1;
            align-items: center;
            flex-wrap: wrap;

            @include media-down(md) {
              flex-direction: column;
              align-items: stretch;
            }
          }

          // Toolbar Right Section
          .toolbar-right {
            @include flex-end;

            gap: $space-3;
            flex-wrap: wrap;
            align-items: center;

            @include media-down(md) {
              justify-content: stretch;
            }
          }

          // Apple-Style Segmented Control
          .segmented-control {
            @include flex-start;

            position: relative;
            border-radius: $radius-apple-md;
            background: $color-gray-100;
            padding: 3px;
            gap: 2px;

            .segmented-btn {
              @include flex-center;

              position: relative;
              z-index: 1;
              gap: $space-2;
              padding: $space-2 $space-4;
              border: none;
              border-radius: calc($radius-apple-md - 3px);
              background: transparent;
              color: $color-gray-600;
              font-size: $font-size-sm;
              font-weight: $font-weight-medium;
              cursor: pointer;
              transition: all 0.2s $ease-apple;
              white-space: nowrap;

              .dashicons {
                font-size: 18px;
                transition: transform 0.2s $ease-apple;
              }

              .btn-label {
                @include media-down(sm) {
                  display: none;
                }
              }

              &:hover:not(.active) {
                background: rgba($color-primary, 0.05);
                color: $color-primary;
              }

              &.active {
                background: $color-background;
                color: $color-primary;
                box-shadow: $shadow-apple-sm;

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

              &:active {
                transform: scale(0.98);
              }
            }
          }

          // Toolbar Divider
          .toolbar-divider {
            width: 1px;
            height: 32px;
            background: $color-gray-200;

            @include media-down(md) {
              display: none;
            }
          }

          // Results Count Display
          .results-count-display {
            @include flex-start;

            gap: $space-2;
            padding: $space-2 $space-3;
            border-radius: $radius-apple-sm;
            background: rgba($color-primary, 0.05);
            color: $color-gray-700;
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            white-space: nowrap;

            .dashicons {
              color: $color-primary;
              font-size: 18px;
            }

            @include media-down(md) {
              width: 100%;
              justify-content: center;
            }
          }

          // Search Box
          .search-box {
            position: relative;
            flex: 1;
            max-width: 300px;

            @include media-down(md) {
              max-width: 100%;
            }

            .dashicons-search {
              position: absolute;
              top: 50%;
              left: $space-3;
              color: $color-gray-400;
              font-size: 18px;
              pointer-events: none;
              transform: translateY(-50%);
            }

            input[type="search"] {
              width: 100%;
              height: 40px;
              padding: $space-2 $space-10 $space-2 calc($space-3 + 20px + $space-2);
              border: 1px solid $color-gray-200;
              border-radius: $radius-apple-md;
              background: $color-background;
              color: $color-gray-900;
              font-size: $font-size-sm;
              transition: all 0.2s $ease-apple;

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

              &:focus {
                outline: none;
                border-color: $color-primary;
                box-shadow: 0 0 0 3px rgba($color-primary, 0.1);
              }

              // Remove webkit search cancel button
              &::-webkit-search-cancel-button {
                display: none;
              }
            }

            .clear-search {
              @include flex-center;

              position: absolute;
              top: 50%;
              right: $space-2;
              width: 28px;
              height: 28px;
              border: none;
              border-radius: 50%;
              background: transparent;
              color: $color-gray-400;
              cursor: pointer;
              transition: all 0.2s $ease-apple;
              transform: translateY(-50%);

              .dashicons {
                font-size: 16px;
              }

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

              &:active {
                transform: translateY(-50%) scale(0.95);
              }

              &.hidden {
                display: none;
              }
            }
          }

          // Select Dropdowns
          .toolbar-select {
            height: 40px;
            padding: $space-2 $space-8 $space-2 $space-3;
            border: 1px solid $color-gray-200;
            border-radius: $radius-apple-md;
            background: $color-background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right $space-3 center;
            background-size: 12px;
            color: $color-gray-900;
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            cursor: pointer;
            transition: all 0.2s $ease-apple;
            appearance: none;

            @include media-down(md) {
              width: 100%;
            }

            &:hover {
              border-color: $color-gray-300;
            }

            &:focus {
              outline: none;
              border-color: $color-primary;
              box-shadow: 0 0 0 3px rgba($color-primary, 0.1);
            }

            option {
              padding: $space-2;
            }
          }
        }

        // Table View Styles
        .bulk-results-table-container {
          margin-top: $space-6;

          .table-actions {
            @include flex-end;

            gap: $space-3;
            margin-bottom: $space-4;

            .button {
              height: 36px;
              padding: $space-2 $space-4;
              font-size: $font-size-sm;

              .dashicons {
                margin-right: $space-2;
              }
            }
          }

          .table-wrapper {
            border: 1px solid $color-gray-200;
            border-radius: $radius-apple-md;
            background: $color-background;
            overflow: hidden;
            box-shadow: $shadow-apple-sm;

            .bulk-results-table {
              width: 100%;
              border-collapse: separate;
              border-spacing: 0;

              thead {
                background: linear-gradient(135deg, rgba($color-primary, 0.08) 0%, rgba($color-primary, 0.04) 100%);

                tr {
                  th {
                    padding: $space-4;
                    border-bottom: 2px solid $color-gray-200;
                    color: $color-gray-900;
                    font-size: $font-size-sm;
                    font-weight: $font-weight-bold;
                    text-align: left;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;

                    &.column-thumbnail {
                      width: 80px;
                    }

                    &.column-filename {
                      width: 20%;
                    }

                    &.column-alt-text {
                      width: 40%;
                    }

                    &.column-quality {
                      width: 15%;
                    }

                    &.column-actions {
                      width: 10%;
                      text-align: center;
                    }
                  }
                }
              }

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

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

                  &.success {
                    background: rgba($color-success, 0.02);
                  }

                  &.error {
                    background: rgba($color-error, 0.02);

                    .column-alt-text {
                      color: $color-gray-500;
                      font-style: italic;
                    }
                  }

                  td {
                    padding: $space-4;
                    vertical-align: middle;

                    &.column-thumbnail {
                      img {
                        display: block;
                        width: 60px;
                        height: 60px;
                        border-radius: $radius-sm;
                        object-fit: cover;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                      }
                    }

                    &.column-filename {
                      strong {
                        @include body-medium;

                        display: block;
                        margin-bottom: $space-1;
                        color: $color-gray-900;
                        font-weight: $font-weight-semibold;
                      }

                      .image-id {
                        @include body-small;

                        display: block;
                        color: $color-gray-500;
                      }
                    }

                    &.column-alt-text {
                      .alt-text-content {
                        @include body-medium;

                        max-height: 80px;
                        color: $color-gray-700;
                        line-height: $line-height-relaxed;
                        overflow-y: auto;

                        em {
                          color: $color-gray-400;
                        }
                      }
                    }

                    &.column-quality {
                      .quality-badge {
                        @include flex-column;

                        align-items: center;
                        gap: $space-1;
                        padding: $space-2 $space-3;
                        border-radius: $radius-apple-sm;
                        text-align: center;

                        .quality-score {
                          font-size: $font-size-xl;
                          font-weight: $font-weight-bold;
                        }

                        .quality-status {
                          font-size: $font-size-xs;
                          text-transform: uppercase;
                          letter-spacing: 0.05em;
                        }

                        &.quality-missing {
                          border: 1px solid rgba($color-error, 0.2);
                          background: rgba($color-error, 0.08);
                          color: $color-error;
                        }

                        &.quality-decorative {
                          border: 1px solid rgba($color-info, 0.2);
                          background: rgba($color-info, 0.08);
                          color: $color-info;
                        }

                        &.quality-weak {
                          border: 1px solid rgba($color-warning, 0.2);
                          background: rgba($color-warning, 0.08);
                          color: $color-warning;
                        }

                        &.quality-good {
                          border: 1px solid rgba($color-success, 0.2);
                          background: rgba($color-success, 0.08);
                          color: $color-success;
                        }

                        &.quality-excellent {
                          border: 1px solid rgba($color-primary, 0.2);
                          background: linear-gradient(135deg, rgba($color-primary, 0.12) 0%, rgba($color-primary, 0.08) 100%);
                          color: $color-primary;
                        }

                        &.quality-unknown {
                          border: 1px solid rgba($color-gray-300, 0.5);
                          background: rgba($color-gray-100, 0.5);
                          color: $color-gray-600;
                        }
                      }
                    }

                    &.column-actions {
                      text-align: center;

                      .copy-alt-text {
                        @include flex-center;

                        width: 36px;
                        height: 36px;
                        padding: 0;
                        border: 1px solid $color-gray-300;
                        border-radius: $radius-sm;
                        background: $color-background;
                        transition: all 0.2s $ease-apple;

                        .dashicons {
                          font-size: 18px;
                          color: $color-gray-600;
                        }

                        &:hover {
                          border-color: $color-primary;
                          background: rgba($color-primary, 0.08);
                          transform: translateY(-2px);
                          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

                          .dashicons {
                            color: $color-primary;
                          }
                        }

                        &.copied {
                          border-color: $color-success;
                          background: rgba($color-success, 0.12);

                          .dashicons {
                            color: $color-success;
                          }
                        }
                      }
                    }
                  }

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

                .no-results {
                  padding: $space-8;
                  color: $color-gray-500;
                  font-style: italic;
                  text-align: center;
                }
              }
            }
          }

          .table-footer {
            @include flex-between;

            margin-top: $space-4;
            padding: $space-3 $space-4;
            border-radius: $radius-apple-sm;
            background: rgba($color-gray-50, 0.5);

            .table-summary {
              @include body-medium;

              color: $color-gray-700;

              strong {
                color: $color-primary;
                font-weight: $font-weight-bold;
              }
            }
          }
        }

        // =====================================================
        // CARD VIEW STYLES - Apple-Inspired Design
        // =====================================================
        .bulk-results-card-container {
          margin-top: $space-6;
          animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);

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

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

          .card-grid {
            display: grid;
            gap: $space-4;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

            @include media-down(lg) {
              grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            }

            @include media-down(md) {
              grid-template-columns: 1fr;
              gap: $space-3;
            }

            .no-results {
              grid-column: 1 / -1;
              padding: $space-8;
              color: $color-gray-500;
              font-style: italic;
              text-align: center;
            }

            .result-card {
              position: relative;
              border: 1px solid $color-gray-200;
              border-radius: $radius-apple-lg;
              background: $color-background;
              overflow: hidden;
              box-shadow: $shadow-apple-card;
              transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              animation: cardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
              animation-delay: calc(var(--card-index, 0) * 0.05s);

              @keyframes cardFadeIn {
                from {
                  opacity: 0;
                  transform: scale(0.96) translateY(10px);
                }

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

              // Subtle gradient overlay
              &::before {
                content: '';
                position: absolute;
                z-index: 1;
                border-radius: $radius-apple-lg;
                background: linear-gradient(
                  135deg,
                  rgba(255, 255, 255, 0.05) 0%,
                  transparent 50%
                );
                opacity: 0;
                transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                inset: 0;
                pointer-events: none;
              }

              &:hover {
                border-color: rgba($color-primary, 0.2);
                box-shadow:
                  0 8px 24px rgba(0, 0, 0, 0.12),
                  0 4px 8px rgba(0, 0, 0, 0.08);
                transform: translateY(-4px);

                &::before {
                  opacity: 1;
                }

                .card-thumbnail img {
                  transform: scale(1.05);
                }
              }

              &.success {
                border-left: 4px solid $color-success;
              }

              &.error {
                border-left: 4px solid $color-error;
                background: rgba($color-error, 0.02);

                .card-alt-text p {
                  color: $color-gray-500;
                  font-style: italic;
                }
              }

              @include reduced-motion {
                animation: none;

                &:hover {
                  transform: none;

                  .card-thumbnail img {
                    transform: none;
                  }
                }
              }

              .card-thumbnail {
                position: relative;
                width: 100%;
                height: 140px;
                background: linear-gradient(
                  135deg,
                  rgba($color-gray-100, 1) 0%,
                  rgba($color-gray-50, 1) 100%
                );
                overflow: hidden;

                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  border-radius: 0;
                  object-fit: cover;
                  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                }

                // Shimmer effect for loading
                &::after {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: -100%;
                  width: 100%;
                  height: 100%;
                  background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent
                  );
                  animation: shimmer 2s infinite;

                  @keyframes shimmer {
                    0% {
                      left: -100%;
                    }

                    100% {
                      left: 100%;
                    }
                  }

                  @include reduced-motion {
                    animation: none;
                  }
                }

                img[src] + &::after {
                  display: none;
                }
              }

              .card-content {
                position: relative;
                z-index: 2;
                padding: $space-4;
                display: flex;
                flex-direction: column;
                gap: $space-3;

                .card-header {
                  margin-bottom: 0;
                  padding-bottom: $space-2;
                  border-bottom: 1px solid $color-gray-200;

                  .card-filename {
                    @include body-medium;

                    display: block;
                    margin-bottom: $space-1;
                    color: $color-gray-900;
                    font-weight: $font-weight-semibold;
                    line-height: $line-height-snug;
                  }

                  .card-image-id {
                    @include body-small;

                    display: block;
                    color: $color-gray-500;
                    font-family: $font-mono;
                    font-size: $font-size-xs;
                  }
                }

                .card-alt-text {
                  margin-bottom: 0;

                  label {
                    @include label-medium;

                    display: block;
                    margin-bottom: $space-2;
                    color: $color-gray-700;
                    font-weight: $font-weight-semibold;
                    font-size: $font-size-xs;
                  }

                  p {
                    @include body-medium;

                    max-height: 60px;
                    margin: 0;
                    padding: $space-2 $space-3;
                    border: 1px solid rgba($color-gray-200, 0.8);
                    border-radius: $radius-apple-sm;
                    background: rgba($color-gray-50, 0.5);
                    color: $color-gray-700;
                    font-size: 13px;
                    line-height: $line-height-relaxed;
                    overflow-y: auto;

                    em {
                      color: $color-gray-400;
                    }

                    // Custom scrollbar
                    &::-webkit-scrollbar {
                      width: 6px;
                    }

                    &::-webkit-scrollbar-track {
                      border-radius: $radius-sm;
                      background: rgba($color-gray-200, 0.5);
                    }

                    &::-webkit-scrollbar-thumb {
                      border-radius: $radius-sm;
                      background: $color-gray-400;
                      transition: background 0.2s $ease-apple;

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

                .card-footer {
                  @include flex-between;

                  align-items: center;
                  gap: $space-3;

                  .quality-badge {
                    @include flex-column;

                    align-items: center;
                    gap: $space-1;
                    padding: $space-2 $space-3;
                    border-radius: $radius-apple-sm;
                    text-align: center;
                    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
                    flex: 1;

                    .quality-score {
                      display: block;
                      font-size: 20px;
                      font-weight: $font-weight-bold;
                      line-height: 1;
                    }

                    .quality-status {
                      display: block;
                      margin-top: $space-1;
                      font-size: 11px;
                      font-weight: $font-weight-medium;
                      text-transform: uppercase;
                      letter-spacing: 0.05em;
                      opacity: 0.9;
                    }

                    &.quality-missing {
                      border: 1px solid rgba($color-error, 0.2);
                      background: linear-gradient(
                        135deg,
                        rgba($color-error, 0.12) 0%,
                        rgba($color-error, 0.08) 100%
                      );
                      color: $color-error;
                      box-shadow: 0 2px 8px rgba($color-error, 0.15);
                    }

                    &.quality-decorative {
                      border: 1px solid rgba($color-info, 0.2);
                      background: linear-gradient(
                        135deg,
                        rgba($color-info, 0.12) 0%,
                        rgba($color-info, 0.08) 100%
                      );
                      color: $color-info;
                      box-shadow: 0 2px 8px rgba($color-info, 0.15);
                    }

                    &.quality-weak {
                      border: 1px solid rgba($color-warning, 0.2);
                      background: linear-gradient(
                        135deg,
                        rgba($color-warning, 0.12) 0%,
                        rgba($color-warning, 0.08) 100%
                      );
                      color: $color-warning;
                      box-shadow: 0 2px 8px rgba($color-warning, 0.15);
                    }

                    &.quality-good {
                      border: 1px solid rgba($color-success, 0.2);
                      background: linear-gradient(
                        135deg,
                        rgba($color-success, 0.12) 0%,
                        rgba($color-success, 0.08) 100%
                      );
                      color: $color-success;
                      box-shadow: 0 2px 8px rgba($color-success, 0.15);
                    }

                    &.quality-excellent {
                      border: 1px solid rgba($color-primary, 0.2);
                      background: linear-gradient(
                        135deg,
                        rgba($color-primary, 0.15) 0%,
                        rgba($color-purple, 0.08) 100%
                      );
                      color: $color-primary;
                      box-shadow: 0 2px 8px rgba($color-primary, 0.2);
                    }

                    &.quality-unknown {
                      border: 1px solid rgba($color-gray-300, 0.5);
                      background: rgba($color-gray-100, 0.5);
                      color: $color-gray-600;
                      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
                    }
                  }

                  .copy-alt-text {
                    @include flex-center;

                    height: 36px;
                    padding: 0 $space-3;
                    border: 1px solid $color-gray-300;
                    border-radius: $radius-apple-sm;
                    background: $color-background;
                    color: $color-gray-700;
                    font-size: 13px;
                    font-weight: $font-weight-medium;
                    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                    cursor: pointer;
                    flex-shrink: 0;

                    .dashicons {
                      margin-right: $space-1;
                      font-size: 16px;
                      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                    }

                    &:hover {
                      border-color: $color-primary;
                      background: rgba($color-primary, 0.08);
                      color: $color-primary;
                      box-shadow: 0 2px 8px rgba($color-primary, 0.2);
                      transform: translateY(-2px);

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

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

                    &.copied {
                      border-color: $color-success;
                      background: linear-gradient(
                        135deg,
                        rgba($color-success, 0.15) 0%,
                        rgba($color-success, 0.1) 100%
                      );
                      color: $color-success;
                      box-shadow: 0 2px 8px rgba($color-success, 0.25);

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

                    @include reduced-motion {
                      &:hover,
                      &:active {
                        transform: none;
                      }

                      .dashicons {
                        transform: none;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        // =====================================================
        // END OF CARD VIEW STYLES
        // =====================================================

        .results-header {
          @include flex-between;

          flex-wrap: wrap;
          gap: $space-4;
          margin-bottom: $space-6;
          padding-bottom: $space-4;
          border-bottom: 1px solid $color-gray-200;

          .results-title {
            @include heading-medium;
            @include flex-start;

            gap: $space-3;
            margin: 0;

            .dashicons {
              color: $color-success;
              font-size: 24px;
            }
          }

          .results-actions {
            @include flex-end;

            gap: $space-3;

            .button {
              height: 36px;
              padding: $space-2 $space-4;
              font-size: $font-size-sm;

              .dashicons {
                margin-right: $space-2;
              }
            }
          }
        }

        .results-content {
          .results-summary {
            margin-bottom: $space-6;
            padding: $space-4;
            border-radius: $radius-apple-sm;
            background: rgba($color-success, 0.05);
          }

          .results-details {
            .detail-tabs {
              @include flex-start;

              position: relative;
              gap: $space-2;
              margin-bottom: $space-4;
              padding-bottom: $space-3;
              border-bottom: 2px solid $color-gray-200;

              // Premium sliding indicator
              &::after {
                content: '';
                position: absolute;
                bottom: -2px;
                left: 0;
                width: var(--indicator-width, 0);
                height: 2px;
                border-radius: $radius-full;
                background: linear-gradient(90deg, $color-primary 0%, $color-info 100%);
                box-shadow: 0 0 8px rgba($color-primary, 0.5);
                transform: translateX(var(--indicator-offset, 0));
                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              }

              .detail-tab {
                position: relative;
                height: 36px;
                padding: $space-2 $space-4;
                border: 1px solid transparent;
                border-radius: $radius-apple-sm;
                background: transparent;
                color: $color-gray-600;
                font-size: $font-size-sm;
                font-weight: $font-weight-medium;
                transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
                cursor: pointer;

                // Premium hover glow effect
                &::before {
                  content: '';
                  position: absolute;
                  z-index: -1;
                  border-radius: calc($radius-apple-sm + 2px);
                  background: inherit;
                  opacity: 0;
                  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
                  inset: -2px;
                  filter: blur(8px);
                }

                &:hover {
                  border-color: rgba($color-primary, 0.1);
                  background: rgba($color-gray-100, 0.8);
                  color: $color-primary;
                  transform: translateY(-2px);

                  &::before {
                    opacity: 0.3;
                  }
                }

                &.active {
                  border-color: transparent;
                  background: linear-gradient(
                    135deg,
                    $color-primary 0%,
                    color.adjust($color-primary, $lightness: -5%) 100%
                  );
                  color: white;
                  box-shadow:
                    0 2px 8px rgba($color-primary, 0.25),
                    0 4px 16px rgba($color-primary, 0.15);
                  transform: translateY(-2px);

                  &::before {
                    background: $color-primary;
                    opacity: 0.5;
                  }

                  &:hover {
                    background: linear-gradient(
                      135deg,
                      color.adjust($color-primary, $lightness: 5%) 0%,
                      $color-primary 100%
                    );
                    box-shadow:
                      0 4px 12px rgba($color-primary, 0.3),
                      0 8px 24px rgba($color-primary, 0.2);

                    &::before {
                      opacity: 0.7;
                    }
                  }
                }

                &:active {
                  transform: translateY(0);
                  transition-duration: 0.1s;
                }

                &:focus {
                  box-shadow:
                    0 0 0 3px rgba($color-primary, 0.2),
                    0 2px 8px rgba($color-primary, 0.15);
                  outline: none;
                }

                @include reduced-motion {
                  &:hover,
                  &.active,
                  &:active {
                    transform: none;
                  }

                  &::before {
                    display: none;
                  }
                }
              }
            }

            .detail-content {
              .detail-panel {
                display: none;

                &.active {
                  display: block;
                }
              }

              .log-viewer {
                .results-log-textarea {
                  width: 100%;
                  height: 400px;
                  padding: $space-3;
                  border: 1px solid $color-gray-200;
                  border-radius: $radius-apple-sm;
                  background: $color-gray-900;
                  color: $color-success-light;
                  font-family: $font-mono;
                  font-size: $font-size-sm;
                  resize: vertical;

                  @include custom-scrollbar;
                }
              }

              .error-list {
                max-height: 400px;
                padding: $space-2;
                overflow-y: auto;

                // Firefox scrollbar
                scrollbar-width: thin;
                scrollbar-color: $color-gray-400 rgba($color-gray-200, 0.5);

                // Premium scrollbar styling
                &::-webkit-scrollbar {
                  width: 10px;
                }

                &::-webkit-scrollbar-track {
                  margin: $space-2 0;
                  border-radius: $radius-apple-sm;
                  background: rgba($color-gray-200, 0.5);
                }

                &::-webkit-scrollbar-thumb {
                  border: 2px solid transparent;
                  border-radius: $radius-apple-sm;
                  background: linear-gradient(135deg, $color-gray-400 0%, $color-gray-500 100%);
                  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                  background-clip: padding-box;

                  &:hover {
                    border: 2px solid transparent;
                    background: linear-gradient(135deg, $color-gray-500 0%, $color-gray-600 100%);
                    background-clip: padding-box;
                  }

                  &:active {
                    border: 2px solid transparent;
                    background: $color-gray-700;
                    background-clip: padding-box;
                  }
                }
              }
            }
          }
        }
      }
    }

    // Premium Dark Mode with Enhanced Contrast
    @include dark-mode {
      .alt-audit-header {
        background: linear-gradient(135deg, rgba($color-primary, 0.12) 0%, rgba($color-purple, 0.08) 100%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

        &::before {
          background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 50%,
            rgba($color-primary, 0.08) 100%
          );
        }

        h1 {
          background: linear-gradient(
            135deg,
            $dark-text-primary 0%,
            color.adjust($color-primary, $lightness: 20%) 100%
          );
          color: $dark-text-primary;
          -webkit-text-fill-color: $dark-text-primary;
          background-clip: text;
        }

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

      .bulk-operation-card,
      .progress-card,
      .results-card {
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba($dark-surface, 0.95);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.05),
          0 4px 12px rgba(0, 0, 0, 0.5),
          0 8px 24px rgba(0, 0, 0, 0.3);

        &::before,
        &::after {
          opacity: 0;
        }

        &:hover {
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.1),
            0 8px 24px rgba(0, 0, 0, 0.6),
            0 16px 48px rgba(0, 0, 0, 0.4);

          &::after {
            opacity: 0.5;
          }
        }

        .operation-header,
        .progress-header,
        .results-header {
          border-bottom-color: rgba(255, 255, 255, 0.08);
        }

        h3,
        h4,
        .results-title,
        .progress-title {
          color: $dark-text-primary;
        }

        p,
        .checkbox-description,
        .field-description,
        .operation-note {
          color: $dark-text-secondary;
        }

        // Enhanced iOS-style toggle for dark mode
        .modern-checkbox-label input[type='checkbox'] {
          background: rgba($color-gray-800, 0.8);
          box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.4),
            0 1px 2px rgba(0, 0, 0, 0.2);

          &::before {
            box-shadow:
              0 2px 4px rgba(0, 0, 0, 0.3),
              0 4px 8px rgba(0, 0, 0, 0.2);
          }

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

          &:checked {
            background: linear-gradient(135deg, color.adjust($color-primary, $lightness: 10%) 0%, $color-primary 100%);
            box-shadow:
              inset 0 1px 3px rgba(0, 0, 0, 0.2),
              0 0 0 0 rgba($color-primary, 0.4),
              0 2px 8px rgba($color-primary, 0.4);

            &::before {
              box-shadow:
                0 2px 6px rgba(0, 0, 0, 0.4),
                0 4px 12px rgba($color-primary, 0.5);
            }
          }
        }

        // Enhanced form inputs for dark mode
        input,
        select,
        textarea {
          border-color: rgba(255, 255, 255, 0.1);
          background: rgba($color-gray-900, 0.6);
          color: $dark-text-primary;
          box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.3),
            0 1px 2px rgba(0, 0, 0, 0.1);

          &:hover {
            border-color: rgba(255, 255, 255, 0.15);
            background: rgba($color-gray-900, 0.7);
          }

          &:focus {
            border-color: $color-primary;
            background: rgba($color-gray-900, 0.8);
            box-shadow:
              0 0 0 3px rgba($color-primary, 0.25),
              inset 0 1px 2px rgba(0, 0, 0, 0.2),
              0 2px 8px rgba($color-primary, 0.3);
          }
        }

        // Enhanced upload zone for dark mode
        .upload-zone {
          border-color: rgba(255, 255, 255, 0.12);
          background: rgba($color-gray-800, 0.4);

          &::before {
            background: linear-gradient(
              135deg,
              rgba($color-primary, 0.05) 0%,
              transparent 50%,
              rgba($color-info, 0.03) 100%
            );
          }

          &:hover {
            border-color: $color-primary;
            background: rgba($color-primary, 0.08);
            box-shadow: 0 4px 12px rgba($color-primary, 0.15);

            .upload-icon .dashicons {
              color: color.adjust($color-primary, $lightness: 15%);
            }
          }

          &.drag-over {
            border-color: color.adjust($color-primary, $lightness: 10%);
            background: rgba($color-primary, 0.15);
            box-shadow:
              inset 0 0 0 2px rgba($color-primary, 0.3),
              0 8px 24px rgba($color-primary, 0.25);
          }
        }

        // Enhanced progress bar for dark mode
        .progress-bar-container .modern-progress {
          background: rgba($color-gray-700, 0.6);
          box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.4),
            0 1px 2px rgba(0, 0, 0, 0.2);

          .progress-fill {
            background: linear-gradient(
              90deg,
              color.adjust($color-primary, $lightness: 10%) 0%,
              $color-primary 50%,
              color.adjust($color-info, $lightness: 10%) 100%
            );
            box-shadow:
              0 0 12px rgba($color-primary, 0.6),
              0 2px 8px rgba($color-primary, 0.4);
          }
        }

        // Enhanced format cards for dark mode
        .format-card {
          border-color: rgba(255, 255, 255, 0.08);
          background: rgba($dark-surface, 0.8);

          &:hover {
            border-color: rgba($color-primary, 0.4);
            background: rgba($dark-surface, 0.9);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
          }
        }

        // Enhanced stat items for dark mode
        .stat-item {
          border-color: rgba(255, 255, 255, 0.06);
          background: rgba($color-gray-800, 0.5);

          &:hover {
            background: rgba($color-gray-800, 0.7);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
          }
        }

        // Enhanced tabs for dark mode
        .detail-tab {
          &:hover {
            border-color: rgba($color-primary, 0.2);
            background: rgba($color-gray-700, 0.6);
          }

          &.active {
            background: linear-gradient(135deg, color.adjust($color-primary, $lightness: 5%) 0%, $color-primary 100%);
            box-shadow:
              0 2px 8px rgba($color-primary, 0.4),
              0 4px 16px rgba($color-primary, 0.3);
          }
        }

        // Enhanced card view for dark mode
        .bulk-results-card-container {
          .card-grid {
            .result-card {
              border-color: rgba(255, 255, 255, 0.08);
              background: rgba($dark-surface, 0.95);
              box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.05),
                0 4px 12px rgba(0, 0, 0, 0.5);

              &::before {
                background: linear-gradient(
                  135deg,
                  rgba(255, 255, 255, 0.03) 0%,
                  transparent 50%
                );
              }

              &:hover {
                border-color: rgba($color-primary, 0.3);
                box-shadow:
                  0 0 0 1px rgba(255, 255, 255, 0.1),
                  0 8px 24px rgba(0, 0, 0, 0.6),
                  0 4px 12px rgba($color-primary, 0.2);
              }

              &.success {
                border-left-color: color.adjust($color-success, $lightness: 10%);
              }

              &.error {
                border-left-color: color.adjust($color-error, $lightness: 10%);
                background: rgba($color-error, 0.05);
              }

              .card-thumbnail {
                background: linear-gradient(
                  135deg,
                  rgba($color-gray-700, 1) 0%,
                  rgba($color-gray-800, 1) 100%
                );
              }

              .card-content {
                .card-header {
                  border-bottom-color: rgba(255, 255, 255, 0.08);

                  .card-filename {
                    color: $dark-text-primary;
                  }

                  .card-image-id {
                    color: $dark-text-secondary;
                  }
                }

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

                  p {
                    border-color: rgba(255, 255, 255, 0.08);
                    background: rgba($color-gray-700, 0.4);
                    color: $dark-text-secondary;

                    &::-webkit-scrollbar-thumb {
                      background: $color-gray-600;

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

                .card-footer {
                  .quality-badge {
                    &.quality-missing {
                      border-color: rgba($color-error, 0.3);
                      background: linear-gradient(
                        135deg,
                        rgba($color-error, 0.2) 0%,
                        rgba($color-error, 0.15) 100%
                      );
                      color: color.adjust($color-error, $lightness: 15%);
                    }

                    &.quality-decorative {
                      border-color: rgba($color-info, 0.3);
                      background: linear-gradient(
                        135deg,
                        rgba($color-info, 0.2) 0%,
                        rgba($color-info, 0.15) 100%
                      );
                      color: color.adjust($color-info, $lightness: 15%);
                    }

                    &.quality-weak {
                      border-color: rgba($color-warning, 0.3);
                      background: linear-gradient(
                        135deg,
                        rgba($color-warning, 0.2) 0%,
                        rgba($color-warning, 0.15) 100%
                      );
                      color: color.adjust($color-warning, $lightness: 15%);
                    }

                    &.quality-good {
                      border-color: rgba($color-success, 0.3);
                      background: linear-gradient(
                        135deg,
                        rgba($color-success, 0.2) 0%,
                        rgba($color-success, 0.15) 100%
                      );
                      color: color.adjust($color-success, $lightness: 15%);
                    }

                    &.quality-excellent {
                      border-color: rgba($color-primary, 0.3);
                      background: linear-gradient(
                        135deg,
                        rgba($color-primary, 0.2) 0%,
                        rgba($color-purple, 0.15) 100%
                      );
                      color: color.adjust($color-primary, $lightness: 15%);
                    }

                    &.quality-unknown {
                      border-color: rgba(255, 255, 255, 0.1);
                      background: rgba($color-gray-700, 0.5);
                      color: $dark-text-secondary;
                    }
                  }

                  .copy-alt-text {
                    border-color: rgba(255, 255, 255, 0.1);
                    background: rgba($color-gray-700, 0.6);
                    color: $dark-text-primary;

                    &:hover {
                      border-color: $color-primary;
                      background: rgba($color-primary, 0.15);
                      color: color.adjust($color-primary, $lightness: 15%);
                      box-shadow: 0 2px 8px rgba($color-primary, 0.3);
                    }

                    &.copied {
                      border-color: color.adjust($color-success, $lightness: 10%);
                      background: rgba($color-success, 0.2);
                      color: color.adjust($color-success, $lightness: 15%);
                      box-shadow: 0 2px 8px rgba($color-success, 0.3);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    // Reduced Motion Support
    @include reduced-motion {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .alt-audit-header,
      .alt-audit-bulk-container,
      .bulk-operation-card,
      .bulk-progress-container,
      .bulk-results-container {
        animation: none;
      }

      .operation-icon .dashicons,
      .progress-title .dashicons {
        animation: none;
      }
    }

    // Enhanced High Contrast Mode for Accessibility
    @include high-contrast {
      .bulk-operation-card,
      .progress-card,
      .results-card,
      .format-card,
      .upload-zone,
      .stat-item {
        border: 2px solid currentcolor !important;
        box-shadow: none !important;
      }

      .operation-icon,
      .operation-badge .operation-type,
      .detail-tab {
        border: 1px solid currentcolor !important;
      }

      input:focus,
      select:focus,
      textarea:focus,
      button:focus,
      .format-card:focus-within,
      .modern-checkbox-label input[type='checkbox']:focus,
      .detail-tab:focus {
        box-shadow: none !important;
        outline: 3px solid currentcolor !important;
        outline-offset: 3px !important;
      }

      .modern-checkbox-label input[type='checkbox'] {
        border: 2px solid currentcolor !important;

        &:checked {
          background: currentcolor !important;

          &::before {
            border-color: CanvasText !important;
          }
        }
      }

      .progress-fill {
        background: Highlight !important;
        box-shadow: none !important;
      }

      // Remove decorative pseudo-elements in high contrast
      .bulk-operation-card::before,
      .bulk-operation-card::after,
      .operation-icon::before,
      .operation-badge .operation-type::before,
      .detail-tab::before,
      .upload-zone::before {
        display: none !important;
      }
    }
  }


    // =============================================================================
    // PAGINATION CONTROLS - APPLE-INSPIRED DESIGN
    // =============================================================================

    .results-pagination {
      @include flex-between;

      position: relative;
      flex-wrap: wrap;
      gap: $space-8; // Increased from $space-4 for more breathing room
      align-items: center;
      margin-top: $space-8; // Increased vertical spacing
      padding: $space-6 $space-8; // More generous padding
      border-radius: $radius-apple-lg; // Larger border radius for premium feel
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
      border: 1px solid rgba($color-gray-200, 0.6);
      backdrop-filter: blur(20px); // Stronger blur for depth
      box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8); // Inner glow for premium look
      animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);

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

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

      @include media-down(lg) {
        flex-direction: column;
        gap: $space-4; // Increased mobile spacing
        align-items: stretch;
        padding: $space-5; // Better mobile padding
      }

      // Pagination Info (Left) - More Prominent
      .pagination-info {
        font-size: 15px; // Larger, more readable
        color: $color-gray-700; // Darker for better hierarchy
        font-weight: $font-weight-semibold; // Bolder for prominence
        letter-spacing: -0.01em; // Tighter tracking for polish
        white-space: nowrap;

        @include media-down(lg) {
          text-align: center;
          font-size: 14px;
        }
      }

      // Pagination Controls (Center)
      .pagination-controls {
        @include flex-center;

        gap: $space-3; // Increased spacing between elements

        @include media-down(lg) {
          justify-content: center;
          width: 100%;
        }

        // Previous/Next Buttons - Premium Apple Style
        .pagination-btn {
          @include flex-center;

          min-width: 48px; // Larger touch targets
          height: 48px;
          gap: $space-2; // More space between icon and text
          padding: 0 $space-4; // More generous padding
          border: 1.5px solid $color-gray-200; // Slightly thicker border
          border-radius: $radius-apple-lg; // Larger radius for premium feel
          background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 0.95) 100%);
          color: $color-primary;
          font-size: 15px; // Slightly larger text
          font-weight: $font-weight-semibold; // Bolder for clarity
          letter-spacing: -0.01em;
          cursor: pointer;
          box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.06),
            0 1px 2px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.9); // Inner highlight
          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

          .dashicons {
            font-size: 18px;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
          }

          .btn-text {
            @include media-down(sm) {
              position: absolute;
              width: 1px;
              height: 1px;
              padding: 0;
              margin: -1px;
              overflow: hidden;
              clip: rect(0, 0, 0, 0);
              white-space: nowrap;
              border-width: 0;
            }
          }

          &:hover:not(:disabled) {
            background: linear-gradient(180deg, rgba($color-primary, 0.08) 0%, rgba($color-primary, 0.05) 100%);
            border-color: $color-primary;
            box-shadow:
              0 4px 12px rgba($color-primary, 0.2),
              0 2px 4px rgba($color-primary, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.95); // Enhanced shadow on hover
            transform: translateY(-2px); // More lift on hover

            &.prev .dashicons {
              transform: translateX(-3px); // More movement
            }

            &.next .dashicons {
              transform: translateX(3px);
            }
          }

          &:active:not(:disabled) {
            transform: translateY(0) scale(0.96);
            transition-duration: 0.1s;
            box-shadow:
              0 1px 3px rgba($color-primary, 0.15),
              inset 0 1px 2px rgba(0, 0, 0, 0.05); // Pressed effect
          }

          &:disabled {
            background: linear-gradient(180deg, $color-gray-100 0%, $color-gray-50 100%);
            border-color: $color-gray-200;
            color: $color-gray-400;
            cursor: not-allowed;
            box-shadow: none;
            opacity: 0.6;
          }

          @include reduced-motion {
            &:hover:not(:disabled) {
              transform: none;

              &.prev .dashicons,
              &.next .dashicons {
                transform: none;
              }
            }

            &:active:not(:disabled) {
              transform: none;
            }
          }
        }

        // Page Numbers Container
        .pagination-numbers {
          @include flex-center;

          gap: $space-2; // Increased spacing between page numbers

          @include media-down(sm) {
            gap: $space-1;
          }

          // Individual Page Buttons - Premium iOS Style
          .page-btn {
            @include flex-center;

            min-width: 48px; // Larger touch targets
            height: 48px;
            padding: 0 $space-3; // More padding
            border: 1.5px solid transparent;
            border-radius: $radius-apple-md; // Slightly larger radius
            background: transparent;
            color: $color-gray-700;
            font-size: 15px; // Larger, more readable
            font-weight: $font-weight-semibold; // Bolder numbers
            letter-spacing: -0.01em;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

            @include media-down(sm) {
              min-width: 36px;
              height: 36px;
              padding: 0 $space-1;
              font-size: $font-size-xs;
            }

            &:hover:not(.active) {
              background: linear-gradient(135deg, rgba($color-primary, 0.1) 0%, rgba($color-primary, 0.08) 100%);
              color: $color-primary;
              border-color: rgba($color-primary, 0.3);
              box-shadow:
                0 2px 8px rgba($color-primary, 0.15),
                0 1px 3px rgba($color-primary, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.5); // Enhanced hover state
              transform: translateY(-1px); // Subtle lift
            }

            &:active {
              transform: scale(0.94) translateY(0);
              transition-duration: 0.1s;
            }

            // Active Page - Premium Gradient with Enhanced Depth
            &.active {
              background: linear-gradient(135deg, $color-primary 0%, $color-primary-dark 100%);
              border-color: transparent;
              color: #fff;
              box-shadow:
                0 4px 12px rgba($color-primary, 0.35), // Stronger shadow
                0 2px 6px rgba($color-primary, 0.4),
                0 1px 3px rgba($color-primary, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25), // Subtle inner highlight
                inset 0 -1px 0 rgba(0, 0, 0, 0.1); // Subtle inner shadow
              font-weight: $font-weight-bold; // Even bolder for active state
              pointer-events: none;
              transform: scale(1.05); // Slightly larger for emphasis
            }

            @include reduced-motion {
              &:active {
                transform: none;
              }
            }
          }

          // Ellipsis - Improved Spacing
          .pagination-ellipsis {
            @include flex-center;

            min-width: 40px; // Wider for better visual balance
            height: 48px; // Match button height
            color: $color-gray-500; // Slightly darker for better visibility
            font-size: 16px; // Larger dots
            font-weight: $font-weight-bold;
            letter-spacing: 2px; // Space out the dots
            user-select: none;

            @include media-down(sm) {
              min-width: 32px;
              height: 36px;
              font-size: 14px;
              letter-spacing: 1px;
            }
          }
        }
      }

      // Per-Page Selector (Right) - Premium Custom Dropdown
      .pagination-per-page {
        @include flex-center;

        gap: $space-3; // More spacing
        white-space: nowrap;

        @include media-down(lg) {
          justify-content: center;
          width: 100%;
        }

        label,
        span {
          font-size: 15px; // Match pagination info
          color: $color-gray-700; // Darker for consistency
          font-weight: $font-weight-semibold;
          letter-spacing: -0.01em;
        }

        .per-page-select {
          min-width: 90px; // Slightly wider
          height: 48px; // Match button height
          padding: 0 $space-4; // More padding
          border: 1.5px solid $color-gray-200; // Thicker border
          border-radius: $radius-apple-lg; // Larger radius
          background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 0.95) 100%);
          color: $color-gray-700;
          font-size: 15px; // Larger text
          font-weight: $font-weight-semibold;
          letter-spacing: -0.01em;
          cursor: pointer;
          box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.06),
            0 1px 2px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.9); // Inner highlight
          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
          appearance: none;
          // Enhanced custom arrow
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="%23666" d="M7 10L2 5h10z"/></svg>');
          background-repeat: no-repeat;
          background-position: right 12px center; // Better positioning
          padding-right: 40px; // More space for arrow

          @include media-down(sm) {
            min-width: 70px;
          }

          &:hover {
            background: linear-gradient(180deg, rgba($color-primary, 0.08) 0%, rgba($color-primary, 0.05) 100%);
            border-color: $color-primary;
            box-shadow:
              0 4px 12px rgba($color-primary, 0.2),
              0 2px 4px rgba($color-primary, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.95); // Enhanced hover
            transform: translateY(-1px); // Subtle lift
          }

          &:focus {
            border-color: $color-primary;
            outline: none;
            box-shadow:
              0 0 0 4px rgba($color-primary, 0.12), // Larger focus ring
              0 2px 6px rgba($color-primary, 0.15);
          }

          &:active {
            transform: translateY(0) scale(0.98);
            box-shadow:
              0 1px 3px rgba($color-primary, 0.15),
              inset 0 1px 2px rgba(0, 0, 0, 0.05);
          }
        }
      }
    }

    // =============================================================================
    // DARK MODE - PAGINATION
    // =============================================================================

    @media (prefers-color-scheme: dark) {
      .results-pagination {
        background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%);
        border-color: rgba($color-gray-700, 0.6);
        box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.3),
          0 1px 2px rgba(0, 0, 0, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.05); // Subtle inner glow

        .pagination-info {
          color: $color-gray-300; // Lighter for better readability
        }

        .pagination-controls {
          .pagination-btn {
            border-color: $color-gray-700;
            background: linear-gradient(180deg, $color-gray-800 0%, rgba($color-gray-900, 0.95) 100%);
            color: $color-primary-light;
            box-shadow:
              0 2px 6px rgba(0, 0, 0, 0.3),
              0 1px 2px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);

            &:hover:not(:disabled) {
              background: linear-gradient(180deg, rgba($color-primary, 0.2) 0%, rgba($color-primary, 0.15) 100%);
              border-color: $color-primary-light;
              box-shadow:
                0 4px 12px rgba($color-primary-light, 0.25),
                0 2px 4px rgba($color-primary-light, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }

            &:disabled {
              background: linear-gradient(180deg, $color-gray-900 0%, $color-gray-800 100%);
              border-color: $color-gray-800;
              color: $color-gray-600;
              box-shadow: none;
              opacity: 0.5;
            }
          }

          .pagination-numbers {
            .page-btn {
              color: $color-gray-300;

              &:hover:not(.active) {
                background: linear-gradient(135deg, rgba($color-primary, 0.2) 0%, rgba($color-primary, 0.15) 100%);
                color: $color-primary-light;
                border-color: rgba($color-primary-light, 0.4);
                box-shadow:
                  0 2px 8px rgba($color-primary-light, 0.2),
                  0 1px 3px rgba($color-primary-light, 0.15),
                  inset 0 1px 0 rgba(255, 255, 255, 0.08);
              }

              &.active {
                background: linear-gradient(135deg, $color-primary-light 0%, $color-primary 100%);
                color: $color-gray-900;
                box-shadow:
                  0 4px 12px rgba($color-primary-light, 0.4), // Stronger glow
                  0 2px 6px rgba($color-primary-light, 0.45),
                  0 1px 3px rgba($color-primary-light, 0.5),
                  inset 0 1px 0 rgba(255, 255, 255, 0.35),
                  inset 0 -1px 0 rgba(0, 0, 0, 0.15);
                transform: scale(1.05);
              }
            }

            .pagination-ellipsis {
              color: $color-gray-500; // Slightly lighter
            }
          }
        }

        .pagination-per-page {
          label,
          span {
            color: $color-gray-300; // Lighter for better readability
          }

          .per-page-select {
            border-color: $color-gray-700;
            background: linear-gradient(180deg, $color-gray-800 0%, rgba($color-gray-900, 0.95) 100%);
            color: $color-gray-300;
            box-shadow:
              0 2px 6px rgba(0, 0, 0, 0.3),
              0 1px 2px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
            // Enhanced arrow for dark mode
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="%23aaa" d="M7 10L2 5h10z"/></svg>');

            &:hover {
              background: linear-gradient(180deg, rgba($color-primary, 0.2) 0%, rgba($color-primary, 0.15) 100%);
              border-color: $color-primary-light;
              box-shadow:
                0 4px 12px rgba($color-primary-light, 0.25),
                0 2px 4px rgba($color-primary-light, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }

            &:focus {
              border-color: $color-primary-light;
              box-shadow:
                0 0 0 4px rgba($color-primary-light, 0.2),
                0 2px 6px rgba($color-primary-light, 0.2);
            }

            &:active {
              transform: translateY(0) scale(0.98);
              box-shadow:
                0 1px 3px rgba($color-primary-light, 0.2),
                inset 0 1px 2px rgba(0, 0, 0, 0.15);
            }
          }
        }
      }
    }

    // =============================================================================
    // MOBILE RESPONSIVE - PAGINATION
    // =============================================================================

    @include media-down(sm) {
      .results-pagination {
        padding: $space-4; // Better mobile padding
        gap: $space-3;

        .pagination-info {
          font-size: 14px; // Maintain readability
        }

        .pagination-controls {
          .pagination-btn {
            min-width: 40px; // Larger touch targets on mobile
            height: 40px;
            padding: 0 $space-2;
            font-size: 14px;

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

          .pagination-numbers {
            .page-btn {
              min-width: 40px; // Consistent sizing
              height: 40px;
              font-size: 14px;
            }
          }
        }

        .pagination-per-page {
          label,
          span {
            font-size: 14px;
          }

          .per-page-select {
            height: 40px;
            font-size: 14px;
            min-width: 75px;
          }
        }
      }
    }

    // =============================================================================
    // ACCESSIBILITY - PAGINATION
    // =============================================================================

    .pagination-btn,
    .page-btn,
    .per-page-select {
      &:focus-visible {
        outline: 3px solid $color-primary; // Thicker for better visibility
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba($color-primary, 0.15); // Larger focus ring
      }
    }

    // Keyboard navigation highlight
    .pagination-numbers .page-btn:focus-visible {
      z-index: 1;
  }
} // End .alt-audit-section wrapper

// =============================================================================
// DARK MODE SUPPORT
// =============================================================================

@media (prefers-color-scheme: dark) {
  .alt-audit-section.alt-audit-bulk {
    // Results Toolbar Dark Mode
    .results-toolbar {
      background: rgba($color-gray-900, 0.6);
      border-color: rgba($color-gray-600, 0.3);

      .segmented-control {
        background: rgba($color-gray-800, 0.8);

        .segmented-btn {
          color: $color-gray-300;

          &:hover:not(.active) {
            background: rgba($color-primary, 0.15);
            color: lighten($color-primary, 10%);
          }

          &.active {
            background: rgba($color-background, 0.1);
            color: lighten($color-primary, 15%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          }
        }
      }

      .toolbar-divider {
        background: rgba($color-gray-600, 0.3);
      }

      .results-count-display {
        background: rgba($color-primary, 0.15);
        color: $color-gray-200;

        .dashicons {
          color: lighten($color-primary, 15%);
        }
      }

      .search-box {
        input[type="search"] {
          background: rgba($color-gray-800, 0.6);
          border-color: rgba($color-gray-600, 0.3);
          color: $color-gray-100;

          &::placeholder {
            color: $color-gray-500;
          }

          &:focus {
            border-color: lighten($color-primary, 10%);
            box-shadow: 0 0 0 3px rgba($color-primary, 0.2);
          }
        }

        .dashicons-search {
          color: $color-gray-500;
        }

        .clear-search {
          color: $color-gray-500;

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

      .toolbar-select {
        background-color: rgba($color-gray-800, 0.6);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A3A3A3' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        border-color: rgba($color-gray-600, 0.3);
        color: $color-gray-100;

        &:hover {
          border-color: rgba($color-gray-500, 0.5);
        }

        &:focus {
          border-color: lighten($color-primary, 10%);
          box-shadow: 0 0 0 3px rgba($color-primary, 0.2);
        }

        option {
          background: $color-gray-800;
          color: $color-gray-100;
        }
      }
    }

    // Table View Dark Mode
    .bulk-results-table-container {
      .table-wrapper {
        background: rgba($color-gray-900, 0.4);
        border-color: rgba($color-gray-600, 0.3);

        .bulk-results-table {
          thead {
            background: linear-gradient(135deg, rgba($color-primary, 0.15) 0%, rgba($color-primary, 0.08) 100%);

            tr th {
              border-bottom-color: rgba($color-gray-600, 0.3);
              color: $color-gray-100;
            }
          }

          tbody {
            tr {
              border-bottom-color: rgba($color-gray-600, 0.2);

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

              &.success {
                background: rgba($color-success, 0.08);
              }

              &.error {
                background: rgba($color-error, 0.08);

                .column-alt-text {
                  color: $color-gray-400;
                }
              }

              td {
                color: $color-gray-200;

                .image-id {
                  color: $color-gray-500;
                }

                .alt-text-content {
                  color: $color-gray-300;
                }
              }
            }
          }
        }
      }
    }

    // Card View Dark Mode
    .bulk-results-card-container {
      .result-card {
        background: rgba($color-gray-900, 0.4);
        border-color: rgba($color-gray-600, 0.3);

        &:hover {
          border-color: rgba($color-primary, 0.4);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        &.success {
          background: rgba($color-success, 0.05);
        }

        &.error {
          background: rgba($color-error, 0.05);

          .card-alt-text p {
            color: $color-gray-400;
          }
        }

        .card-content {
          .card-header {
            .card-filename {
              color: $color-gray-100;
            }

            .card-image-id {
              color: $color-gray-500;
            }
          }

          .card-alt-text {
            label {
              color: $color-gray-400;
            }

            p {
              color: $color-gray-300;
            }
          }
        }
      }
    }

    // Quality Badges Dark Mode
    .quality-badge {
      &.quality-missing {
        background: rgba($color-error, 0.15);
        color: lighten($color-error, 10%);
      }

      &.quality-weak {
        background: rgba($color-warning, 0.15);
        color: lighten($color-warning, 10%);
      }

      &.quality-good {
        background: rgba($color-info, 0.15);
        color: lighten($color-info, 10%);
      }

      &.quality-excellent {
        background: rgba($color-success, 0.15);
        color: lighten($color-success, 10%);
      }
    }
  }
}

// =============================================================================
// END OF BULK TOOLS PAGE STYLES
// =============================================================================