/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .admin-main { padding: 24px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); transition: var(--transition); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-toggle { display: flex; }
    .admin-main { margin-left: 0; padding: 16px; padding-top: 64px; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .stats-grid { grid-template-columns: 1fr; }
    .data-table { font-size: 0.8rem; }
    .data-table th, .data-table td { padding: 10px 12px; }
    .table-header { flex-direction: column; gap: 12px; align-items: flex-start; }

    /* Exam page */
    .exam-header { flex-direction: column; gap: 8px; padding: 8px 16px; text-align: center; }
    .pdf-controls { padding: 8px 16px; gap: 6px; }

    /* Student card */
    .student-card { padding: 32px 24px; }
    .student-title { font-size: 1.4rem; }
}

@media (max-width: 480px) {
    .student-card { padding: 28px 20px; }
    .token-input { font-size: 1rem; padding: 14px 16px; }
    .modal { padding: 24px; }
}