/* ============================================================
   RESPONSIVIDADE — Breakpoints e ajustes mobile/tablet
   ============================================================ */

/* ── TELAS GRANDES (>1400px) ─────────────────────────────── */
@media (min-width: 1400px) {
  .page-content { padding: var(--space-8) var(--space-12); }
  .grid-4       { grid-template-columns: repeat(4, 1fr); }
  .dashboard-hero { padding: var(--space-12) var(--space-16); }
}

/* ── TABLET LARGO (901px–1200px) ─────────────────────────── */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── TABLET (641px–900px) ────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --sidebar-width: var(--sidebar-collapsed);
  }

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

  .sidebar.mobile-open {
    width: 260px;
    transform: translateX(0);
  }

  .sidebar-brand,
  .sidebar-progress,
  .nav-label,
  .nav-badge,
  .sidebar-footer-btn span {
    display: none;
  }

  .sidebar.mobile-open .sidebar-brand,
  .sidebar.mobile-open .sidebar-progress,
  .sidebar.mobile-open .nav-label,
  .sidebar.mobile-open .nav-badge,
  .sidebar.mobile-open .sidebar-footer-btn span {
    display: block;
  }

  .sidebar.mobile-open .sidebar-nav a,
  .sidebar.mobile-open .sidebar-nav button.nav-link {
    justify-content: flex-start;
  }

  .main-area { margin-left: 0; }
  .main-area.sidebar-collapsed { margin-left: 0; }

  .page-content { padding: var(--space-4) var(--space-5); }

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

  .form-row { grid-template-columns: 1fr; }

  .modal { margin: var(--space-4); }

  .dashboard-hero { padding: var(--space-6); }
  .dashboard-hero h1 { font-size: var(--font-2xl); }

  .flashcard-rating { gap: var(--space-2); }
  .rating-btn { min-width: 72px; padding: var(--space-2) var(--space-3); }

  .lesson-title-row { flex-direction: column; }
  .lesson-actions { flex-wrap: wrap; }

  .course-card-meta { flex-wrap: wrap; gap: var(--space-2); }

  .simulado-score { font-size: 56px; }

  .timer-popup { bottom: 0; left: 0; right: 0; transform: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

/* ── MOBILE (<640px) ─────────────────────────────────────── */
@media (max-width: 640px) {
  .header { padding: 0 var(--space-4); gap: var(--space-2); }
  .header-search { max-width: 160px; }
  .header-search-kbd { display: none; }

  .page-content { padding: var(--space-3) var(--space-4); }
  .page-header  { margin-bottom: var(--space-5); }
  .page-header h1 { font-size: var(--font-2xl); }
  .page-header-actions { flex-direction: column; align-items: flex-start; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .stat-card-value { font-size: var(--font-2xl); }

  .modal          { margin: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 95vh; align-self: flex-end; }
  .modal-overlay  { align-items: flex-end; padding: 0; }

  .flashcard { min-height: 200px; }
  .flashcard-front, .flashcard-back { padding: var(--space-5); }
  .flashcard-question { font-size: var(--font-lg); }

  .flashcard-counters { gap: var(--space-2); }
  .flashcard-counter  { min-width: 56px; padding: var(--space-2) var(--space-2); }

  .rating-btn   { flex: unset; min-width: calc(50% - var(--space-2)); }
  .flashcard-rating { flex-wrap: wrap; }

  .tabs   { gap: 0; }
  .tab-btn{ padding: var(--space-2) var(--space-3); font-size: var(--font-xs); }

  .course-card-header { padding: var(--space-4); }
  .course-icon  { width: 40px; height: 40px; font-size: 18px; }

  .lesson-header-bar { padding: var(--space-4); }
  .lesson-title-row h1 { font-size: var(--font-xl); }

  .glossary-search { height: 42px; }
  .glossary-letter-heading { font-size: var(--font-xl); }

  .drop-zone { padding: var(--space-8) var(--space-5); }

  .toast-container { left: var(--space-4); right: var(--space-4); }
  .toast { max-width: 100%; }

  .btn-block-mobile { width: 100%; }

  .breadcrumb { font-size: 11px; }

  th, td { padding: var(--space-2) var(--space-3); }

  /* Tabelas em card no mobile */
  @supports not (display: grid) {
    table, thead, tbody, th, td, tr { display: block; }
  }

  .chart-card { padding: var(--space-4); }

  .settings-item { flex-direction: column; align-items: flex-start; }
  .settings-item-action { align-self: flex-end; }

  .danger-zone-item { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  .simulado-score { font-size: 48px; }

  .pending-card { gap: var(--space-3); }
  .pending-card-icon { width: 36px; height: 36px; }

  .quick-link { min-height: 70px; padding: var(--space-3); }

  .flashcard-session-progress { flex-wrap: wrap; gap: var(--space-2); }

  .search-results-panel { border-radius: 0; position: fixed; top: var(--header-height); left: 0; right: 0; max-height: calc(100vh - var(--header-height)); }

  .question-option { padding: var(--space-2) var(--space-3); }
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  .sidebar, .header, .timer-popup, .toast-container { display: none; }
  .main-area { margin-left: 0; }
  .page-content { padding: 0; }
  body { background: #fff; color: #000; }
  .card, .stat-card, .chart-card { border: 1px solid #ccc; box-shadow: none; }
}