/**
 * iOS-Specific CSS Fixes
 * Ensures consistent rendering between iOS Safari and Android Chrome
 * Specifically addresses iPhone 12 Pro Max rendering issues
 */

/* ========================================
   VIEWPORT & LAYOUT FIXES
   ======================================== */

/* Fix iOS Safari 100vh issue */
@supports (-webkit-touch-callout: none) {
  .dashboard-page-wrapper,
  .main-content {
    min-height: -webkit-fill-available;
  }
}

/* ========================================
   STATS GRID - MOBILE FIX
   Critical fix for iPhone stats layout
   ======================================== */

@media (max-width: 767px) {
  /* Override Bootstrap's col classes on iOS */
  @supports (-webkit-touch-callout: none) {
    .row.gy-4 {
      display: -webkit-box !important;
      display: -webkit-flex !important;
      display: flex !important;
      -webkit-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
      margin-left: -8px !important;
      margin-right: -8px !important;
      gap: 0 !important;
      row-gap: 16px !important;
    }

    .row.gy-4 > [class*="col-"] {
      -webkit-box-flex: 0 !important;
      -webkit-flex: 0 0 auto !important;
      flex: 0 0 auto !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    /* Stats cards - 2 columns on mobile */
    .row.gy-4 > .col-lg-3,
    .row.gy-4 > .col-md-6,
    .row.gy-4 > .col-sm-6 {
      width: 50% !important;
      -webkit-box-flex: 0 !important;
      -webkit-flex: 0 0 50% !important;
      flex: 0 0 50% !important;
      max-width: 50% !important;
    }

    /* Stat card styling */
    .stat-card-enhanced {
      height: 100% !important;
      min-height: 120px !important;
      display: -webkit-box !important;
      display: -webkit-flex !important;
      display: flex !important;
      -webkit-box-orient: vertical !important;
      -webkit-box-direction: normal !important;
      -webkit-flex-direction: column !important;
      flex-direction: column !important;
      -webkit-box-pack: justify !important;
      -webkit-justify-content: space-between !important;
      justify-content: space-between !important;
    }
  }
}

/* ========================================
   GRID LAYOUTS - iOS Safari Fix
   ======================================== */

@supports (-webkit-touch-callout: none) {
  /* AI Features Grid */
  .ai-feature-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
  }

  .ai-feature-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 calc(33.333% - 14px);
    flex: 1 1 calc(33.333% - 14px);
    min-width: 280px;
  }

  @media (max-width: 991px) {
    .ai-feature-item {
      -webkit-flex: 1 1 calc(50% - 10px);
      flex: 1 1 calc(50% - 10px);
    }
  }

  @media (max-width: 767px) {
    .ai-feature-grid {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: 12px;
    }

    .ai-feature-item {
      width: 100%;
      min-width: 100%;
      -webkit-flex: 1 1 100%;
      flex: 1 1 100%;
    }

    .ai-feature-large {
      grid-column: span 1 !important;
    }
  }

  /* Suggested Courses Grid */
  .suggested-courses-creative {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
  }

  .suggested-course-card {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 calc(33.333% - 11px);
    flex: 1 1 calc(33.333% - 11px);
    min-width: 280px;
  }

  @media (max-width: 991px) {
    .suggested-course-card {
      -webkit-flex: 1 1 calc(50% - 8px);
      flex: 1 1 calc(50% - 8px);
    }
  }

  @media (max-width: 767px) {
    .suggested-courses-creative {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }

    .suggested-course-card {
      width: 100%;
      min-width: 100%;
      -webkit-flex: 1 1 100%;
      flex: 1 1 100%;
    }
  }

  /* Quiz Results Grid */
  .quiz-results-creative {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
  }

  .quiz-score-card {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 calc(25% - 12px);
    flex: 1 1 calc(25% - 12px);
    min-width: 200px;
  }

  @media (max-width: 991px) {
    .quiz-score-card {
      -webkit-flex: 1 1 calc(33.333% - 11px);
      flex: 1 1 calc(33.333% - 11px);
    }
  }

  @media (max-width: 767px) {
    .quiz-results-creative {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }

    .quiz-score-card {
      width: 100%;
      min-width: 100%;
      -webkit-flex: 1 1 100%;
      flex: 1 1 100%;
    }
  }
}

/* ========================================
   TEXT RENDERING FIXES
   ======================================== */

@supports (-webkit-touch-callout: none) {
  body,
  p,
  span,
  div {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Fix text clipping on iOS */
  .stat-card-enhanced .text-24,
  h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
}

/* ========================================
   TOUCH & INTERACTION FIXES
   ======================================== */

@supports (-webkit-touch-callout: none) {
  /* Smooth scrolling on iOS */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Fix tap delay */
  a, button, input, select, textarea {
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }

  /* Prevent text selection on double tap */
  .stat-card-enhanced,
  .ai-feature-item,
  .suggested-course-card {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* But allow text selection in content */
  .stat-card-enhanced *,
  .ai-feature-item *,
  .suggested-course-card * {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ========================================
   TRANSFORM & ANIMATION FIXES
   ======================================== */

@supports (-webkit-touch-callout: none) {
  /* Enable hardware acceleration */
  .stat-card-enhanced,
  .ai-feature-item,
  .suggested-course-card {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Fix hover effects on iOS (convert to active) */
  .stat-card-enhanced:active,
  .ai-feature-item:active,
  .suggested-course-card:active {
    -webkit-transform: translateY(-6px) translateZ(0);
    transform: translateY(-6px) translateZ(0);
  }
}

/* ========================================
   SAFE AREA INSETS (Notch Support)
   ======================================== */

@supports (padding: max(0px)) {
  .dashboard-page-wrapper {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .container,
  .container-fluid {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}

/* ========================================
   FLEXBOX RENDERING FIXES
   Ensure consistent rendering with Android
   ======================================== */

@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    /* Fix flex gap support on older iOS */
    .row.gy-4 {
      margin-bottom: -16px;
    }

    .row.gy-4 > [class*="col-"] {
      margin-bottom: 16px;
    }

    /* Fix d-flex alignment */
    .d-flex {
      display: -webkit-box !important;
      display: -webkit-flex !important;
      display: flex !important;
    }

    .align-items-center {
      -webkit-box-align: center !important;
      -webkit-align-items: center !important;
      align-items: center !important;
    }

    .justify-content-between {
      -webkit-box-pack: justify !important;
      -webkit-justify-content: space-between !important;
      justify-content: space-between !important;
    }

    .flex-wrap {
      -webkit-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
    }

    .gap-16 {
      gap: 16px !important;
    }
  }
}

/* ========================================
   BORDER RADIUS & OVERFLOW FIXES
   ======================================== */

@supports (-webkit-touch-callout: none) {
  .stat-card-enhanced,
  .ai-feature-item,
  .suggested-course-card,
  .quiz-score-card {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
  }
}

/* ========================================
   INPUT & FORM FIXES
   ======================================== */

@supports (-webkit-touch-callout: none) {
  /* Prevent zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Fix input appearance */
  input,
  textarea,
  select {
    -webkit-appearance: none;
    appearance: none;
  }

  /* Fix button appearance */
  button {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* ========================================
   ADDITIONAL iOS 15+ FIXES
   ======================================== */

@supports (-webkit-touch-callout: none) {
  /* Fix position sticky on iOS */
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
  }

  /* Fix backdrop filter on iOS */
  @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .backdrop-blur {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }
}