/* Device monitor: compact the right-hand live data list only. */
html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card > .el-card__body {
  padding: 8px 10px 10px !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table--fluid-height {
  border: 1px solid var(--fk-divider, #e8edf5) !important;
  border-radius: 8px !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body-wrapper {
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body {
  border-spacing: 0 !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr {
  box-shadow: none !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr > td {
  height: 44px !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--fk-divider, #e8edf5) !important;
  vertical-align: middle;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr:last-child > td {
  border-bottom: 0 !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr:nth-child(even) > td {
  background: var(--fk-surface, #ffffff) !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr:hover > td {
  background: var(--fk-hover, #eff5ff) !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body .cell {
  padding: 0 8px !important;
  line-height: 20px !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .table-label {
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 500 !important;
  color: var(--fk-text-soft, #65758d) !important;
  margin: 0 0 2px !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .title-3 {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .value {
  font-variant-numeric: tabular-nums;
  font-weight: 650 !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .time {
  font-size: 12px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr > td:first-child .cell {
  padding: 0 3px !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr > td:first-child .el-image {
  padding: 2px !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr > td:last-child .cell {
  display: flex;
  justify-content: center;
  padding: 0 6px !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr > td:last-child .el-button--text {
  min-height: 30px;
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  white-space: nowrap;
  transform: none !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-button--text:focus-visible {
  outline: 2px solid var(--fk-primary, #2563eb);
  outline-offset: 2px;
}

@media (min-width: 761px) {
  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body colgroup > col:last-child {
    width: 100px !important;
  }

  /* Show the column descriptions once; retain per-row text for screen readers. */
  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr:not(:first-child) .table-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 760px) {
  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr {
    margin-bottom: 6px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .el-table__body tr > td {
    height: auto !important;
    padding: 3px 0 !important;
    border-bottom: 0 !important;
  }
}

/* Selectable full-width list; layout belongs to Vue, so history handlers and
   live data updates remain attached to the original table rows. */
html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card {
  container-type: inline-size;
  min-width: 0;
}

html body.fk-monitor-display-active #app .dp-card .xc-monitor-layout-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

html body.fk-monitor-display-active #app .dp-card .xc-monitor-layout-label,
html body.fk-monitor-display-active #app .dp-card .xc-monitor-layout-hint {
  color: var(--fk-text-soft, #65758d);
  font-size: 12px;
}

html body.fk-monitor-display-active #app .dp-card .xc-monitor-layout-hint {
  margin-left: auto;
}

html body.fk-monitor-display-active #app .dp-card .xc-monitor-layout-controls button {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--fk-divider, #dde5f2);
  border-radius: 6px;
  background: var(--fk-surface, #fff);
  color: var(--fk-text-soft, #65758d);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

html body.fk-monitor-display-active #app .dp-card .xc-monitor-layout-controls button.is-active {
  color: var(--fk-primary, #2563eb);
  background: var(--fk-hover, #edf3ff);
  border-color: var(--fk-primary, #2563eb);
  font-weight: 600;
}

html body.fk-monitor-display-active #app .dp-card .xc-monitor-layout-controls button:focus-visible {
  outline: 2px solid var(--fk-primary, #2563eb);
  outline-offset: 2px;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-data-table {
  --xc-action-width: 104px;
  width: 100% !important;
  max-width: 100%;
  border: 0 !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-command-enabled {
  --xc-action-width: 176px;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:last-child .cell {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-write-button {
  color: var(--fk-primary, #2563eb) !important;
  background: var(--fk-hover, #edf3ff) !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-command-status {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  line-height: 15px;
  color: var(--fk-text-soft, #65758d);
}

html body.fk-monitor-display-active #app .dp-card.xc-monitor-data-fullscreen {
  position: fixed !important;
  inset: 8px !important;
  z-index: 1900 !important;
  width: calc(100vw - 16px) !important;
  max-width: none !important;
  height: calc(100vh - 16px) !important;
  height: calc(100dvh - 16px) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: var(--fk-surface, #fff) !important;
  box-shadow: 0 0 0 12px rgba(15, 23, 42, .28) !important;
}

html body.fk-monitor-display-active #app .xc-monitor-data-fullscreen > .el-card__header {
  flex-shrink: 0;
}

html body.fk-monitor-display-active #app .xc-monitor-data-fullscreen > .el-card__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px !important;
}

html body.fk-monitor-display-active #app .xc-monitor-data-fullscreen .clearfix .fr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

html body.fk-monitor-display-active #app .xc-monitor-data-fullscreen .card-view-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fk-monitor-card-width, 171px)), 1fr));
  gap: 12px !important;
  overflow-y: auto !important;
  padding: 2px 4px 8px;
  align-items: stretch !important;
}

html body.fk-monitor-display-active #app .xc-monitor-data-fullscreen .card-view-wrapper .card-view-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  align-self: stretch !important;
}

html body.fk-monitor-display-active #app .xc-monitor-data-fullscreen .card-view-wrapper .title {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

html body.fk-monitor-display-active #app .xc-monitor-data-fullscreen .card-view-wrapper .value {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

html body.fk-monitor-display-active #app .dp-card .xc-monitor-card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

html body.fk-monitor-display-active #app .dp-card .xc-monitor-card-actions .el-button {
  min-height: 30px;
  padding: 5px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--fk-primary, #2563eb) !important;
}

html body.fk-monitor-display-active #app .xc-monitor-data-fullscreen .data-wrapper {
  height: auto !important;
  padding: 0 !important;
}

html body.fk-monitor-display-active #app .xc-monitor-fullscreen-chart {
  height: calc(100vh - 180px);
  height: calc(100dvh - 180px);
  min-height: 320px;
}

html body.fk-monitor-display-active #app .xc-monitor-fullscreen-chart > div,
html body.fk-monitor-display-active #app .xc-monitor-fullscreen-chart .container,
html body.fk-monitor-display-active #app .xc-monitor-fullscreen-chart .data-wrapper {
  height: 100% !important;
  min-height: 0;
}

.xc-monitor-command-dialog {
  max-width: calc(100vw - 24px);
}

.xc-monitor-command-dialog .el-dialog__body {
  padding: 16px 20px;
}

.xc-monitor-command-note {
  color: #65758d;
  font-size: 12px;
  line-height: 1.6;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .el-table__body-wrapper {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  padding-right: 2px;
  box-sizing: border-box;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .el-table__body {
  display: block !important;
  width: 100% !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list colgroup {
  display: none !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list tbody {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  width: 100%;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 tbody {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .el-table__body tr {
  display: grid !important;
  grid-template-columns: 30px minmax(110px, 1.1fr) minmax(80px, .8fr) minmax(150px, 1fr) var(--xc-action-width, 104px);
  align-items: center;
  min-width: 0;
  width: auto !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fk-divider, #e8edf5) !important;
  border-radius: 0 !important;
  background: var(--fk-surface-soft, #f7f9fd);
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 .el-table__body tr {
  border: 1px solid var(--fk-divider, #e8edf5) !important;
  border-radius: 8px !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .el-table__body tr:nth-child(even) {
  background: var(--fk-surface, #ffffff);
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .el-table__body tr:hover {
  background: var(--fk-hover, #eff5ff);
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .el-table__body tr > td {
  display: block !important;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .title-3 {
  display: block;
  max-width: 10em;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}

html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .value,
html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .time {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

@container (min-width: 800px) {
  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 tr:nth-child(2) .table-label {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0 0 2px !important;
    overflow: visible;
    clip: auto;
  }
}

@container (max-width: 799px) {
  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 tbody {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

@container (min-width: 800px) and (max-width: 1439px) {
  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 .el-table__body tr {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, .8fr) var(--xc-action-width, 104px);
    gap: 2px 0;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 td:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 td:nth-child(4) {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .xc-monitor-layout-2 td:last-child {
    grid-column: 4;
    grid-row: 1 / 3;
  }
}

@container (max-width: 700px) {
  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .el-table__body tr {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, .8fr) var(--xc-action-width, 104px);
    gap: 2px 0;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:nth-child(4) {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:last-child {
    grid-column: 4;
    grid-row: 1 / 3;
  }
}

@container (max-width: 380px) {
  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list .el-table__body tr {
    grid-template-columns: 28px minmax(0, 1fr) var(--xc-action-width, 96px);
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
  }

  html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .dp-card .xc-monitor-list td:last-child {
    grid-column: 3;
    grid-row: 1 / 4;
  }
}