// =============================================================================
// AUDIT PAGE STYLES - APPLE DESIGN
// =============================================================================

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

// Wrap all audit styles with .alt-audit-section for CSS isolation
.alt-audit-section {
  // Main Container
  &.alt-audit-audit {
    min-height: 100vh;
    background: $color-gray-50;
    color: $color-gray-900;
    font-family: $font-secondary;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    // ===== HEADER SECTION - APPLE STYLE =====
    .alt-audit-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: $space-8;
      margin-bottom: $space-8;
      padding: $space-8;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: $radius-apple-xl;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.8) 100%);
      box-shadow: $shadow-apple-card;
      transition: all $duration-normal $ease-apple;
      animation: slideInDown 0.6s $ease-apple;
      backdrop-filter: blur(20px);

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

      .header-content {
        flex: 1;

        // Style both h1 and .page-title for flexibility
        h1,
        .page-title {
          margin: 0 0 $space-2 0 !important;
          background: linear-gradient(135deg, $color-gray-900 0%, $color-success 100%);
          font-size: $font-size-4xl !important;
          font-weight: $font-weight-bold !important;
          line-height: 1.2 !important;
          letter-spacing: -0.025em;
          animation: fadeInLeft 0.8s $ease-apple;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          -webkit-background-clip: text;
        }

        .alt-audit-subtitle,
        .page-subtitle {
          margin: 0;
          color: $color-gray-600;
          font-size: $font-size-lg;
          font-weight: $font-weight-normal;
          animation: fadeInLeft 0.8s $ease-apple 0.1s both;
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: $space-3;
        animation: fadeInRight 0.8s $ease-apple 0.2s both;

        // Button styles are now centralized in _buttons.scss
        // Only keeping layout-specific positioning here
      }
    }
    button.toggle-row {
      display: none !important;
    }
    // ===== FILTER SECTION - APPLE STYLE =====
    .audit-filters {
      @include apple-card;

      margin-bottom: $space-8;
      transition: all $duration-normal $ease-apple;
      animation: slideInUp 0.6s $ease-apple 0.1s both;

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

      .filters-header {
        @include flex-between;

        margin-bottom: $space-6;

        .filters-title {
          @include heading-small;

          display: flex;
          align-items: center;
          gap: $space-2;
          margin: 0;

          .title-icon {
            color: $color-primary;
            transition: transform $duration-normal $ease-apple;
          }

          &:hover .title-icon {
            transform: rotate(180deg);
          }
        }

        .filters-actions {
          display: flex;
          gap: $space-2;

          .filter-reset {
            // Button styles centralized in _buttons.scss
            height: 36px;
            padding: $space-2 $space-4;
            font-size: $font-size-sm;
          }
        }
      }

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

        .filter-group {
          animation: fadeInUp 0.6s $ease-apple both;

          @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
              animation-delay: #{0.1 + ($i * 0.05)}s;
            }
          }

          .filter-label {
            @include body-small;

            display: block;
            margin-bottom: $space-2;
            color: $color-gray-700;
            font-weight: $font-weight-medium;
            transition: color $duration-fast $ease-apple;
          }

          .filter-select,
          .filter-search {
            @include apple-input;

            width: 100%;
            height: 40px;
            font-size: $font-size-sm;
            transition: all $duration-fast $ease-apple;

            &:focus {
              border-color: $color-primary;
              box-shadow:
                0 0 0 4px rgba($color-primary, 0.1),
                0 1px 3px rgba(0, 0, 0, 0.1);
              transform: translateY(-1px);

              ~ .filter-label {
                color: $color-primary;
              }
            }

            &:hover:not(:focus) {
              border-color: $color-gray-400;
            }
          }

          .filter-search {
            &::placeholder {
              color: $color-gray-400;
              transition: color $duration-fast $ease-apple;
            }

            &:focus::placeholder {
              color: transparent;
            }
          }
        }
      }

      .filters-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: $space-4;
        border-top: 1px solid $color-gray-200;

        .results-count {
          @include body-small;

          color: $color-gray-600;

          .count-number {
            display: inline-block;
            color: $color-gray-900;
            font-weight: $font-weight-semibold;
            transition: all $duration-fast $ease-apple;

            &:hover {
              color: $color-primary;
              transform: scale(1.05);
            }
          }
        }

        .view-toggles {
          display: flex;
          padding: $space-1;
          border-radius: $radius-apple-sm;
          background: $color-gray-100;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);

          .view-toggle {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: $radius-sm;
            background: transparent;
            color: $color-gray-500;
            transition: all $duration-fast $ease-apple;
            cursor: pointer;

            &::before {
              content: '';
              position: absolute;
              border-radius: $radius-sm;
              background: $color-background;
              opacity: 0;
              transform: scale(0.8);
              transition: all $duration-fast $ease-apple;
              inset: 0;
            }

            .dashicons {
              position: relative;
              z-index: 1;
              transition: transform $duration-fast $ease-apple;
            }

            &.active {
              color: $color-primary;

              &::before {
                opacity: 1;
                box-shadow: $shadow-sm;
                transform: scale(1);
              }

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

            &:hover:not(.active) {
              color: $color-gray-700;

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

    // Audit Controls
    .audit-controls-section {
      @include apple-card;

      margin-bottom: $space-8;

      .section-title {
        @include heading-medium;

        margin: 0 0 $space-6;

        @include flex-start;

        .dashicons {
          margin-right: $space-3;
          color: $color-success;
          font-size: 20px;
        }
      }

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

        .audit-option {
          display: flex !important;
          align-items: flex-start !important;
          gap: $space-3;
          padding: $space-4;
          border-radius: $radius-apple-sm;
          background: $color-gray-50;
          transition: $transition-base;

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

          input[type='checkbox'] {
            position: relative;
            width: 20px;
            height: 20px;
            margin: 2px 0 0 0 !important; // Align with first line of text
            border: 2px solid $color-gray-300;
            border-radius: $radius-sm;
            background: $color-background;
            transition: $transition-base;
            cursor: pointer;
            appearance: none;
            flex-shrink: 0;

            &:checked {
              border-color: $color-success;
              background: $color-success;

              &::after {
                content: '';
                position: absolute;
                top: 1px;
                left: 5px;
                width: 6px;
                height: 10px;
                border: 2px solid white;
                transform: rotate(45deg);
                border-top: none;
                border-left: none;
              }
            }

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

            &:hover {
              border-color: $color-success;
            }
          }

          .option-content {
            flex: 1;
            min-width: 0;

            .option-label {
              @include body-medium;

              display: block;
              margin-bottom: $space-1;
              color: $color-gray-900;
              cursor: pointer;
              line-height: 1.4;
            }

            .option-description {
              @include body-small;

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

      .audit-actions {
        @include flex-between;

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

          gap: $space-4;
        }

        .primary-action {
          // Button styles centralized in _buttons.scss
          .dashicons {
            margin-right: $space-2;
          }

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

        .secondary-actions {
          @include flex-end;

          gap: $space-3;

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

            .button {
              flex: 1;
            }
          }

          .button {
            // Button styles centralized in _buttons.scss
            height: 36px;
            padding: $space-2 $space-4;
            font-size: $font-size-sm;

            .dashicons {
              margin-right: $space-2;
              font-size: 16px;
            }
          }
        }
      }
    }

    // Progress Section
    .audit-progress-section {
      @include apple-card;

      display: none;
      margin-bottom: $space-8;

      &.active {
        display: block;

        @include fade-in;
      }

      .progress-header {
        @include flex-between;

        margin-bottom: $space-6;

        .progress-title {
          @include heading-medium;

          margin: 0;

          @include flex-start;

          .dashicons {
            margin-right: $space-3;
            color: $color-primary;
            animation: spin 1s linear infinite;
          }

          @keyframes spin {
            to {
              transform: rotate(360deg);
            }
          }
        }

        .progress-controls {
          .cancel-button {
            // Button styles centralized in _buttons.scss
            height: 36px;
            padding: $space-2 $space-4;
            font-size: $font-size-sm;
          }
        }
      }

      .progress-content {
        .progress-bar-container {
          position: relative;
          height: 10px;
          margin-bottom: $space-4;
          border-radius: $radius-full;
          background: $color-gray-100;
          overflow: hidden;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);

          &::before {
            content: '';
            position: absolute;
            border-radius: $radius-full;
            background: linear-gradient(90deg, transparent 0%, rgba($color-primary, 0.1) 50%, transparent 100%);
            animation: progressGlow 2s ease-in-out infinite;
            inset: 0;
          }

          .progress-bar {
            position: relative;
            width: 0%;
            height: 100%;
            border-radius: $radius-full;
            background: linear-gradient(
              90deg,
              $color-primary 0%,
              color.adjust($color-primary, $lightness: 10%) 50%,
              $color-success 100%
            );
            background-size: 200% 100%;
            box-shadow: 0 0 10px rgba($color-primary, 0.3);
            transition: width 0.4s $ease-apple;
            animation: gradientFlow 3s ease-in-out infinite;

            // Primary shimmer
            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(white, 0.4), transparent);
              animation: shimmer 2s infinite;
            }

            // Pulse effect
            &::before {
              content: '';
              position: absolute;
              border-radius: $radius-full;
              background: inherit;
              opacity: 0.5;
              inset: 0;
              filter: blur(4px);
            }

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

              100% {
                left: 100%;
              }
            }

            @keyframes gradientFlow {
              0%,
              100% {
                background-position: 0% 50%;
              }

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

          @keyframes progressGlow {
            0%,
            100% {
              opacity: 0;
            }

            50% {
              opacity: 1;
            }
          }
        }

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

          .stat-item {
            text-align: center;

            .stat-number {
              @include heading-small;

              margin: 0 0 $space-1;
              font-variant-numeric: tabular-nums;

              &.processed {
                color: $color-success;
              }

              &.total {
                color: $color-gray-600;
              }

              &.errors {
                color: $color-error;
              }

              &.warnings {
                color: $color-warning;
              }
            }

            .stat-label {
              @include body-small;

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

        .progress-text {
          @include body-medium;

          margin: 0 0 $space-4;
          color: $color-gray-700;
          text-align: center;
        }

        .current-operation {
          padding: $space-3 $space-4;
          border-radius: $radius-apple-sm;
          background: $color-gray-50;

          .operation-text {
            @include body-small;

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

            .current-file {
              color: $color-gray-900;
              font-weight: $font-weight-medium;
            }
          }
        }
      }
    }

    // Results Section
    .audit-results-section {
      display: none;

      &.active {
        display: block;

        @include fade-in;
      }

      .results-header {
        @include flex-between;

        margin-bottom: $space-6;

        .results-title {
          @include heading-medium;

          margin: 0;

          @include flex-start;

          .dashicons {
            margin-right: $space-3;
            color: $color-success;
          }
        }

        .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;
              font-size: 16px;
            }
          }
        }
      }

      // Summary Cards
      .results-summary {
        display: grid;
        gap: $space-4;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        margin-bottom: $space-8;

        .summary-card {
          @include apple-card($space-4);

          position: relative;
          text-align: center;
          overflow: hidden;
          transition: all $duration-normal $ease-apple;
          animation: scaleIn 0.5s $ease-apple both;

          // Staggered animation
          @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
              animation-delay: #{0.1 + ($i * 0.05)}s;
            }
          }

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(white, 0.2), transparent);
            transition: left $duration-slow $ease-apple;
          }

          &:hover {
            box-shadow:
              0 12px 24px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba($color-primary, 0.1);
            transform: translateY(-4px) scale(1.02);

            &::before {
              left: 100%;
            }

            .summary-icon {
              transform: scale(1.1) rotate(5deg);

              .dashicons {
                animation: iconBounce 0.6s $ease-apple;
              }
            }

            .summary-number {
              transform: scale(1.05);
            }
          }

          .summary-icon {
            @include flex-center;

            position: relative;
            width: 48px;
            height: 48px;
            margin: 0 auto $space-3;
            border-radius: $radius-full;
            transition: all $duration-normal $ease-apple;

            &::before {
              content: '';
              position: absolute;
              border-radius: $radius-full;
              background: inherit;
              opacity: 0.2;
              transition: all $duration-normal $ease-apple;
              inset: -4px;
              filter: blur(8px);
            }

            .dashicons {
              position: relative;
              z-index: 1;
              font-size: 24px;
              transition: transform $duration-normal $ease-apple;
            }

            @keyframes iconBounce {
              0%,
              100% {
                transform: translateY(0);
              }

              25% {
                transform: translateY(-6px);
              }

              50% {
                transform: translateY(0);
              }

              75% {
                transform: translateY(-3px);
              }
            }
          }

          .summary-number {
            @include heading-medium;

            margin: 0 0 $space-1;
            transition: all $duration-fast $ease-apple;
            font-variant-numeric: tabular-nums;
          }

          .summary-label {
            @include body-small;

            margin: 0;
            color: $color-gray-600;
            transition: color $duration-fast $ease-apple;
          }

          .summary-change {
            @include body-small;

            margin-top: $space-2;

            .change-indicator {
              @include flex-center;

              display: inline-flex;
              margin-right: $space-1;

              &.up {
                color: $color-success;
              }

              &.down {
                color: $color-error;
              }

              &.neutral {
                color: $color-gray-500;
              }

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

          // Status-specific styling
          &.total-images {
            border-top: 3px solid $color-info;

            .summary-icon {
              background: rgba($color-info, 0.1);
              color: $color-info;
            }
          }

          &.missing-alt {
            border-top: 3px solid $color-missing;

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

          &.weak-alt {
            border-top: 3px solid $color-weak;

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

          &.good-alt {
            border-top: 3px solid $color-good;

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

          &.excellent-alt {
            border-top: 3px solid $color-excellent;

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

      // ===== BULK ACTIONS BAR - APPLE STYLE =====
      .bulk-actions {
        position: sticky;
        z-index: 50;
        top: 0;
        margin-bottom: $space-4;
        padding: $space-4 $space-6;
        border-radius: $radius-apple-lg;
        background: linear-gradient(135deg, rgba($color-primary, 0.95) 0%, rgba($color-primary-dark, 0.95) 100%);
        opacity: 0;
        box-shadow:
          0 8px 24px rgba($color-primary, 0.3),
          0 4px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-120%) scale(0.95);
        transition: all $duration-normal $ease-apple;
        backdrop-filter: blur(20px);
        pointer-events: none;

        &::before {
          content: '';
          position: absolute;
          border-radius: $radius-apple-lg;
          background: linear-gradient(135deg, rgba(white, 0.1) 0%, transparent 100%);
          inset: 0;
          pointer-events: none;
        }

        &.visible {
          opacity: 1;
          transform: translateY(0) scale(1);
          animation: slideInFromTop 0.4s $ease-apple;
          pointer-events: auto;
        }

        @keyframes slideInFromTop {
          0% {
            opacity: 0;
            transform: translateY(-120%) scale(0.95);
          }

          60% {
            transform: translateY(5px) scale(1.02);
          }

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

        .bulk-info {
          display: flex;
          align-items: center;
          gap: $space-4;

          .selection-count {
            color: white;
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;

            .count {
              font-weight: $font-weight-bold;
            }
          }

          .bulk-actions-dropdown {
            position: relative;

            .dropdown-toggle {
              height: 36px;
              padding: $space-2 $space-4;
              border: 1px solid rgba(white, 0.3);
              background: rgba(white, 0.2);
              color: white;
              font-size: $font-size-sm;

              &:hover {
                background: rgba(white, 0.3);
              }
            }

            .dropdown-menu {
              position: absolute;
              top: 100%;
              left: 0;
              min-width: 200px;
              padding: $space-2;
              border-radius: $radius-apple-sm;
              background: $color-background;
              opacity: 0;
              visibility: hidden;
              box-shadow: $shadow-xl;
              transform: translateY(-10px);
              transition: all $duration-fast $ease-apple;

              &.open {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
              }

              .dropdown-item {
                display: flex;
                align-items: center;
                gap: $space-2;
                padding: $space-2 $space-3;
                border-radius: $radius-sm;
                color: $color-gray-700;
                font-size: $font-size-sm;
                transition: $transition-base;
                cursor: pointer;

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

                .item-icon {
                  width: 16px;
                  height: 16px;
                }
              }
            }
          }

          .bulk-cancel {
            height: 36px;
            margin-left: auto;
            padding: $space-2 $space-4;
            border: 1px solid rgba(white, 0.3);
            background: rgba(white, 0.2);
            color: white;
            font-size: $font-size-sm;

            &:hover {
              background: rgba(white, 0.3);
            }
          }
        }
      }

      // ===== AUDIT LIST TABLE - APPLE STYLE =====
      .audit-list-table {
        @include apple-card;

        position: relative;
        overflow: hidden;

        .table-header {
          @include flex-between;

          padding: $space-6;
          background: linear-gradient(135deg, $color-gray-50 0%, $color-gray-100 100%);
          border-bottom: 1px solid $color-gray-200;

          .table-title {
            @include heading-small;

            display: flex;
            align-items: center;
            gap: $space-2;
            margin: 0;

            .title-icon {
              color: $color-primary;
            }
          }

          .table-actions {
            display: flex;
            align-items: center;
            gap: $space-3;

            .select-all-checkbox {
              position: relative;
              display: inline-block !important;
              width: 20px;
              height: 20px;
              margin: 0 !important;
              border: 2px solid $color-gray-300;
              border-radius: $radius-sm;
              background: $color-background;
              vertical-align: middle !important;
              transition: $transition-base;
              cursor: pointer;
              appearance: none;

              &:checked {
                border-color: $color-primary;
                background: $color-primary;

                &::after {
                  content: '';
                  position: absolute;
                  top: 1px;
                  left: 5px;
                  width: 6px;
                  height: 10px;
                  border: 2px solid white;
                  transform: rotate(45deg);
                  border-top: none;
                  border-left: none;
                }
              }

              &:indeterminate {
                border-color: $color-primary;
                background: $color-primary;

                &::after {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 8px;
                  height: 2px;
                  background: white;
                  transform: translate(-50%, -50%);
                }
              }

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

            .table-refresh {
              height: 36px;
              padding: $space-2 $space-3;
              font-size: $font-size-sm;

              .refresh-icon {
                transition: transform $duration-normal $ease-apple;
              }

              &.refreshing .refresh-icon {
                animation: spin 1s linear infinite;
              }
            }
          }
        }

        .audit-table {
          width: 100%;
          font-size: $font-size-sm;
          border-collapse: collapse;

          thead {
            background: linear-gradient(135deg, $color-gray-50 0%, $color-gray-100 100%);

            th {
              @include body-small;

              position: relative;
              padding: $space-4 $space-5;
              color: $color-gray-700;
              font-weight: $font-weight-semibold;
              text-align: left;
              border-bottom: 1px solid $color-gray-200;

              &:first-child {
                width: 40px;
                padding-left: $space-6;
              }

              &.sortable {
                transition: $transition-base;
                cursor: pointer;
                user-select: none;

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

                &.sorted {
                  background: rgba($color-primary, 0.1);
                  color: $color-primary;

                  &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: $space-3;
                    width: 0;
                    height: 0;
                    transform: translateY(-50%);
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                  }

                  &.asc::after {
                    border-bottom: 6px solid currentcolor;
                  }

                  &.desc::after {
                    border-top: 6px solid currentcolor;
                  }
                }
              }
            }
          }

          tbody {
            tr {
              transition: all $duration-fast $ease-apple;
              animation: fadeInRow 0.5s $ease-apple both;
              border-bottom: 1px solid $color-gray-100;

              // Staggered entrance animation
              @for $i from 1 through 20 {
                &:nth-child(#{$i}) {
                  animation-delay: #{0.05 + ($i * 0.03)}s;
                }
              }

              &:hover {
                z-index: 1;
                background: linear-gradient(135deg, rgba($color-primary, 0.03) 0%, rgba($color-primary, 0.01) 100%);
                box-shadow:
                  -4px 0 0 0 rgba($color-primary, 0.3),
                  0 2px 8px rgba(0, 0, 0, 0.05);
                transform: translateX(4px);
              }

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

              &.selected {
                border-color: rgba($color-primary, 0.2);
                background: linear-gradient(135deg, rgba($color-primary, 0.06) 0%, rgba($color-primary, 0.03) 100%);
                box-shadow: -3px 0 0 0 rgba($color-primary, 0.5);

                &:hover {
                  background: linear-gradient(135deg, rgba($color-primary, 0.08) 0%, rgba($color-primary, 0.04) 100%);
                  box-shadow:
                    -4px 0 0 0 rgba($color-primary, 0.5),
                    0 2px 8px rgba(0, 0, 0, 0.05);
                }
              }

              // Flash animation for updated rows
              &.alt-audit-row-updated {
                animation: rowFlash 2s $ease-apple;
              }

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

                &:first-child {
                  width: 40px;
                  padding-left: $space-6;
                  vertical-align: middle !important; // Ensure proper vertical alignment

                  .row-checkbox {
                    position: relative;
                    display: inline-block !important;
                    width: 18px;
                    height: 18px;
                    margin: 0 !important;
                    border: 2px solid $color-gray-300;
                    border-radius: $radius-sm;
                    background: $color-background;
                    vertical-align: middle !important;
                    transition: all $duration-fast $ease-apple;
                    cursor: pointer;
                    appearance: none;

                    &::before {
                      content: '';
                      position: absolute;
                      border-radius: $radius-sm;
                      background: $color-primary;
                      transform: scale(0);
                      transition: transform $duration-fast $ease-apple;
                      inset: 0;
                    }

                    &:checked {
                      border-color: $color-primary;

                      &::before {
                        transform: scale(1);
                      }

                      &::after {
                        content: '';
                        position: absolute;
                        top: 1px;
                        left: 4px;
                        width: 5px;
                        height: 9px;
                        border: 2px solid white;
                        transform: rotate(45deg) scale(0);
                        animation: checkmarkDraw 0.3s $ease-apple 0.1s forwards;
                        border-top: none;
                        border-left: none;
                      }
                    }

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

                    &:hover:not(:checked) {
                      border-color: $color-primary;
                      background: rgba($color-primary, 0.05);
                      transform: scale(1.1);
                    }

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

                    @keyframes checkmarkDraw {
                      0% {
                        transform: rotate(45deg) scale(0);
                      }

                      50% {
                        transform: rotate(45deg) scale(1.2);
                      }

                      100% {
                        transform: rotate(45deg) scale(1);
                      }
                    }
                  }
                }

                &.image-cell {
                  min-width: 280px;

                  .image-preview {
                    @include flex-start;

                    gap: $space-3;

                    .image-thumbnail {
                      position: relative;
                      width: 64px;
                      height: 64px;
                      border: 2px solid $color-gray-200;
                      border-radius: $radius-apple-lg;
                      background: $color-gray-100;
                      overflow: hidden;
                      transition: all $duration-normal $ease-apple;
                      cursor: pointer;
                      object-fit: cover;
                      flex-shrink: 0;

                      &::before {
                        content: '';
                        position: absolute;
                        z-index: 1;
                        background: radial-gradient(circle at center, transparent 0%, rgba($color-primary, 0.1) 100%);
                        opacity: 0;
                        transition: opacity $duration-normal $ease-apple;
                        inset: 0;
                      }

                      &::after {
                        content: '';
                        position: absolute;
                        z-index: 2;
                        top: -100%;
                        left: -100%;
                        width: 300%;
                        height: 300%;
                        background: linear-gradient(45deg, transparent 30%, rgba(white, 0.3) 50%, transparent 70%);
                        opacity: 0;
                        transition: all $duration-slow $ease-apple;
                        inset: auto;
                        pointer-events: none;
                      }

                      img {
                        transition: transform $duration-normal $ease-apple;
                      }

                      &:hover {
                        border-color: $color-primary;
                        box-shadow:
                          0 8px 16px rgba($color-primary, 0.2),
                          0 0 0 4px rgba($color-primary, 0.1);
                        transform: scale(1.1);

                        &::before {
                          opacity: 1;
                        }

                        &::after {
                          top: 100%;
                          left: 100%;
                          opacity: 1;
                        }

                        img {
                          transform: scale(1.05);
                        }
                      }
                    }

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

                      .image-name {
                        @include body-medium;

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

                        @include text-truncate;

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

                      .image-meta {
                        display: flex;
                        align-items: center;
                        gap: $space-2;
                        margin-bottom: $space-1;

                        .image-size {
                          @include body-small;

                          color: $color-gray-500;
                          font-variant-numeric: tabular-nums;
                        }

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

                          padding: 2px 6px;
                          font-size: 10px;
                        }
                      }

                      .image-dimensions {
                        @include body-small;

                        color: $color-gray-400;
                        font-variant-numeric: tabular-nums;
                      }
                    }
                  }
                }

                &.location-cell {
                  .location-link {
                    @include body-medium;

                    color: $color-primary;
                    text-decoration: none;

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

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

                    margin-top: $space-1;
                  }
                }

                // ===== INLINE EDITING - APPLE STYLE =====
                &.alt-text-cell {
                  min-width: 300px;

                  .inline-edit {
                    position: relative;

                    .alt-text-display {
                      @include body-small;

                      position: relative;
                      min-height: 44px;
                      padding: $space-3;
                      border: 1px solid transparent;
                      border-radius: $radius-apple-sm;
                      background: $color-gray-50;
                      color: $color-gray-700;
                      transition: all $duration-fast $ease-apple;
                      cursor: pointer;

                      &::before {
                        content: '';
                        position: absolute;
                        border-radius: $radius-apple-sm;
                        background: linear-gradient(
                          135deg,
                          rgba($color-primary, 0) 0%,
                          rgba($color-primary, 0.03) 100%
                        );
                        opacity: 0;
                        transition: opacity $duration-fast $ease-apple;
                        inset: 0;
                      }

                      &:hover {
                        border-color: $color-gray-300;
                        background: $color-gray-100;
                        box-shadow:
                          -2px 0 0 0 rgba($color-primary, 0.3),
                          0 1px 3px rgba(0, 0, 0, 0.05);
                        transform: translateX(2px);

                        &::before {
                          opacity: 1;
                        }

                        .edit-indicator {
                          opacity: 1;
                          transform: scale(1) rotate(0deg);
                        }
                      }

                      &:active {
                        transform: translateX(1px);
                      }

                      &.editing {
                        display: none;
                      }

                      &.empty {
                        display: flex;
                        align-items: center;
                        color: $color-gray-400;
                        font-style: italic;

                        &::before {
                          content: '✏️';
                          position: static;
                          margin-right: $space-2;
                          background: none;
                          opacity: 0.5;
                        }
                      }

                      .edit-indicator {
                        position: absolute;
                        z-index: 1;
                        top: $space-1;
                        right: $space-1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 20px;
                        height: 20px;
                        border-radius: $radius-full;
                        background: rgba($color-primary, 0.1);
                        opacity: 0;
                        transform: scale(0.8) rotate(-10deg);
                        transition: all $duration-fast $ease-apple;

                        .edit-icon {
                          width: 12px;
                          height: 12px;
                          color: $color-primary;
                          transition: transform $duration-fast $ease-apple;
                        }
                      }
                    }

                    .alt-text-editor {
                      display: none;

                      &.active {
                        display: block;

                        @include scale-in;
                      }

                      .editor-input {
                        @include apple-input;

                        width: 100%;
                        min-height: 44px;
                        margin-bottom: $space-2;
                        font-size: $font-size-sm;
                        line-height: 1.4;
                        resize: vertical;

                        &:focus {
                          border-color: $color-primary;
                          box-shadow: $shadow-apple-focus;
                        }
                      }

                      .editor-actions {
                        display: flex;
                        justify-content: flex-end;
                        gap: $space-2;

                        .btn-save,
                        .btn-cancel {
                          // Button styles centralized in _buttons.scss
                          height: 32px;
                          padding: $space-1 $space-3;
                          font-size: $font-size-xs;
                        }
                      }

                      .editor-feedback {
                        @include body-small;

                        margin-top: $space-1;
                        color: $color-gray-500;

                        .char-count {
                          float: right;
                          font-variant-numeric: tabular-nums;

                          &.warning {
                            color: $color-warning;
                          }

                          &.error {
                            color: $color-error;
                          }
                        }
                      }
                    }
                  }
                }

                // ===== STATUS BADGES - APPLE STYLE =====
                &.status-cell {
                  .status-badge {
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    gap: $space-2;
                    padding: $space-2 $space-3;
                    border-radius: $radius-full;
                    font-size: $font-size-xs;
                    font-weight: $font-weight-semibold;
                    letter-spacing: 0.025em;
                    text-transform: uppercase;
                    overflow: hidden;
                    transition: all $duration-normal $ease-apple;
                    cursor: default;

                    &::before {
                      content: '';
                      position: absolute;
                      background: linear-gradient(
                        120deg,
                        transparent 0%,
                        transparent 30%,
                        rgba(white, 0.3) 50%,
                        transparent 70%,
                        transparent 100%
                      );
                      transform: translateX(-100%);
                      transition: transform $duration-slow $ease-apple;
                      inset: 0;
                      pointer-events: none;
                    }

                    &:hover {
                      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                      transform: translateY(-1px);

                      &::before {
                        transform: translateX(100%);
                      }

                      .status-icon {
                        animation: pulse 1s ease-in-out infinite;
                      }
                    }

                    .status-icon {
                      position: relative;
                      width: 8px;
                      height: 8px;
                      border-radius: $radius-full;
                      transition: all $duration-fast $ease-apple;
                      flex-shrink: 0;

                      &::after {
                        content: '';
                        position: absolute;
                        border-radius: $radius-full;
                        background: inherit;
                        opacity: 0.3;
                        inset: -2px;
                        filter: blur(3px);
                      }
                    }

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

                      50% {
                        opacity: 0.8;
                        transform: scale(1.2);
                      }
                    }

                    &.missing {
                      border: 1px solid rgba($color-missing, 0.2);
                      background: rgba($color-missing, 0.1);
                      color: $color-missing;

                      .status-icon {
                        background: $color-missing;
                        box-shadow: 0 0 4px rgba($color-missing, 0.4);
                      }
                    }

                    &.decorative {
                      border: 1px solid rgba($color-decorative, 0.2);
                      background: rgba($color-decorative, 0.1);
                      color: $color-decorative;

                      .status-icon {
                        background: $color-decorative;
                        box-shadow: 0 0 4px rgba($color-decorative, 0.4);
                      }
                    }

                    &.weak {
                      border: 1px solid rgba($color-weak, 0.2);
                      background: rgba($color-weak, 0.1);
                      color: $color-weak;

                      .status-icon {
                        background: $color-weak;
                        box-shadow: 0 0 4px rgba($color-weak, 0.4);
                      }
                    }

                    &.good {
                      border: 1px solid rgba($color-good, 0.2);
                      background: rgba($color-good, 0.1);
                      color: $color-good;

                      .status-icon {
                        background: $color-good;
                        box-shadow: 0 0 4px rgba($color-good, 0.4);
                      }
                    }

                    &.excellent {
                      border: 1px solid rgba($color-excellent, 0.2);
                      background: rgba($color-excellent, 0.1);
                      color: $color-excellent;

                      .status-icon {
                        background: $color-excellent;
                        box-shadow: 0 0 4px rgba($color-excellent, 0.4);
                      }
                    }
                  }

                  .quality-score {
                    display: flex;
                    align-items: center;
                    gap: $space-2;
                    margin-top: $space-1;

                    .score-number {
                      @include body-small;

                      color: $color-gray-600;
                      font-weight: $font-weight-medium;
                      font-variant-numeric: tabular-nums;

                      &::after {
                        content: '%';
                        margin-left: 1px;
                        color: $color-gray-400;
                      }
                    }

                    .score-bar {
                      position: relative;
                      flex: 1;
                      height: 4px;
                      border-radius: $radius-full;
                      background: $color-gray-200;
                      overflow: hidden;

                      .score-fill {
                        height: 100%;
                        border-radius: $radius-full;
                        transition: width $duration-slow $ease-apple;

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

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

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

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

                &.actions-cell {
                  .action-buttons {
                    display: flex;
                    align-items: center;
                    gap: $space-2;

                    .alt-audit-action-btn {
                      // Base button styles centralized in _buttons.scss
                      // Only page-specific sizing overrides here
                      height: 32px;
                      padding: $space-1 $space-3;
                      font-size: $font-size-xs;

                      .btn-icon {
                        width: 14px;
                        height: 14px;
                      }

                      // Page-specific button variant colors (if not in _buttons.scss)
                      &.edit-btn {
                        border-color: rgba($color-primary, 0.3);
                        color: $color-primary;

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

                      &.delete-btn {
                        border-color: rgba($color-error, 0.3);
                        color: $color-error;

                        &:hover {
                          border-color: $color-error;
                          background: rgba($color-error, 0.1);
                        }
                      }
                    }

                    .action-menu {
                      position: relative;

                      .menu-toggle {
                        // Button styles centralized in _buttons.scss
                        width: 32px;
                        height: 32px;
                        padding: 0;
                        font-size: $font-size-xs;
                      }

                      .menu-dropdown {
                        position: absolute;
                        z-index: 100;
                        top: 100%;
                        right: 0;
                        min-width: 160px;
                        padding: $space-2;
                        border-radius: $radius-apple-sm;
                        background: $color-background;
                        opacity: 0;
                        visibility: hidden;
                        box-shadow: $shadow-xl;
                        transform: translateY(-10px);
                        transition: all $duration-fast $ease-apple;

                        &.open {
                          opacity: 1;
                          visibility: visible;
                          transform: translateY(0);
                        }

                        .menu-item {
                          display: flex;
                          align-items: center;
                          gap: $space-2;
                          padding: $space-2 $space-3;
                          border-radius: $radius-sm;
                          color: $color-gray-700;
                          font-size: $font-size-sm;
                          transition: $transition-base;
                          cursor: pointer;

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

                          .item-icon {
                            width: 16px;
                            height: 16px;
                          }

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

          // ===== TABLE PAGINATION - APPLE STYLE =====
          .table-pagination {
            @include flex-between;

            padding: $space-4 $space-6;
            background: linear-gradient(135deg, $color-gray-50 0%, $color-gray-100 100%);
            border-top: 1px solid $color-gray-200;

            .pagination-info {
              @include body-small;

              color: $color-gray-600;

              .info-highlight {
                color: $color-gray-900;
                font-weight: $font-weight-semibold;
              }
            }

            .pagination-controls {
              display: flex;
              align-items: center;
              gap: $space-2;

              .pagination-btn {
                position: relative;
                min-width: 32px;
                height: 32px;
                padding: $space-1 $space-2;
                font-size: $font-size-sm;
                overflow: hidden;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                line-height: 1;
                vertical-align: middle;

                &::before {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 0;
                  height: 0;
                  border-radius: 50%;
                  background: rgba($color-primary, 0.1);
                  transform: translate(-50%, -50%);
                  transition:
                    width $duration-fast $ease-apple,
                    height $duration-fast $ease-apple;
                }

                &:hover:not(:disabled, .active)::before {
                  width: 100%;
                  height: 100%;
                }

                &.active {
                  box-shadow:
                    0 2px 8px rgba($color-primary, 0.3),
                    0 0 0 2px rgba($color-primary, 0.1);
                  transform: scale(1.05);

                  &::before {
                    display: none;
                  }
                }

                &:disabled {
                  opacity: 0.5;
                  cursor: not-allowed;

                  &:hover {
                    box-shadow: none;
                    transform: none;
                  }

                  &::before {
                    display: none;
                  }
                }

                &:active:not(:disabled) {
                  transform: scale(0.95);
                }
              }

              .pagination-separator {
                margin: 0 $space-1;
                color: $color-gray-400;
                user-select: none;
              }
            }
          }
        }
      }

      .table-footer {
        @include flex-between;

        padding: $space-3 $space-6;
        background: $color-gray-50;
        border-top: 1px solid $color-gray-200;

        .pagination-info {
          @include body-small;

          color: $color-gray-600;
        }

        .pagination-controls {
          @include flex-end;

          gap: $space-2;

          .pagination-button {
            min-width: 32px;
            height: 32px;
            padding: $space-1 $space-2;
            font-size: $font-size-sm;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1;
            vertical-align: middle;

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

    // Empty States
    .empty-state {
      @include apple-card;

      padding: $space-12 $space-6;
      text-align: center;
      animation: fadeIn 0.6s $ease-apple;

      .empty-icon {
        @include flex-center;

        position: relative;
        width: 64px;
        height: 64px;
        margin: 0 auto $space-4;
        border-radius: $radius-full;
        background: $color-gray-100;
        color: $color-gray-400;
        animation: bounceIn 0.8s $ease-apple;

        &::before {
          content: '';
          position: absolute;
          border-radius: $radius-full;
          background: radial-gradient(circle, rgba($color-primary, 0.1) 0%, transparent 70%);
          animation: pulse 2s ease-in-out infinite;
          inset: -4px;
        }

        .dashicons {
          position: relative;
          z-index: 1;
          font-size: 32px;
          animation: iconFloat 3s ease-in-out infinite;
        }

        @keyframes bounceIn {
          0% {
            opacity: 0;
            transform: scale(0.3);
          }

          50% {
            transform: scale(1.05);
          }

          70% {
            transform: scale(0.9);
          }

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

        @keyframes iconFloat {
          0%,
          100% {
            transform: translateY(0);
          }

          50% {
            transform: translateY(-6px);
          }
        }

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

          50% {
            opacity: 1;
            transform: scale(1.1);
          }
        }
      }

      .empty-title {
        @include heading-medium;

        margin: 0 0 $space-2;
        color: $color-gray-700;
        animation: fadeInUp 0.6s $ease-apple 0.2s both;
      }

      .empty-description {
        @include body-medium;

        max-width: 400px;
        margin: 0 0 $space-6;
        margin-right: auto;
        margin-left: auto;
        color: $color-gray-500;
        animation: fadeInUp 0.6s $ease-apple 0.3s both;
      }

      .empty-action {
        position: relative;
        overflow: hidden;
        animation: fadeInUp 0.6s $ease-apple 0.4s both;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          border-radius: 50%;
          background: rgba(white, 0.3);
          transform: translate(-50%, -50%);
          transition:
            width $duration-normal $ease-apple,
            height $duration-normal $ease-apple;
        }

        &:hover::before {
          width: 300px;
          height: 300px;
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }

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

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

    // ===== RESPONSIVE DESIGN - APPLE STYLE =====
    @include media-down(lg) {
      .alt-audit-header {
        flex-direction: column;
        align-items: stretch;
        gap: $space-6;

        .header-actions {
          justify-content: stretch;

          .alt-audit-btn-primary,
          .alt-audit-btn-secondary {
            flex: 1;
            justify-content: center;
          }
        }
      }

      // Responsive WP_List_Table
      .audit-table-section {
        .wp-list-table,
        .widefat {
          thead {
            tr th,
            tr td {
              padding: $space-3;
              font-size: $font-size-xs;
            }
          }

          tbody {
            tr {
              th,
              td {
                padding: $space-3;

                &.column-thumbnail {
                  .attachment-preview {
                    img {
                      width: 48px;
                      height: 48px;
                    }
                  }
                }
              }
            }
          }
        }

        .tablenav {
          .tablenav-pages {
            .pagination-links {
              .button,
              .page-numbers {
                min-width: 28px;
                height: 28px;
                padding: $space-1;
                font-size: $font-size-xs;
              }
            }
          }
        }
      }

      .audit-filters {
        .filters-grid {
          gap: $space-3;
          grid-template-columns: 1fr;
        }

        .filters-stats {
          flex-direction: column;
          align-items: stretch;
          gap: $space-3;

          .results-count {
            text-align: center;
          }

          .view-toggles {
            align-self: center;
          }
        }
      }

      .audit-list-table {
        .table-header {
          flex-direction: column;
          align-items: stretch;
          gap: $space-4;

          .table-actions {
            justify-content: space-between;
          }
        }

        .audit-table {
          font-size: $font-size-xs;

          thead th {
            padding: $space-3 $space-4;
          }

          tbody td {
            padding: $space-4;

            &.image-cell {
              .image-preview {
                .image-thumbnail {
                  width: 48px;
                  height: 48px;
                }
              }
            }

            &.actions-cell {
              .action-buttons {
                flex-direction: column;
                gap: $space-1;

                .alt-audit-action-btn {
                  justify-content: center;
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }

    @include media-down(md) {
      .alt-audit-header {
        padding: $space-6;

        .page-title {
          font-size: $font-size-3xl;
        }

        .page-subtitle {
          font-size: $font-size-base;
        }
      }

      .audit-filters-apple,
      .audit-list-table {
        margin-bottom: $space-6;
        padding: $space-4;
      }

      .bulk-actions {
        padding: $space-3 $space-4;

        .bulk-info {
          flex-direction: column;
          align-items: stretch;
          gap: $space-3;

          .selection-count {
            text-align: center;
          }

          .bulk-actions-dropdown {
            align-self: center;
          }

          .bulk-cancel {
            margin-left: 0;
            align-self: center;
          }
        }
      }

      .audit-list-table {
        overflow-x: auto;

        .audit-table {
          min-width: 600px;
        }
      }
    }

    @include media-down(sm) {
      .alt-audit-header {
        margin-bottom: $space-6;
        padding: $space-4;

        .page-title {
          font-size: $font-size-2xl;
        }
      }

      .audit-filters {
        .filters-header {
          flex-direction: column;
          align-items: stretch;
          gap: $space-4;

          .filters-actions {
            justify-content: center;
          }
        }
      }

      .bulk-actions {
        position: relative;
        margin-bottom: $space-3;
      }

      .audit-list-table {
        .table-header {
          padding: $space-4;

          .table-title {
            font-size: $font-size-base;
          }

          .table-actions {
            flex-direction: column;
            gap: $space-2;

            .select-all-checkbox {
              align-self: center;
            }
          }
        }

        .table-pagination {
          flex-direction: column;
          gap: $space-3;

          .pagination-info {
            text-align: center;
          }

          .pagination-controls {
            justify-content: center;
          }
        }
      }
    }

    // ===== DARK MODE - APPLE STYLE =====
    @include dark-mode {
      .alt-audit-audit {
        background: $dark-background;
        color: $dark-text-primary;
      }

      .alt-audit-header {
        border-color: $dark-border;
        background: linear-gradient(135deg, rgba($dark-surface, 0.9) 0%, rgba($dark-surface, 0.8) 100%);

        .page-title {
          background: linear-gradient(135deg, $dark-text-primary 0%, $color-success 100%);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

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

      // Dark mode for audit table section
      .audit-table-section {
        border-color: $dark-border;
        background: $dark-surface;

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

            tr th,
            tr td {
              border-color: $dark-border !important;
              color: $dark-text-primary;
            }
          }

          tbody {
            tr {
              border-color: $dark-border !important;

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

              th,
              td {
                color: $dark-text-secondary;

                &.column-filename {
                  strong,
                  strong a {
                    color: $dark-text-primary;
                  }

                  .row-actions {
                    a {
                      color: $color-primary;

                      &:hover {
                        color: lighten($color-primary, 10%);
                      }
                    }
                  }
                }

                &.column-alt_text {
                  .alt-text-content {
                    color: $dark-text-secondary;
                  }
                }

                &.column-quality_score {
                  .alt-audit-score {
                    .score-number {
                      color: $dark-text-primary;
                    }

                    .score-bar {
                      background: rgba($dark-border, 0.5);
                    }
                  }
                }

                &.column-explanation {
                  .alt-audit-explanation {
                    color: $dark-text-secondary;

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

                  .alt-audit-no-explanation {
                    color: rgba($dark-text-secondary, 0.5);
                  }
                }

                &.column-date {
                  color: $dark-text-secondary;
                }
              }
            }
          }

          tfoot {
            background: linear-gradient(135deg, $dark-surface 0%, rgba($dark-surface, 0.8) 100%);
            border-color: $dark-border;
          }
        }

        .tablenav {
          background: linear-gradient(135deg, rgba($color-primary, 0.08) 0%, rgba($color-primary, 0.03) 100%);
          border-color: $dark-border;

          .actions {
            select {
              border-color: $dark-border;
              background-color: $dark-surface;
              color: $dark-text-primary;

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

              &:focus {
                border-color: $color-primary;
              }
            }

            .button {
              border-color: $dark-border;
              background: $dark-surface;
              color: $dark-text-primary;

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

          // Dark mode for custom prefixed controls
          .alt-audit-select,
          .alt-audit-bulk-select,
          .alt-audit-status-filter {
            border-color: $dark-border !important;
            background: linear-gradient(180deg, $dark-surface 0%, rgba($dark-surface, 0.95) 100%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23999' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right $space-3 center !important;
            background-size: 16px;
            color: $dark-text-primary !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

            &:hover {
              border-color: $color-primary !important;
              background: linear-gradient(180deg, lighten($dark-surface, 5%) 0%, $dark-surface 100%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23999' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right $space-3 center !important;
            }

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

          .alt-audit-button {
            border-color: $dark-border !important;
            background: linear-gradient(180deg, $dark-surface 0%, rgba($dark-surface, 0.95) 100%) !important;
            color: $dark-text-primary !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

            &:hover {
              border-color: $color-primary !important;
              background: linear-gradient(180deg, rgba($color-primary, 0.15) 0%, rgba($color-primary, 0.08) 100%) !important;
              color: $color-primary !important;
            }

            &.alt-audit-button-secondary {
              &:hover {
                background: linear-gradient(180deg, rgba($color-primary, 0.15) 0%, rgba($color-primary, 0.08) 100%) !important;
              }
            }

            &.alt-audit-button-primary {
              background: linear-gradient(135deg, $color-primary 0%, darken($color-primary, 10%) 100%) !important;
              border-color: $color-primary !important;
              color: white !important;

              &:hover {
                background: linear-gradient(135deg, lighten($color-primary, 5%) 0%, $color-primary 100%) !important;
                color: white !important;
              }
            }
          }

          .alt-audit-search-input {
            border-color: $dark-border !important;
            background: linear-gradient(180deg, $dark-surface 0%, rgba($dark-surface, 0.95) 100%) !important;
            color: $dark-text-primary !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

            &:hover {
              border-color: lighten($dark-border, 10%) !important;
            }

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

            &::placeholder {
              color: $dark-text-secondary;
            }
          }

          .tablenav-pages {
            .displaying-num {
              color: $dark-text-secondary;
            }

            .pagination-links {
              .button,
              .page-numbers {
                border-color: $dark-border;
                background: $dark-surface;
                color: $dark-text-primary;

                &:hover:not(.disabled, .current) {
                  border-color: $color-primary;
                  background: rgba($color-primary, 0.12);
                }

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

      .audit-filters-apple,
      .audit-list-table {
        border-color: $dark-border;
        background: $dark-surface;

        .filters-title,
        .table-title {
          color: $dark-text-primary;
        }

        .table-header {
          border-color: $dark-border;
          background: linear-gradient(135deg, $dark-surface 0%, rgba($dark-surface, 0.8) 100%);
        }
      }

      .audit-table {
        thead th {
          border-color: $dark-border;
          background: $dark-surface;
          color: $dark-text-primary;
        }

        tbody tr {
          border-color: $dark-border;

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

          &.selected {
            background: rgba($color-primary, 0.1);
          }

          td {
            .image-name {
              color: $dark-text-primary;
            }

            .image-size,
            .image-dimensions {
              color: $dark-text-secondary;
            }

            .alt-text-display {
              border-color: $dark-border;
              background: $dark-surface;
              color: $dark-text-secondary;

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

      .table-pagination {
        border-color: $dark-border;
        background: $dark-surface;

        .pagination-info {
          color: $dark-text-secondary;

          .info-highlight {
            color: $dark-text-primary;
          }
        }
      }

      .bulk-actions {
        background: linear-gradient(135deg, rgba($color-primary, 0.9) 0%, rgba($color-primary-dark, 0.9) 100%);
      }
    }

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

      .image-thumbnail,
      .edit-indicator,
      .status-badge-apple::before {
        transition: none;

        &:hover {
          transform: none !important;
        }
      }

      .bulk-actions {
        &.visible {
          transform: none;
          transition: opacity $duration-fast;
        }
      }
    }

    @include high-contrast {
      .audit-list-table-apple,
      .audit-filters-apple,
      .bulk-actions {
        border: 2px solid $color-gray-400;
      }

      .status-badge {
        border-width: 2px;
        font-weight: $font-weight-bold;
      }

      .image-thumbnail {
        border-width: 3px;
      }
    }

    // ===== FOCUS STYLES =====
    .alt-audit-btn-primary:focus,
    .alt-audit-btn-secondary:focus,
    .alt-audit-action-btn:focus,
    .pagination-btn:focus,
    .filter-select:focus,
    .filter-search:focus,
    .editor-input:focus {
      box-shadow: $shadow-apple-focus;
      outline: none;
    }

    // ===== LOADING STATES =====
    .loading-row {
      .loading-cell {
        @include shimmer-loading;

        height: 20px;
        margin: $space-1 0;
        border-radius: $radius-sm;
      }
    }

    .table-loading {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba($color-background, 0.8);
        inset: 0;
        backdrop-filter: blur(4px);
      }
    }

    // ===== ANIMATION KEYFRAMES =====
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

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

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

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

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

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

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

    @keyframes fadeInLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }

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

    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(20px);
      }

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

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

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

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

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

    @keyframes rowFlash {
      0% {
        background: transparent;
      }

      15% {
        background: linear-gradient(135deg, rgba($color-success, 0.15) 0%, rgba($color-success, 0.08) 100%);
        box-shadow: -4px 0 0 0 rgba($color-success, 0.4);
      }

      100% {
        background: transparent;
        box-shadow: none;
      }
    }

    // ===== UTILITY CLASSES =====
    .fade-in {
      animation: slideInUp $duration-normal $ease-apple;
    }

    .slide-down {
      animation: slideInDown $duration-normal $ease-apple;
    }

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

    .text-gradient-success {
      background: linear-gradient(135deg, $color-success 0%, $color-success-dark 100%);
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    // ===== INLINE EDITING STYLES (Previously inline in PHP) =====
    .alt-audit-alt-text {
      position: relative;
      max-width: 300px;

      .edit-alt-text {
        margin-left: $space-1;
        opacity: 0;
        transition: opacity $duration-fast;
        cursor: pointer;

        &:hover {
          opacity: 1;
        }
      }

      &:hover .edit-alt-text {
        opacity: 1;
      }
    }

    .alt-audit-status {
      display: inline-block;
      padding: $space-1 $space-2;
      border-radius: $radius-sm;
      font-size: $font-size-xs;
      font-weight: $font-weight-bold;
      line-height: 1;
      text-transform: uppercase;

      &.alt-audit-status-missing {
        background: $color-missing;
        color: white;
      }

      &.alt-audit-status-weak {
        background: $color-weak;
        color: #333;
      }

      &.alt-audit-status-good {
        background: $color-good;
        color: white;
      }

      &.alt-audit-status-excellent {
        background: $color-excellent;
        color: white;
      }

      &.alt-audit-status-decorative {
        background: $color-decorative;
        color: white;
      }
    }

    .alt-audit-score {
      display: flex;
      align-items: center;
      gap: $space-2;

      .score-number {
        color: $color-gray-700;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
      }

      .score-bar {
        width: 60px;
        height: 4px;
        border-radius: $radius-sm;
        background: $color-gray-200;
        overflow: hidden;

        .score-fill {
          height: 100%;
          transition: width $duration-normal ease;

          &.score-excellent {
            background: $color-excellent;
          }

          &.score-good {
            background: $color-good;
          }

          &.score-weak {
            background: $color-weak;
          }

          &.score-missing {
            background: $color-missing;
          }
        }
      }
    }

    .attachment-preview {
      img {
        max-width: 60px;
        max-height: 60px;
        border-radius: $radius-sm;
        object-fit: cover;
      }
    }

    .alt-audit-auto-generated {
      color: $color-gray-600;
      font-size: $font-size-xs;
      opacity: 0.7;
    }

    .alt-audit-missing {
      color: $color-missing;
      font-style: italic;
    }

    // Inline Edit Form (Hidden Template)
    .alt-audit-inline-edit-template {
      display: none;
      visibility: hidden;
    }

    .inline-edit-row {
      background: $color-gray-50;

      td {
        padding: $space-4 !important;
      }

      .inline-edit-wrapper {
        padding: $space-4;
        border: 1px solid $color-gray-200;
        border-radius: $radius-apple-sm;
        background: $color-background;

        fieldset {
          margin: 0;
          padding: 0;
          border: none;

          .inline-edit-legend {
            margin-bottom: $space-3;
            padding: 0;
            color: $color-gray-900;
            font-size: $font-size-base;
            font-weight: $font-weight-semibold;
          }

          label {
            display: block;
            margin-bottom: $space-3;

            .label {
              display: block;
              margin-bottom: $space-2;
              color: $color-gray-700;
              font-size: $font-size-sm;
              font-weight: $font-weight-medium;
            }

            .inline-edit-textarea {
              width: 100%;
              max-width: 500px;
              padding: $space-2;
              border: 1px solid $color-gray-300;
              border-radius: $radius-sm;
              font-family: inherit;
              font-size: $font-size-sm;
              line-height: 1.5;
              transition: border-color $duration-fast;
              resize: vertical;

              &:focus {
                border-color: $color-primary;
                box-shadow: $shadow-apple-focus;
                outline: none;
              }
            }
          }

          .inline-edit-actions {
            display: flex;
            align-items: center;
            gap: $space-2;
            margin-top: $space-3;

            .button {
              min-height: 32px;
              padding: $space-1 $space-3;
              font-size: $font-size-sm;
            }

            .spinner {
              float: none;
              margin: 0 $space-2;
            }
          }
        }
      }
    }

    // ===== WP_LIST_TABLE PREMIUM STYLING (MATCHING BULK TOOLS) =====
    .audit-table-section {
      @include apple-card;

      margin-bottom: $space-8;
      overflow: hidden;

      // WordPress List Table Styling
      .wp-list-table,
      .widefat {
        width: 100%;
        border: none !important;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;

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

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

              &.check-column {
                width: 40px;
                padding-left: $space-6;
              }

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

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

              &.column-alt_text {
                width: 30%;
              }

              &.column-status {
                width: 12%;
              }

              &.column-quality_score {
                width: 10%;
              }

              &.column-explanation {
                width: 35%;
              }

              &.column-date {
                width: 10%;
              }
            }
          }
        }

        // Premium Table Body
        tbody {
          tr {
            border: none !important;
            border-bottom: 1px solid $color-gray-200 !important;
            background: transparent;
            transition: background 0.2s $ease-apple;

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

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

            th,
            td {
              padding: $space-4;
              border: none !important;
              vertical-align: middle;

              &.check-column {
                padding-left: $space-6;
              }

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

                  .dashicons {
                    font-size: 60px;
                    width: 60px;
                    height: 60px;
                    color: $color-gray-300;
                  }
                }
              }

              // Filename Column
              &.column-filename {
                strong {
                  display: block;
                  margin-bottom: $space-1;
                  color: $color-gray-900;
                  font-size: $font-size-base;
                  font-weight: $font-weight-semibold;

                  a {
                    color: inherit;
                    text-decoration: none;
                    transition: color 0.2s $ease-apple;

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

                .row-actions {
                  margin-top: $space-1;
                  color: $color-gray-500;
                  font-size: $font-size-xs;

                  span {
                    display: inline-block;
                    margin-right: $space-2;

                    &:not(:last-child)::after {
                      content: '|';
                      margin-left: $space-2;
                      color: $color-gray-300;
                    }
                  }

                  a {
                    color: $color-primary;
                    text-decoration: none;
                    transition: color 0.2s $ease-apple;

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

                    &.submitdelete {
                      color: $color-error;

                      &:hover {
                        color: darken($color-error, 10%);
                      }
                    }
                  }
                }
              }

              // Alt Text Column
              &.column-alt_text {
                .alt-text-content {
                  max-height: 80px;
                  color: $color-gray-700;
                  font-size: $font-size-sm;
                  line-height: $line-height-relaxed;
                  overflow-y: auto;

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

              // Status Column - Premium Badges
              &.column-status {
                .alt-audit-status {
                  display: inline-flex;
                  align-items: center;
                  gap: $space-2;
                  padding: $space-2 $space-3;
                  border-radius: $radius-full;
                  font-size: $font-size-xs;
                  font-weight: $font-weight-semibold;
                  letter-spacing: 0.025em;
                  text-transform: uppercase;
                  transition: all 0.2s $ease-apple;

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

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

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

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

                  &.alt-audit-status-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;
                  }

                  &:hover {
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    transform: translateY(-1px);
                  }
                }
              }

              // Quality Score Column - Premium Display
              &.column-quality_score {
                .alt-audit-score {
                  display: flex;
                  align-items: center;
                  gap: $space-2;

                  .score-number {
                    min-width: 32px;
                    color: $color-gray-700;
                    font-size: $font-size-base;
                    font-weight: $font-weight-bold;
                    font-variant-numeric: tabular-nums;
                  }

                  .score-bar {
                    flex: 1;
                    width: 60px;
                    height: 6px;
                    border-radius: $radius-full;
                    background: $color-gray-200;
                    overflow: hidden;

                    .score-fill {
                      height: 100%;
                      border-radius: $radius-full;
                      transition: width 0.5s $ease-apple;

                      &.score-missing {
                        background: linear-gradient(90deg, $color-missing 0%, lighten($color-missing, 10%) 100%);
                      }

                      &.score-weak {
                        background: linear-gradient(90deg, $color-weak 0%, lighten($color-weak, 10%) 100%);
                      }

                      &.score-good {
                        background: linear-gradient(90deg, $color-good 0%, lighten($color-good, 10%) 100%);
                      }

                      &.score-excellent {
                        background: linear-gradient(90deg, $color-primary 0%, $color-primary-dark 100%);
                      }
                    }
                  }
                }

                .alt-audit-score-decorative {
                  color: $color-decorative;
                  font-weight: $font-weight-medium;
                }
              }

              // Explanation Column
              &.column-explanation {
                .alt-audit-explanation {
                  color: $color-gray-700;
                  font-size: $font-size-sm;
                  line-height: 1.5;
                  display: block;
                  max-width: 100%;
                  white-space: normal;
                  word-wrap: break-word;

                  &:hover {
                    color: $color-gray-900;
                  }
                }

                .alt-audit-no-explanation {
                  color: $color-gray-400;
                  font-size: $font-size-sm;
                }
              }

              // Date Column
              &.column-date {
                color: $color-gray-600;
                font-size: $font-size-sm;
              }
            }
          }
        }

        // Footer with pagination
        tfoot {
          background: linear-gradient(135deg, $color-gray-50 0%, $color-gray-100 100%);
          border-top: 2px solid $color-gray-200;

          tr {
            th,
            td {
              padding: $space-4;
              border: none !important;
            }
          }
        }
      }

      // Tablenav styling (top/bottom controls) - WordPress base + custom classes
      .tablenav {
        padding: $space-4;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
        border-radius: $radius-apple-md;
        margin: $space-4 0;
        backdrop-filter: blur(10px);
        border: 1.5px solid rgba($color-gray-200, 0.5);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: all $duration-fast $ease-apple;
        height: auto;

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

        &.top {
          margin-top: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }

        &.bottom {
          margin-bottom: 0;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }

        .alignleft {
          float: left;
        }

        .alignright {
          float: right;
        }

        // Actions container with prefixed classes
        .actions {
          padding: $space-2 0;

          // Generic WordPress select fallback
          select {
            height: 44px;
            padding: $space-2 $space-8 $space-2 $space-4;
            border: 1.5px solid $color-gray-300;
            border-radius: $radius-apple-md;
            background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 0.95) 100%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23667085' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right $space-3 center;
            background-size: 16px;
            color: $color-gray-900;
            font-size: 15px;
            font-weight: $font-weight-semibold;
            transition: all $duration-fast $ease-apple;
            cursor: pointer;
            appearance: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

            &:hover {
              border-color: $color-primary;
              box-shadow: 0 2px 6px rgba($color-primary, 0.12);
              transform: translateY(-1px);
            }

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

          // Generic WordPress button fallback
          .button {
            height: 44px;
            margin-left: $space-2;
            padding: $space-2 $space-5;
            border: 1.5px solid $color-gray-300;
            border-radius: $radius-apple-md;
            background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 0.95) 100%);
            color: $color-gray-700;
            font-size: 15px;
            font-weight: $font-weight-semibold;
            transition: all $duration-fast $ease-apple;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

            &:hover {
              border-color: $color-primary;
              background: linear-gradient(180deg, rgba($color-primary, 0.08) 0%, rgba($color-primary, 0.04) 100%);
              color: $color-primary;
              box-shadow: 0 2px 6px rgba($color-primary, 0.12);
              transform: translateY(-2px);
            }

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

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

        // Alt Audit prefixed actions container
        .alt-audit-actions {
          display: inline-flex;
          align-items: center;
          gap: $space-3;
          padding: $space-2 0;
        }

        // Bulk actions section
        .bulkactions {
          display: inline-flex;
          align-items: center;
          gap: $space-3;
        }

        // WordPress button overrides for tablenav (Apply, Filter buttons)
        // These highly specific selectors override WordPress core button styles
        .button.alt-audit-button,
        .button.alt-audit-button-secondary,
        .button.alt-audit-button-primary,
        input[type='submit'].alt-audit-button,
        input[type='submit'].alt-audit-button-secondary,
        input[type='submit'].alt-audit-button-primary {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          line-height: 1 !important;
          vertical-align: middle !important;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          text-decoration: none !important;
        }

        // ===== PREMIUM APPLE-STYLE CONTROLS WITH ALT-AUDIT PREFIX =====

        // Custom prefixed select dropdowns
        .alt-audit-select {
          height: 44px;
          padding: $space-2 $space-8 $space-2 $space-4;
          border: 1.5px solid $color-gray-300;
          border-radius: $radius-apple-md;
          background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 0.95) 100%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23667085' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right $space-3 center;
          background-size: 16px;
          color: $color-gray-900;
          font-size: 15px;
          font-weight: $font-weight-semibold;
          line-height: 1.4;
          transition: all $duration-fast $ease-apple;
          cursor: pointer;
          appearance: none;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

          &:hover {
            border-color: $color-primary;
            box-shadow: 0 2px 6px rgba($color-primary, 0.12);
            transform: translateY(-1px);
            background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 1) 100%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23667085' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right $space-3 center;
          }

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

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

          // Specific variants
          &.alt-audit-bulk-select {
            min-width: 180px;
          }

          &.alt-audit-status-filter {
            min-width: 160px;
          }
        }

        // Custom prefixed buttons
        .alt-audit-button {
          height: 44px;
          padding: $space-2 $space-5;
          border: 1.5px solid $color-gray-300;
          border-radius: $radius-apple-md;
          background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 0.95) 100%);
          color: $color-gray-700;
          font-size: 15px;
          font-weight: $font-weight-semibold;
          line-height: 1;
          transition: all $duration-fast $ease-apple;
          cursor: pointer;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
          text-shadow: none;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: $space-2;
          white-space: nowrap;
          vertical-align: middle;

          &:hover {
            border-color: $color-primary;
            background: linear-gradient(180deg, rgba($color-primary, 0.08) 0%, rgba($color-primary, 0.04) 100%);
            color: $color-primary;
            box-shadow: 0 2px 6px rgba($color-primary, 0.12);
            transform: translateY(-2px);
          }

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

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

          // Secondary button variant (Apply, Filter)
          &.alt-audit-button-secondary {
            background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 0.95) 100%);
            border-color: $color-gray-300;
            color: $color-gray-700;

            &:hover {
              border-color: $color-primary;
              background: linear-gradient(180deg, rgba($color-primary, 0.1) 0%, rgba($color-primary, 0.05) 100%);
              color: $color-primary;
              box-shadow: 0 4px 8px rgba($color-primary, 0.15);
            }
          }

          // Primary button variant (Search button)
          &.alt-audit-button-primary {
            background: linear-gradient(135deg, $color-primary 0%, darken($color-primary, 8%) 100%);
            color: #fff;
            border-color: $color-primary;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 6px rgba($color-primary, 0.25);

            &:hover {
              background: linear-gradient(135deg, darken($color-primary, 5%) 0%, darken($color-primary, 12%) 100%);
              border-color: darken($color-primary, 8%);
              box-shadow: 0 4px 12px rgba($color-primary, 0.35);
              color: #fff;
            }

            &:active {
              box-shadow: 0 1px 4px rgba($color-primary, 0.3);
            }

            &:focus {
              box-shadow: 0 0 0 3px rgba($color-primary, 0.25);
            }
          }

          // Disabled state
          &:disabled,
          &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
          }
        }

        // WordPress button overrides for proper alignment
        // These highly specific selectors override WordPress core button styles
        .button.alt-audit-button,
        .button.alt-audit-button-secondary,
        .button.alt-audit-button-primary,
        input[type='submit'].alt-audit-button,
        input[type='submit'].alt-audit-button-secondary,
        input[type='submit'].alt-audit-button-primary {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          line-height: 1 !important;
          vertical-align: middle !important;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          text-decoration: none !important;
        }

        // Additional specificity for secondary buttons (Apply, Filter)
        .alt-audit-button-secondary {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          line-height: 1 !important;
          vertical-align: middle !important;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }

        // Pagination
        .tablenav-pages {
          float: right;
          margin: $space-2 0;

          .displaying-num {
            margin-right: $space-4;
            color: $color-gray-600;
            font-size: $font-size-sm;
          }

          .pagination-links {
            display: inline-flex;
            align-items: center;
            gap: $space-1;

            .button,
            .page-numbers {
              min-width: 32px;
              height: 32px;
              padding: $space-1 $space-2;
              border: 1px solid $color-gray-300;
              border-radius: $radius-sm;
              background: $color-background;
              color: $color-gray-700;
              font-size: $font-size-sm;
              text-align: center;
              text-decoration: none;
              transition: all 0.2s $ease-apple;
              cursor: pointer;
              display: inline-flex !important;
              align-items: center !important;
              justify-content: center !important;
              line-height: 1;
              vertical-align: middle;

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

              &.current {
                border-color: $color-primary;
                background: $color-primary;
                color: white;
                font-weight: $font-weight-bold;
                box-shadow: 0 2px 8px rgba($color-primary, 0.3);
              }

              &.disabled {
                opacity: 0.5;
                cursor: not-allowed;
              }
            }
          }
        }

        // Clear fix
        &::after {
          content: '';
          display: table;
          clear: both;
        }
      }

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

      .alt-audit-images-form {
        // Search box horizontal layout (input + button in one row)
        .search-box {
          display: flex !important;
          align-items: center !important;
          gap: $space-3 !important;
          margin-bottom: $space-4;

          p {
            display: flex !important;
            align-items: center !important;
            gap: $space-3 !important;
            margin: 0 !important;
            flex: 1 !important;
          }

          label {
            display: flex !important;
            align-items: center !important;
            gap: $space-2 !important;
            flex: 1 !important;
            margin: 0 !important;

            .screen-reader-text {
              position: absolute;
              width: 1px;
              height: 1px;
              margin: -1px;
              padding: 0;
              border: 0;
              overflow: hidden;
              clip: rect(0, 0, 0, 0);
              word-wrap: normal;
            }
          }

          // Custom prefixed search input
          .alt-audit-search-input,
          input[type='search'],
          input[type='text'] {
            flex: 1 !important;
            min-width: 0 !important;
            height: 44px !important;
            margin: 0 !important;
            padding: $space-3 $space-4 !important;
            border: 1.5px solid $color-gray-300 !important;
            border-radius: $radius-apple-md !important;
            background: linear-gradient(180deg, #fff 0%, rgba(249, 250, 251, 0.95) 100%) !important;
            color: $color-gray-900 !important;
            font-size: 15px !important;
            font-weight: $font-weight-medium !important;
            line-height: 1.4;
            transition: all $duration-fast $ease-apple;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

            &:hover {
              border-color: $color-gray-400 !important;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
            }

            &:focus {
              border-color: $color-primary !important;
              box-shadow: 0 0 0 3px rgba($color-primary, 0.15) !important;
              outline: none;
              transform: translateY(-1px);
            }

            &::placeholder {
              color: $color-gray-400;
              font-weight: $font-weight-normal;
            }
          }

          // Custom prefixed buttons (Search button with primary styling)
          .alt-audit-button-primary,
          button.alt-audit-button,
          .button.alt-audit-button,
          input[type='submit'].alt-audit-button {
            flex-shrink: 0 !important;
            height: 44px !important;
            margin: 0 !important;
            padding: 0 $space-6 !important;
            border: 1.5px solid $color-primary !important;
            border-radius: $radius-apple-md !important;
            background: linear-gradient(135deg, $color-primary 0%, darken($color-primary, 8%) 100%) !important;
            color: white !important;
            font-size: 15px !important;
            font-weight: $font-weight-semibold !important;
            line-height: 1 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 6px rgba($color-primary, 0.25);
            transition: all $duration-fast $ease-apple;
            cursor: pointer;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            vertical-align: middle !important;

            &:hover {
              background: linear-gradient(135deg, darken($color-primary, 5%) 0%, darken($color-primary, 12%) 100%) !important;
              border-color: darken($color-primary, 8%) !important;
              box-shadow: 0 4px 12px rgba($color-primary, 0.35);
              transform: translateY(-2px);
            }

            &:active {
              transform: translateY(0);
              box-shadow: 0 1px 4px rgba($color-primary, 0.3);
            }

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

          // Generic fallback for buttons without custom classes
          button:not(.alt-audit-button),
          .button:not(.alt-audit-button),
          input[type='submit']:not(.alt-audit-button) {
            flex-shrink: 0 !important;
            height: 44px !important;
            margin: 0 !important;
            padding: $space-3 $space-6 !important;
            border: none !important;
            border-radius: $radius-apple-md !important;
            background: $color-primary !important;
            color: white !important;
            font-size: 15px !important;
            font-weight: $font-weight-semibold !important;
            line-height: 1;
            transition: all $duration-fast $ease-apple;
            cursor: pointer;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            vertical-align: middle;

            &:hover {
              background: $color-primary-dark !important;
              box-shadow: $shadow-md;
              transform: translateY(-2px);
            }

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

            &:focus {
              box-shadow: $shadow-apple-focus !important;
              outline: none;
            }
          }

          // Responsive behavior
          @include media-down(sm) {
            flex-direction: column !important;
            align-items: stretch !important;

            p {
              flex-direction: column !important;
              align-items: stretch !important;
            }

            label {
              width: 100% !important;
            }

            input[type='search'],
            input[type='text'] {
              width: 100% !important;
            }

            button,
            .button,
            input[type='submit'] {
              width: 100% !important;
            }
          }
        }
      }
    }

    // ===== STATISTICS SECTION - APPLE STYLE =====
    .alt-audit-statistics-section {
      margin: $space-8 0;
      animation: slideInUp 0.6s $ease-apple;

      .alt-audit-stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: $space-6;

        .alt-audit-stat-card {
          @include apple-card($space-6);

          display: flex;
          align-items: center;
          gap: $space-4;
          transition: all $duration-normal $ease-apple;
          animation: scaleIn 0.5s $ease-apple both;

          @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
              animation-delay: #{0.05 + ($i * 0.05)}s;
            }
          }

          &:hover {
            box-shadow: $shadow-lg;
            transform: translateY(-4px) scale(1.02);

            .stat-icon {
              transform: scale(1.1) rotate(5deg);
            }
          }

          .stat-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: $radius-apple-lg;
            background: linear-gradient(135deg, rgba($color-primary, 0.1) 0%, rgba($color-primary, 0.05) 100%);
            color: $color-primary;
            transition: all $duration-normal $ease-apple;
            flex-shrink: 0;

            .dashicons {
              font-size: 28px;
              width: 28px;
              height: 28px;
            }
          }

          .stat-content {
            flex: 1;
            min-width: 0;

            .stat-label {
              margin-bottom: $space-2;
              color: $color-gray-600;
              font-size: $font-size-sm;
              font-weight: $font-weight-medium;
            }

            .stat-value {
              margin-bottom: 0;
              color: $color-gray-900;
              font-size: $font-size-4xl;
              font-weight: $font-weight-bold;
              line-height: 1;

              .stat-unit {
                margin-left: $space-1;
                color: $color-gray-400;
                font-size: $font-size-lg;
                font-weight: $font-weight-medium;
              }
            }

            .stat-progress {
              margin-top: $space-3;

              .progress-bar {
                width: 100%;
                height: 8px;
                border-radius: $radius-full;
                background: $color-gray-100;
                overflow: hidden;

                .progress-fill {
                  height: 100%;
                  background: linear-gradient(90deg, $color-primary 0%, $color-primary-dark 100%);
                  border-radius: $radius-full;
                  transition: width 0.5s $ease-apple;
                }
              }
            }

            .status-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
              gap: $space-3;
              margin-top: $space-3;

              .status-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: $space-3 $space-2;
                border-radius: $radius-apple-sm;
                background: $color-gray-50;
                transition: all $duration-fast $ease-apple;

                &:hover {
                  transform: scale(1.05);
                }

                .status-count {
                  margin-bottom: $space-1;
                  color: inherit;
                  font-size: $font-size-xl;
                  font-weight: $font-weight-bold;
                }

                .status-label {
                  color: inherit;
                  font-size: $font-size-xs;
                  font-weight: $font-weight-semibold;
                  letter-spacing: 0.5px;
                  text-transform: uppercase;
                }

                &.status-missing {
                  background: rgba($color-missing, 0.1);

                  .status-count,
                  .status-label {
                    color: $color-missing;
                  }
                }

                &.status-weak {
                  background: rgba($color-weak, 0.1);

                  .status-count,
                  .status-label {
                    color: $color-weak;
                  }
                }

                &.status-good {
                  background: rgba($color-good, 0.1);

                  .status-count,
                  .status-label {
                    color: $color-good;
                  }
                }

                &.status-excellent {
                  background: rgba($color-excellent, 0.1);

                  .status-count,
                  .status-label {
                    color: $color-excellent;
                  }
                }

                &.status-decorative {
                  background: rgba($color-decorative, 0.1);

                  .status-count,
                  .status-label {
                    color: $color-decorative;
                  }
                }
              }
            }
          }

          // Overall Score Card
          &.alt-audit-overall-score {
            .stat-ring-container {
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;

              .stat-ring {
                display: block;

                .ring-background {
                  stroke: $color-gray-200;
                }

                .ring-progress {
                  stroke: $color-success;
                  stroke-dasharray: 326.73; // Circumference: 2 * π * 52
                  stroke-dashoffset: calc(326.73 - (326.73 * var(--score) / 100));
                  transform: rotate(-90deg);
                  transform-origin: center;
                  transition: stroke-dashoffset 1s $ease-apple;
                }
              }

              .stat-ring-value {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .ring-score {
                  color: $color-gray-900;
                  font-size: $font-size-3xl;
                  font-weight: $font-weight-bold;
                  line-height: 1;
                }

                .ring-unit {
                  margin-top: 2px;
                  color: $color-gray-400;
                  font-size: $font-size-xs;
                  font-weight: $font-weight-medium;
                }
              }
            }

            .stat-content {
              flex: 1;
              min-width: 0;

              .stat-label {
                margin-bottom: $space-1;
                color: $color-gray-900;
                font-size: $font-size-base;
                font-weight: $font-weight-semibold;
              }

              .stat-description {
                color: $color-gray-600;
                font-size: $font-size-sm;
                font-weight: $font-weight-medium;
              }
            }

            &:hover {
              .stat-ring {
                transform: scale(1.05);
                transition: transform $duration-normal $ease-apple;
              }
            }
          }

          // Status Breakdown Card
          &.alt-audit-status-breakdown {
            .stat-icon {
              background: linear-gradient(135deg, rgba($color-info, 0.1) 0%, rgba($color-info, 0.05) 100%);
              color: $color-info;
            }
          }
        }
      }

      @include media-down(md) {
        .alt-audit-stats-container {
          grid-template-columns: 1fr;
        }
      }
    }
  }

  // ===== HIDE DECORATIVE STATUS UI =====
  // Decorative status removed - simplified status system
  .status-item.status-decorative,
  .alt-audit-status-decorative,
  .alt-audit-score-decorative,
  .threshold-card.decorative,
  .quality-decorative,
  [class*="decorative"] {
    display: none !important;
  }
} // End .alt-audit-section wrapper

// ===== LIGHTBOX MODAL =====
.alt-audit-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  align-items: center;
  justify-content: center;

  &.active {
    display: flex !important;
  }
}

.alt-audit-lightbox-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.alt-audit-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 80vw;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.alt-audit-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #374151;
  }

  &:hover {
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    .dashicons {
      color: #111827;
    }
  }
}

.alt-audit-lightbox-image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f9fafb;
  min-height: 200px;
  max-height: calc(85vh - 100px);
  overflow: hidden;
}

.alt-audit-lightbox-image {
  max-width: 800px;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.alt-audit-lightbox-info {
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.alt-audit-lightbox-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

.alt-audit-lightbox-alt {
  margin: 0;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.4;

  strong {
    color: #111827;
    font-weight: 600;
  }
}


// Prevent body scroll when lightbox is open
body.alt-audit-lightbox-open {
  overflow: hidden;
}

.alt-audit-section.alt-audit-audit .audit-table-section .wp-list-table thead tr th.column-quality_score, .alt-audit-section.alt-audit-audit .audit-table-section .wp-list-table thead tr td.column-quality_score, .alt-audit-section.alt-audit-audit .audit-table-section .widefat thead tr th.column-quality_score, .alt-audit-section.alt-audit-audit .audit-table-section .widefat thead tr td.column-quality_score {
    width: 25%;
}
.alt-audit-section.alt-audit-audit .audit-table-section .wp-list-table thead tr th.column-status, .alt-audit-section.alt-audit-audit .audit-table-section .wp-list-table thead tr td.column-status, .alt-audit-section.alt-audit-audit .audit-table-section .widefat thead tr th.column-status, .alt-audit-section.alt-audit-audit .audit-table-section .widefat thead tr td.column-status

 {
    width: 15%;
}
.alt-audit-section
th.sortable a, th.sorted a

 {
    display: flex;
    overflow: hidden;
    padding: 8px;
}

// Enhanced sorting indicator styles for separate clickable arrows
.alt-audit-section {
    .sorting-indicators {
        display: inline-flex;
        flex-direction: column;
        gap: 1px;
        margin-left: 4px;
    }

    .sorting-indicator {
        cursor: pointer;
        padding: 2px;
        opacity: 0.3;
        transition: opacity 0.2s ease, transform 0.1s ease;
        line-height: 1;

        &:hover {
            opacity: 1;
            transform: scale(1.2);
        }
    }

    // Highlight the active sort direction
    th.asc .sorting-indicator.asc,
    th.desc .sorting-indicator.desc {
        opacity: 1;
        color: #2271b1;
    }

    // Additional visual feedback for inactive indicator
    th.asc .sorting-indicator.desc,
    th.desc .sorting-indicator.asc {
        opacity: 0.2;

        &:hover {
            opacity: 0.6;
        }
    }
}