:root{
  --mobile-break-1: 900px;
  --mobile-break-2: 600px;
}

/* General layout tweaks for small screens */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
  /* Dashboard sidebar stacks away on small screens */
  .sidebar { display: none !important; }
  .main { margin-left: 0 !important; padding: 18px !important; }

  /* Make topbars wrap nicely */
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Forms and cards become full width */
  .card, .section, .page, .card { width: 100% !important; box-sizing: border-box; }

  /* Tables remain horizontally scrollable */
  .table-wrap { overflow-x: auto; }

  /* Modal content fit on small screens */
  .modal-content { max-width: 96% !important; padding: 20px !important; }
}

@media (max-width: 600px) {
  /* Login and small forms stretch to fit */
  .login-wrap { padding: 12px !important; }
  .brand-icon { width: 56px !important; height: 56px !important; border-radius: 12px !important; }

  /* Reduce table padding for small screens */
  th, td { padding: 8px !important; font-size: 13px !important; }

  /* Make action buttons wrap and smaller */
  .actions { gap: 6px !important; }
  .btn-sm { padding: 6px 8px !important; font-size: 11px !important; }
}

/* Utility: hide long labels on tiny screens */
@media (max-width: 420px) {
  .stat-label { font-size: 9px !important; }
  .stat-value { font-size: 20px !important; }
}

/* Ensure inputs are usable on touch devices */
input[type="number"], input[type="text"], input[type="date"], select, textarea { touch-action: manipulation; }