/*
 * TOP1 UI refinement layer — Iteration 06.
 * Detailed component pass after tokens/polish and before final safety guards.
 * Rules stay override-light: no priority flags, no legacy app.css rewrites.
 */
:root {
  --top1-refine-panel-border: rgb(148 163 184 / 0.22);
  --top1-refine-panel-bg: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(248 250 252 / 0.98));
  --top1-refine-panel-bg-warm: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(250 252 255 / 0.98));
  --top1-refine-chip-bg: rgb(241 245 249 / 0.9);
  --top1-refine-chip-border: rgb(203 213 225 / 0.72);
  --top1-refine-row-hover: rgb(227 6 19 / 0.045);
  --top1-refine-danger-line: rgb(220 38 38 / 0.24);
  --top1-refine-warning-line: rgb(180 83 9 / 0.24);
  --top1-refine-success-line: rgb(21 128 61 / 0.24);
}

.top1-app-shell {
  background:
    radial-gradient(circle at 82% 0%, rgb(227 6 19 / 0.08), transparent 32rem),
    linear-gradient(180deg, var(--top1-bg, #eef3f8), #e7edf4);
}

.top1-app-main {
  min-height: 100dvh;
}

.top1-app-content {
  min-height: 100dvh;
  padding-block: clamp(12px, 1.4vw, 20px);
}

.top1-workspace-single,
.top1-dashboard-board,
.top1-clients-workspace,
.top1-dashboard-main,
.top1-clients-main,
.top1-diagnostics-layout,
.top1-order-detail-flow,
.top1-data-management-grid {
  min-width: 0;
  max-width: 100%;
}

.top1-content-card,
.top1-dashboard-card,
.top1-clients-card,
.top1-diagnostics-card,
.top1-data-management-card,
.top1-order-detail-panel,
.top1-order-work-card,
.top1-repair-block,
.top1-finance-card,
.top1-team-card,
.top1-knowledge-card {
  background: var(--top1-refine-panel-bg);
  border: 1px solid var(--top1-refine-panel-border);
  box-shadow: var(--top1-shadow-card, 0 12px 30px rgb(15 23 42 / 0.08));
}

.top1-content-card:hover,
.top1-dashboard-card:hover,
.top1-clients-card:hover,
.top1-diagnostics-card:hover,
.top1-order-work-card:hover,
.top1-repair-block:hover {
  border-color: rgb(148 163 184 / 0.36);
}

.top1-card-header,
.top1-dashboard-card-head,
.top1-clients-card-head,
.top1-diagnostics-card-head,
.top1-order-detail-head,
.top1-repair-block-head,
.top1-data-management-head {
  align-items: flex-start;
}

.top1-card-header h1,
.top1-card-header h2,
.top1-card-header h3,
.top1-dashboard-card-head h2,
.top1-clients-card-head h2,
.top1-diagnostics-card-head h2,
.top1-order-detail-head h1,
.top1-repair-block-head h2,
.top1-data-management-head h2 {
  letter-spacing: -0.015em;
  line-height: 1.18;
}

.top1-card-header p,
.top1-dashboard-card-head p,
.top1-clients-card-head p,
.top1-diagnostics-card-head p,
.top1-order-detail-head p,
.top1-repair-block-head p,
.top1-data-management-head p {
  max-width: 72ch;
}

.top1-summary-card,
.top1-clients-summary-card,
.top1-kpi-card,
.top1-operational-kpi,
.top1-diagnostics-summary-card,
.top1-diagnostics-priority-card,
.top1-diagnostics-parameter-card,
.top1-dashboard-status-card {
  background: var(--top1-refine-panel-bg-warm);
  border: 1px solid var(--top1-refine-panel-border);
  border-radius: var(--top1-radius-lg, 16px);
}

.top1-diagnostics-shell {
  display: grid;
  gap: var(--top1-space-sm, 12px);
}

.top1-diagnostics-shell-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  align-items: start;
  gap: var(--top1-space-sm, 12px);
  padding: clamp(14px, 1.35vw, 20px);
  border: 1px solid var(--top1-refine-panel-border);
  border-radius: var(--top1-radius-lg, 16px);
  background: var(--top1-refine-panel-bg);
  box-shadow: var(--top1-shadow-card, 0 12px 30px rgb(15 23 42 / 0.08));
}

.top1-diagnostics-shell-copy {
  min-width: 0;
}

.top1-diagnostics-shell-copy h1 {
  margin: 4px 0 6px;
  font-size: clamp(1.25rem, 1.55vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.top1-diagnostics-shell-copy p {
  max-width: 72ch;
  margin: 0;
  color: var(--top1-text-soft, #516074);
}

.top1-diagnostics-shell-status {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.top1-diagnostics-shell-focus,
.top1-diagnostics-shell-kpis {
  min-width: 0;
  border: 1px solid var(--top1-refine-panel-border);
  border-radius: var(--top1-radius-lg, 16px);
  background: rgb(248 250 252 / 0.82);
}

.top1-diagnostics-shell-focus {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}

.top1-diagnostics-shell-focus span,
.top1-diagnostics-shell-kpis span {
  font-size: 0.82rem;
  color: var(--top1-text-soft, #516074);
}

.top1-diagnostics-shell-focus strong {
  font-size: 1.08rem;
  line-height: 1.15;
}

.top1-diagnostics-shell-focus small {
  color: var(--top1-text-muted, #64748b);
}

.top1-diagnostics-shell-kpis {
  display: grid;
  gap: 10px;
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px 14px;
}

.top1-diagnostics-shell-kpis b {
  display: block;
  margin-bottom: 2px;
  font-size: 1.04rem;
  line-height: 1.1;
  color: var(--top1-text, #0f172a);
}

.top1-diagnostics-shell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--top1-control-gap, 8px);
  align-items: center;
  grid-column: 1 / -1;
}

.top1-diagnostics-shell-actions > .top1-secondary-button,
.top1-diagnostics-shell-actions > .top1-diagnostics-interval-form {
  margin: 0;
}

.top1-diagnostics-shell-actions .top1-diagnostics-interval-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--top1-control-gap, 8px);
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--top1-refine-panel-border);
  border-radius: var(--top1-radius-lg, 16px);
  background: rgb(248 250 252 / 0.82);
}

.top1-diagnostics-shell-actions .top1-secondary-button,
.top1-diagnostics-shell-actions .top1-diagnostics-interval-form button {
  min-height: 34px;
  padding-block: 7px;
}

.top1-diagnostics-shell-actions .top1-diagnostics-interval-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.top1-diagnostics-shell-actions .top1-diagnostics-interval-form label span {
  white-space: nowrap;
}

.top1-diagnostics-shell-actions .top1-diagnostics-interval-form input {
  width: 88px;
  min-height: 34px;
}

.top1-diagnostics-shell-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--top1-control-gap, 8px);
  padding: 6px;
  border: 1px solid var(--top1-refine-panel-border);
  border-radius: var(--top1-radius-lg, 16px);
  background: var(--top1-refine-panel-bg);
  box-shadow: var(--top1-shadow-card, 0 12px 30px rgb(15 23 42 / 0.08));
}

.top1-diagnostics-group-button {
  display: flex;
  flex: 1 1 170px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: var(--top1-control-min-height, 42px);
  padding: 9px 12px;
  border: 1px solid var(--top1-refine-chip-border);
  border-radius: var(--top1-radius-md, 12px);
  background: rgb(255 255 255 / 0.96);
  color: var(--top1-text, #0f172a);
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.top1-diagnostics-group-button span {
  font-weight: 700;
  line-height: 1.16;
}

.top1-diagnostics-group-button small {
  flex: 0 0 auto;
  color: var(--top1-text-soft, #516074);
  font-size: 0.76rem;
}

.top1-diagnostics-group-button:hover {
  transform: translateY(-1px);
  border-color: rgb(227 6 19 / 0.34);
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.08);
}

.top1-diagnostics-group-button.is-active {
  border-color: rgb(227 6 19 / 0.34);
  background: var(--top1-brand-red-soft, #fff1f2);
  color: var(--top1-brand-red, #e30613);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
}

.top1-diagnoz-subnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--top1-control-gap, 8px);
  padding: 6px;
  border: 1px solid var(--top1-refine-panel-border);
  border-radius: var(--top1-radius-lg, 16px);
  background: var(--top1-refine-panel-bg);
  box-shadow: var(--top1-shadow-card, 0 12px 30px rgb(15 23 42 / 0.08));
}

.top1-diagnoz-subtab-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: var(--top1-control-min-height, 42px);
  padding: 9px 12px;
  border: 1px solid var(--top1-refine-chip-border);
  border-radius: var(--top1-radius-md, 12px);
  background: rgb(255 255 255 / 0.96);
  color: var(--top1-text, #0f172a);
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.top1-diagnoz-subtab-button span {
  min-width: 0;
  font-weight: 700;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.top1-diagnoz-subtab-button small {
  flex: 0 1 auto;
  max-width: 100%;
  overflow: visible;
  color: var(--top1-text-soft, #516074);
  font-size: 0.76rem;
  line-height: 1.15;
  text-align: right;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.top1-diagnoz-subtab-button:hover {
  transform: translateY(-1px);
  border-color: rgb(227 6 19 / 0.34);
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.08);
}

.top1-diagnoz-subtab-button.is-active {
  border-color: rgb(227 6 19 / 0.34);
  background: var(--top1-brand-red-soft, #fff1f2);
  color: var(--top1-brand-red, #e30613);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
}

.top1-diagnostics-group-blocks {
  display: grid;
  gap: var(--top1-space-sm, 12px);
}

@media (max-width: 1100px) {
  .top1-diagnostics-shell-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .top1-diagnostics-shell-status {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .top1-diagnostics-shell-actions {
    align-items: stretch;
  }
}

@media (max-width: 680px) {
  .top1-diagnostics-shell-header {
    padding: 16px;
  }

  .top1-diagnostics-shell-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top1-diagnostics-shell-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .top1-diagnostics-group-button {
    padding: 13px 14px;
  }

  .top1-diagnoz-subnav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .top1-diagnoz-subtab-button {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 10px;
  }

  .top1-diagnoz-subtab-button small {
    font-size: 0.72rem;
    text-align: left;
  }

  .top1-diagnostics-shell-actions .top1-diagnostics-interval-form {
    width: 100%;
  }
}

.top1-summary-card,
.top1-clients-summary-card,
.top1-kpi-card,
.top1-operational-kpi {
  padding: clamp(12px, 1.4vw, 18px);
}

.top1-summary-value,
.top1-clients-summary-value,
.top1-kpi-card strong,
.top1-operational-kpi strong {
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.top1-inline-badge,
.top1-app-badge,
.top1-status-pill,
.top1-clients-status,
.top1-parts-status,
.top1-finance-status,
.top1-orders-mini-status,
.top1-ops-status,
.top1-diagnostics-status-label,
.top1-diagnostics-severity,
.top1-diagnostics-chip,
.top1-login-chip {
  border-color: var(--top1-refine-chip-border);
  background: var(--top1-refine-chip-bg);
  line-height: 1.15;
}

.top1-inline-badge.is-danger,
.top1-clients-status.is-danger,
.top1-diagnostics-severity.is-critical,
.top1-diagnostics-severity.is-error,
.top1-diagnostics-status-label.is-error {
  border-color: var(--top1-danger-border, #efb8b8);
  background: var(--top1-danger-soft, #fff1f2);
  color: var(--top1-danger, #c92a2a);
}

.top1-inline-badge.is-warning,
.top1-clients-status.is-warning,
.top1-diagnostics-severity.is-warning,
.top1-diagnostics-status-label.is-warning {
  border-color: var(--top1-warning-border, #f4d19a);
  background: var(--top1-warning-soft, #fff7e8);
  color: var(--top1-warning, #b45309);
}

.top1-inline-badge.is-success,
.top1-clients-status.is-success,
.top1-diagnostics-status-label.is-success {
  border-color: var(--top1-success-border, #b8e6c7);
  background: var(--top1-success-soft, #ecfdf3);
  color: var(--top1-success, #12814a);
}

.top1-app-button,
.top1-secondary-button,
.top1-first-owner-setup-button,
.top1-diagnostics-action-button,
.top1-diagnostics-device-action-button,
.top1-diagnostics-contact-status-button,
.top1-diagnostics-planner-visit-button,
.top1-order-link,
.top1-planner-action-pill,
.top1-planner-new-button {
  position: relative;
  isolation: isolate;
  border-radius: var(--top1-radius-md, 12px);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.top1-app-button:hover,
.top1-secondary-button:hover,
.top1-first-owner-setup-button:hover,
.top1-diagnostics-action-button:hover,
.top1-diagnostics-device-action-button:hover,
.top1-diagnostics-contact-status-button:hover,
.top1-diagnostics-planner-visit-button:hover,
.top1-order-link:hover,
.top1-planner-action-pill:hover,
.top1-planner-new-button:hover {
  transform: translateY(-1px);
}

.top1-app-button:active,
.top1-secondary-button:active,
.top1-first-owner-setup-button:active,
.top1-diagnostics-action-button:active,
.top1-diagnostics-device-action-button:active,
.top1-diagnostics-contact-status-button:active,
.top1-diagnostics-planner-visit-button:active,
.top1-order-link:active,
.top1-planner-action-pill:active,
.top1-planner-new-button:active {
  transform: translateY(0);
}

.top1-secondary-button,
.top1-order-link,
.top1-diagnostics-device-action-button {
  border-color: var(--top1-border-strong, #cbd5e1);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.top1-app-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.top1-app-shell textarea,
.top1-app-shell select,
.top1-login-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.top1-login-shell textarea,
.top1-login-shell select {
  padding-inline: 12px;
  box-shadow: inset 0 1px 0 rgb(15 23 42 / 0.03);
}

.top1-app-shell input::placeholder,
.top1-app-shell textarea::placeholder,
.top1-login-shell input::placeholder,
.top1-login-shell textarea::placeholder {
  color: rgb(100 116 139 / 0.74);
}

.top1-client-form,
.top1-client-form-grid,
.top1-order-line-form,
.top1-order-line-form-grid,
.top1-diagnostics-planner-form-row,
.top1-data-inline-form,
.top1-team-edit-form,
.top1-parts-selection-form,
.top1-repair-plan-form {
  min-width: 0;
}

.top1-client-form-field,
.top1-client-form-field-wide,
.top1-planner-field,
.top1-order-line-form label,
.top1-diagnostics-planner-form-row label,
.top1-data-inline-form label,
.top1-team-edit-form label,
.top1-parts-selection-form label,
.top1-repair-plan-form label {
  min-width: 0;
}

.top1-client-form-actions,
.top1-order-line-form-actions,
.top1-diagnostics-row-actions,
.top1-diagnostics-priority-actions,
.top1-diagnostics-device-actions,
.top1-data-management-actions,
.top1-planner-toolbar,
.top1-parts-selection-actions {
  gap: var(--top1-control-gap, 8px);
}

.top1-table-placeholder,
.top1-order-detail-table,
.top1-finance-expense-table,
.top1-data-management-list,
.top1-diagnostics-entry-list,
.top1-diagnostics-alert-list,
.top1-diagnostics-vehicle-list {
  border-radius: var(--top1-radius-lg, 16px);
  background: rgb(255 255 255 / 0.72);
}

.top1-table-row,
.top1-data-management-row,
.top1-diagnostics-entry-row,
.top1-diagnostics-alert-row,
.top1-diagnostics-vehicle-row,
.top1-order-detail-table-row {
  transition: background-color 120ms ease;
}

.top1-table-row:not(.top1-table-row-head):hover,
.top1-data-management-row:not(.top1-data-management-row-head):hover,
.top1-diagnostics-entry-row:hover,
.top1-diagnostics-alert-row:hover,
.top1-diagnostics-vehicle-row:hover,
.top1-order-detail-table-row:hover {
  background: var(--top1-refine-row-hover);
}

.top1-table-row-head,
.top1-data-management-row-head,
.top1-order-detail-table-head {
  position: sticky;
  top: 0;
  z-index: var(--top1-z-sticky, 30);
  background: rgb(248 250 252 / 0.96);
  backdrop-filter: blur(8px);
}

.top1-order-detail-flow {
  gap: clamp(12px, 1.4vw, 18px);
}

.top1-order-work-card,
.top1-order-part-card,
.top1-order-part-empty-card,
.top1-parts-selection-card,
.top1-order-action-panel {
  border-radius: var(--top1-radius-lg, 16px);
}

.top1-order-work-card-actions,
.top1-order-detail-actions,
.top1-order-payment-actions,
.top1-parts-selection-targets,
.top1-parts-selection-actions,
.top1-parts-selection-transfer-state {
  min-width: 0;
  max-width: 100%;
}

.top1-order-work-price-panel,
.top1-order-part-price-panel,
.top1-order-payment-total,
.top1-parts-selection-facts,
.top1-parts-selection-candidate-grid,
.top1-parts-selection-suggestion-reasons {
  gap: 8px;
}

.top1-order-work-card :where(h3, p, small, span, strong, a),
.top1-order-part-card :where(h3, p, small, span, strong, a),
.top1-parts-selection-card :where(h3, h4, p, small, span, strong, a),
.top1-order-detail-panel :where(h1, h2, h3, p, small, span, strong, a) {
  overflow-wrap: anywhere;
}

.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-overview-card,
.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-priority-card,
.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-alert-row,
.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-entry-row,
.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-mobile-device,
.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-device-control-panel {
  border-radius: var(--top1-radius-lg, 16px);
}

.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-priority-card.is-critical,
.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-alert-row.is-critical {
  border-left: 4px solid var(--top1-danger, #c92a2a);
}

.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-priority-card.is-warning,
.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-alert-row.is-warning {
  border-left: 4px solid var(--top1-warning, #b45309);
}

.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-priority-card.is-success,
.top1-app-shell[data-top1-section="diagnostics"] .top1-diagnostics-alert-row.is-success {
  border-left: 4px solid var(--top1-success, #12814a);
}

.top1-diagnostics-meta-line,
.top1-diagnostics-chip-row,
.top1-diagnostics-state-day-meta,
.top1-diagnostics-overview-pills {
  row-gap: 6px;
}

.top1-diagnostics-action-button.is-mark_acknowledged,
.top1-diagnostics-contact-status-button.is-contacted,
.top1-diagnostics-device-action-button.is-refresh {
  border-color: var(--top1-success-border, #b8e6c7);
  background: var(--top1-success-soft, #ecfdf3);
  color: var(--top1-success, #12814a);
}

.top1-diagnostics-action-button.is-escalate,
.top1-diagnostics-contact-status-button.is-needs_followup,
.top1-diagnostics-device-action-button.is-revoke {
  border-color: var(--top1-danger-border, #efb8b8);
  background: var(--top1-danger-soft, #fff1f2);
  color: var(--top1-danger, #c92a2a);
}

.top1-planner-shell,
.top1-planner-board,
.top1-planner-inspector,
.top1-planner-card,
.top1-planner-lane {
  min-width: 0;
}

.top1-planner-card,
.top1-planner-inspector,
.top1-planner-lane,
.top1-planner-toolbar {
  border-radius: var(--top1-radius-lg, 16px);
}

.top1-planner-card :where(h3, p, span, small, strong),
.top1-planner-inspector :where(h2, h3, p, span, small, strong),
.top1-planner-lane :where(h2, h3, p, span, small, strong) {
  overflow-wrap: anywhere;
}

.top1-client-portal-entry {
  background:
    radial-gradient(circle at 20% 0%, rgb(227 6 19 / 0.20), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgb(15 23 42 / 0.24), transparent 26rem),
    linear-gradient(180deg, #090f1a, #111827 55%, #0b1120);
}

.top1-client-portal-entry .top1-login-window {
  border-color: rgb(255 255 255 / 0.12);
}

.top1-client-portal-entry .top1-login-meta-item,
.top1-client-portal-entry .top1-login-form-wrap {
  border-radius: var(--top1-radius-lg, 16px);
}

.top1-client-portal-entry .top1-inline-notice {
  border-color: rgb(34 197 94 / 0.28);
}

@media (min-width: 1181px) {
  .top1-app-content {
    padding-inline: clamp(18px, 1.7vw, 28px);
  }

  .top1-workspace {
    gap: clamp(12px, 1.3vw, 18px);
  }
}

@media (max-width: 1180px) {
  .top1-dashboard-status-strip,
  .top1-operational-kpis,
  .top1-kpi-grid,
  .top1-clients-summary-grid,
  .top1-diagnostics-summary-grid,
  .top1-diagnostics-priority-grid,
  .top1-order-detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .top1-app-content {
    padding-block: 12px;
  }

  .top1-dashboard-status-strip,
  .top1-operational-kpis,
  .top1-kpi-grid,
  .top1-clients-summary-grid,
  .top1-diagnostics-summary-grid,
  .top1-diagnostics-priority-grid,
  .top1-order-detail-kpis,
  .top1-parts-selection-facts,
  .top1-parts-selection-candidate-grid,
  .top1-parts-selection-targets,
  .top1-order-work-price-panel,
  .top1-order-part-price-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .top1-dashboard-toolbar,
  .top1-clients-toolbar,
  .top1-parts-toolbar,
  .top1-finance-toolbar,
  .top1-orders-toolbar,
  .top1-toolbar,
  .top1-planner-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .top1-table-row,
  .top1-data-management-row,
  .top1-diagnostics-entry-row,
  .top1-diagnostics-alert-row,
  .top1-diagnostics-vehicle-row,
  .top1-order-detail-table-row {
    min-width: 680px;
  }

  .top1-client-form-actions,
  .top1-order-line-form-actions,
  .top1-diagnostics-row-actions,
  .top1-diagnostics-priority-actions,
  .top1-diagnostics-device-actions,
  .top1-data-management-actions,
  .top1-parts-selection-actions {
    align-items: stretch;
  }

  .top1-client-form-actions > *,
  .top1-order-line-form-actions > *,
  .top1-diagnostics-row-actions > *,
  .top1-diagnostics-priority-actions > *,
  .top1-diagnostics-device-actions > *,
  .top1-data-management-actions > *,
  .top1-parts-selection-actions > * {
    flex: 1 1 100%;
  }

  .top1-order-add-work-form,
  .top1-order-work-edit-popover-body,
  .top1-parts-selection-card,
  .top1-dropdown,
  .top1-popover,
  .top1-menu,
  .top1-modal,
  .top1-dialog,
  .top1-sheet,
  [role="dialog"] {
    max-width: calc(100dvw - 20px);
    max-height: min(82dvh, 640px);
  }
}

@media (max-width: 520px) {
  .top1-table-row,
  .top1-data-management-row,
  .top1-diagnostics-entry-row,
  .top1-diagnostics-alert-row,
  .top1-diagnostics-vehicle-row,
  .top1-order-detail-table-row {
    min-width: 620px;
  }

  .top1-app-button,
  .top1-secondary-button,
  .top1-first-owner-setup-button,
  .top1-diagnostics-action-button,
  .top1-diagnostics-device-action-button,
  .top1-diagnostics-contact-status-button,
  .top1-diagnostics-planner-visit-button,
  .top1-order-link,
  .top1-planner-action-pill,
  .top1-planner-new-button {
    width: 100%;
  }
}