// =============================================================================
// DASHBOARD PAGE STYLES - PREMIUM APPLE-INSPIRED DESIGN
// =============================================================================

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

// Wrap all dashboard styles with .alt-audit-section for CSS isolation
.alt-audit-section {
  // Dashboard Container
  &.alt-audit-dashboard {
    gap: 32px;
    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 - PREMIUM ENHANCED =====
    .alt-audit-header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 32px;
      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%);
      overflow: hidden;
      box-shadow: $shadow-apple-card;
      animation: fadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      backdrop-filter: blur(20px);

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

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

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

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

    .header-content {
      position: relative;
      flex: 1;

      h1 {
        margin: 0 0 $space-2;
        background: linear-gradient(135deg, $color-gray-900 0%, $color-primary 100%);
        background-size: 200% 200%;
        font-size: $font-size-4xl;
        font-weight: $font-weight-bold;
        letter-spacing: -0.025em;
        animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    .alt-audit-subtitle {
      margin: 0;
      color: $color-gray-600;
      font-size: $font-size-lg;
      font-weight: $font-weight-normal;
      animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
    }

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

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

    .header-actions {
      position: relative;
      display: flex;
      align-items: center;
      gap: $space-3;
      animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
    }

    // Button icon styles (button classes are defined in _buttons.scss)
    .btn-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

      .alt-audit-btn-primary:hover &,
      .alt-audit-btn-secondary:hover & {
        transform: scale(1.1);
      }
    }

    // ===== STATUS OVERVIEW CARDS - PREMIUM ENHANCED =====
    .status-overview-section {
      margin-bottom: $space-8;
      animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;

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

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

    .status-cards-grid {
      display: grid;
      gap: $space-6;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .status-card {
      @include apple-card;

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

      @keyframes cardEntrance {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.95);
        }

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

      // Premium top border with gradient
      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        border-radius: $radius-apple-xl $radius-apple-xl 0 0;
        background-size: 200% 100%;
        animation: gradientShift 3s ease infinite;
      }

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

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

      &.card-missing::before {
        background: linear-gradient(135deg, $color-error 0%, $color-error-light 50%, $color-error 100%);
      }

      &.card-decorative::before {
        background: linear-gradient(135deg, $color-success 0%, $color-success-light 50%, $color-success 100%);
      }

      &.card-weak::before {
        background: linear-gradient(135deg, $color-warning 0%, $color-warning-light 50%, $color-warning 100%);
      }

      &.card-good::before {
        background: linear-gradient(135deg, $color-primary 0%, $color-primary-light 50%, $color-primary 100%);
      }

      &.card-excellent::before {
        background: linear-gradient(135deg, $color-purple 0%, $color-purple-light 50%, $color-purple 100%);
      }

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

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

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

      &:active {
        transform: translateY(-2px) scale(1.01);
      }
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $space-4;
    }

    .card-icon {
      width: 40px;
      height: 40px;
      border-radius: $radius-apple-sm;

      @include flex-center;

      background: $color-gray-100;
      color: $color-gray-600;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .card-decorative .card-icon {
      background: rgba($color-success, 0.1);
      color: $color-success;
    }

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

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

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

    .card-status {
      @include flex-start;

      gap: $space-1;
    }

    .status-indicator {
      width: 8px;
      height: 8px;
      border-radius: $radius-full;
      background: $color-gray-400;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

      &.critical {
        background: $color-error;
        box-shadow: 0 0 6px rgba($color-error, 0.3);
        animation: pulseCritical 2s ease-in-out infinite;
      }

      &.compliant {
        background: $color-success;
        box-shadow: 0 0 6px rgba($color-success, 0.3);
        animation: pulseSuccess 2s ease-in-out infinite;
      }

      &.needs-fix {
        background: $color-warning;
        box-shadow: 0 0 6px rgba($color-warning, 0.3);
        animation: pulseWarning 2s ease-in-out infinite;
      }

      &.acceptable {
        background: $color-primary;
        box-shadow: 0 0 6px rgba($color-primary, 0.3);
        animation: pulsePrimary 2s ease-in-out infinite;
      }

      &.perfect {
        background: $color-purple;
        box-shadow: 0 0 6px rgba($color-purple, 0.3);
        animation: pulsePurple 2s ease-in-out infinite;
      }

      @keyframes pulseCritical {
        0%,
        100% {
          box-shadow: 0 0 6px rgba($color-error, 0.3);
        }

        50% {
          box-shadow: 0 0 12px rgba($color-error, 0.6);
        }
      }

      @keyframes pulseSuccess {
        0%,
        100% {
          box-shadow: 0 0 6px rgba($color-success, 0.3);
        }

        50% {
          box-shadow: 0 0 12px rgba($color-success, 0.6);
        }
      }

      @keyframes pulseWarning {
        0%,
        100% {
          box-shadow: 0 0 6px rgba($color-warning, 0.3);
        }

        50% {
          box-shadow: 0 0 12px rgba($color-warning, 0.6);
        }
      }

      @keyframes pulsePrimary {
        0%,
        100% {
          box-shadow: 0 0 6px rgba($color-primary, 0.3);
        }

        50% {
          box-shadow: 0 0 12px rgba($color-primary, 0.6);
        }
      }

      @keyframes pulsePurple {
        0%,
        100% {
          box-shadow: 0 0 6px rgba($color-purple, 0.3);
        }

        50% {
          box-shadow: 0 0 12px rgba($color-purple, 0.6);
        }
      }
    }

    .status-label {
      @include body-small;

      color: $color-gray-600;
      font-weight: $font-weight-semibold;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .card-content {
      text-align: left;
    }

    .card-number {
      @include heading-medium;

      margin-bottom: $space-1;
      font-size: $font-size-3xl;
      line-height: 1.2;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      font-variant-numeric: tabular-nums;
    }

    .card-title {
      @include body-medium;

      margin-bottom: $space-1;
      color: $color-gray-800;
      font-weight: $font-weight-semibold;
    }

    .card-subtitle {
      @include body-small;

      color: $color-gray-600;
      font-weight: $font-weight-normal;
    }

    // ===== MIDDLE SECTION =====
    .middle-section {
      display: grid;
      gap: $space-8;
      grid-template-columns: 1fr 1fr;
      margin-bottom: $space-8;
    }

    // ===== QUALITY SCORE CARD - PREMIUM ENHANCED =====
    .quality-score-card {
      @include apple-card($space-8);

      position: relative;
      overflow: hidden;
      animation: cardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        border-radius: $radius-apple-xl $radius-apple-xl 0 0;
        background: linear-gradient(135deg, $color-primary 0%, $color-primary-light 50%, $color-primary 100%);
        background-size: 200% 100%;
        animation: gradientShift 3s ease infinite;
      }
    }

    .score-header {
      margin-bottom: $space-6;
    }

    .score-title {
      @include heading-small;

      margin: 0;
    }

    .score-content {
      @include flex-start;

      gap: $space-8;
    }

    .score-circle-container {
      animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
      flex-shrink: 0;

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

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

    .score-circle {
      position: relative;
      width: 120px;
      height: 120px;
      border-radius: $radius-full;
      background: conic-gradient(
        $color-primary 0deg,
        $color-primary calc(var(--score-percentage, 78) * 3.6deg),
        $color-gray-200 calc(var(--score-percentage, 78) * 3.6deg),
        $color-gray-200 360deg
      );
      box-shadow: $shadow-lg;
      animation:
        scoreAnimation 1.5s cubic-bezier(0.16, 1, 0.3, 1),
        scoreRotate 4s ease-in-out infinite;

      @include flex-center;

      @keyframes scoreAnimation {
        from {
          background: conic-gradient($color-gray-200 0deg, $color-gray-200 360deg);
        }
      }

      @keyframes scoreRotate {
        0%,
        100% {
          filter: hue-rotate(0deg);
        }

        50% {
          filter: hue-rotate(5deg);
        }
      }

      &:hover {
        box-shadow: 0 8px 24px rgba($color-primary, 0.25);
        transform: scale(1.05);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
    }

    .score-inner {
      flex-direction: column;
      width: 92px;
      height: 92px;
      border-radius: $radius-full;
      background: $color-background;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

      @include flex-center;
    }

    .score-percentage {
      @include heading-medium;

      line-height: 1;
      animation: countUp 1s ease-out 1s both;

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

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

    .score-label {
      @include body-small;

      color: $color-gray-600;
      font-weight: $font-weight-medium;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .score-details {
      flex: 1;

      @include flex-column;

      gap: $space-4;
    }

    .score-detail-item {
      @include flex-between;

      padding: $space-3 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      border-bottom: 1px solid $color-gray-200;
      animation-delay: calc(1.1s + var(--item-index, 0) * 0.1s);

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

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

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

      &:hover {
        margin-right: -$space-2;
        margin-left: -$space-2;
        padding-right: $space-2;
        padding-left: $space-2;
        border-radius: $radius-apple-sm;
        background: rgba($color-primary, 0.03);
      }
    }

    .detail-label {
      @include body-small;

      color: $color-gray-600;
    }

    .detail-value {
      @include body-small;

      color: $color-gray-900;
      font-weight: $font-weight-semibold;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .wcag-level-aaa {
      color: $color-success;
      animation: pulseSuccess 2s ease-in-out infinite;
    }

    .wcag-level-aa {
      color: $color-primary;
      animation: pulsePrimary 2s ease-in-out infinite;
    }

    .wcag-level-a {
      color: $color-warning;
    }

    // ===== QUICK ACTIONS CARD - PREMIUM ENHANCED =====
    .quick-actions-card {
      @include apple-card($space-8);

      position: relative;
      overflow: hidden;
      animation: cardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        border-radius: $radius-apple-xl $radius-apple-xl 0 0;
        background: linear-gradient(135deg, $color-success 0%, $color-success-light 50%, $color-success 100%);
        background-size: 200% 100%;
        animation: gradientShift 3s ease infinite;
      }
    }

    .actions-header {
      margin-bottom: $space-6;
    }

    .actions-title {
      @include heading-small;

      margin: 0;
    }

    .actions-grid {
      display: grid;
      gap: $space-3;
      grid-template-columns: 1fr 1fr;
    }

    .alt-audit-action-btn {
      // Base button styles centralized in _buttons.scss
      // Page-specific animation timing override
      animation: actionEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(1s + var(--action-index, 0) * 0.1s);

      @keyframes actionEntrance {
        from {
          opacity: 0;
          transform: scale(0.9);
        }

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

    .action-icon {
      width: 24px;
      height: 24px;

      @include flex-center;

      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .action-label {
      line-height: 1.4;
      text-align: center;
    }

    // ===== BOTTOM SECTION =====
    .bottom-section {
      display: grid;
      gap: $space-8;
      grid-template-columns: 1fr 1fr;
    }

    // ===== RECENT ACTIVITY CARD - PREMIUM ENHANCED =====
    .recent-activity-card {
      @include apple-card($space-8);

      position: relative;
      overflow: hidden;
      animation: cardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        border-radius: $radius-apple-xl $radius-apple-xl 0 0;
        background: linear-gradient(135deg, $color-purple 0%, $color-purple-light 50%, $color-purple 100%);
        background-size: 200% 100%;
        animation: gradientShift 3s ease infinite;
      }
    }

    .activity-header {
      @include flex-between;

      margin-bottom: $space-6;
    }

    .activity-title {
      @include heading-small;

      margin: 0;
    }

    .view-all-link {
      @include flex-start;

      gap: $space-1;
      color: $color-primary;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

      &:hover {
        gap: $space-2;
        color: $color-primary-dark;

        svg {
          transform: translateX(2px);
        }
      }

      svg {
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
    }

    .activity-list {
      @include flex-column;

      gap: $space-4;
    }

    .activity-item {
      @include flex-start;

      gap: $space-3;
      padding: $space-3;
      border-radius: $radius-apple-sm;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      animation: slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(1.2s + var(--activity-index, 0) * 0.1s);

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

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

      &:hover {
        background: $color-gray-50;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transform: translateX(4px);

        .activity-icon {
          transform: scale(1.1) rotate(10deg);
        }
      }
    }

    .activity-icon-container {
      flex-shrink: 0;
    }

    .activity-icon {
      width: 32px;
      height: 32px;
      border-radius: $radius-full;
      background: rgba($color-success, 0.1);
      color: $color-success;

      @include flex-center;

      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .activity-details {
      flex: 1;
      min-width: 0;
    }

    .activity-action {
      @include body-small;

      margin-bottom: $space-1;
      color: $color-gray-900;
      font-weight: $font-weight-medium;
    }

    .activity-target {
      color: $color-primary;
      font-weight: $font-weight-semibold;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

      .activity-item:hover & {
        color: $color-primary-dark;
      }
    }

    .activity-time {
      @include body-small;

      color: $color-gray-600;
      font-weight: $font-weight-normal;
    }

    .activity-empty,
    .issues-empty {
      @include flex-center;

      flex-direction: column;
      gap: $space-4;
      padding: $space-8 $space-4;
      text-align: center;
      animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .empty-icon {
      width: 48px;
      height: 48px;
      border-radius: $radius-full;
      background: $color-gray-100;
      color: $color-gray-400;

      @include flex-center;

      animation: bounce 2s ease-in-out infinite;

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

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

      &.success {
        background: rgba($color-success, 0.1);
        color: $color-success;
        animation:
          bounce 2s ease-in-out infinite,
          pulseSuccess 2s ease-in-out infinite;
      }
    }

    .empty-text p {
      @include body-medium;

      margin: 0 0 $space-1;
      color: $color-gray-700;
      font-weight: $font-weight-medium;
      animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    }

    .empty-text span {
      @include body-small;

      color: $color-gray-600;
      font-weight: $font-weight-normal;
      animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
    }

    // ===== PRIORITY ISSUES CARD - PREMIUM ENHANCED =====
    .priority-issues-card {
      @include apple-card($space-8);

      position: relative;
      overflow: hidden;
      animation: cardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1s both;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        border-radius: $radius-apple-xl $radius-apple-xl 0 0;
        background: linear-gradient(135deg, $color-warning 0%, $color-warning-light 50%, $color-warning 100%);
        background-size: 200% 100%;
        animation: gradientShift 3s ease infinite;
      }
    }

    .issues-header {
      margin-bottom: $space-6;
    }

    .issues-title {
      @include heading-small;

      margin: 0;
    }

    .issues-list {
      @include flex-column;

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

    .issue-item {
      @include flex-start;

      gap: $space-3;
      padding: $space-4;
      border: 1px solid transparent;
      border-radius: $radius-apple-sm;
      background: $color-gray-50;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(1.3s + var(--issue-index, 0) * 0.1s);

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

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

      &.issue-critical {
        border-color: rgba($color-error, 0.1);
        background: rgba($color-error, 0.05);

        .issue-icon {
          animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
        }

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

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

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

      &.issue-warning {
        border-color: rgba($color-warning, 0.1);
        background: rgba($color-warning, 0.05);
      }

      &.issue-info {
        border-color: rgba($color-primary, 0.1);
        background: rgba($color-primary, 0.05);
      }

      &:hover {
        border-color: currentcolor;
        background: $color-background;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        transform: translateX(-4px);

        &.issue-critical {
          border-color: rgba($color-error, 0.3);
        }

        &.issue-warning {
          border-color: rgba($color-warning, 0.3);
        }

        &.issue-info {
          border-color: rgba($color-primary, 0.3);
        }

        .issue-icon {
          transform: scale(1.15) rotate(-5deg);
        }
      }
    }

    .issue-icon {
      width: 24px;
      height: 24px;
      border-radius: $radius-apple-sm;
      background: $color-background;
      color: $color-gray-600;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      flex-shrink: 0;

      @include flex-center;
    }

    .issue-critical .issue-icon {
      background: rgba($color-error, 0.1);
      color: $color-error;
      animation: pulseCritical 2s ease-in-out infinite;
    }

    .issue-warning .issue-icon {
      background: rgba($color-warning, 0.1);
      color: $color-warning;
    }

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

    .issue-details {
      flex: 1;
      min-width: 0;
    }

    .issue-title {
      @include body-small;

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

    .issue-description {
      @include body-small;

      color: $color-gray-600;
      font-weight: $font-weight-normal;
    }

    .issues-action {
      margin-top: $space-6;
    }

    // ===== RESPONSIVE DESIGN =====
    @include media-down(lg) {
      .middle-section,
      .bottom-section {
        gap: $space-6;
        grid-template-columns: 1fr;
      }

      .score-content {
        flex-direction: column;
        gap: $space-6;
        text-align: center;
      }

      .actions-grid {
        gap: $space-2;
        grid-template-columns: 1fr;
      }
    }

    @include media-down(md) {
      .alt-audit-header {
        flex-direction: column;
        align-items: stretch;
        gap: $space-6;
        padding: $space-6;
      }

      .header-content h1 {
        font-size: $font-size-3xl;
      }

      .alt-audit-subtitle {
        font-size: $font-size-base;
      }

      .status-cards-grid {
        gap: $space-4;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }

      .status-card,
      .quality-score-card,
      .quick-actions-card,
      .recent-activity-card,
      .priority-issues-card {
        padding: $space-6;
      }

      .score-circle {
        width: 100px;
        height: 100px;
      }

      .score-inner {
        width: 76px;
        height: 76px;
      }

      .score-percentage {
        font-size: $font-size-xl;
      }
    }

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

      .header-content h1 {
        font-size: $font-size-2xl;
      }

      .alt-audit-header {
        margin-bottom: $space-6;
        padding: $space-4;
      }

      .status-card,
      .quality-score-card,
      .quick-actions-card,
      .recent-activity-card,
      .priority-issues-card {
        padding: $space-4;
      }

      .middle-section,
      .bottom-section {
        gap: $space-4;
      }

      .alt-audit-action-btn {
        min-height: 44px;
        padding: $space-4 $space-3;
      }

      .alt-audit-btn-primary,
      .alt-audit-btn-secondary {
        min-height: 44px;
        padding: $space-4 $space-6;
      }
    }

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

      .status-indicator,
      .wcag-level-aaa,
      .wcag-level-aa,
      .empty-icon,
      .issue-critical .issue-icon {
        animation: none !important;
      }
    }

    @include dark-mode {
      &.alt-audit-dashboard {
        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%);

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

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

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

      .status-card,
      .quality-score-card,
      .quick-actions-card,
      .recent-activity-card,
      .priority-issues-card {
        border-color: $dark-border;
        background: $dark-surface;

        &:hover {
          background: color.adjust($dark-surface, $lightness: 2%);
        }
      }

      .card-icon {
        background: rgba($dark-surface, 0.8);
      }

      .card-number,
      .card-title,
      .score-title,
      .actions-title,
      .activity-title,
      .issues-title {
        color: $dark-text-primary;
      }

      .card-subtitle,
      .detail-label,
      .activity-time,
      .issue-description {
        color: $dark-text-secondary;
      }

      .score-circle {
        background: conic-gradient(
          $color-primary 0deg,
          $color-primary calc(var(--score-percentage, 78) * 3.6deg),
          rgba($dark-border, 0.5) calc(var(--score-percentage, 78) * 3.6deg),
          rgba($dark-border, 0.5) 360deg
        );
      }

      .score-inner {
        background: $dark-surface;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .score-detail-item {
        border-bottom-color: $dark-border;

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

      .alt-audit-action-btn {
        border-color: $dark-border;
        background: rgba($dark-surface, 0.5);
        color: $dark-text-primary;

        &:hover {
          border-color: color.adjust($dark-border, $lightness: 10%);
          background: rgba($dark-surface, 0.8);
        }

        &.action-primary {
          border-color: rgba($color-primary, 0.3);
          background: rgba($color-primary, 0.15);
          color: $color-primary-light;

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

      .activity-item,
      .issue-item {
        background: rgba($dark-surface, 0.5);

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

      .empty-icon {
        background: rgba($dark-surface, 0.8);
        color: $dark-text-secondary;

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

      .empty-text p {
        color: $dark-text-primary;
      }

      .empty-text span {
        color: $dark-text-secondary;
      }
    }

    // ===== FOCUS STYLES - PREMIUM ENHANCED =====
    .alt-audit-btn-primary:focus,
    .alt-audit-btn-secondary:focus,
    .alt-audit-action-btn:focus,
    .view-all-link:focus {
      position: relative;
      box-shadow: $shadow-apple-focus;
      outline: none;

      &::after {
        content: '';
        position: absolute;
        border: 2px solid $color-primary;
        border-radius: inherit;
        animation: focusPulse 1.5s ease-in-out infinite;
        inset: -4px;
        pointer-events: none;
      }

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

        50% {
          opacity: 0.7;
          transform: scale(1.02);
        }
      }
    }

    .status-card:focus-within,
    .quality-score-card:focus-within,
    .quick-actions-card:focus-within,
    .recent-activity-card:focus-within,
    .priority-issues-card:focus-within {
      outline: 2px solid $color-primary;
      outline-offset: 2px;
    }

    // ===== HIGH CONTRAST MODE =====
    @include high-contrast {
      .status-card,
      .quality-score-card,
      .quick-actions-card,
      .recent-activity-card,
      .priority-issues-card {
        border: 2px solid $color-gray-400;
      }

      .alt-audit-btn-primary,
      .alt-audit-btn-secondary,
      .alt-audit-action-btn {
        border: 2px solid currentcolor;
      }

      .status-indicator {
        border: 2px solid currentcolor;
      }
    }
  }
} // End .alt-audit-section wrapper