/* ===== RESPONSIVE STYLES ===== */

@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .report-grid { grid-template-columns: 1fr; }
    .student-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .main-content { margin-left: 0 !important; }
    .mobile-toggle { display: flex !important; }
    .topbar-search input { width: 180px; }
    .topbar-search input:focus { width: 220px; }
}

@media (max-width: 768px) {
    html { font-size: 13px; }
    .login-page { flex-direction: column; }
    .login-left { display: none; }
    .login-right { padding: 20px; }
    .login-card { max-width: 100%; }
    .page-content { padding: 16px; }
    .topbar { padding: 0 16px; }
    .topbar-search { display: none; }
    .user-profile-btn span { display: none; }
    .user-profile-btn .fa-chevron-down { display: none; }
    .stats-grid { grid-template-columns: 1fr; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-left, .toolbar-right { width: 100%; }
    .search-input input { width: 100%; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .modal { width: 95%; margin: 10px; }
    .kanban-board { flex-direction: column; }
    .kanban-column { min-width: 100%; }
    .filter-panel { flex-direction: column; align-items: stretch; }
    .quick-actions { flex-direction: column; }
    .quick-action-btn { flex-direction: row; min-width: auto; }
    .notification-dropdown { right: 10px; width: calc(100vw - 20px); max-width: 340px; }
    .pagination { flex-direction: column; text-align: center; }
    .welcome-banner { padding: 20px; }
    .welcome-banner h2 { font-size: 1.2rem; }
    .data-table { font-size: 0.8rem; }
    .data-table thead th, .data-table tbody td { padding: 8px 10px; }
    .company-card-stats { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .page-content { padding: 12px; }
    .card-body { padding: 14px; }
    .card-header { padding: 14px; flex-direction: column; align-items: flex-start; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-info .stat-number { font-size: 1.3rem; }
    .btn { padding: 8px 14px; font-size: 0.85rem; }
    .notes-grid { grid-template-columns: 1fr; }
    .demo-credentials .cred-item { flex-direction: column; text-align: center; gap: 4px; }
    .action-btns { flex-wrap: wrap; }
}

/* Sidebar Overlay for Mobile */
@media (max-width: 1024px) {
    .sidebar-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.5);
        z-index: 99; display: none; backdrop-filter: blur(2px);
    }
    .sidebar-overlay.active { display: block; }
}