* {
  box-sizing: border-box;
}

body {
  margin: var(--erp-margin-none);
  background: var(--erp-surface-canvas);
  color: var(--erp-text);
  font-family: var(--erp-font-sans);
  letter-spacing: var(--erp-type-letter-spacing);
  overflow-x: var(--erp-overflow-hidden);
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea,
.compact-select {
  border: var(--erp-border-width) solid var(--erp-input-border);
  background: var(--erp-input-background);
  color: var(--erp-input-foreground);
}

button {
  cursor: pointer;
}

[hidden] {
  display: var(--erp-display-none) !important;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.compact-select:focus-visible,
.nav-button:focus-visible,
.persona-button:focus-visible,
.locale-button:focus-visible,
.tab-button:focus-visible,
.capture-mode:focus-visible,
.prompt-chip:focus-visible {
  outline: var(--erp-list-selected-outline);
  outline-offset: var(--erp-space-half);
}

.app-shell {
  display: grid;
  grid-template-columns: var(--erp-app-shell-columns);
  min-height: var(--erp-size-full-vh);
  width: var(--erp-size-full);
  overflow-x: var(--erp-overflow-hidden);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--erp-app-sidebar-gap);
  padding: var(--erp-app-sidebar-padding);
  border-right: var(--erp-border-width) solid var(--erp-border);
  background: var(--erp-app-sidebar-background);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--erp-brand-gap);
  padding: var(--erp-brand-padding);
}

.brand-mark {
  display: grid;
  width: var(--erp-brand-mark-size);
  height: var(--erp-brand-mark-size);
  place-items: center;
  border: var(--erp-border-width) solid var(--erp-brand-mark-border);
  background: var(--erp-brand-mark-background);
  color: var(--erp-brand-mark-foreground);
  font-weight: var(--erp-weight-bold);
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: var(--erp-brand-scope-margin-top);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-body-sm);
}

.nav {
  display: grid;
  gap: var(--erp-nav-gap);
}

.persona-toggle {
  display: grid;
  grid-template-columns: var(--erp-grid-two-equal);
  gap: var(--erp-segment-gap);
  border: var(--erp-border-width) solid var(--erp-segment-border);
  background: var(--erp-segment-background);
  padding: var(--erp-segment-padding);
}

.persona-button {
  min-height: var(--erp-control-height-sm);
  border: var(--erp-border-width) solid var(--erp-transparent);
  background: var(--erp-transparent);
  color: var(--erp-text-muted);
  padding: var(--erp-button-padding-compact);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-bold);
}

.persona-button.active {
  border-color: var(--erp-action-strong);
  background: var(--erp-segment-active-background);
  color: var(--erp-segment-active-foreground);
}

.nav-button {
  display: grid;
  grid-template-columns: var(--erp-nav-item-columns);
  align-items: center;
  min-height: var(--erp-control-height-lg);
  gap: var(--erp-nav-item-gap);
  width: var(--erp-size-full);
  border: var(--erp-border-width) solid var(--erp-nav-item-border);
  background: var(--erp-nav-item-background);
  color: var(--erp-text);
  padding: var(--erp-nav-item-padding);
  text-align: left;
}

.nav-button:hover,
.nav-button.active {
  border-color: var(--erp-nav-item-border-active);
  background: var(--erp-nav-item-background-active);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: var(--erp-nav-item-icon-size);
  height: var(--erp-nav-item-icon-size);
  border: var(--erp-border-width) solid var(--erp-border-strong);
  background: var(--erp-nav-icon-background);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-bold);
}

.nav-count {
  min-width: var(--erp-nav-item-count-min);
  border: var(--erp-border-width) solid var(--erp-border);
  background: var(--erp-nav-count-background);
  padding: var(--erp-nav-count-padding);
  text-align: center;
  font-size: var(--erp-type-caption);
  color: var(--erp-text-muted);
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: var(--erp-space-2);
  margin-top: var(--erp-layout-auto);
  border: var(--erp-border-width) solid var(--erp-border);
  background: var(--erp-panel-background);
  padding: var(--erp-input-padding);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-body-sm);
}

.dot {
  width: var(--erp-status-dot-size);
  height: var(--erp-status-dot-size);
  border-radius: var(--erp-radius-round, 50%);
  background: var(--erp-text-muted);
}

.dot.live {
  background: var(--erp-status-live);
}

.workspace {
  min-width: var(--erp-size-zero);
  padding: var(--erp-app-workspace-padding);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--erp-app-topbar-gap);
  margin: var(--erp-app-topbar-margin);
}

.eyebrow {
  margin: var(--erp-eyebrow-margin);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-bold);
  text-transform: var(--erp-type-transform-eyebrow);
}

h1 {
  margin: var(--erp-margin-none);
  font-size: var(--erp-type-display);
  line-height: var(--erp-type-line-heading);
}

h2,
h3,
p {
  margin: var(--erp-text-block-margin);
  margin-top: var(--erp-copy-margin-top);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--erp-space-2);
}

.locale-toggle {
  display: inline-flex;
  border: var(--erp-border-width) solid var(--erp-border-strong);
  background: var(--erp-surface-base);
}

.locale-button {
  min-height: var(--erp-control-height-md);
  border: var(--erp-border-none);
  border-right: var(--erp-border-width) solid var(--erp-border);
  background: var(--erp-transparent);
  padding: var(--erp-button-padding-compact);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-bold);
}

.locale-button:last-child {
  border-right: var(--erp-border-none);
}

.locale-button.active {
  background: var(--erp-segment-active-background);
  color: var(--erp-segment-active-foreground);
}

.primary-button,
.secondary-button,
.danger-button,
.quiet-button,
.icon-button {
  min-height: var(--erp-control-height-md);
  border: var(--erp-border-width) solid var(--erp-button-secondary-border);
  padding: var(--erp-button-padding);
  background: var(--erp-button-secondary-background);
  color: var(--erp-button-secondary-foreground);
}

.primary-button {
  background: var(--erp-button-primary-background);
  color: var(--erp-button-primary-foreground);
  border-color: var(--erp-button-primary-border);
}

.danger-button {
  color: var(--erp-button-danger-foreground);
  background: var(--erp-button-danger-background);
  border-color: var(--erp-button-danger-border);
}

.quiet-button {
  border-color: var(--erp-button-quiet-border);
  color: var(--erp-button-quiet-foreground);
}

.icon-button {
  width: var(--erp-icon-button-size);
  padding: var(--erp-space-0);
  font-weight: var(--erp-weight-bold);
}

.status-grid {
  display: grid;
  grid-template-columns: var(--erp-status-grid-columns);
  gap: var(--erp-app-status-gap);
  margin-bottom: var(--erp-space-4);
}

.panel,
.capture-shell {
  border: var(--erp-border-width) solid var(--erp-panel-border);
  border-radius: var(--erp-panel-radius);
  background: var(--erp-panel-background);
  box-shadow: var(--erp-panel-shadow);
}

.metric-card {
  border: var(--erp-border-width) solid var(--erp-card-border);
  border-radius: var(--erp-card-radius);
  background: var(--erp-card-background);
  box-shadow: var(--erp-panel-shadow);
  padding: var(--erp-metric-padding);
}

.metric-card span {
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-semibold);
}

.metric-card strong {
  display: block;
  margin-top: var(--erp-metric-value-margin-top);
  font-size: var(--erp-metric-value-size);
}

.metric-card small {
  display: block;
  margin-top: var(--erp-metric-note-margin-top);
  color: var(--erp-text-muted);
}

.content-grid {
  display: grid;
  grid-template-columns: var(--erp-content-grid-columns);
  gap: var(--erp-app-section-gap);
  align-items: start;
  min-width: var(--erp-size-zero);
}

.wide-panel {
  grid-column: var(--erp-content-wide-column);
}

.panel {
  min-width: var(--erp-size-zero);
  max-width: var(--erp-size-full);
  overflow-x: var(--erp-overflow-x-panel);
  padding: var(--erp-panel-padding);
}

.chat-panel {
  min-height: var(--erp-chat-panel-min-height);
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--erp-stack-gap);
  min-height: var(--erp-chat-thread-min-height);
  max-height: var(--erp-chat-thread-max-height);
  overflow-y: var(--erp-overflow-auto);
  padding: var(--erp-chat-thread-padding);
}

.chat-message {
  display: flex;
}

.chat-message.user {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: var(--erp-chat-bubble-max-width);
  border: var(--erp-border-width) solid var(--erp-border);
  background: var(--erp-card-background);
  padding: var(--erp-card-padding);
}

.chat-message.assistant .chat-bubble {
  background: var(--erp-message-assistant-surface);
}

.chat-message.user .chat-bubble {
  border-color: var(--erp-message-user-border);
  background: var(--erp-message-user-surface);
}

.chat-bubble p {
  margin: var(--erp-margin-none);
  line-height: var(--erp-type-line-body);
}

.chat-bubble span {
  display: block;
  margin-top: var(--erp-chat-meta-margin-top);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-semibold);
}

.chat-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--erp-space-2);
  margin: var(--erp-card-detail-margin);
}

.prompt-chip {
  min-height: var(--erp-control-height-sm);
  border: var(--erp-border-width) solid var(--erp-border-strong);
  background: var(--erp-input-background);
  padding: var(--erp-button-padding-compact);
  color: var(--erp-text);
}

.chat-composer {
  display: grid;
  grid-template-columns: var(--erp-chat-composer-columns);
  gap: var(--erp-space-2);
  border: var(--erp-border-width) solid var(--erp-border-strong);
  background: var(--erp-surface-base);
  padding: var(--erp-composer-padding);
}

.chat-composer textarea {
  min-height: var(--erp-composer-textarea-min-height);
  max-height: var(--erp-composer-textarea-max-height);
  border: var(--erp-border-none);
  resize: var(--erp-resize-vertical);
  padding: var(--erp-space-2);
  outline: var(--erp-outline-none);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--erp-space-3);
  margin-bottom: var(--erp-space-3);
}

.panel-title {
  margin: var(--erp-margin-none);
  font-size: var(--erp-type-title);
}

.panel-note {
  margin: var(--erp-panel-note-margin);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-body-sm);
}

.stack {
  display: grid;
  gap: var(--erp-stack-gap);
}

.list-card {
  border: var(--erp-border-width) solid var(--erp-card-border);
  border-radius: var(--erp-card-radius);
  background: var(--erp-card-background);
  padding: var(--erp-card-padding);
  box-shadow: var(--erp-list-card-shadow);
}

.list-card.selected {
  outline: var(--erp-list-selected-outline);
}

.card-top,
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--erp-stack-gap);
}

.card-title {
  margin: var(--erp-margin-none);
  font-size: var(--erp-type-body);
  line-height: var(--erp-type-line-card);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--erp-card-meta-gap);
  margin-top: var(--erp-card-meta-margin-top);
}

.card-detail {
  margin: var(--erp-card-detail-margin);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-body-sm);
  line-height: var(--erp-card-detail-line-height);
}

.sample-list {
  display: grid;
  gap: var(--erp-card-meta-gap);
  margin-top: var(--erp-space-3);
  border: var(--erp-border-width) solid var(--erp-card-border);
  background: var(--erp-card-background);
  padding: var(--erp-space-2);
}

.sample-row {
  display: grid;
  grid-template-columns: var(--erp-sample-row-columns);
  align-items: center;
  gap: var(--erp-sample-row-gap);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
}

.sample-row strong {
  color: var(--erp-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--erp-nav-item-icon-size);
  border: var(--erp-border-width) solid var(--erp-badge-neutral-border);
  background: var(--erp-badge-neutral-surface);
  padding: var(--erp-badge-padding, var(--erp-nav-count-padding));
  color: var(--erp-badge-neutral-foreground);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-semibold);
}

.badge--success {
  border-color: var(--erp-badge-success-border);
  color: var(--erp-badge-success-foreground);
  background: var(--erp-badge-success-surface);
}

.badge--warning {
  border-color: var(--erp-badge-warning-border);
  color: var(--erp-badge-warning-foreground);
  background: var(--erp-badge-warning-surface);
}

.badge--danger {
  border-color: var(--erp-badge-danger-border);
  color: var(--erp-badge-danger-foreground);
  background: var(--erp-badge-danger-surface);
}

.badge--info {
  border-color: var(--erp-badge-info-border);
  color: var(--erp-badge-info-foreground);
  background: var(--erp-badge-info-surface);
}

.badge--role {
  border-color: var(--erp-badge-role-border);
  color: var(--erp-badge-role-foreground);
  background: var(--erp-badge-role-surface);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--erp-space-2);
  margin-top: var(--erp-space-3);
}

.button-row select {
  min-height: var(--erp-control-height-md);
  border: var(--erp-border-width) solid var(--erp-input-border);
  background: var(--erp-input-background);
  color: var(--erp-input-foreground);
  padding: var(--erp-button-padding-compact);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--erp-tabs-gap);
  margin-bottom: var(--erp-space-3);
}

.tab-button {
  border: var(--erp-border-width) solid var(--erp-border);
  background: var(--erp-card-background);
  padding: var(--erp-button-padding-compact);
  color: var(--erp-text-muted);
}

.tab-button.active {
  border-color: var(--erp-option-selected-border);
  color: var(--erp-option-selected-foreground);
  background: var(--erp-option-selected-background);
}

.capture-shell {
  display: grid;
  gap: var(--erp-space-3);
  padding: var(--erp-metric-padding);
}

.capture-grid {
  display: grid;
  grid-template-columns: var(--erp-capture-grid-columns);
  gap: var(--erp-space-2);
}

.capture-mode {
  min-height: var(--erp-capture-mode-min-height);
  border: var(--erp-border-width) solid var(--erp-border-strong);
  background: var(--erp-surface-base);
  text-align: left;
  padding: var(--erp-input-padding);
}

.capture-mode.active {
  background: var(--erp-option-selected-background);
  border-color: var(--erp-option-selected-border);
  color: var(--erp-option-selected-foreground);
}

.field-grid {
  display: grid;
  grid-template-columns: var(--erp-field-grid-columns);
  gap: var(--erp-stack-gap);
}

.field {
  display: grid;
  gap: var(--erp-card-meta-gap);
}

.field.hidden {
  display: var(--erp-display-none);
}

.field label {
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-bold);
}

.field input,
.field select,
.field textarea {
  width: var(--erp-size-full);
  border: var(--erp-border-width) solid var(--erp-input-border);
  background: var(--erp-input-background);
  color: var(--erp-input-foreground);
  padding: var(--erp-input-padding);
}

.field textarea {
  min-height: var(--erp-input-textarea-min-height);
  resize: var(--erp-resize-vertical);
}

.quantity-stepper {
  display: grid;
  grid-template-columns: var(--erp-stepper-columns);
  gap: var(--erp-card-meta-gap);
}

.quantity-stepper .quiet-button {
  padding: var(--erp-space-0);
}

.confirm-box {
  border: var(--erp-border-width) solid var(--erp-input-border);
  border-radius: var(--erp-card-radius);
  background: var(--erp-state-surface);
  padding: var(--erp-card-padding);
}

.plant-overview {
  background: var(--erp-surface-panel);
}

.plant-summary-grid,
.plant-lane-grid,
.exception-grid {
  display: grid;
  gap: var(--erp-stack-gap);
}

.plant-summary-grid {
  grid-template-columns: var(--erp-plant-summary-columns);
}

.plant-summary-cell {
  display: grid;
  min-width: var(--erp-size-zero);
  min-height: var(--erp-plant-summary-min-height);
  align-content: space-between;
  gap: var(--erp-space-2);
  border-left: var(--erp-plant-summary-accent-width) solid var(--erp-status-live);
  border-radius: var(--erp-card-radius);
  background: var(--erp-card-background);
  padding: var(--erp-card-padding);
}

.plant-summary-cell span,
.plant-summary-cell small,
.plant-lane-head span,
.plant-step small {
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
}

.plant-summary-cell strong {
  font-size: var(--erp-plant-summary-value-size);
  line-height: var(--erp-type-line-tight);
}

.plant-lane-grid {
  grid-template-columns: var(--erp-plant-lane-columns);
}

.plant-lane,
.exception-group {
  min-width: var(--erp-size-zero);
  border: var(--erp-border-width) solid var(--erp-card-border);
  border-radius: var(--erp-card-radius);
  background: var(--erp-card-background);
  padding: var(--erp-card-padding);
}

.plant-lane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--erp-stack-gap);
  border-bottom: var(--erp-border-width) solid var(--erp-border);
  padding-bottom: var(--erp-plant-lane-head-padding-bottom);
}

.plant-lane-head strong,
.plant-lane-head span {
  display: block;
}

.plant-steps {
  display: grid;
  gap: var(--erp-space-2);
  margin-top: var(--erp-space-3);
}

.plant-step,
.movement-row {
  display: grid;
  align-items: center;
  gap: var(--erp-space-2);
}

.plant-step {
  grid-template-columns: var(--erp-plant-step-columns);
}

.plant-step-time,
.movement-row span {
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
  font-weight: var(--erp-weight-semibold);
}

.plant-step strong,
.plant-step small {
  display: block;
}

.movement-row {
  grid-template-columns: var(--erp-movement-row-columns);
  border-bottom: var(--erp-border-width) solid var(--erp-border);
  padding: var(--erp-toggle-row-padding);
}

.movement-row:last-child {
  border-bottom: var(--erp-border-none);
}

.exception-grid {
  grid-template-columns: var(--erp-plant-exception-columns);
}

.capability-grid {
  display: grid;
  gap: var(--erp-space-2);
}

.capability-row {
  display: grid;
  grid-template-columns: var(--erp-capability-row-columns);
  align-items: center;
  gap: var(--erp-stack-gap);
  border: var(--erp-border-width) solid var(--erp-card-border);
  border-radius: var(--erp-card-radius);
  background: var(--erp-card-background);
  padding: var(--erp-card-padding);
}

.capability-row strong,
.capability-row span {
  display: block;
}

.capability-row span {
  margin-top: var(--erp-brand-scope-margin-top);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
  line-height: var(--erp-type-line-card);
}

.capability-row code {
  overflow-wrap: var(--erp-code-wrap);
  color: var(--erp-info);
  font-size: var(--erp-type-caption);
}

.compact-table th,
.compact-table td {
  white-space: var(--erp-white-space-nowrap);
}

.compact-table {
  min-width: var(--erp-table-min-width);
}

.table {
  width: var(--erp-size-full);
  border-collapse: var(--erp-table-collapse);
}

.table th,
.table td {
  border-bottom: var(--erp-border-width) solid var(--erp-border);
  padding: var(--erp-table-cell-padding);
  text-align: left;
  vertical-align: middle;
  font-size: var(--erp-type-body-sm);
}

.table th {
  color: var(--erp-text-muted);
  font-size: var(--erp-type-caption);
}

.toggle-row {
  display: grid;
  grid-template-columns: var(--erp-toggle-row-columns);
  align-items: center;
  gap: var(--erp-space-2);
  border-bottom: var(--erp-border-width) solid var(--erp-border);
  padding: var(--erp-toggle-row-padding);
}

.compact-field {
  gap: var(--erp-space-0);
}

.sr-only {
  position: absolute;
  width: var(--erp-sr-size);
  height: var(--erp-sr-size);
  overflow: var(--erp-overflow-hidden);
  clip: var(--erp-sr-clip);
  white-space: var(--erp-white-space-nowrap);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--erp-card-meta-gap);
  color: var(--erp-text-muted);
  font-size: var(--erp-type-body-sm);
}

.switch input {
  width: var(--erp-space-5);
  height: var(--erp-space-5);
  accent-color: var(--erp-focus-ring);
}

.toast {
  position: fixed;
  right: var(--erp-toast-offset);
  bottom: var(--erp-toast-offset);
  max-width: var(--erp-toast-max-width);
  border: var(--erp-border-width) solid var(--erp-toast-border);
  background: var(--erp-toast-background);
  color: var(--erp-toast-foreground);
  padding: var(--erp-toast-padding);
  opacity: var(--erp-toast-hidden-opacity);
  transform: var(--erp-toast-translate-hidden);
  pointer-events: var(--erp-toast-pointer-events);
  transition:
    opacity var(--erp-transition-fast),
    transform var(--erp-transition-fast);
}

.toast.visible {
  opacity: var(--erp-toast-visible-opacity);
  transform: var(--erp-toast-translate-visible);
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: var(--erp-grid-single);
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
    gap: var(--erp-app-sidebar-gap-mobile);
    width: var(--erp-size-full);
    max-width: var(--erp-size-mobile-max);
    min-width: var(--erp-size-zero);
    overflow: var(--erp-overflow-hidden);
    border-right: var(--erp-border-none);
    border-bottom: var(--erp-border-width) solid var(--erp-border);
  }

  .nav {
    display: flex;
    max-width: var(--erp-size-full);
    min-width: var(--erp-size-zero);
    overflow-x: var(--erp-overflow-x-panel);
    padding-bottom: var(--erp-nav-mobile-padding-bottom);
  }

  .persona-toggle {
    max-width: var(--erp-persona-mobile-max-width);
  }

  .nav-button {
    min-width: var(--erp-nav-mobile-min-width);
  }

  .sidebar-status {
    display: var(--erp-display-none);
  }

  .workspace {
    width: var(--erp-size-full);
    max-width: var(--erp-size-mobile-max);
    min-width: var(--erp-size-zero);
    overflow: var(--erp-overflow-hidden);
    padding: var(--erp-app-workspace-padding-mobile);
  }

  .status-grid,
  .plant-summary-grid,
  .plant-lane-grid,
  .exception-grid,
  .content-grid {
    grid-template-columns: var(--erp-grid-single);
  }

  .topbar {
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  h1 {
    font-size: var(--erp-type-display-mobile);
  }

  .topbar {
    display: grid;
  }

  .topbar-actions,
  .button-row {
    width: var(--erp-size-full);
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .locale-toggle {
    flex: var(--erp-locale-mobile-flex);
  }

  .locale-button {
    flex: var(--erp-flex-fill);
  }

  .primary-button,
  .secondary-button,
  .danger-button,
  .quiet-button {
    flex: var(--erp-flex-fill);
  }

  .status-grid,
  .field-grid,
  .capture-grid,
  .capability-row,
  .movement-row,
  .plant-step,
  .toggle-row {
    grid-template-columns: var(--erp-grid-single);
  }

  .chat-composer {
    grid-template-columns: var(--erp-grid-single);
  }
}