/* Global mobile responsiveness layer */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
}

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.students-table,
.data-table,
table {
  min-width: 720px;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-generate,
.btn-view-sm,
.btn-pay-sm {
  touch-action: manipulation;
}

/* Desktop -> tablet safe defaults */
@media (max-width: 1024px) {
  .main-content,
  .student-main-content {
    padding: 18px !important;
  }

  .dashboard-grid,
  .stats-grid,
  .help-grid,
  .materials-grid,
  .certificate-details,
  .attendance-summary {
    grid-template-columns: 1fr !important;
  }
}

/* Main mobile behavior */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  nav,
  .dash-nav,
  .student-navbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .main-content,
  .student-main-content {
    margin-left: 0 !important;
    width: 100%;
    padding: 12px !important;
  }

  .page-header,
  .dashboard-header,
  .info-card,
  .stats-card,
  .action-card,
  .certificate-card,
  .exam-card,
  .assignment-card,
  .material-card,
  .help-card,
  .faq-section,
  .tab-content {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* Fix page-header margin on mobile for courses and students pages */
  .page-header {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 80px !important;
    padding-bottom: 12px !important;
  }

  .page-header h1,
  .dashboard-header h1 {
    font-size: 1.4rem !important;
    line-height: 1.2;
    margin-bottom: 4px !important;
  }

  .page-header p,
  .dashboard-header p {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
  }

  .action-buttons,
  .exam-actions,
  .assignment-actions,
  .certificate-actions {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-generate {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
  }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 4px;
  }

  .tab {
    flex: 0 0 auto;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }

  .modal-content {
    width: 96% !important;
    margin: 8% auto !important;
    max-height: 88vh !important;
  }

  .modal-header,
  .modal-body {
    padding: 12px !important;
  }

  .detail-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
  }

  .detail-value {
    text-align: left !important;
  }

  .students-table,
  .data-table,
  table {
    min-width: 640px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .dash-logo {
    font-size: 1.02rem !important;
  }

  .stats-info h3 {
    font-size: 1.3rem !important;
  }

  .stats-info p,
  .stats-info h4 {
    font-size: 0.82rem !important;
  }

  .profile-btn {
    padding-right: 8px !important;
  }

  .dropdown-menu {
    right: -6px !important;
    min-width: 180px !important;
  }

  .students-table,
  .data-table,
  table {
    min-width: 560px;
  }

  /* Fix page-header on small phones */
  .page-header {
    padding-top: 90px !important;
    padding-bottom: 32px !important;
  }

  .page-header p,
  .page-subtitle {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
}