/**
 * Mobile Responsive Enhancements
 * Fixes for object overlapping and elements going outside margins on mobile devices.
 */

/* ============================================
   Page Header - reduce height on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .page-header.min-height-100 {
    min-height: 60px !important;
  }

  .page-header.min-height-200 {
    min-height: 100px !important;
  }
}

/* ============================================
   Header Profile Card - stack columns on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .card-body.blur .row.gx-4 {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .card-body.blur .row.gx-4 > .col-auto {
    margin-bottom: 0.5rem;
  }

  .card-body.blur .row.gx-4 > .col-lg-4,
  .card-body.blur .row.gx-4 > .col-md-6 {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
  }
}

/* ============================================
   Nav Tabs - wrap and scroll on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .nav.nav-pills.nav-fill {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .nav.nav-pills.nav-fill .nav-item {
    flex: 0 0 auto;
    min-width: auto;
  }

  .nav.nav-pills.nav-fill .nav-link {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
  }

  .nav.nav-pills.nav-fill .nav-link svg {
    display: none;
  }
}

/* ============================================
   Card Group - stack cards on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .card-group {
    flex-direction: column;
  }

  .card-group > .card {
    margin-bottom: 1rem;
  }

  .card-group > .card + .card {
    border-left: 1px solid rgba(0, 0, 0, 0.125);
  }
}

/* ============================================
   Tables - improve readability on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .table-responsive {
    font-size: 0.8rem;
  }

  .table th,
  .table td {
    padding: 0.5rem 0.4rem;
  }

  .table-fixed th,
  .table-fixed td {
    white-space: normal !important;
  }

  .table-fixed th[style*="width"],
  .table-fixed td[style*="width"] {
    width: auto !important;
  }
}

/* ============================================
   Motivators Grid - smaller minimum on mobile
   ============================================ */
@media (max-width: 575.98px) {
  .motivators-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 6px !important;
  }

  .motivators-grid .motivator-item {
    font-size: 0.75rem;
    padding: 0.4rem;
  }
}

/* ============================================
   Flashcards - responsive heights and fonts
   ============================================ */
@media (max-width: 767.98px) {
  .flashcard-carousel {
    min-height: 280px !important;
  }

  .flashcard-card {
    min-height: 250px !important;
    padding: 1rem !important;
  }

  .flashcard-card .card-prompt {
    font-size: 1.1rem !important;
  }

  .flashcard-card .card-insight {
    font-size: 0.95rem !important;
  }
}

/* ============================================
   Pagination - compact on mobile
   ============================================ */
@media (max-width: 575.98px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem;
  }

  .pagination .page-link {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
  }
}

/* ============================================
   Action Buttons - stack on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .action-buttons-group {
    width: 100%;
  }

  .action-buttons-group .btn {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  .action-buttons-horizontal {
    flex-direction: column;
  }

  .action-buttons-horizontal .btn {
    width: 100%;
  }
}

/* ============================================
   Study Mode Toggle - adjust position on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .study-mode-toggle {
    top: auto !important;
    bottom: 20px;
    right: 10px !important;
    padding: 6px 12px !important;
    font-size: 0.8rem;
  }
}

/* ============================================
   Modals - full width on mobile
   ============================================ */
@media (max-width: 575.98px) {
  .modal-lg,
  .modal-xl {
    max-width: 95vw !important;
  }

  .modal-dialog {
    margin: 0.5rem;
  }

  .modal-body {
    padding: 0.75rem;
  }
}

/* ============================================
   Cards - spacing adjustments on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .card.mt-4 {
    margin-top: 1rem !important;
  }

  .container-fluid.py-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .mx-4 {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }
}

/* ============================================
   Search Container - full width on mobile
   ============================================ */
@media (max-width: 767.98px) {
  .search-container {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .search-input {
    font-size: 0.9rem;
    padding: 10px 14px;
  }
}

/* ============================================
   Filter buttons - smaller on mobile
   ============================================ */
@media (max-width: 575.98px) {
  .filter-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
}

/* ============================================
   Insight cards in groks list - prevent overflow
   ============================================ */
@media (max-width: 767.98px) {
  .grok-card .card-body {
    padding: 0.75rem;
  }

  .insight-title {
    font-size: 0.85rem;
  }

  .insight-text {
    font-size: 0.8rem;
  }
}

/* ============================================
   Insight card source info - stack on mobile
   ============================================ */
@media (max-width: 575.98px) {
  .insight-card .row > .col-7,
  .insight-card .row > .col-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================
   Badge overflow prevention
   ============================================ */
@media (max-width: 575.98px) {
  .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ============================================
   Profile header - prevent title overflow
   ============================================ */
@media (max-width: 767.98px) {
  .card-body h3 {
    font-size: 1.25rem;
    word-break: break-word;
  }
}

/* ============================================
   General overflow prevention
   ============================================ */
@media (max-width: 767.98px) {
  body {
    overflow-x: hidden;
  }

  .main-content {
    overflow-x: hidden;
  }

  section {
    overflow-x: hidden;
  }
}