/* Mobile and narrow-screen guardrails kept outside the main legacy stylesheet. */

body,
#appView,
.workspace,
.content {
  max-width: 100%;
}

.app-shell,
.workspace,
.content,
.topbar,
.table-shell,
.modal,
.modal-body,
.hr-filter-panel,
.custom-select,
.date-picker,
.month-picker {
  min-width: 0;
}

.table-shell {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 860px) {
  .content {
    padding-inline: clamp(10px, 3vw, 18px);
  }

  .metric-grid,
  .dashboard-metrics,
  .breaklist-metrics {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .modal {
    max-width: calc(100vw - 18px);
  }
}

@media (hover: none), (pointer: coarse) {
  .flow2-surface,
  .flow2-surface:hover,
  .flow2-surface.is-flow-focused,
  .flow2-surface:active,
  .role-home-card:hover,
  .role-home-list-row:hover,
  .dashboard-stat-buttons .metric:hover,
  .nav button:hover,
  .workspace-segment button:hover,
  .date-option:hover,
  .cert-btn:hover {
    transform: none !important;
    filter: none !important;
  }
}