/* ============================================================
   RESPONSIVE DESIGN
   All device sizes from mobile to ultrawide
   ============================================================ */

/* Tablet & below */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
  }

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

  .sidebar-overlay.show {
    display: block;
    opacity: 1;
  }

  .main-content {
    margin-left: 0 !important;
  }

  .page-content {
    padding: 20px;
  }

  .dashboard,
  .module-viewer,
  .quiz-page,
  .admin-page,
  .certificate-page {
    padding: 20px;
  }

  .module-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .worked-example-container {
    grid-template-columns: 1fr;
  }

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

  .dashboard-header {
    flex-direction: column;
  }

  .sidebar-toggle {
    display: block;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .page-content {
    padding: 16px;
  }

  .dashboard,
  .module-viewer,
  .quiz-page,
  .admin-page,
  .certificate-page {
    padding: 16px;
  }

  /* Typography scaling */
  .dashboard-greeting h1 {
    font-size: 22px;
  }

  .module-viewer-header h1 {
    font-size: 20px;
  }

  .quiz-header h1 {
    font-size: 20px;
  }

  .admin-header h1 {
    font-size: 20px;
  }

  .cert-heading {
    font-size: 18px;
  }

  .welcome-hero h1 {
    font-size: 26px;
  }

  /* Grids to single column */
  .stats-row {
    grid-template-columns: 1fr;
  }

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

  .admin-stats {
    grid-template-columns: 1fr;
  }

  .cert-details {
    flex-direction: column;
    gap: 12px;
  }

  /* Cards compact */
  .stat-card {
    padding: 16px;
  }

  .module-card {
    padding: 18px;
  }

  .lesson-section {
    padding: 18px 16px;
  }

  .quiz-question {
    padding: 20px 16px;
  }

  /* Buttons full width on mobile */
  .btn-block-mobile {
    width: 100%;
  }

  .quiz-actions {
    flex-direction: column;
  }

  .quiz-actions .btn {
    width: 100%;
  }

  .cert-actions {
    flex-direction: column;
  }

  .cert-actions .btn {
    width: 100%;
  }

  .admin-search {
    flex-direction: column;
  }

  .admin-search .input-field {
    min-width: auto;
  }

  .admin-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-table-toolbar .table-actions {
    justify-content: stretch;
  }

  .admin-table-toolbar .table-actions .btn,
  .admin-table-toolbar .table-actions .export-btn {
    flex: 1;
    justify-content: center;
  }

  .admin-actions {
    flex-direction: column;
    gap: 2px;
  }

  /* Login compact */
  .login-card {
    padding: 28px 20px;
  }

  .login-header h1 {
    font-size: 20px;
  }

  /* Certificates */
  .certificate-frame {
    padding: 28px 16px;
    border-width: 2px;
  }

  .cert-recipient-name {
    font-size: 22px;
  }

  /* Modal */
  .admin-modal-content {
    padding: 24px 20px;
  }

  /* Toast smaller */
  .toast {
    max-width: calc(100vw - 32px);
    font-size: 13px;
    padding: 12px 16px;
  }

  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
  }

  /* Sidebar improvements for mobile */
  .sidebar-header {
    padding: 16px;
  }

  .sidebar-nav {
    padding: 4px 8px;
  }

  .nav-item {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* Small mobile */
@media (max-width: 380px) {
  .dashboard-greeting h1 {
    font-size: 18px;
  }

  .stat-card {
    padding: 12px 14px;
  }

  .stat-info .stat-value {
    font-size: 20px;
  }

  .module-card h3 {
    font-size: 14px;
  }
}

/* Tablet landscape / small desktop */
@media (min-width: 901px) and (max-width: 1100px) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large screens */
@media (min-width: 1400px) {
  :root {
    --max-width: 1400px;
  }

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

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

/* Print styles */
@media print {
  .sidebar,
  .sidebar-toggle,
  .sidebar-overlay,
  .cert-actions,
  .toast-container {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  .certificate-frame {
    box-shadow: none;
    border: 2px solid #000;
  }

  body {
    background: white;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  /* We keep light mode as default for the LMS */
}