/* Status keep-alive MQTT - topbar, selecao e monitoramento */

.comm-status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #94a3b8;
  vertical-align: middle;
  box-shadow: none;
}
.comm-status-dot.ok { background: #22c55e; }
.comm-status-dot.falha { background: #f59e0b; }
.comm-status-dot.offline6h { background: #ea580c; }
.comm-status-dot.offline24h { background: #dc2626; }
.comm-status-dot.semSinal { background: #94a3b8; }
.comm-status-dot.is-hidden { display: none !important; }

.premium-select-box .select-box-value-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.premium-select-box .select-box-value-row .select-box-value {
  flex: 1 1 auto;
  min-width: 0;
}
.premium-select-box--uo .comm-status-dot {
  margin: 0;
  width: 0.48rem;
  height: 0.48rem;
  flex-shrink: 0;
}

.cliente-card { position: relative; }
.cliente-card .comm-status-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  line-height: 0;
}
.cliente-card .comm-status-badge .comm-status-dot {
  width: 0.72rem;
  height: 0.72rem;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.cliente-card .comm-status-badge:not(.is-problem) { display: none; }
.cliente-card .comm-status-badge span:not(.comm-status-dot) { display: none !important; }

.sistema-card { position: relative; }
.sistema-card .comm-status-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  line-height: 0;
}
.sistema-card .comm-status-badge .comm-status-dot {
  width: 0.65rem;
  height: 0.65rem;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.sistema-card .comm-status-badge span:not(.comm-status-dot) { display: none !important; }

.mon-comm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.15rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #E4E7EC;
  background: #fff;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mon-comm-chip.ok { color: #15803d; border-color: #BBF7D0; background: #F0FDF4; }
.mon-comm-chip.falha { color: #b45309; border-color: #FDE68A; background: #FFFBEB; }
.mon-comm-chip.offline6h { color: #c2410c; border-color: #FDBA74; background: #FFF7ED; }
.mon-comm-chip.offline24h,
.mon-comm-chip.semSinal { color: #b91c1c; border-color: #FECACA; background: #FEF2F2; }
.mon-comm-chip .comm-status-dot { box-shadow: none; flex-shrink: 0; }

.mon-comm-banner { display: none !important; }

@media (max-width: 767.98px) {
  .premium-select-box .select-box-value-row {
    width: 100% !important;
    max-width: 100% !important;
  }
  .premium-select-box .select-box-value-row .select-box-value {
    width: auto !important;
    flex: 1 1 auto !important;
    display: block !important;
  }
  .premium-select-box--uo .comm-status-dot {
    display: inline-block !important;
  }
  .premium-select-box--uo .comm-status-dot.is-hidden {
    display: none !important;
  }
}


.mon-page-title-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
}
.mon-page-title-main {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 1 auto;
  min-width: 0;
}
.mon-page-title-text {
  flex: 0 0 auto;
  white-space: nowrap;
}
.mon-page-title-row .mon-comm-chip {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
}