/* ============================================
   Responsive — media queries only
   ============================================ */

/* Tablet: 768px – 1023px */
@media (max-width: 1023px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      'topbar'
      'content';
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .sidebar--open {
    transform: translateX(0);
  }

  .topbar__hamburger {
    display: flex;
  }

  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard__grid {
    grid-template-columns: 1fr;
  }

  .review-card__thumbnail {
    width: 260px;
  }

  /* Forms header stacks */
  .forms-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /* Builder header stacks */
  .builder__header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Type picker: 3 columns on tablet */
  .type-picker__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Info grid stacks on tablet */
  .info-grid {
    grid-template-columns: 1fr;
  }

  /* 3-column stat cards → 2 on tablet */
  .stat-cards--three {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Parent dashboard split → stacked */
  .parent-dashboard__split {
    grid-template-columns: 1fr;
  }

  /* Parent students layout → stacked */
  .parent-students__layout {
    grid-template-columns: 1fr;
  }

  /* Wizard step labels hide on tablet */
  .wizard__step-label {
    display: none;
  }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
  .content {
    padding: var(--space-md);
  }

  .stat-cards {
    grid-template-columns: 1fr;
  }

  /* Hide Guardian column on mobile */
  .table__header--guardian,
  .table__cell--guardian {
    display: none;
  }

  /* Stack review cards vertically */
  .review-card {
    flex-direction: column;
  }

  .review-card__thumbnail {
    width: 100%;
    min-height: 200px;
  }

  /* Pagination stacks */
  .pagination {
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }

  /* Filter bar stacks */
  .filter-bar {
    flex-direction: column;
  }

  .filter-bar__search {
    width: 100%;
  }

  .filter-bar__select {
    width: 100%;
  }

  /* Review card actions stack */
  .review-card__actions {
    flex-direction: column;
  }

  .review-card__actions .btn {
    width: 100%;
  }

  /* Forms header stacks on mobile */
  .forms-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /* Builder header stacks on mobile */
  .builder__header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Type picker: 2 columns on mobile */
  .type-picker__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Question card controls wrap */
  .question-card__controls {
    flex-wrap: wrap;
  }

  /* Form card stacks on mobile */
  .form-card {
    flex-direction: column;
  }

  .form-card__actions {
    width: 100%;
  }

  .form-card__actions .btn {
    flex: 1;
  }

  /* Progress tracker stacks vertically on mobile */
  .progress-tracker {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .progress-tracker::before {
    top: 0;
    bottom: 0;
    left: 13px;
    width: 3px;
    height: auto;
    right: auto;
  }

  .progress-tracker__step {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }

  /* 3-column stat cards → 1 on mobile */
  .stat-cards--three {
    grid-template-columns: 1fr;
  }

  /* Upload zone full-width on mobile */
  .upload-zone {
    padding: var(--space-xl) var(--space-md);
  }

  /* Profile cards stack on mobile */
  .info-grid {
    grid-template-columns: 1fr;
  }

  /* Parent uploads header stacks */
  .parent-uploads__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /* Parent uploads grid → single column */
  .parent-uploads__grid {
    grid-template-columns: 1fr;
  }

  /* Parent applications grid → single column */
  .parent-applications__grid {
    grid-template-columns: 1fr;
  }

  /* Parent applications tabs scroll horizontally */
  .parent-applications__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Student card stacks on mobile */
  .parent-students__card {
    flex-direction: column;
    align-items: flex-start;
  }

  .parent-students__card-actions {
    width: 100%;
  }

  .parent-students__card-actions .parent-students__icon-btn {
    flex: 1;
  }

  /* Modal narrower padding on mobile */
  .modal__content {
    padding: var(--space-lg);
    width: 95%;
  }

  /* Wizard content less padding on mobile */
  .wizard__content {
    padding: var(--space-lg);
  }

  /* Wizard nav stacks on small screens */
  .wizard__nav {
    flex-wrap: wrap;
  }

  /* First-login gate fills viewport */
  .parent-dashboard__gate .auth-card {
    width: 100%;
  }
}