@media (max-width: 1180px) {
  .metrics, .line-grid, .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login, .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    gap: 14px;
  }

  nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  nav a {
    justify-content: center;
  }

  .topline, .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .actions, .toolbar, .login, .form-grid, .inline-form, .announcement-form, .discount-form, .split-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .filter-input {
    width: 100%;
  }

  .row, .row.three, .row.five, .row.log, .row.node-row, .row.batch-row, .row.instance-row, .row.discount-rule-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .workspace {
    width: min(100% - 28px, 1280px);
    padding-top: 14px;
  }

  .sidebar {
    padding: 14px;
  }

  nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics, .line-grid, .detail-grid {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 14px;
  }
}