/* ==========================================================
   ITALLO VILARDO - MONITORAMENTO PROFISSIONAL
   ========================================================== */

#monitoringView{
  --mon-card:#fff;
  --mon-border:#e4e7ec;
  --mon-soft:#edf0f3;
  --mon-text:#181d27;
  --mon-muted:#717b8c;
  --mon-green:#078347;
  --mon-blue:#2864a8;
  --mon-amber:#a65d00;

  max-width:1500px;
  margin:0 auto;
  padding-bottom:32px;
}

/* ==========================================================
   KPIs
   ========================================================== */

#monitoringView .operation-kpis{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-bottom:15px !important;
}

#monitoringView .operation-kpis article{
  position:relative;

  min-height:80px !important;
  padding:15px 17px !important;

  border:1px solid var(--mon-border) !important;
  border-radius:13px !important;

  background:#fff !important;

  box-shadow:0 3px 12px rgba(16,24,40,.04) !important;
}

#monitoringView .operation-kpis article::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;

  height:2px;

  background:#d8dde4;
}

#monitoringView .operation-kpis article:first-child::before{
  background:#069455;
}

#monitoringView .operation-kpis span{
  color:#687386 !important;

  font-size:8px !important;
  font-weight:800 !important;

  letter-spacing:.11em !important;
}

#monitoringView .operation-kpis strong{
  display:block;

  margin-top:8px !important;

  color:var(--mon-text);

  font-size:23px !important;
  letter-spacing:-.035em;
}

/* ==========================================================
   GRADE
   ========================================================== */

#monitoringView .operation-grid{
  display:grid !important;

  grid-template-columns:
    minmax(260px,3fr)
    minmax(370px,4fr)
    minmax(430px,5fr) !important;

  gap:14px !important;

  align-items:start !important;
}

/* força a segunda linha nas mesmas colunas */
#monitoringView .operation-grid > .panel:nth-child(1),
#monitoringView .operation-grid > .panel:nth-child(4){
  grid-column:1 !important;
}

#monitoringView .operation-grid > .panel:nth-child(2),
#monitoringView .operation-grid > .panel:nth-child(5){
  grid-column:2 !important;
}

#monitoringView .operation-grid > .panel:nth-child(3),
#monitoringView .operation-grid > .panel:nth-child(6){
  grid-column:3 !important;
}

/* ==========================================================
   CARDS PRINCIPAIS
   ========================================================== */

#monitoringView .operation-grid > .panel{
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;

  margin:0 !important;
  padding:16px !important;

  border:1px solid var(--mon-border) !important;
  border-radius:13px !important;

  background:var(--mon-card) !important;

  box-shadow:0 3px 12px rgba(16,24,40,.035) !important;
}

#monitoringView .panel-head{
  min-height:0 !important;

  margin:0 0 9px !important;
  padding:0 0 10px !important;

  border-bottom:1px solid var(--mon-soft);
}

#monitoringView .panel-kicker{
  font-size:7px !important;
  font-weight:800 !important;

  letter-spacing:.15em !important;
}

#monitoringView .panel-head h2{
  margin:4px 0 3px !important;

  color:var(--mon-text);

  font-size:14px !important;
  letter-spacing:-.015em;
}

#monitoringView .panel-head p{
  margin:0 !important;

  color:var(--mon-muted);

  font-size:8px !important;
  line-height:1.4 !important;
}

/* linhas */

#monitoringView .health-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  min-height:33px !important;

  padding:7px 1px !important;

  border-bottom:1px solid var(--mon-soft) !important;

  color:#344054;

  font-size:9px !important;
}

#monitoringView .health-row:last-child{
  border-bottom:0 !important;
}

#monitoringView .health-row b{
  margin-left:12px;

  text-align:right;

  font-size:9px !important;
}

#monitoringView .health-row .ok{
  color:var(--mon-green) !important;
}

/* ==========================================================
   SEGURANÇA - CARDS
   ========================================================== */

#monitoringSecurity .sec-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

#monitoringSecurity .sec-summary-card{
  position:relative;

  display:grid !important;

  grid-template-columns:
    30px
    minmax(0,1fr) !important;

  align-items:center !important;

  width:100% !important;
  min-width:0 !important;
  min-height:68px !important;

  gap:8px !important;

  padding:9px 22px 9px 9px !important;

  border-radius:9px !important;

  text-align:left !important;
  font-family:inherit !important;

  cursor:pointer !important;

  appearance:none;

  transition:
    transform .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}

#monitoringSecurity .sec-summary-card.ok{
  border:1px solid #c8e8d5 !important;
  background:#f4faf6 !important;
}

#monitoringSecurity .sec-summary-card.warn{
  border:1px solid #ecd39b !important;
  background:#fff9ee !important;
}

#monitoringSecurity .sec-summary-card.info{
  border:1px solid #ccdcf0 !important;
  background:#f4f7fc !important;
}

#monitoringSecurity .sec-summary-card.danger{
  border:1px solid #edcccc !important;
  background:#fff5f5 !important;
}

#monitoringSecurity .sec-summary-card:hover{
  transform:translateY(-2px);

  box-shadow:0 5px 14px rgba(16,24,40,.08) !important;
}

#monitoringSecurity .sec-summary-card.is-selected{
  border-color:#508bd5 !important;

  box-shadow:
    0 0 0 2px rgba(37,99,235,.10),
    0 5px 14px rgba(16,24,40,.06) !important;
}

#monitoringSecurity .sec-summary-icon{
  display:grid !important;
  place-items:center !important;

  width:30px !important;
  height:30px !important;

  border-radius:8px !important;

  background:#fff !important;

  font-size:13px !important;
}

#monitoringSecurity .sec-card-content{
  min-width:0;
}

#monitoringSecurity .sec-card-label{
  display:block;

  overflow:hidden;

  color:#475467 !important;

  font-size:7px !important;
  font-weight:700 !important;

  white-space:nowrap;
  text-overflow:ellipsis;
}

#monitoringSecurity .sec-card-content strong{
  display:block;

  margin:2px 0;

  color:#101828;

  font-size:13px !important;
}

#monitoringSecurity .sec-summary-card.ok strong{
  color:var(--mon-green);
}

#monitoringSecurity .sec-summary-card.warn strong{
  color:var(--mon-amber);
}

#monitoringSecurity .sec-summary-card.info strong{
  color:var(--mon-blue);
}

#monitoringSecurity .sec-card-content small{
  display:block;

  overflow:hidden;

  color:#98a2b3;

  font-size:6px !important;

  white-space:nowrap;
  text-overflow:ellipsis;
}

#monitoringSecurity .sec-card-chevron{
  position:absolute;

  right:8px;
  top:50%;

  transform:translateY(-50%);

  color:#98a2b3;

  font-size:15px;
}

/* ==========================================================
   DRAWER DE SEGURANÇA
   ========================================================== */

body.security-drawer-open{
  overflow:hidden;
}

.sec-drawer-backdrop{
  position:fixed;
  inset:0;

  z-index:9998;

  background:rgba(15,23,42,.28);

  backdrop-filter:blur(2px);
}

.sec-drawer-backdrop[hidden]{
  display:none !important;
}

.monitoring-security-drawer{
  position:fixed;

  z-index:9999;

  top:0;
  right:0;
  bottom:0;

  width:min(620px,92vw);

  overflow-y:auto;

  border-left:1px solid #dde2e8;

  background:#fff;

  box-shadow:-14px 0 45px rgba(15,23,42,.14);

  animation:drawerIn .18s ease;
}

.monitoring-security-drawer[hidden]{
  display:none !important;
}

@keyframes drawerIn{
  from{
    transform:translateX(30px);
    opacity:.6;
  }

  to{
    transform:translateX(0);
    opacity:1;
  }
}

.sec-detail-header{
  position:sticky;
  top:0;

  z-index:3;

  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    34px;

  gap:12px;

  align-items:center;

  padding:18px;

  border-bottom:1px solid #e8ebef;

  background:rgba(255,255,255,.97);

  backdrop-filter:blur(8px);
}

.sec-detail-header-icon{
  display:grid;
  place-items:center;

  width:42px;
  height:42px;

  border-radius:10px;

  background:#f2f6fb;

  font-size:18px;
}

.sec-detail-header-text > span{
  display:block;

  color:#667085;

  font-size:7px;
  font-weight:800;

  letter-spacing:.13em;
}

.sec-detail-header-text h3{
  margin:4px 0 2px;

  color:#182230;

  font-size:16px;
}

.sec-detail-header-text p{
  margin:0;

  color:#667085;

  font-size:9px;
}

.sec-detail-close{
  width:32px;
  height:32px;

  border:0;
  border-radius:8px;

  background:#f2f4f7;

  color:#667085;

  cursor:pointer;

  font-size:19px;
}

.sec-detail-close:hover{
  background:#e7ebef;
  color:#101828;
}

.sec-detail-content{
  padding:18px;
}

/* Métricas */

.sec-detail-metrics{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:10px;
}

.sec-detail-metric{
  padding:13px;

  border:1px solid #e4e8ed;
  border-radius:10px;

  background:#fff;
}

.sec-detail-metric span{
  display:block;

  color:#667085;

  font-size:8px;
}

.sec-detail-metric strong{
  display:block;

  margin-top:5px;

  color:#182230;

  font-size:14px;
}

.sec-detail-metric.ok{
  border-color:#c9e8d5;
  background:#f5fbf7;
}

.sec-detail-metric.ok strong{
  color:#078347;
}

.sec-detail-metric.warn{
  border-color:#ecd39f;
  background:#fff9ee;
}

.sec-detail-metric.warn strong{
  color:#a65d00;
}

/* seções */

.sec-detail-section{
  margin-top:18px;
}

.sec-detail-section h4{
  margin:0 0 10px;

  color:#344054;

  font-size:11px;
}

/* tabela vira lista compacta no drawer */

.sec-detail-table{
  overflow:hidden;

  border:1px solid #e4e8ed;
  border-radius:10px;
}

.sec-detail-table-head{
  display:grid;

  grid-template-columns:
    60px
    115px
    minmax(140px,1fr)
    120px;

  gap:7px;

  padding:8px 10px;

  background:#f6f7f9;

  color:#667085;

  font-size:7px;
  font-weight:800;

  text-transform:uppercase;
}

.sec-detail-table-row{
  display:grid;

  grid-template-columns:
    60px
    115px
    minmax(140px,1fr)
    120px;

  gap:7px;

  align-items:center;

  min-height:40px;

  padding:8px 10px;

  border-top:1px solid #edf0f3;

  color:#344054;

  font-size:8px;
}

.sec-detail-table-row span{
  overflow:hidden;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.sec-ip-list{
  display:flex;
  flex-wrap:wrap;

  gap:7px;
}

.sec-ip-list code{
  padding:7px 9px;

  border:1px solid #e1e5ea;
  border-radius:7px;

  background:#f7f8fa;

  font-size:9px;
}

.sec-detail-empty{
  padding:14px;

  border:1px dashed #d7dde4;
  border-radius:8px;

  background:#fafbfc;

  color:#667085;

  font-size:9px;
}

/* ==========================================================
   INTEGRIDADE E INCIDENTES
   ========================================================== */

#monitoringView .monitoring-bottom-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;

  gap:14px !important;

  margin-top:14px !important;
}

#monitoringView .monitoring-bottom-grid > .panel{
  width:auto !important;
  margin:0 !important;
  padding:16px !important;

  border:1px solid var(--mon-border) !important;
  border-radius:13px !important;

  background:#fff !important;

  box-shadow:0 3px 12px rgba(16,24,40,.035) !important;
}

/* divergências mais compactas */

#monitoringView .monitoring-alert-row{
  position:relative;

  margin-bottom:8px !important;
  padding:11px 12px !important;

  border:1px solid #e6e9ed !important;
  border-radius:9px !important;

  background:#fff !important;
}

#monitoringView .monitoring-alert-row:last-child{
  margin-bottom:0 !important;
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media(max-width:1150px){

  #monitoringView .operation-grid{
    grid-template-columns:1fr 1fr !important;
  }

  #monitoringView .operation-grid > .panel:nth-child(-n+6){
    grid-column:auto !important;
  }

  #monitoringView .operation-grid > .panel:nth-child(3){
    grid-column:1 / -1 !important;
  }

  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:760px){

  #monitoringView .operation-kpis{
    grid-template-columns:1fr 1fr !important;
  }

  #monitoringView .operation-grid{
    grid-template-columns:1fr !important;
  }

  #monitoringView .operation-grid > .panel:nth-child(-n+6),
  #monitoringView .operation-grid > .panel:nth-child(3){
    grid-column:1 !important;
  }

  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:1fr 1fr !important;
  }

  #monitoringView .monitoring-bottom-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:500px){

  #monitoringView .operation-kpis{
    grid-template-columns:1fr !important;
  }

  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:1fr !important;
  }

  .sec-detail-metrics{
    grid-template-columns:1fr;
  }

  .monitoring-security-drawer{
    width:100vw;
  }
}


/* ==========================================================
   AJUSTE RESPONSIVO PARA ZOOM 110% / 125%
   ========================================================== */

/* A área principal nunca pode ultrapassar a largura disponível */
#monitoringView{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Todos os descendentes respeitam a largura do container */
#monitoringView *,
#monitoringView *::before,
#monitoringView *::after{
  box-sizing:border-box !important;
}

/* Grade principal fluida */
#monitoringView .operation-grid{
  width:100% !important;
  min-width:0 !important;

  grid-template-columns:
    minmax(230px,3fr)
    minmax(320px,4fr)
    minmax(360px,5fr) !important;
}

/* Painéis nunca podem forçar overflow horizontal */
#monitoringView .operation-grid > .panel,
#monitoringView .monitoring-bottom-grid > .panel{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

/* Textos longos podem quebrar */
#monitoringView .health-row,
#monitoringView .health-row span,
#monitoringView .health-row b,
#monitoringView .health-row strong{
  min-width:0 !important;
}

#monitoringView .health-row > :first-child{
  flex:1 1 auto !important;
}

#monitoringView .health-row > :last-child{
  flex:0 1 auto !important;
  max-width:65% !important;

  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* Segurança acompanha a largura disponível */
#monitoringSecurity .sec-summary-grid{
  width:100% !important;
}

#monitoringSecurity .sec-summary-card{
  min-width:0 !important;
  overflow:hidden !important;
}

/* ==========================================================
   BREAKPOINT MAIS CEDO PARA ZOOM
   ========================================================== */

/*
   Com zoom 110%, uma tela 1920 pode se comportar como ~1745 CSS px.
   Por isso fazemos a grade mudar antes.
*/

@media(max-width:1450px){

  #monitoringView .operation-grid{
    grid-template-columns:
      minmax(240px,1fr)
      minmax(320px,1.25fr) !important;
  }

  #monitoringView .operation-grid > .panel:nth-child(1),
  #monitoringView .operation-grid > .panel:nth-child(2),
  #monitoringView .operation-grid > .panel:nth-child(4),
  #monitoringView .operation-grid > .panel:nth-child(5){
    grid-column:auto !important;
  }

  /* Segurança ganha a largura toda */
  #monitoringView .operation-grid > .panel:nth-child(3){
    grid-column:1 / -1 !important;
  }

  /* Integrações ganha a largura toda */
  #monitoringView .operation-grid > .panel:nth-child(6){
    grid-column:1 / -1 !important;
  }

  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Zoom maior / notebook */
@media(max-width:1150px){

  #monitoringView .operation-grid{
    grid-template-columns:1fr 1fr !important;
  }

  #monitoringView .operation-grid > .panel:nth-child(3),
  #monitoringView .operation-grid > .panel:nth-child(6){
    grid-column:1 / -1 !important;
  }

  #monitoringView .operation-kpis{
    grid-template-columns:1fr 1fr !important;
  }
}

/* Tela estreita */
@media(max-width:850px){

  #monitoringView .operation-grid{
    grid-template-columns:1fr !important;
  }

  #monitoringView .operation-grid > .panel{
    grid-column:1 !important;
  }

  #monitoringView .monitoring-bottom-grid{
    grid-template-columns:1fr !important;
  }

  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

/* Mobile */
@media(max-width:520px){

  #monitoringView .operation-kpis{
    grid-template-columns:1fr !important;
  }

  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:1fr !important;
  }
}

/* Evita rolagem horizontal da página */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}


/* ==========================================================
   MONITORAMENTO - COLUNAS SEM ESPACOS VAZIOS
   ========================================================== */

#monitoringView .operation-grid{
  display:grid !important;

  grid-template-columns:
    minmax(250px,3fr)
    minmax(350px,4fr)
    minmax(390px,5fr) !important;

  gap:14px !important;

  align-items:start !important;
}

/* Cada coluna cresce independentemente */
#monitoringView .monitoring-column{
  display:flex !important;
  flex-direction:column !important;

  min-width:0 !important;

  gap:14px !important;
}

/* Cancela regras antigas de posição */
#monitoringView .monitoring-column > .panel{
  grid-column:auto !important;

  width:100% !important;
  min-width:0 !important;

  margin:0 !important;
}

/* Segurança continua com os 6 cards */
#monitoringView .monitoring-column-right
#monitoringSecurity .sec-summary-grid{
  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;
}

/* ==========================================================
   NOTEBOOK / ZOOM 110%
   ========================================================== */

@media(max-width:1450px){

  #monitoringView .operation-grid{
    grid-template-columns:
      minmax(280px,1fr)
      minmax(340px,1fr) !important;
  }

  /*
    Coluna de segurança usa largura total,
    evitando cards esmagados.
  */
  #monitoringView .monitoring-column-right{
    grid-column:1 / -1 !important;
  }

  #monitoringView .monitoring-column-right
  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1000px){

  #monitoringView .operation-grid{
    grid-template-columns:1fr 1fr !important;
  }

  #monitoringView .monitoring-column-right{
    grid-column:1 / -1 !important;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:760px){

  #monitoringView .operation-grid{
    grid-template-columns:1fr !important;
  }

  #monitoringView .monitoring-column,
  #monitoringView .monitoring-column-right{
    grid-column:1 !important;
  }

  #monitoringView .monitoring-column-right
  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:480px){

  #monitoringView .monitoring-column-right
  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:1fr !important;
  }
}


/* ==========================================================
   INCIDENTES ABAIXO DE INTEGRACOES
   ========================================================== */

#monitoringView .monitoring-column-right > .panel{
  width:100% !important;
}

#monitoringView .monitoring-column-right
#monitoringIncidents{
  max-height:none !important;
  overflow:visible !important;
}

/* Card de incidentes mais compacto */
#monitoringView .monitoring-column-right
.panel:has(#monitoringIncidents){
  padding:16px !important;
}

#monitoringView #monitoringIncidents .monitoring-alert-row,
#monitoringView #monitoringIncidents > div{
  max-width:100% !important;
}

/* ==========================================================
   DIVERGENCIAS - BLOCO PROFISSIONAL
   ========================================================== */

#monitoringView .monitoring-integrity-wide{
  width:100% !important;
  max-width:none !important;

  margin:14px 0 0 !important;
  padding:18px !important;

  border:1px solid #e3e7ec !important;
  border-radius:14px !important;

  background:#fff !important;

  box-shadow:
    0 3px 12px rgba(16,24,40,.035) !important;
}

#monitoringView .monitoring-integrity-wide
#monitoringIntegrity{
  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap:10px !important;

  max-height:none !important;
  overflow:visible !important;

  padding:0 !important;
}

/* Cada divergência vira um card compacto */
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row{
  display:flex !important;
  flex-direction:column !important;

  min-width:0 !important;
  min-height:120px !important;

  margin:0 !important;
  padding:13px !important;

  border:1px solid #e4e8ed !important;
  border-radius:10px !important;

  background:#fbfcfd !important;

  box-shadow:none !important;
}

#monitoringView .monitoring-integrity-wide
.monitoring-alert-row:hover{
  border-color:#cfd6df !important;
  background:#fff !important;
}

/* Título/label */
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row > strong,
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row > b{
  margin-bottom:6px !important;

  color:#667085 !important;

  font-size:8px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

/* Texto principal */
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row p,
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row span{
  color:#344054 !important;

  font-size:10px !important;
  line-height:1.45 !important;
}

/* Botão Detalhes */
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row button,
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row .btn{
  align-self:flex-start !important;

  margin-top:auto !important;
  padding:7px 10px !important;

  border:1px solid #d8dde5 !important;
  border-radius:7px !important;

  background:#f5f7f9 !important;
  color:#344054 !important;

  font-size:9px !important;
  font-weight:700 !important;

  cursor:pointer !important;
}

#monitoringView .monitoring-integrity-wide
.monitoring-alert-row button:hover,
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row .btn:hover{
  background:#eef1f4 !important;
}

/* ==========================================================
   RESPONSIVO DAS DIVERGENCIAS
   ========================================================== */

@media(max-width:1200px){

  #monitoringView .monitoring-integrity-wide
  #monitoringIntegrity{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:760px){

  #monitoringView .monitoring-integrity-wide
  #monitoringIntegrity{
    grid-template-columns:1fr !important;
  }
}


/* ==========================================================
   MONITORAMENTO - LEGIBILIDADE
   ========================================================== */

/* Descrição principal */
#monitoringView .operation-hero p{
  font-size:12px !important;
}

/* KPIs */
#monitoringView .operation-kpis span{
  font-size:9px !important;
}

#monitoringView .operation-kpis strong{
  font-size:24px !important;
}

/* Títulos das caixas */
#monitoringView .panel-kicker{
  font-size:8px !important;
}

#monitoringView .panel-head h2{
  font-size:16px !important;
  line-height:1.25 !important;
}

#monitoringView .panel-head p{
  font-size:10px !important;
  line-height:1.45 !important;
}

/* Linhas de Saúde, Infra, Backup etc */
#monitoringView .health-row{
  font-size:11px !important;
  line-height:1.4 !important;
}

#monitoringView .health-row b,
#monitoringView .health-row strong{
  font-size:11px !important;
}

/* Segurança */
#monitoringSecurity .sec-card-label{
  font-size:8.5px !important;
}

#monitoringSecurity .sec-card-content strong{
  font-size:15px !important;
}

#monitoringSecurity .sec-card-content small{
  font-size:7.5px !important;
  line-height:1.35 !important;
}

/* Detalhes de segurança */
.sec-detail-header-text > span{
  font-size:8px !important;
}

.sec-detail-header-text h3{
  font-size:17px !important;
}

.sec-detail-header-text p{
  font-size:10px !important;
}

.sec-detail-metric span{
  font-size:9px !important;
}

.sec-detail-metric strong{
  font-size:15px !important;
}

.sec-detail-section h4{
  font-size:12px !important;
}

.sec-detail-table-head{
  font-size:8px !important;
}

.sec-detail-table-row{
  font-size:10px !important;
}

/* Divergências */
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row > strong,
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row > b{
  font-size:9px !important;
}

#monitoringView .monitoring-integrity-wide
.monitoring-alert-row p,
#monitoringView .monitoring-integrity-wide
.monitoring-alert-row span{
  font-size:11px !important;
}

/* Incidentes */
#monitoringIncidents{
  font-size:11px !important;
}


/* ==========================================================
   MONITORAMENTO - COMMAND CENTER DARK
   ========================================================== */

#monitoringView.monitoring-command-center{
  --mon-bg:#070b12;
  --mon-panel:#0c111a;
  --mon-panel-2:#111826;
  --mon-border:#1f2a3a;
  --mon-text:#f3f6fb;
  --mon-muted:#8f9bad;
  --mon-green:#31d07f;
  --mon-blue:#4da3ff;
  --mon-warn:#f3b544;
  --mon-danger:#ff5c67;

  background:
    radial-gradient(circle at top right, rgba(36,92,160,.18), transparent 34%),
    linear-gradient(180deg,#07101a 0%,#070b12 35%,#070b12 100%) !important;

  color:var(--mon-text) !important;

  padding:22px !important;
  border-radius:18px !important;
}

/* HERO */

#monitoringView .monitor-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:20px 22px;

  border:1px solid var(--mon-border);
  border-radius:16px;

  background:
    linear-gradient(135deg,rgba(28,72,122,.28),rgba(12,17,26,.92));

  box-shadow:0 16px 40px rgba(0,0,0,.18);

  margin-bottom:16px;
}

#monitoringView .monitor-eyebrow,
#monitoringView .monitor-section-heading span,
#monitoringView .monitor-card > div > span,
#monitoringView .monitor-card-head span{
  display:block;

  color:#6f87a5;

  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}

#monitoringView .monitor-hero h1{
  margin:4px 0 5px;

  font-size:28px;
  line-height:1.05;
  letter-spacing:-.03em;

  color:#fff;
}

#monitoringView .monitor-hero p{
  margin:0;

  color:var(--mon-muted);

  font-size:13px;
}

#monitoringView .monitor-hero-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#monitoringView .monitor-live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;

  min-height:36px;

  padding:0 12px;

  border:1px solid rgba(49,208,127,.35);
  border-radius:999px;

  background:rgba(49,208,127,.08);

  color:#7ce8ac;

  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

#monitoringView .monitor-live-pill i{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--mon-green);

  box-shadow:0 0 0 5px rgba(49,208,127,.10);
}

#monitoringView .monitor-refresh-btn{
  min-height:38px;

  border-radius:10px !important;

  background:#165dff !important;

  box-shadow:none !important;
}

/* STATUS TOPO */

#monitoringView .monitor-status-strip{
  display:grid !important;
  grid-template-columns:1.4fr .8fr .8fr 1.2fr !important;
  gap:10px !important;

  margin-bottom:22px !important;
}

#monitoringView .monitor-status-strip article{
  min-height:86px !important;

  padding:14px 16px !important;

  border:1px solid var(--mon-border) !important;
  border-radius:12px !important;

  background:linear-gradient(180deg,#0f1622,#0b111a) !important;

  box-shadow:none !important;
}

#monitoringView .monitor-status-strip article span{
  color:#718096 !important;

  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.09em !important;
}

#monitoringView .monitor-status-strip article strong{
  display:block;

  margin-top:8px;

  color:#fff !important;

  font-size:20px !important;
}

#monitoringView .monitor-status-strip article strong.ok{
  color:var(--mon-green) !important;
}

#monitoringView .monitor-status-strip article strong.warn{
  color:var(--mon-warn) !important;
}

/* TITULOS DE SECAO */

#monitoringView .monitor-section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;

  margin:20px 0 10px;
}

#monitoringView .monitor-section-heading h2{
  margin:3px 0 0;

  color:#fff;

  font-size:18px;
  letter-spacing:-.02em;
}

/* CARDS */

#monitoringView .monitor-card{
  border:1px solid var(--mon-border) !important;
  border-radius:14px !important;

  background:
    linear-gradient(180deg,var(--mon-panel-2),var(--mon-panel)) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.14) !important;

  padding:16px !important;
}

#monitoringView .monitor-card h3{
  margin:3px 0 0;

  color:#fff;

  font-size:16px;
  letter-spacing:-.02em;
}

#monitoringView .monitor-card p{
  margin:4px 0 0;

  color:var(--mon-muted);

  font-size:11px;
  line-height:1.45;
}

#monitoringView .monitor-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;

  margin-bottom:12px;
}

#monitoringView .monitor-card-icon,
#monitoringView .monitor-shield{
  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  flex:0 0 38px;

  border:1px solid #263448;
  border-radius:10px;

  background:#111a28;

  font-size:18px;
}

/* SERVICOS */

#monitoringView .monitor-service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

#monitoringView .monitor-service-card,
#monitoringView .monitor-resource-card{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  align-items:start;
}

#monitoringView .monitor-service-card .monitor-card-body,
#monitoringView .monitor-resource-card .monitor-card-body{
  grid-column:1 / -1;

  margin-top:10px;
}

/* GRID DUPLO */

#monitoringView .monitor-dual-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;

  margin-top:12px;
}

/* LINHAS DE DADOS */

#monitoringView .health-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  min-height:38px !important;

  padding:8px 0 !important;

  border-bottom:1px solid rgba(255,255,255,.055) !important;

  color:#c6cfda !important;

  font-size:11px !important;
}

#monitoringView .health-row:last-child{
  border-bottom:0 !important;
}

#monitoringView .health-row span{
  color:#9aa8b8 !important;
}

#monitoringView .health-row b{
  color:#dbe5ef !important;

  font-size:11px !important;
}

#monitoringView .health-row b.ok{
  color:var(--mon-green) !important;
}

#monitoringView .health-row b.warn{
  color:var(--mon-warn) !important;
}

/* SEGURANCA */

#monitoringView .monitor-security-card{
  margin-bottom:12px;
}

#monitoringSecurity .sec-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;

  gap:10px !important;
}

#monitoringSecurity .sec-summary-card{
  min-height:96px !important;

  padding:12px !important;

  border:1px solid #243247 !important;
  border-radius:12px !important;

  background:#0c1420 !important;

  color:#d8e2ee !important;

  box-shadow:none !important;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease !important;
}

#monitoringSecurity .sec-summary-card:hover{
  transform:translateY(-2px);

  border-color:#38506d !important;

  background:#111c2b !important;
}

#monitoringSecurity .sec-summary-icon{
  width:34px !important;
  height:34px !important;

  border-radius:9px !important;

  background:#142033 !important;
}

#monitoringSecurity .sec-card-label{
  color:#8190a4 !important;

  font-size:9px !important;
  letter-spacing:.08em !important;
}

#monitoringSecurity .sec-card-content strong{
  color:#fff !important;

  font-size:15px !important;
}

#monitoringSecurity .sec-card-content small{
  color:#7f8ea2 !important;

  font-size:9px !important;
}

#monitoringSecurity .sec-summary-card.ok strong{
  color:var(--mon-green) !important;
}

#monitoringSecurity .sec-summary-card.warn strong{
  color:var(--mon-warn) !important;
}

#monitoringSecurity .sec-summary-card.danger strong{
  color:var(--mon-danger) !important;
}

/* INTEGRIDADE / INCIDENTES */

#monitoringView .attention-clear{
  display:flex;
  align-items:center;
  gap:12px;

  min-height:74px;

  padding:12px;

  border:1px solid rgba(49,208,127,.14);
  border-radius:10px;

  background:rgba(49,208,127,.05);
}

#monitoringView .attention-clear > span{
  display:grid;
  place-items:center;

  width:34px;
  height:34px;

  flex:0 0 34px;

  border-radius:50%;

  background:rgba(49,208,127,.12);

  color:var(--mon-green);

  font-weight:900;
}

#monitoringView .attention-clear strong{
  color:#dff9e9 !important;

  font-size:12px !important;
}

#monitoringView .attention-clear p{
  color:#84a891 !important;

  font-size:10px !important;
}

#monitoringView .monitor-incidents-card{
  margin-top:12px;
}

/* DRAWER DE SEGURANCA */

.monitoring-security-drawer{
  background:#0b111b !important;

  color:#e8eef6 !important;

  border-left:1px solid #243247 !important;
}

.monitoring-security-drawer .sec-detail-header{
  border-bottom:1px solid #243247 !important;
}

.monitoring-security-drawer .sec-detail-header-text h3{
  color:#fff !important;
}

.monitoring-security-drawer .sec-detail-header-text p,
.monitoring-security-drawer .sec-detail-header-text span{
  color:#8190a4 !important;
}

.monitoring-security-drawer .sec-detail-metric,
.monitoring-security-drawer .sec-detail-section{
  border-color:#243247 !important;

  background:#101824 !important;
}

.monitoring-security-drawer .sec-detail-table-row,
.monitoring-security-drawer .sec-detail-table-head{
  border-color:#243247 !important;

  color:#c5d0dd !important;
}

/* RESPONSIVIDADE */

@media(max-width:1200px){

  #monitoringView .monitor-status-strip{
    grid-template-columns:repeat(2,1fr) !important;
  }

  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }

}

@media(max-width:900px){

  #monitoringView.monitoring-command-center{
    padding:14px !important;
    border-radius:0 !important;
  }

  #monitoringView .monitor-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  #monitoringView .monitor-service-grid,
  #monitoringView .monitor-dual-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:560px){

  #monitoringView .monitor-status-strip{
    grid-template-columns:1fr !important;
  }

  #monitoringSecurity .sec-summary-grid{
    grid-template-columns:1fr !important;
  }

}


/* MONITOR_LIGHT_SITE_THEME_V1 */

/* ==========================================================
   MONITORAMENTO - IDENTIDADE VISUAL DO SITE
   bege / branco / preto / vermelho
   ========================================================== */

#monitoringView.monitoring-command-center{
  --mon-red:#ed1c2e !important;
  --mon-black:#101012 !important;
  --mon-bg:#efede9 !important;
  --mon-panel:#ffffff !important;
  --mon-border:#d9d5cf !important;
  --mon-text:#171719 !important;
  --mon-muted:#77736f !important;
  --mon-green:#008a45 !important;
  --mon-warn:#d98b13 !important;

  background:#efede9 !important;
  color:#171719 !important;
  border-radius:0 !important;
}

/* CABECALHO */

#monitoringView .monitor-hero{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #d7d2cb !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#monitoringView .monitor-eyebrow{
  color:#ed1c2e !important;
}

#monitoringView .monitor-hero h1{
  color:#202124 !important;
}

#monitoringView .monitor-hero p{
  color:#77736f !important;
}

#monitoringView .monitor-live-pill{
  color:#087c47 !important;
  background:#eff9f3 !important;
  border-color:#bfe6cf !important;
}

#monitoringView .monitor-refresh-btn{
  background:#24272a !important;
  color:#fff !important;
  border:1px solid #24272a !important;
  border-radius:2px !important;
}

/* STATUS GERAL */

#monitoringView .monitor-status-strip article{
  background:#0c0c0e !important;
  border:0 !important;
  border-top:4px solid #ed1c2e !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#monitoringView .monitor-status-strip article span{
  color:#a8abb0 !important;
}

#monitoringView .monitor-status-strip article strong,
#monitoringView .monitor-status-strip article strong.ok,
#monitoringView .monitor-status-strip article strong.warn{
  color:#fff !important;
}

/* TITULOS */

#monitoringView .monitor-section-heading span,
#monitoringView .monitor-card > div > span,
#monitoringView .monitor-card-head span{
  color:#ed1c2e !important;
}

#monitoringView .monitor-section-heading h2,
#monitoringView .monitor-card h3{
  color:#171719 !important;
}

#monitoringView .monitor-card p{
  color:#77736f !important;
}

/* CARDS */

#monitoringView .monitor-card{
  background:#fff !important;
  border:1px solid #d9d5cf !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#monitoringView .monitor-card-icon,
#monitoringView .monitor-shield{
  background:#f4f2ef !important;
  color:#171719 !important;
  border:1px solid #dfdbd5 !important;
  border-radius:2px !important;
}

/* LINHAS */

#monitoringView .health-row{
  color:#171719 !important;
  border-bottom:1px solid #ece8e3 !important;
}

#monitoringView .health-row span{
  color:#343434 !important;
}

#monitoringView .health-row b{
  color:#171719 !important;
}

#monitoringView .health-row b.ok{
  color:#008a45 !important;
}

#monitoringView .health-row b.warn{
  color:#d98b13 !important;
}

/* SEGURANCA */

#monitoringSecurity .sec-summary-card{
  background:#fff !important;
  color:#171719 !important;
  border:1px solid #d9d5cf !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#monitoringSecurity .sec-summary-card:hover{
  background:#faf9f7 !important;
  border-color:#aaa59f !important;
  transform:none !important;
}

#monitoringSecurity .sec-summary-icon{
  background:#f4f2ef !important;
  border:1px solid #dfdbd5 !important;
  border-radius:2px !important;
}

#monitoringSecurity .sec-card-label{
  color:#77736f !important;
}

#monitoringSecurity .sec-card-content strong{
  color:#171719 !important;
}

#monitoringSecurity .sec-card-content small{
  color:#98928c !important;
}

#monitoringSecurity .sec-summary-card.ok strong{
  color:#008a45 !important;
}

#monitoringSecurity .sec-summary-card.warn strong{
  color:#d98b13 !important;
}

#monitoringSecurity .sec-summary-card.danger strong{
  color:#d9272e !important;
}

/* DIVERGENCIAS */

#monitoringView .monitoring-alert-row{
  background:#fff !important;
  color:#171719 !important;
  border:1px solid #ddd8d2 !important;
  border-radius:0 !important;
}

#monitoringView .monitoring-alert-row span{
  color:#747474 !important;
}

#monitoringView .monitoring-alert-row small{
  color:#171719 !important;
}

#monitoringView .small-btn{
  background:#f2f1ef !important;
  color:#171719 !important;
  border:0 !important;
  border-radius:0 !important;
}

/* INCIDENTES */

#monitoringView .attention-clear{
  background:#f7faf8 !important;
  border:1px solid #cde5d4 !important;
  border-radius:0 !important;
}

#monitoringView .attention-clear strong{
  color:#171719 !important;
}

#monitoringView .attention-clear p{
  color:#77736f !important;
}

#monitoringView .monitor-incidents-card .monitoring-alert-row{
  background:#fff !important;
  border-left:4px solid #d98b13 !important;
}

/* DRAWER */

.monitoring-security-drawer{
  background:#fff !important;
  color:#171719 !important;
  border-left:1px solid #d8d4ce !important;
}

.monitoring-security-drawer .sec-detail-header{
  background:#f5f3ef !important;
  border-bottom:1px solid #d8d4ce !important;
}

.monitoring-security-drawer .sec-detail-header-text h3{
  color:#171719 !important;
}

.monitoring-security-drawer .sec-detail-header-text span{
  color:#ed1c2e !important;
}

.monitoring-security-drawer .sec-detail-header-text p{
  color:#77736f !important;
}

.monitoring-security-drawer .sec-detail-metric,
.monitoring-security-drawer .sec-detail-section{
  background:#fff !important;
  border-color:#dedad5 !important;
}


/* ==========================================================
   DETALHES DE SEGURANCA - TEXTO MAIS ESCURO
   ========================================================== */

.monitoring-security-drawer .sec-detail-table-head{
  color:#171719 !important;
  font-weight:800 !important;
}

.monitoring-security-drawer .sec-detail-table-row{
  color:#171719 !important;
}

.monitoring-security-drawer .sec-detail-table-row strong{
  color:#171719 !important;
  font-weight:800 !important;
}

.monitoring-security-drawer .sec-detail-table-row span{
  color:#2b2b2b !important;
}

.monitoring-security-drawer .sec-detail-table{
  border-color:#d8d4ce !important;
}

.monitoring-security-drawer .sec-detail-table-head{
  background:#f2f1ef !important;
  border-bottom:1px solid #bdb7b0 !important;
}

.monitoring-security-drawer .sec-detail-table-row{
  border-bottom:1px solid #d8d4ce !important;
}


/* ==========================================================
   MONITORAMENTO - INTEGRACOES EM LARGURA TOTAL
   apos remocao de Integridade
   ========================================================== */

#monitoringView .monitor-dual-grid:has(#monitoringIntegrations){
  grid-template-columns:1fr !important;
}

#monitoringView .monitor-dual-grid:has(#monitoringIntegrations) .monitor-card{
  width:100% !important;
}


/* ==========================================================
   MONITOR COMMAND CENTER V2
   Identidade visual Itallo - bege/branco/preto/vermelho
   ========================================================== */

#monitoringView.monitoring-command-center-v2{
  background:#efede9 !important;
  color:#171719 !important;
  padding:18px !important;
}

#monitoringView .mc-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:4px 0 18px;

  border-bottom:1px solid #d5d0c9;
}

#monitoringView .mc-kicker{
  color:#e5202a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}

#monitoringView .mc-topbar h1{
  margin:5px 0 3px;
  font-size:31px;
  color:#202124;
}

#monitoringView .mc-topbar p{
  margin:0;
  color:#77736f;
}

#monitoringView .mc-top-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

#monitoringView .mc-update-box{
  min-width:230px;
  padding:11px 15px;

  border:1px solid #d9d4cd;
  background:#fff;
}

#monitoringView .mc-update-box span{
  display:block;
  color:#777;
  font-size:10px;
}

#monitoringView .mc-update-box strong{
  display:block;
  margin-top:3px;
  color:#171719;
}

/* FAIXA PRINCIPAL */

#monitoringView .mc-system-banner{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  align-items:center;

  margin-top:15px;
  padding:19px 22px;

  background:#0d0d0f;
  color:#fff;

  border-top:5px solid #e5202a;
}

#monitoringView .mc-system-main{
  display:flex;
  align-items:center;
  gap:15px;
}

#monitoringView .mc-system-check{
  display:grid;
  place-items:center;

  width:52px;
  height:52px;

  border-radius:50%;
  background:#11b86a;

  font-size:28px;
  font-weight:900;
}

#monitoringView .mc-system-banner.warning .mc-system-check{
  background:#d98b13;
}

#monitoringView .mc-system-banner.critical .mc-system-check{
  background:#d9272e;
}

#monitoringView .mc-system-main h2{
  margin:0;
  color:#fff;
  font-size:20px;
}

#monitoringView .mc-system-main p{
  margin:4px 0 0;
  color:#d0d0d0;
}

#monitoringView .mc-system-stat{
  padding-left:20px;
  border-left:1px solid rgba(255,255,255,.25);
}

#monitoringView .mc-system-stat span{
  display:block;
  color:#b9b9b9;
  font-size:11px;
}

#monitoringView .mc-system-stat strong{
  display:block;
  margin-top:5px;
  color:#fff;
}

/* SERVIÇOS */

#monitoringView .mc-service-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;

  margin-top:14px;
}

#monitoringView .mc-service-card,
#monitoringView .mc-panel{
  background:#fff;
  border:1px solid #d9d5cf;
  box-shadow:none;
}

#monitoringView .mc-service-card{
  display:flex;
  gap:13px;

  min-height:150px;
  padding:15px;
}

#monitoringView .mc-service-icon{
  display:grid;
  place-items:center;

  width:52px;
  height:52px;

  flex:0 0 52px;

  background:#fff1f2;
  color:#e5202a;

  font-size:25px;
}

#monitoringView .mc-service-main{
  flex:1;
  min-width:0;
}

#monitoringView .mc-service-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

#monitoringView .mc-service-title h3{
  margin:0;
  color:#171719;
}

#monitoringView .mc-service-main > p{
  margin:4px 0 9px;
  color:#77736f;
  font-size:11px;
}

#monitoringView .mc-badge{
  padding:5px 9px;
  background:#eee;
  font-size:9px;
  font-weight:900;
}

#monitoringView .mc-badge.ok{
  background:#d9f5e6;
  color:#07884b;
}

#monitoringView .mc-badge.warn{
  background:#fff1d8;
  color:#b56e00;
}

/* PAINÉIS */

#monitoringView .mc-main-grid{
  display:grid;
  grid-template-columns:.8fr 1.7fr;
  gap:12px;

  margin-top:12px;
}

#monitoringView .mc-three-grid{
  display:grid;
  grid-template-columns:.85fr 1.35fr 1fr;
  gap:12px;

  margin-top:12px;
}

#monitoringView .mc-panel{
  padding:14px;
}

#monitoringView .mc-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:10px;
}

#monitoringView .mc-panel-head h3{
  margin:0;
  color:#171719;
  font-size:15px;
}

#monitoringView .mc-panel-head small{
  color:#777;
}

/* LINHAS */

#monitoringView .mc-row{
  display:flex;
  justify-content:space-between;
  gap:10px;

  padding:6px 0;
  border-bottom:1px solid #ece8e3;

  font-size:11px;
}

#monitoringView .mc-row span{
  color:#555;
}

#monitoringView .mc-row strong{
  color:#171719;
}

#monitoringView .mc-row strong.ok{
  color:#008a45;
}

#monitoringView .mc-row strong.warn{
  color:#d98b13;
}

/* CIRCULARES */

#monitoringView .mc-rings{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;

  text-align:center;
}

#monitoringView .mc-ring{
  --value:0;

  display:grid;
  place-items:center;

  width:86px;
  height:86px;

  margin:0 auto 7px;

  border-radius:50%;

  background:
    radial-gradient(circle,#fff 58%,transparent 59%),
    conic-gradient(
      #e5202a calc(var(--value) * 1%),
      #e5e2de 0
    );
}

#monitoringView .mc-ring strong{
  color:#171719;
  font-size:18px;
}

#monitoringView .mc-ring-item b{
  display:block;
  color:#171719;
}

#monitoringView .mc-ring-item small{
  color:#777;
}

/* HTTP */

#monitoringView .mc-http-row{
  display:grid;
  grid-template-columns:150px 1fr 35px;
  align-items:center;
  gap:10px;

  padding:6px 0;

  font-size:11px;
}

#monitoringView .mc-http-track{
  height:8px;
  background:#ece8e3;
}

#monitoringView .mc-http-track i{
  display:block;
  height:100%;
  min-width:0;
  background:#e5202a;
}

#monitoringView .mc-http-row strong{
  text-align:right;
}

/* TABELA EVENTOS */

#monitoringView .mc-table{
  border:1px solid #ded9d3;
}

#monitoringView .mc-table-head,
#monitoringView .mc-table-row{
  display:grid;
  grid-template-columns:70px 120px 1fr 160px;

  align-items:center;
}

#monitoringView .mc-table-head{
  background:#f2f1ef;
  font-size:9px;
  font-weight:900;
}

#monitoringView .mc-table-head span,
#monitoringView .mc-table-row > *{
  padding:8px;
}

#monitoringView .mc-table-row{
  border-top:1px solid #e3dfda;
  color:#222;
  font-size:10px;
}

#monitoringView .mc-table-row strong{
  color:#171719;
}

/* IP */

#monitoringView .mc-ip-list > div{
  display:flex;
  justify-content:space-between;

  padding:8px 0;
  border-bottom:1px solid #ece8e3;
}

#monitoringView .mc-ip-list code{
  color:#171719;
}

#monitoringView .mc-ip-list strong{
  color:#555;
}

#monitoringView .mc-empty{
  padding:20px;
  text-align:center;
  color:#777;
}

/* RESPONSIVO */

@media(max-width:1200px){

  #monitoringView .mc-service-grid{
    grid-template-columns:repeat(2,1fr);
  }

  #monitoringView .mc-three-grid{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:900px){

  #monitoringView .mc-system-banner{
    grid-template-columns:1fr;
    gap:16px;
  }

  #monitoringView .mc-system-stat{
    padding-left:0;
    border-left:0;
  }

  #monitoringView .mc-main-grid,
  #monitoringView .mc-three-grid{
    grid-template-columns:1fr;
  }

}


/* ==========================================================
   HTTP 24 HORAS
   ========================================================== */

#monitoringView .mc-main-grid{
  grid-template-columns:
    .82fr
    1.55fr
    .88fr !important;
}

#monitoringView .mc-http-chart{
  width:100%;
  min-height:210px;
}

#monitoringView .mc-http-chart svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

#monitoringView .mc-chart-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;

  margin:3px 0 5px;

  font-size:10px;
}

#monitoringView .mc-chart-legend .success{
  color:#0aad65;
}

#monitoringView .mc-chart-legend .client{
  color:#f08a19;
}

#monitoringView .mc-chart-legend .server{
  color:#e5202a;
}

#monitoringView .mc-chart-axis{
  stroke:#bab5ae;
  stroke-width:1;
}

#monitoringView .mc-chart-grid{
  stroke:#e7e3de;
  stroke-width:1;
}

#monitoringView .mc-line{
  fill:none;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#monitoringView .mc-line-2xx{
  stroke:#0aad65;
}

#monitoringView .mc-line-4xx{
  stroke:#f08a19;
}

#monitoringView .mc-line-5xx{
  stroke:#e5202a;
}

#monitoringView .mc-http-chart text{
  fill:#77736f;
  font-size:9px;
}

/* RESUMO */

#monitoringView .mc-summary-row{
  display:grid;
  grid-template-columns:
    minmax(95px,1fr)
    60px
    1.15fr
    48px;

  align-items:center;
  gap:8px;

  padding:9px 0;

  border-bottom:1px solid #ece8e3;

  font-size:10px;
}

#monitoringView .mc-summary-row:last-child{
  border-bottom:0;
}

#monitoringView .mc-summary-row span{
  color:#343434;
}

#monitoringView .mc-summary-row strong{
  color:#171719;
  text-align:right;
}

#monitoringView .mc-summary-row b{
  color:#555;
  text-align:right;
}

#monitoringView .mc-summary-track{
  height:9px;
  background:#ebe7e2;
}

#monitoringView .mc-summary-track i{
  display:block;
  height:100%;
}

#monitoringView .mc-summary-track .success{
  background:#0aad65;
}

#monitoringView .mc-summary-track .client{
  background:#f08a19;
}

#monitoringView .mc-summary-track .server{
  background:#e5202a;
}

#monitoringView .mc-summary-track .total{
  background:#25272a;
}

@media(max-width:1350px){

  #monitoringView .mc-main-grid{
    grid-template-columns:1fr 1.7fr !important;
  }

  #monitoringView .mc-http-summary-panel{
    grid-column:1 / -1;
  }

}

@media(max-width:900px){

  #monitoringView .mc-main-grid{
    grid-template-columns:1fr !important;
  }

}

/* ==========================================================
   TOPO MONITORAMENTO - LIMPO E SEM TITULO DUPLICADO
   ========================================================== */

#monitoringView .mc-topbar-compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:14px 0 18px !important;

  border-bottom:1px solid #d5d0c9 !important;
}

#monitoringView .mc-monitor-label{
  min-width:0;
}

#monitoringView .mc-monitor-label .mc-kicker{
  display:block;

  color:#e5202a !important;

  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;

  margin-bottom:5px;
}

#monitoringView .mc-monitor-label p{
  margin:0 !important;

  color:#6f6a65 !important;

  font-size:13px !important;
  line-height:1.4 !important;
}

#monitoringView .mc-top-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

#monitoringView .mc-update-box{
  min-width:230px;

  padding:10px 14px !important;

  background:#fff !important;

  border:1px solid #d9d4cd !important;
}

#monitoringView .mc-update-box span{
  display:block;

  color:#77736f !important;

  font-size:10px !important;
}

#monitoringView .mc-update-box strong{
  display:block;

  margin-top:3px;

  color:#171719 !important;

  font-size:15px !important;
}

#monitoringView .mc-top-actions .primary{
  min-height:46px;

  padding:0 18px !important;

  background:#24272a !important;

  color:#fff !important;

  border:0 !important;
  border-radius:0 !important;

  font-weight:800 !important;
}

@media(max-width:900px){

  #monitoringView .mc-topbar-compact{
    align-items:flex-start;
    flex-direction:column;
  }

  #monitoringView .mc-top-actions{
    width:100%;
    flex-wrap:wrap;
  }

  #monitoringView .mc-update-box{
    flex:1 1 220px;
  }

}

/* ==========================================================
   HTTP 24H - CODIGOS ESPECIFICOS
   ========================================================== */

#monitoringView .mc-code-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;

  margin:3px 0 8px;

  font-size:10px;
  font-weight:700;
}

#monitoringView .code200{
  color:#079455;
}

#monitoringView .code401{
  color:#c47a00;
}

#monitoringView .code403{
  color:#b55f00;
}

#monitoringView .code404{
  color:#e58a00;
}

#monitoringView .code429{
  color:#ad6800;
}

#monitoringView .code500{
  color:#d9272e;
}

#monitoringView .code502{
  color:#c81720;
}

#monitoringView .code503{
  color:#a90f18;
}

#monitoringView .code504{
  color:#7f0a10;
}

#monitoringView .mc-line.code200{
  stroke:#079455;
}

#monitoringView .mc-line.code401{
  stroke:#c47a00;
}

#monitoringView .mc-line.code403{
  stroke:#b55f00;
}

#monitoringView .mc-line.code404{
  stroke:#e58a00;
}

#monitoringView .mc-line.code429{
  stroke:#ad6800;
}

#monitoringView .mc-line.code500{
  stroke:#d9272e;
}

#monitoringView .mc-line.code502{
  stroke:#c81720;
}

#monitoringView .mc-line.code503{
  stroke:#a90f18;
}

#monitoringView .mc-line.code504{
  stroke:#7f0a10;
}

#monitoringView .mc-summary-track .code200{
  background:#079455;
}

#monitoringView .mc-summary-track .code401{
  background:#c47a00;
}

#monitoringView .mc-summary-track .code403{
  background:#b55f00;
}

#monitoringView .mc-summary-track .code404{
  background:#e58a00;
}

#monitoringView .mc-summary-track .code429{
  background:#ad6800;
}

#monitoringView .mc-summary-track .code500{
  background:#d9272e;
}

#monitoringView .mc-summary-track .code502{
  background:#c81720;
}

#monitoringView .mc-summary-track .code503{
  background:#a90f18;
}

#monitoringView .mc-summary-track .code504{
  background:#7f0a10;
}