@media (max-width: 850px) {
  .nav button { min-height: 44px; }
  .primary.compact, .table-action { min-height: 44px; }
  .top-meta { width: 100%; }
}

@media (max-width: 560px) {
  .login { padding: 14px; }
  .login-card { padding: 30px 20px; border-radius: 16px; }
  .content { padding: 14px; }
  .top h1 { font-size: 23px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric { padding: 13px; }
  .metric b { font-size: 20px; }
  .table { overflow: visible; }
  .table-head { display: none; }
  .stock-row, .stock-row.purchases-row, .stock-row.inventory-row { display: grid; grid-template-columns: 1fr; min-width: 0; gap: 7px; padding: 14px; }
  .stock-row > span:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
  .table-action.danger { margin-left: 0; }
  .board { gap: 12px; }
  .column { padding: 10px; }
  .card { padding: 13px; }
  .nav { margin: 0 -4px; padding: 0 4px; }
  .nav button { font-size: 12px; padding: 10px; }
}

@media (max-width: 850px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .content, .brand-lockup, .nav { min-width: 0; max-width: 100%; }
  .sidebar { overflow: hidden; }
  .nav { overflow-x: auto; }
  .nav button { flex: 0 0 auto; }
}