/* Mobile < 576px */
@media (max-width: 575.98px) {
    .sidebar { transform: translateX(-100%); width: 280px; }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0 !important; }
    .header { padding: 0 14px; height: 56px; }
    .content-area { padding: 16px; }
    .search-bar { display: none; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-title { font-size: 1.2rem; }
    .stat-card { padding: 16px; }
    .stat-card .stat-value { font-size: 1.3rem; }
    .card-body { padding: 16px; }
    .modal-dialog { margin: 0; height: 100%; max-width: 100%; }
    .modal-content { border-radius: 0; height: 100%; border: none; }
    .btn span { display: none; }
    .table td, .table th { padding: 8px 10px; font-size: 0.75rem; }
    .toast { min-width: auto; width: calc(100vw - 32px); }
    .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--gray-200); z-index: 999; padding: 6px 0 8px; }
    .bottom-nav .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 0.55rem; color: var(--gray-400); padding: 4px; transition: var(--transition); font-weight: 500; }
    .bottom-nav .nav-item.active { color: var(--primary); }
    .bottom-nav .nav-item .nav-icon { font-size: 1.15rem; }
    body.has-bottom-nav { padding-bottom: 56px; }
    .login-page { background: #fff; padding: 16px; }
    .login-card { padding: 24px; box-shadow: none; border: none; }
}

/* Tablet 576-768px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .sidebar { transform: translateX(-100%); width: 280px; }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0 !important; }
    .content-area { padding: 20px; }
    .bottom-nav { display: flex; }
    body.has-bottom-nav { padding-bottom: 56px; }
}

/* Tablet 768-1024px */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .sidebar { width: 220px; }
    .sidebar.collapsed { width: 68px; }
    .main-content { margin-left: 220px; }
    .main-content.expanded { margin-left: 68px; }
    .content-area { padding: 24px; }
    .search-bar { min-width: 180px; }
}

/* Laptop 1024-1440px */
@media (min-width: 1024px) and (max-width: 1439.98px) {
    .sidebar { width: 240px; }
    .sidebar.collapsed { width: 72px; }
    .main-content { margin-left: 240px; }
    .main-content.expanded { margin-left: 72px; }
}

/* Print */
@media print {
    .sidebar, .header, .bottom-nav, .btn, .sidebar-toggle { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}