/* Device workspace only: keep readable controls inside the available viewport. */
html, body { min-width: 0; }
body { overflow: hidden; }
.dashboard-shell {
  --workspace-sidebar-width: clamp(156px, 13vw, 252px);
  min-width: 0;
  min-height: 0;
  grid-template-columns: var(--workspace-sidebar-width) minmax(0, 1fr);
}
.sidebar { overflow-y: auto; overflow-x: hidden; }
.topbar {
  position: relative;
  inset: auto;
  height: auto;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 12px;
}
.main-area { grid-template-rows: auto minmax(0, 1fr); }
.topbar-device-overview { flex: 1 1 540px; gap: 12px; overflow: visible; flex-wrap: wrap; }
.topbar-device-overview .device-status-summary { overflow: visible; flex-wrap: wrap; gap: 6px 10px; }
.top-actions { flex: 0 0 auto; flex-wrap: wrap; }
.workspace-window { container: device-workspace / inline-size; }
.device-workflow-panel { overscroll-behavior: contain; scrollbar-gutter: stable; }
.device-workflow-panel .device-group { min-width: 1540px; }
[data-device-workflow-panel="upgrade"] .device-group,
[data-device-workflow-panel="evacuation"] .device-group { min-width: 1748px; }
.workspace-window .device-workflow-panel .group-header {
  width: var(--workflow-viewport-width, calc(100cqw - 10px));
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 10px 16px;
  left: 0;
}
.workspace-window .group-commands,
.workspace-window .group-commands:has(> [data-hook-navigation]) {
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.workspace-window .group-commands > * { flex-shrink: 0; }
.workspace-window .group-match-context { justify-self: end; flex-wrap: wrap; gap: 8px; }
.workspace-window .group-command-status { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.device-workflow-panel .device-table-wrap {
  width: 100%;
  min-width: 0;
}
.device-workflow-panel .team-number-toolbar {
  left: 140px;
  width: calc(var(--workflow-viewport-width, 100cqw) - 140px);
  box-sizing: border-box;
}
.device-workflow-panel .device-table th:first-child { height: auto; padding-top: 8px; padding-bottom: 8px; }
.device-workflow-panel .column-title {
  display: flex;
  width: max(280px, calc(100cqw - 224px));
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  white-space: normal;
}
.device-workflow-panel .device-bulk-controls { display: contents; }
.device-workflow-panel .column-title > * { flex-shrink: 0; }
.device-workflow-panel .column-title .add-row { flex: 0 0 auto; flex-wrap: nowrap; }
.main-footer { min-width: 0; gap: 12px; padding: 0 14px; }
.footer-pager { min-width: 0; overflow-x: auto; overflow-y: hidden; gap: 4px; scrollbar-width: thin; }
.footer-pager > button { flex-shrink: 0; }
.list-mode-switch { position: static; transform: none; flex-shrink: 0; }
.footer-tools { flex-shrink: 0; }
@container device-workspace (min-width: 1500px) {
  .workspace-window .device-workflow-panel .group-header {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
  }
}
@container device-workspace (max-width: 850px) {
  .main-footer > span { display: none; }
  .footer-pager > button { width: 28px; height: 30px; }
  .footer-tools > span { display: none; }
  .workspace-window .group-match-context { justify-self: start; }
}
@media (max-width: 1000px) {
  .dashboard-shell { --workspace-sidebar-width: 144px; }
  .sidebar { padding-right: 8px; padding-left: 8px; }
  .topbar, .workspace-window { margin-right: 8px; margin-left: 8px; }
  .topbar-device-overview { flex-basis: 100%; }
  .device-status-summary { font-size: 12px; }
  .top-actions { margin-left: 0; }
}
@media (max-width: 600px) {
  .dashboard-shell { --workspace-sidebar-width: 104px; }
  .topbar { padding: 6px; }
  .main-footer { gap: 4px; padding: 0 6px; }
  .footer-tools { display: none; }
  .workspace-window .device-workflow-panel .group-header { padding: 8px; }
}