/* TABLET */
@media (max-width: 1279px) and (min-width: 768px) {
  .nav-link { padding: 0 10px; font-size: 13px; }
  .header-left { gap: 16px; }
  
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .header-center { display: none; }
  .avatar-name { display: none; }
  .hamburger { display: block; }
  
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .stat-card { padding: 16px; }
  .stat-card h3 { font-size: 20px; }
  
  .quick-actions { flex-direction: column; width: 100%; }
  .quick-actions .btn { width: 100%; justify-content: center; }
  
  /* GRID OVERRIDES FOR MOBILE */
  .grid { grid-template-columns: 1fr !important; }
  
  .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  
  .salary-slip-modal .modal { max-width: 95%; margin: 10px auto; max-height: 90vh; overflow-y: auto;}
  
  /* SETTINGS */
  .settings-layout { flex-direction: column !important; }
  .settings-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; flex-direction: row !important; overflow-x: auto !important; white-space: nowrap !important; padding-bottom:0 !important; margin-bottom:16px !important; }
  .settings-nav-item { border-left: none !important; border-bottom: 3px solid transparent !important; padding: 12px 16px !important; }
  .settings-nav-item.active { border-left: none !important; border-bottom: 3px solid var(--primary) !important; background: transparent !important; }
  
  main.main-content { padding-left: 16px; padding-right: 16px; }
  
  /* FLOATING BOTTOM NAV IN MOBILE */
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; width: 100%;
    background: var(--bg-card); border-top: 1px solid var(--border);
    justify-content: space-around; padding: 8px 0; z-index: 990;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 10px; color: var(--text-muted); text-decoration:none;
  }
  .bottom-nav-item.active { color: var(--primary); }
  
  body { padding-bottom: 70px; } 
}

@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
}

/* PRINT CSS */
@media print {
  body { background: white; padding: 0 !important; }
  .app-header, .sidebar, .sidebar-overlay, .bottom-nav, .no-print { display: none !important; }
  main.main-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}