@media (max-width: 768px) {
  /* Topbar */
  .topbar { padding: 0 1rem; height: 50px; }
  .logo { font-size: 18px; }
  .badge-role { display: none; }
  .badge-user { font-size: 11px; padding: 3px 8px; }
  .btn-logout { padding: 4px 8px; font-size: 11px; }

  /* Navbar */
  .navbar { padding: 0 0.5rem; gap: 0; }
  .nav-link { padding: 10px 10px; font-size: 11px; }

  /* Content */
  .content { padding: 1rem; }

  /* Stat Grid */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-val { font-size: 24px; }

  /* Branch Grid */
  .branch-grid { grid-template-columns: 1fr; }

  /* Filter Bar */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select { width: 100%; }
  .btn-filter, .btn-print, .btn-excel, .btn-pdf { width: 100%; text-align: center; }

  /* Table */
  .table-wrap { overflow-x: auto; }
  table { min-width: 600px; }
  th, td { padding: 8px 10px; font-size: 11px; }

  /* Summary Grid */
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Devices Grid */
  .devices-grid { grid-template-columns: 1fr; }

  /* Modal */
  .modal { margin: 1rem; padding: 1.2rem; }
  .form-grid { grid-template-columns: 1fr; }

  /* Employee Card */
  .emp-card { flex-direction: column; text-align: center; }
  .emp-avatar { margin: 0 auto; }

  /* Settings Tabs */
  .tabs { gap: 6px; }
  .tab-btn { padding: 7px 12px; font-size: 12px; }

  /* Portal */
  .portal-wrap { max-width: 100%; }
  .card { padding: 1.5rem 1rem; }

  /* Messages */
  .msg-header { flex-direction: column; gap: 6px; }

  /* Page Title */
  .page-title { font-size: 16px; }
  .section-title { font-size: 13px; }

  /* Buttons */
  .btn-add { padding: 8px 14px; font-size: 12px; }
  .btn-save { width: 100%; }

  /* Add Form Grid */
  .add-form-grid { grid-template-columns: 1fr; }

  /* Employee Profile */
  .stat-card { padding: 0.8rem; }
  .stat-label { font-size: 10px; }

  /* Footer */
  .footer { font-size: 10px; padding: 1rem; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-link { padding: 8px 6px; font-size: 10px; }
  .navbar { overflow-x: auto; flex-wrap: nowrap; }
}