.smart-workshop-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 8px;
}

.smart-workshop-section-nav button {
  border: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef6f2;
  color: #17664f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.smart-workshop-section-nav button:hover,
.smart-workshop-section-nav button:focus-visible,
.smart-workshop-section-nav button.is-active {
  background: #0b8762;
  color: #fff;
  outline: none;
}

.smart-workshop-section-host {
  min-height: 180px;
}

.smart-workshop-heading-status,
.smart-workshop-v3-status {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.smart-workshop-v3-status {
  font-size: 13px;
  color: #62746d;
}

.smart-workshop-v3-status strong {
  color: #087c59;
}

.smart-workshop-section {
  scroll-margin-top: 16px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dce9e3;
  border-radius: 16px;
  background: #fff;
}

.smart-workshop-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.smart-workshop-section-heading h3,
.smart-workshop-section-heading p {
  margin: 0;
}

.smart-workshop-section-heading p,
.smart-workshop-note,
.smart-workshop-empty {
  color: #62746d;
}

.smart-workshop-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 10px;
}

.smart-workshop-metric {
  display: grid;
  gap: 6px;
  padding: 13px;
  border-radius: 12px;
  background: #f2f7f5;
}

.smart-workshop-metric span {
  color: #62746d;
  font-size: 13px;
}

.smart-workshop-metric strong {
  color: #087c59;
  font-size: 22px;
}

.smart-workshop-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.smart-workshop-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dce9e3;
  border-radius: 12px;
  background: #fbfdfc;
  content-visibility: auto;
  contain-intrinsic-size: 180px;
}

.smart-workshop-card h4,
.smart-workshop-card p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.smart-workshop-card-primary {
  color: #087c59;
  font-weight: 700;
}

.smart-workshop-observation,
.smart-workshop-warning {
  color: #9b5a09;
  font-weight: 700;
}

.smart-workshop-v3-block {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #dce9e3;
}

.smart-workshop-v3-block > h4,
.smart-workshop-v3-block > h5,
.smart-workshop-v3-block-heading h4 {
  margin: 0;
}

.smart-workshop-v3-block-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.smart-workshop-v3-block-heading strong {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #087c59;
}

.smart-workshop-v3-post-table {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.production-web .web-workshop-main-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.production-web .web-workshop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #62746d; margin-bottom: 16px; }
.production-web .web-workshop-details { min-width: 0; margin: 8px 0; color: #536a62; }
.production-web .web-workshop-details summary { cursor: pointer; padding: 8px 0; font-size: 13px; }
.production-web .web-workshop-details code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.production-web .smart-workshop-v3-post-card > .web-workshop-details { grid-column: 1 / -1; padding: 0 12px; }
.production-web .web-workshop-issues article { padding: 12px 16px; border-left: 3px solid #087c59; background: #f1f7f4; border-radius: 8px; }
.production-web .web-workshop-issues article > span { display: block; margin-top: 6px; }
.production-web .web-workshop-issues .is-watch { border-color: #c37a16; background: #fff8eb; }
.production-web .web-workshop-issues .is-critical { border-color: #b83732; background: #fff2f1; }
.production-web .web-workshop-issues p { margin: 6px 0 0; }
@media (max-width: 1024px) {
  .production-web .smart-workshop-v3-post-header-viewport { display: none; }
  .production-web .smart-workshop-v3-post-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-web .smart-workshop-v3-post-cell::before { content: attr(data-label); display: block; color: #62746d; font-size: 12px; font-weight: 400; margin-bottom: 5px; }
  .production-web .web-workshop-main-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .production-web .smart-workshop-v3-post-card { grid-template-columns: minmax(0, 1fr); }
  .production-web .smart-workshop-v3-post-card .smart-workshop-v3-post-cell { padding: 7px 12px; }
  .production-web .smart-workshop-v3-post-cell::before { display: inline-block; min-width: 76px; margin: 0 8px 0 0; }
}

.smart-workshop-v3-post-grid {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-bottom: 4px;
}

.smart-workshop-v3-post-header-viewport {
  position: sticky;
  top: 70px;
  z-index: 2;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgb(23 61 50 / 10%);
}

.smart-workshop-v3-post-header,
.smart-workshop-v3-post-card {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) repeat(3, minmax(100px, 1fr)) minmax(140px, 1.3fr);
  min-width: 0;
  align-items: stretch;
}

.smart-workshop-v3-post-header {
  color: #536a62;
  font-size: 13px;
  background: #f1f7f4;
  border: 1px solid #dce9e3;
  border-radius: 10px;
}

.smart-workshop-v3-post-header strong {
  padding: 9px 11px;
  border-right: 1px solid #dce9e3;
}

.smart-workshop-v3-post-header strong:last-child {
  border-right: 0;
}

.smart-workshop-v3-post-card {
  min-width: 0;
  border: 1px solid #dce9e3;
  border-left: 5px solid #b8d4c8;
  border-radius: 9px;
  background: #fbfdfc;
  content-visibility: auto;
  contain-intrinsic-size: 76px;
}

.smart-workshop-v3-post-card h5,
.smart-workshop-v3-post-cell {
  margin: 0;
  padding: 11px;
  border-right: 1px solid #e5efea;
  overflow-wrap: anywhere;
}

.smart-workshop-v3-post-card h5 {
  color: #173d32;
}

.smart-workshop-v3-post-card > :last-child {
  border-right: 0;
}

.smart-workshop-v3-post-card.is-critical {
  border-left-color: #bd3c28;
  background: #fff8f5;
}

.smart-workshop-v3-post-card.is-high {
  border-left-color: #d78025;
  background: #fffbf4;
}

.smart-workshop-v3-post-card.is-watch {
  border-left-color: #d3ad37;
}

.smart-workshop-v3-bottleneck {
  color: #a34220;
  font-weight: 800;
}

.smart-workshop-v3-summary {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.smart-workshop-v3-route-counts,
.smart-workshop-v3-pending-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.smart-workshop-v3-route-counts span,
.smart-workshop-v3-pending-list p {
  margin: 0;
  padding: 7px 10px;
  border-radius: 9px;
  background: #f1f7f4;
}

.smart-workshop-v3-blockers {
  padding: 12px;
  border: 1px solid #efc2ad;
  border-radius: 10px;
  background: #fff7f3;
  color: #8d3b20;
}

.smart-workshop-v3-blockers p {
  margin: 6px 0 0;
}

.smart-workshop-v3-blocker-group {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #fff;
  color: #61301f;
}

.smart-workshop-v3-blocker-group > strong {
  display: block;
}

.smart-workshop-v3-blocker-action {
  color: #166b52;
  font-weight: 700;
}

.smart-workshop-v3-blocker-orders {
  color: #6d5b53;
  overflow-wrap: anywhere;
}

button.smart-workshop-v3-danger {
  justify-self: start;
  background: #a33b26;
}

button.smart-workshop-v3-danger:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.smart-workshop-v3-device-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.smart-workshop-v3-device-health-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.smart-workshop-v3-device-health-summary span,
.smart-workshop-v3-device-health-badge {
  border-radius: 999px;
  background: #edf3f0;
  color: #50655d;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 10px;
}

.smart-workshop-v3-device-health-summary .is-online,
.smart-workshop-v3-device-health-badge.is-online,
.smart-workshop-v3-device-health-badge.is-recovered {
  background: #def5e8;
  color: #087443;
}

.smart-workshop-v3-device-health-summary .has-warning,
.smart-workshop-v3-device-health-badge.is-action_required,
.smart-workshop-v3-device-health-badge.is-web_update_required,
.smart-workshop-v3-device-health-badge.is-stale,
.smart-workshop-v3-device-health-badge.is-pending {
  background: #fff2ce;
  color: #8a5a00;
}

.smart-workshop-v3-device-health-summary .has-issue,
.smart-workshop-v3-device-health-badge.is-offline,
.smart-workshop-v3-device-health-badge.is-degraded,
.smart-workshop-v3-device-health-badge.is-update_required {
  background: #ffe2df;
  color: #a52b21;
}

.smart-workshop-v3-device.device-health-offline,
.smart-workshop-v3-device.device-health-degraded,
.smart-workshop-v3-device.device-health-update_required {
  border-color: #e6a39d;
}

.smart-workshop-v3-device-cause,
.smart-workshop-v3-device-action,
.smart-workshop-v3-device-error,
.smart-workshop-v3-device-pending {
  border-radius: 8px;
  padding: 7px 9px;
}

.smart-workshop-v3-device-cause { background: #f5f7f6; }
.smart-workshop-v3-device-action { background: #e9f5ef; color: #176845; }
.smart-workshop-v3-device-error { background: #fff0ee; color: #a52b21; }
.smart-workshop-v3-device-pending { background: #fff5db; color: #805800; }
.smart-workshop-v3-device-diagnostic { overflow-wrap: anywhere; font-family: monospace; }
.device-health-action_required .smart-workshop-v3-device-error { background: #fff5db; color: #805800; }

.smart-workshop-v3-device {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #dce9e3;
  border-radius: 10px;
  background: #fbfdfc;
}

.smart-workshop-v3-device span {
  color: #62746d;
  overflow-wrap: anywhere;
}

.smart-workshop-v3-edit-posts {
  justify-self: start;
  margin-top: 5px;
}

.smart-workshop-v3-reconfigure-form {
  display: grid;
  gap: 9px;
  margin-top: 7px;
  padding-top: 10px;
  border-top: 1px solid #dce9e3;
}

.smart-workshop-v3-reconfigure-form[hidden] {
  display: none;
}

.smart-workshop-v3-reconfigure-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.smart-workshop-v3-reconfigure-actions .smart-workshop-pin-status {
  flex: 1 1 220px;
}

.smart-workshop-v3-bind-form {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(420px, 1.6fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid #dce9e3;
  border-radius: 12px;
  background: #f7fbf9;
}

.smart-workshop-v3-bind-form > input {
  width: 100%;
  min-height: 42px;
}

.smart-workshop-v3-post-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px 10px;
  border: 1px solid #cfe0d8;
  border-radius: 10px;
}

.smart-workshop-v3-post-group legend {
  padding: 0 5px;
  color: #476158;
  font-size: 13px;
}

.smart-workshop-v3-post-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid #dce9e3;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.smart-workshop-v3-post-option.is-final {
  border-color: #a8d2c3;
  background: #eef8f4;
}

.smart-workshop-v3-post-option input {
  width: auto;
  min-height: 0;
  margin: 0;
}

.smart-workshop-v3-bind-form .smart-workshop-pin-status {
  grid-column: 1 / -1;
}

.smart-workshop-timeline-stage.is-direct {
  border-left-color: #0b8762;
  background: #eef8f4;
}

.smart-workshop-timeline-stage.is-inferred {
  border-left-color: #d17a31;
  background: #fff7ed;
  color: #783f16;
}

.smart-workshop-event-list,
.smart-workshop-route-stages,
.smart-workshop-timeline {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.smart-workshop-event-list p,
.smart-workshop-route-stages > div,
.smart-workshop-timeline-stage {
  margin: 0;
  padding: 9px 10px;
  border-left: 3px solid #b8d8cc;
  background: #f1f7f4;
  overflow-wrap: anywhere;
}

.smart-workshop-table-list {
  display: grid;
  gap: 8px;
}

.smart-workshop-table-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #dce9e3;
  border-radius: 10px;
  content-visibility: auto;
  contain-intrinsic-size: 72px;
}

.smart-workshop-table-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.smart-workshop-exception {
  grid-template-columns: minmax(190px, 0.9fr) minmax(220px, 1.2fr) minmax(320px, 1.8fr) minmax(190px, 0.9fr);
  border-color: #efd0a8;
  background: #fffaf3;
}

.smart-workshop-exception-problem,
.smart-workshop-exception-handling {
  display: grid;
  gap: 6px;
}

.smart-workshop-exception-handling > strong {
  color: #8d3b20;
}

.smart-workshop-technical-details {
  color: #65756f;
  font-size: 13px;
}

.smart-workshop-technical-details summary {
  cursor: pointer;
}

.smart-workshop-technical-details code {
  display: block;
  margin-top: 5px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.smart-workshop-routes .smart-workshop-card {
  background: #f6f8fb;
}

.smart-workshop-pin-form {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dce9e3;
  border-radius: 12px;
  background: #fbfdfc;
  overflow-anchor: none;
}

.smart-workshop-pin-heading {
  display: grid;
  gap: 4px;
}

.smart-workshop-pin-heading span,
.smart-workshop-pin-status {
  color: #62746d;
  font-size: 13px;
}

.smart-workshop-pin-form select,
.smart-workshop-pin-form input {
  width: 100%;
  min-height: 42px;
}

.smart-workshop-pin-status {
  grid-column: 2 / -1;
}

.smart-workshop-employee-qr {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid #dce9e3;
}

.smart-workshop-employee-qr.hidden {
  display: none;
}

.smart-workshop-employee-qr-preview {
  width: 210px;
  max-width: 100%;
}

.smart-workshop-employee-qr-preview svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .smart-workshop-metrics {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }

  .smart-workshop-card-list,
  .smart-workshop-table-row,
  .smart-workshop-pin-form,
  .smart-workshop-v3-device-list,
  .smart-workshop-v3-bind-form {
    grid-template-columns: 1fr;
  }

  .smart-workshop-v3-summary {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .smart-workshop-pin-status {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .smart-workshop-section-heading {
    display: block;
  }

  .smart-workshop-section-heading p {
    margin-top: 6px;
  }

  .smart-workshop-metrics {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }

  .smart-workshop-heading-status,
  .smart-workshop-v3-status {
    justify-items: start;
  }

  .smart-workshop-v3-summary {
    grid-template-columns: 1fr;
  }
}