/* 丰凯云物联 · 设备监测实时数值显示设置 */

.fk-monitor-value-controls {
  box-sizing: border-box;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  margin-left: 9px;
  padding: 3px 5px 3px 9px;
  border: 1px solid var(--fk-border, #dfe5ec);
  border-radius: 9px;
  color: var(--fk-text-soft, #46506b);
  background: var(--fk-surface-soft, #f7f9fd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  vertical-align: middle;
}

.fk-monitor-setting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fk-muted, #78859b);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.fk-monitor-setting + .fk-monitor-setting {
  padding-left: 8px;
  border-left: 1px solid var(--fk-divider, #edf0f6);
}

.fk-monitor-font-size {
  height: 27px;
  min-width: 92px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--fk-border, #dfe5ec);
  border-radius: 7px;
  color: var(--fk-text, #202a44);
  background: var(--fk-surface, #fff);
  cursor: pointer;
  font: 600 12px/27px inherit;
  outline: none;
}

.fk-monitor-font-size:focus-visible,
.fk-monitor-font-color:focus-visible,
.fk-monitor-setting-reset:focus-visible {
  outline: 3px solid rgba(var(--fk-primary-rgb, 79, 110, 247), .2);
  outline-offset: 1px;
}

.fk-monitor-font-color {
  box-sizing: border-box;
  width: 29px;
  height: 27px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--fk-border, #dfe5ec);
  border-radius: 7px;
  background: var(--fk-surface, #fff);
  cursor: pointer;
}

.fk-monitor-font-color::-webkit-color-swatch-wrapper { padding: 0; }
.fk-monitor-font-color::-webkit-color-swatch { border: 0; border-radius: 4px; }

.fk-monitor-color-code {
  min-width: 51px;
  color: var(--fk-muted, #78859b);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
}

.fk-monitor-setting-reset {
  height: 27px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--fk-primary, #4f6ef7);
  background: rgba(var(--fk-primary-rgb, 79, 110, 247), .08);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.fk-monitor-setting-reset:hover {
  border-color: rgba(var(--fk-primary-rgb, 79, 110, 247), .28);
  background: rgba(var(--fk-primary-rgb, 79, 110, 247), .14);
}

html body.fk-monitor-display-active #app .card-view-item__content .value,
html body.fk-monitor-display-active #app .card-view-item__content > .success,
html body.fk-monitor-display-active #app .card-view-item__content span.success,
html body.fk-monitor-display-active #app .list-dp-card .card-view-item__content .value,
html body.fk-monitor-display-active #app .list-dp-card .card-view-item__content > .success,
html body.fk-monitor-display-active #app .list-dp-card .card-view-item__content span.success,
html body.fk-monitor-display-active #app .app-container > .bd-row > .bd-col.flex-1 .el-table--fluid-height .value,
html body.fk-monitor-display-active #app .app-container .el-table--fluid-height .success .value {
  color: var(--fk-monitor-value-color, #2563eb) !important;
  font-size: var(--fk-monitor-value-size, 24px) !important;
  line-height: 1.18 !important;
}

html body.fk-monitor-display-active #app .card-view-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 12px !important;
}

html body.fk-monitor-display-active #app .card-view-wrapper .card-view-item {
  box-sizing: border-box !important;
  align-self: flex-start !important;
  flex: 0 0 var(--fk-monitor-card-item-width, var(--fk-monitor-card-width, 171px)) !important;
  width: var(--fk-monitor-card-item-width, var(--fk-monitor-card-width, 171px)) !important;
  min-width: var(--fk-monitor-card-item-width, var(--fk-monitor-card-width, 171px)) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: visible !important;
}

html body.fk-monitor-display-active #app .card-view-wrapper .card-view-item__content {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--fk-monitor-card-height, 116px) !important;
  height: auto !important;
  padding: 14px 12px 10px !important;
  overflow: hidden !important;
}

html body.fk-monitor-display-active #app .card-view-wrapper .card-view-item__content .value,
html body.fk-monitor-display-active #app .card-view-wrapper .card-view-item__content > .success,
html body.fk-monitor-display-active #app .card-view-wrapper .card-view-item__content span.success {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.16 !important;
}

html body.fk-monitor-display-active #app .el-table--fluid-height .el-table__body tr > td {
  height: calc(var(--fk-monitor-value-size, 24px) + 46px) !important;
}

@media (max-width: 1180px) {
  .fk-monitor-value-controls {
    display: flex;
    width: 100%;
    margin: 8px 0 0;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .fk-monitor-value-controls { align-items: stretch; }
  .fk-monitor-setting { flex: 1 1 auto; }
  .fk-monitor-color-code { display: none; }
}