/* ============================================
   BUILVERO MOBILE RESPONSIVE ENHANCEMENTS
   ============================================ */

/* ============================================
   GLOBAL MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Container padding adjustments */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Reduce top margins on mobile */
  .my-5 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }

  /* Better spacing for sections */
  .mb-4, .mb-5 {
    margin-bottom: 1.5rem !important;
  }

  /* Headings - more readable on mobile */
  h1 {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  h4, h5 {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  /* Cards - better padding on mobile */
  .card {
    border-radius: 0.75rem;
    margin-bottom: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  .card-header {
    padding: 0.75rem 1rem;
  }

  /* Buttons - touch-friendly sizing */
  .btn {
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
  }

  .btn-sm {
    min-height: 38px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  /* Forms - better mobile experience */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  /* Tables - stack on mobile */
  .table-responsive {
    border-radius: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Navbar improvements */
  .navbar-brand {
    font-size: 1.1rem;
  }

  .navbar-brand img {
    width: 32px;
    height: 32px;
  }

  /* Navbar buttons stack on mobile */
  .navbar .ms-auto {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .navbar .btn {
    width: 100%;
    margin: 0.25rem 0;
  }
}

/* ============================================
   ADMIN PAGE MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Admin tabs - ensure all tabs are visible on mobile - HIGH SPECIFICITY */
  ul.nav.nav-tabs {
    flex-wrap: wrap !important;
    display: flex !important;
    overflow: visible !important;
    border-bottom: 1px solid #dee2e6 !important;
  }

  ul.nav.nav-tabs .nav-item {
    flex: 1 1 25% !important;
    min-width: 0 !important;
    max-width: 25% !important;
    display: list-item !important;
    margin-bottom: 0 !important;
    width: 25% !important;
  }

  ul.nav.nav-tabs .nav-item button.nav-link {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.7rem !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: 100% !important;
    display: block !important;
    word-break: break-word;
    line-height: 1.2;
    min-height: auto !important;
    min-width: auto !important;
  }

  /* Ensure all tabs are visible - force equal width with maximum specificity */
  ul.nav.nav-tabs .nav-item button.nav-link[data-bs-target="#users"],
  ul.nav.nav-tabs .nav-item button.nav-link[data-bs-target="#invitations"],
  ul.nav.nav-tabs .nav-item button.nav-link[data-bs-target="#sendgrid"],
  ul.nav.nav-tabs .nav-item button.nav-link[data-bs-target="#forums"] {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.25rem !important;
    display: block !important;
    min-height: auto !important;
    min-width: auto !important;
  }


  /* Filter row - stack on mobile */
  .row.mb-3 .col-md-3,
  .row.mb-3 .col-md-2 {
    margin-bottom: 1rem;
  }

  /* Table responsive wrapper - remove horizontal scroll on mobile for admin projects */
  #admin-projects-content .table-responsive {
    border: none;
    overflow-x: visible;
  }

  /* Results info and pagination - stack vertically */
  .d-flex.justify-content-between {
    flex-direction: column;
    gap: 1rem;
  }

  /* Tables - make more mobile-friendly */
  .table {
    font-size: 0.875rem;
  }

  .table th,
  .table td {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
  }

  /* Hide less important columns on mobile */
  .table-responsive .table th:nth-child(n+4),
  .table-responsive .table td:nth-child(n+4) {
    display: none;
  }

  /* Action buttons - full width on mobile */
  .table .btn {
    width: 100%;
    margin: 0.25rem 0;
  }

  /* Admin projects table - card view on mobile */
  #admin-projects-content .table-responsive {
    overflow-x: visible;
  }

  #admin-projects-content table {
    display: block;
  }

  #admin-projects-content thead {
    display: none !important;
  }

  #admin-projects-content tbody {
    display: block;
  }

  #admin-projects-list tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }

  #admin-projects-list td {
    display: block;
    border: none;
    padding: 0.5rem 0;
    text-align: left !important;
  }

  #admin-projects-list td:before {
    content: attr(data-label);
    font-weight: 600;
    display: inline-block;
    min-width: 100px;
    color: #6b7280;
    margin-right: 0.5rem;
  }

  #admin-projects-list td:first-child {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
  }

  #admin-projects-list td:first-child:before {
    display: none;
  }

  #admin-projects-list td:last-child {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
  }

  #admin-projects-list td:last-child:before {
    display: none;
  }

  #admin-projects-list .btn {
    width: 100%;
  }
}

/* ============================================
   ADMIN FORUM PAGE MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Topic cards - better mobile layout */
  .border-bottom.pb-3.mb-3 {
    padding: 1rem;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    background: white;
  }

  /* Topic title and actions - stack on mobile */
  .d-flex.justify-content-between.align-items-start {
    flex-direction: column;
    gap: 1rem;
  }

  /* Topic action buttons - full width */
  .border-bottom .btn {
    width: 100%;
    margin-top: 0.5rem;
  }

  /* Topic metadata - better spacing */
  .small.text-muted {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* Empty state - better mobile sizing */
  .display-1 {
    font-size: 3rem;
  }
}

/* ============================================
   PROJECTS PAGE MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Page header - stack on mobile */
  .d-flex.justify-content-between.align-items-center {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }

  /* Create button - full width on mobile */
  .d-flex.justify-content-between .btn {
    width: 100%;
  }

  /* Project cards - single column on mobile */
  .row.g-4 {
    margin: 0;
  }

  .row.g-4 > * {
    padding: 0;
    margin-bottom: 1rem;
  }

  /* Project card content */
  .card-body {
    padding: 1rem;
  }

  /* Project card buttons - full width on mobile */
  .card .btn,
  .card .btn-sm {
    width: 100%;
    margin: 0.25rem 0;
  }

  /* Project actions - stack vertically */
  .card .d-flex.gap-2 {
    flex-direction: column;
  }

  .card .d-flex.gap-2 .btn {
    width: 100%;
  }

  /* Project badges - wrap better */
  .card .badge {
    margin: 0.25rem 0.25rem 0.25rem 0;
    display: inline-block;
  }

  /* Project metadata - stack on mobile */
  .card .small.text-muted {
    display: block;
    margin: 0.5rem 0;
  }
}

/* ============================================
   FORUM PAGES MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Forum topic list - better spacing */
  .border-bottom {
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Topic metadata - wrap better */
  .small {
    display: block;
    margin: 0.25rem 0;
  }

  /* Message cards - better mobile layout */
  .card.mb-3 {
    margin-bottom: 1rem;
  }

  /* Message actions - full width buttons */
  .card .btn-group {
    width: 100%;
    flex-direction: column;
  }

  .card .btn-group .btn {
    width: 100%;
    margin: 0.25rem 0;
  }
}

/* ============================================
   PROFILE PAGE MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Profile cards - better spacing */
  .card.mb-4 {
    margin-bottom: 1.5rem;
  }

  /* Profile sections - stack on mobile */
  .row .col-md-6 {
    margin-bottom: 1rem;
  }

  /* Skills and tags - wrap better */
  .badge {
    margin: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
}

/* ============================================
   USER DETAIL PAGE MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* User info cards - stack better */
  .card.mb-4 {
    margin-bottom: 1.5rem;
  }

  /* Profile layout - stack columns on mobile */
  .row > .col-md-8,
  .row > .col-md-4 {
    margin-bottom: 1.5rem;
  }

  /* Project list items - better mobile layout */
  .border.rounded.p-3 {
    padding: 1rem !important;
    margin-bottom: 1rem;
  }

  /* Project name and badges - wrap */
  .d-flex.justify-content-between.align-items-start {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Badges - wrap on mobile */
  .badge {
    display: inline-block;
    margin: 0.25rem 0.25rem 0.25rem 0;
  }

  /* Profile photo - smaller on mobile */
  #profile-photo-container img {
    width: 100px !important;
    height: 100px !important;
  }
}

/* ============================================
   SEARCH PAGES MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Search filters - stack on mobile */
  .row.g-3 .col-md-4,
  .row.g-3 .col-md-3 {
    margin-bottom: 1rem;
  }

  /* Search results - card view on mobile */
  .list-group-item {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
  }

  /* Result cards - better spacing */
  .card.mb-3 {
    margin-bottom: 1rem;
  }
}

/* ============================================
   FORMS MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Form groups - better spacing */
  .mb-3 {
    margin-bottom: 1.25rem !important;
  }

  /* Form rows - stack on mobile */
  .row .col-md-6,
  .row .col-md-4,
  .row .col-md-3 {
    margin-bottom: 1rem;
  }

  /* Text areas - better sizing */
  textarea.form-control {
    min-height: 120px;
  }

  /* Checkboxes and radios - touch-friendly */
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.25rem;
  }

  .form-check-label {
    padding-left: 0.5rem;
    font-size: 1rem;
  }
}

/* ============================================
   MODALS MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-content {
    border-radius: 0.75rem;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }

  .modal-footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  .modal-footer .btn {
    width: 100%;
    margin: 0;
  }
}

/* ============================================
   PAGINATION MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination .page-link {
    padding: 0.5rem 0.75rem;
    min-width: 44px;
    text-align: center;
  }

  .pagination .page-item {
    margin: 0.25rem;
  }
}

/* ============================================
   ALERTS AND NOTIFICATIONS MOBILE
   ============================================ */

@media (max-width: 768px) {
  .alert {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .toast {
    max-width: calc(100% - 2rem);
    margin: 1rem;
  }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE
   ============================================ */

@media (max-width: 768px) {
  /* Hide on mobile */
  .d-md-none {
    display: none !important;
  }

  /* Show only on mobile */
  .d-mobile-only {
    display: block !important;
  }

  /* Full width on mobile */
  .w-mobile-100 {
    width: 100% !important;
  }

  /* Stack on mobile */
  .flex-mobile-column {
    flex-direction: column !important;
  }

  /* Center on mobile */
  .text-mobile-center {
    text-align: center !important;
  }
}

@media (min-width: 769px) {
  .d-mobile-only {
    display: none !important;
  }
}

/* ============================================
   TOUCH-FRIENDLY INTERACTIONS
   ============================================ */

@media (max-width: 768px) {
  /* Increase touch targets - but exclude admin nav-tabs */
  a, button, .btn, .nav-link:not(ul.nav.nav-tabs .nav-link) {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Better tap feedback */
  .btn:active,
  .nav-link:active,
  a:active {
    opacity: 0.7;
    transform: scale(0.98);
  }

  /* Prevent text selection on buttons */
  .btn {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
}

/* ============================================
   SMALL SCREENS (phones in portrait)
   ============================================ */

@media (max-width: 576px) {
  /* Even more compact spacing */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .my-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Smaller headings */
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  /* Compact cards */
  .card-body {
    padding: 0.75rem;
  }

  /* Smaller badges */
  .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
  }

  /* Compact tables */
  .table {
    font-size: 0.8rem;
  }

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

/* ============================================
   LANDSCAPE MOBILE ORIENTATION
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .my-5 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .mb-4, .mb-5 {
    margin-bottom: 1rem !important;
  }

  /* Compact navbar */
  .navbar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}