/* Keep table headers in document flow. Sticky headers inside the horizontal
   scroll container overlap the first data row at narrower desktop widths. */
.ops-table th { position: static; top: auto; }
.ops-table td::before { display: none !important; }
.cell-label { display: none; }

@media (max-width: 680px) {
  .cell-label {
    display: block;
    order: -1;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  body { padding-bottom: 0; }
  .layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
  .side { display: block; }
  .main { padding: 18px; }
  .page-head { display: flex; }
  .metrics { grid-template-columns: repeat(5, 1fr); }
  .metric:last-child { grid-column: auto; }
  .toolbar { display: flex; }
  .toolbar .field:first-child { grid-column: auto; }
  .toolbar .btn { width: auto; }
  .table-wrap { overflow: auto; }
  .ops-table { display: table; min-width: 1120px; }
  .ops-table thead { display: table-header-group; }
  .ops-table tbody { display: table-row-group; }
  .ops-table tr { display: table-row; padding: 0; border: 0; border-radius: 0; }
  .ops-table td { display: table-cell; padding: 11px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .ops-table td::before { display: none; }
  .mobile-nav { display: none; }
}