:root{--bg:#08101d;--panel:#101b2d;--panel2:#152238;--line:#24334b;--text:#f5f8ff;--muted:#8ea0b9;--green:#39d98a;--red:#ff647c;--blue:#5a8cff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% -10%,#15315a 0,transparent 34%),var(--bg);color:var(--text);font:14px Inter,system-ui,sans-serif;min-height:100vh}header{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1200px)/2));background:#0a1422dd;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font-size:18px}.brand b{color:#78a0ff}.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,#6f9bff,#335ac4);font-weight:800}.live{color:var(--muted);font-size:12px}.live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-right:7px}main{max-width:1200px;margin:auto;padding:45px 24px 80px}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}.eyebrow{color:#6f98f5!important;font-size:11px;font-weight:800;letter-spacing:1.7px}.intro h1{font-size:30px;margin:7px 0}.intro p,.panel p{color:var(--muted);margin:0}.primary,.ghost,.cancel{border:0;border-radius:9px;padding:11px 16px;font-weight:700;cursor:pointer}.primary{color:white;background:var(--blue)}.ghost,.cancel{color:#bccae0;background:#19263a;border:1px solid var(--line)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stats article{padding:20px;background:linear-gradient(145deg,#132138,#0e192a);border:1px solid var(--line);border-radius:13px}.stats span,.stats small{display:block;color:var(--muted)}.stats strong{display:block;font-size:29px;margin:8px 0}.stats small{font-size:11px}.panel{background:#0d1828;border:1px solid var(--line);border-radius:14px;margin-top:16px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:19px 21px;border-bottom:1px solid var(--line)}h2{font-size:16px;margin:0 0 4px}.server-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px}.server{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:18px}.server-top,.metric-head{display:flex;justify-content:space-between;align-items:center}.server h3{margin:0 0 5px}.server-url{color:var(--muted);font-size:11px;max-width:290px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{font-size:10px;font-weight:800;text-transform:uppercase;border-radius:20px;padding:6px 9px;background:#263247;color:var(--muted)}.badge.online{background:#123c31;color:var(--green)}.badge.offline{background:#492331;color:var(--red)}.server-numbers{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);margin:17px 0;padding:14px 0}.server-numbers span{color:var(--muted);font-size:10px}.server-numbers b{display:block;margin-top:4px;font-size:18px}.metric{margin-top:11px}.metric-head{font-size:11px;color:var(--muted);margin-bottom:6px}.bar{height:5px;background:#253249;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--blue);border-radius:9px}.server-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:var(--muted);font-size:10px}.icon-button{background:transparent;border:0;color:#9db0ce;cursor:pointer;font-size:16px}.error,.form-error{color:var(--red);font-size:11px}.alert-row{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #1b2940}.alert-row div:nth-child(2){flex:1}.alert-row b{display:block;font-size:12px}.alert-row span,.empty{color:var(--muted);font-size:11px}.alert-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#412331!important;color:var(--red)!important}.alert-icon.recovery{background:#153c32!important;color:var(--green)!important}.empty{padding:34px;text-align:center}dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);width:min(520px,calc(100% - 32px));padding:0}dialog::backdrop{background:#020712b8}form{padding:24px}.modal-title,.actions{display:flex;justify-content:space-between}.modal-title p{color:var(--muted);margin:0 0 22px}.close{border:0;background:transparent;color:var(--muted);font-size:25px;cursor:pointer}label{display:block;color:#c1cee1;font-size:12px;font-weight:600;margin:14px 0}input{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:8px;background:#0a1423;color:white;padding:12px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions{justify-content:flex-end;gap:10px;margin-top:22px}#toast{position:fixed;right:25px;bottom:25px;background:#eff4ff;color:#111c2d;border-radius:9px;padding:12px 16px;transform:translateY(100px);opacity:0;transition:.25s}#toast.show{transform:none;opacity:1}@media(max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}.server-grid{grid-template-columns:1fr}}@media(max-width:480px){.live{display:none}main{padding:30px 15px}.intro{display:block}.intro .primary{margin-top:20px}.fields{grid-template-columns:1fr}}


/* dashboard-ranking-v2 */

.stats{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.problem-chart{
  padding:4px 22px 8px;
}

.problem-row{
  padding:10px 0 11px;
  border-bottom:1px solid var(--line);
}

.problem-row:last-child{
  border-bottom:0;
}

.problem-line{
  display:grid;
  grid-template-columns:
    38px
    minmax(150px,1.45fr)
    minmax(75px,.65fr)
    minmax(105px,.85fr)
    auto
    auto
    auto;
  column-gap:12px;
  align-items:center;
  min-height:30px;
}

.problem-rank{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:9px;
  background:#152238;
  color:#a9b9d1;
  font-size:10px;
  font-weight:800;
}

.problem-channel{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.problem-server{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:9px;
}

.problem-incidents{
  white-space:nowrap;
  color:var(--text);
  font-size:11px;
  font-weight:800;
}

.problem-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#121f32;
  color:#a9bbd4;
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
}

.problem-chip-down{
  color:#ff647c;
  border-color:#613044;
}

.problem-track{
  width:calc(100% - 50px);
  height:5px;
  margin-top:6px;
  margin-left:50px;
  overflow:hidden;
  border:1px solid #29405f;
  border-radius:999px;
  background:#101c2e;
}

.problem-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #5a8cff,
    #a97dc7,
    #ff647c
  );
}

.problem-summary,
.problem-title,
.problem-meta,
.problem-tech{
  display:none;
}

@media(max-width:1000px){
  .stats{
    grid-template-columns:repeat(3,1fr);
  }

  .problem-line{
    grid-template-columns:
      34px
      minmax(125px,1fr)
      70px
      95px
      auto
      auto
      auto;
    column-gap:8px;
  }

  .problem-track{
    width:calc(100% - 42px);
    margin-left:42px;
  }
}

@media(max-width:760px){
  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .problem-line{
    display:flex;
    flex-wrap:wrap;
    gap:5px 7px;
  }

  .problem-channel{
    min-width:120px;
  }

  .problem-track{
    width:100%;
    margin-left:0;
  }
}

@media(max-width:480px){
  .stats{
    grid-template-columns:1fr;
  }

  .problem-chart{
    padding-inline:12px;
  }

  .problem-row{
    padding:8px 0 9px;
  }
}

/* dashboard-ranking-v3
   Linha compacta + grafico obrigatoriamente abaixo
*/

.problem-chart{
  padding:2px 18px 6px;
}

.problem-row{
  display:block;
  position:relative;
  padding:7px 0 8px;
  overflow:visible;
  border-bottom:1px solid var(--line);
}

.problem-row:last-child{
  border-bottom:0;
}

.problem-line{
  display:grid;
  grid-template-columns:
    30px
    minmax(130px,1.35fr)
    minmax(75px,.60fr)
    minmax(100px,.75fr)
    max-content
    max-content
    max-content;
  column-gap:9px;
  align-items:center;
  width:100%;
  min-height:27px;
  position:relative;
  z-index:2;
}

.problem-rank{
  width:26px;
  height:26px;
  border-radius:7px;
  font-size:9px;
}

.problem-channel{
  font-size:11px;
  line-height:1.1;
}

.problem-server{
  font-size:9px;
  line-height:1.1;
}

.problem-incidents{
  font-size:10px;
  line-height:1.1;
}

.problem-chip{
  min-height:18px;
  padding:1px 7px;
  font-size:8px;
  line-height:1;
}

/*
  Fundamental:
  elimina qualquer posicionamento herdado e forca a barra
  a participar do fluxo normal abaixo da problem-line.
*/
.problem-track{
  display:block;
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  inset:auto !important;
  transform:none !important;

  width:calc(100% - 39px);
  height:4px;
  margin:4px 0 0 39px;

  clear:both;
  overflow:hidden;
  border:1px solid #29405f;
  border-radius:999px;
  background:#101c2e;
  z-index:1;
}

.problem-track i{
  display:block;
  position:relative;
  height:100%;
  margin:0;
  border-radius:999px;
}

@media(max-width:1000px){
  .problem-chart{
    overflow-x:auto;
  }

  .problem-line{
    grid-template-columns:
      28px
      minmax(120px,1.2fr)
      70px
      95px
      max-content
      max-content
      max-content;
    column-gap:7px;
  }

  .problem-track{
    width:calc(100% - 35px);
    margin-left:35px;
  }
}

@media(max-width:760px){
  /*
    Mantemos os dados em uma unica linha.
    Em tela pequena o card pode rolar horizontalmente.
  */
  .problem-row{
    min-width:700px;
  }

  .problem-line{
    display:grid;
  }

  .problem-track{
    width:calc(100% - 35px);
    margin-left:35px;
  }
}

/* dashboard-ranking-v4
   Grid de duas linhas: dados em cima e grafico embaixo
*/

.problem-chart{
  padding:4px 18px 6px !important;
}

.problem-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto 5px !important;
  row-gap:5px !important;

  position:relative !important;
  width:100% !important;

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

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

.problem-row:last-child{
  border-bottom:0;
}

.problem-line{
  grid-column:1 !important;
  grid-row:1 !important;

  display:grid !important;

  grid-template-columns:
    30px
    minmax(150px,1.4fr)
    minmax(75px,.55fr)
    minmax(105px,.75fr)
    max-content
    max-content
    max-content !important;

  column-gap:10px !important;
  align-items:center !important;

  position:relative !important;
  width:100% !important;
  min-height:27px !important;

  margin:0 !important;
  padding:0 !important;
}

.problem-rank{
  width:26px !important;
  height:26px !important;
  margin:0 !important;

  display:grid !important;
  place-items:center !important;
}

.problem-channel{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.problem-server,
.problem-incidents,
.problem-chip{
  white-space:nowrap !important;
}

.problem-track{
  grid-column:1 !important;
  grid-row:2 !important;

  display:block !important;

  position:relative !important;
  float:none !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  inset:auto !important;
  transform:none !important;

  width:calc(100% - 40px) !important;
  height:5px !important;

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

  overflow:hidden !important;

  border:1px solid #29405f !important;
  border-radius:999px !important;
  background:#101c2e !important;
}

.problem-track i{
  display:block !important;
  position:static !important;

  height:100% !important;
  margin:0 !important;
  padding:0 !important;

  border-radius:999px !important;
}

@media(max-width:900px){

  .problem-chart{
    overflow-x:auto;
  }

  .problem-row{
    min-width:720px;
  }

  .problem-line{
    grid-template-columns:
      28px
      minmax(135px,1.25fr)
      70px
      100px
      max-content
      max-content
      max-content !important;

    column-gap:8px !important;
  }

  .problem-track{
    width:calc(100% - 36px) !important;
    margin-left:36px !important;
  }
}

/* dashboard-ranking-v5
   Tipografia maior + barra mais destacada
*/

.problem-row{
  grid-template-rows:auto 7px !important;
  row-gap:6px !important;
  padding:9px 0 11px !important;
}

.problem-line{
  min-height:32px !important;
  grid-template-columns:
    34px
    minmax(165px,1.4fr)
    minmax(85px,.60fr)
    minmax(115px,.80fr)
    max-content
    max-content
    max-content !important;
  column-gap:11px !important;
}

.problem-rank{
  width:29px !important;
  height:29px !important;
  font-size:10px !important;
}

.problem-channel{
  font-size:13px !important;
  line-height:1.2 !important;
}

.problem-server{
  font-size:10px !important;
  line-height:1.2 !important;
}

.problem-incidents{
  font-size:12px !important;
  line-height:1.2 !important;
}

.problem-chip{
  min-height:21px !important;
  padding:2px 8px !important;
  font-size:9px !important;
  line-height:1 !important;
}

.problem-track{
  width:calc(100% - 36px) !important;
  height:7px !important;
  margin-left:36px !important;
}

@media(max-width:900px){
  .problem-row{
    min-width:780px;
  }

  .problem-line{
    grid-template-columns:
      32px
      minmax(150px,1.3fr)
      80px
      110px
      max-content
      max-content
      max-content !important;
    column-gap:9px !important;
  }

  .problem-track{
    width:calc(100% - 34px) !important;
    margin-left:34px !important;
  }
}

/* dashboard-responsive-v6 */

/* ------------------------------------------------------------
   CABECALHO
------------------------------------------------------------ */

header{
  gap:14px;
}

.brand{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  gap:8px !important;
  white-space:nowrap !important;
}

.brand > span:last-child{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:4px !important;
  white-space:nowrap !important;
}

.account{
  min-width:0;
}

.account a,
.account span,
.account button{
  white-space:nowrap;
}


/* ------------------------------------------------------------
   RELATORIOS
------------------------------------------------------------ */

.report-actions-compact{
  display:grid !important;
  grid-template-columns:
    minmax(110px,140px)
    minmax(120px,150px)
    max-content
    max-content !important;

  align-items:end !important;
  justify-content:end !important;
  gap:10px !important;
}

.report-select{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:0;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}

.report-select select{
  width:100%;
  min-height:38px;
  margin:0;
}

.report-actions-compact button{
  min-height:38px;
  margin:0 !important;
}


/* ------------------------------------------------------------
   RANKING - DESKTOP
------------------------------------------------------------ */

.problem-chart{
  padding:5px 18px 8px !important;
}

.problem-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto 7px !important;
  row-gap:6px !important;

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

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

  overflow:hidden !important;
}

.problem-line{
  display:grid !important;
  grid-template-columns:
    32px
    minmax(180px,1fr)
    auto !important;

  gap:12px !important;
  align-items:center !important;

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

  margin:0 !important;
  padding:0 !important;
}

.problem-rank{
  width:29px !important;
  height:29px !important;
  font-size:10px !important;
}

.problem-identity{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.problem-channel{
  min-width:0 !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;

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

.problem-server{
  flex:0 0 auto;

  color:var(--muted);
  font-size:10px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

.problem-metrics{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;

  min-width:0;
  white-space:nowrap;
}

.problem-incidents{
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

.problem-chip{
  min-height:21px !important;
  padding:2px 8px !important;

  font-size:9px !important;
  line-height:1 !important;
}

.problem-track{
  display:block !important;

  position:relative !important;
  float:none !important;

  grid-column:1 !important;
  grid-row:2 !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  width:calc(100% - 41px) !important;
  height:7px !important;

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

  overflow:hidden !important;
}

.problem-track i{
  display:block !important;
  position:static !important;

  height:100% !important;
  margin:0 !important;
}


/* ------------------------------------------------------------
   TABLET
------------------------------------------------------------ */

@media(max-width:900px){

  header{
    padding-inline:18px;
  }

  .account{
    overflow-x:auto;
    scrollbar-width:none;
  }

  .account::-webkit-scrollbar{
    display:none;
  }

  .intro{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .report-actions-compact{
    justify-content:start !important;
  }

  .problem-line{
    grid-template-columns:
      30px
      minmax(160px,1fr)
      auto !important;
  }
}


/* ------------------------------------------------------------
   CELULAR
------------------------------------------------------------ */

@media(max-width:650px){

  body{
    overflow-x:hidden !important;
  }

  header{
    display:grid !important;
    grid-template-columns:1fr !important;

    gap:8px !important;

    padding:
      9px
      12px
      7px !important;
  }

  .brand{
    width:max-content;
  }

  .brand > span:last-child{
    display:inline !important;
  }

  .account{
    display:flex !important;

    width:100% !important;
    gap:12px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:2px 0 5px !important;

    white-space:nowrap !important;
  }

  .account a,
  .account span,
  .account form{
    flex:0 0 auto !important;
  }

  .account a{
    line-height:1 !important;
  }

  main{
    width:100% !important;
    max-width:100% !important;

    padding-inline:12px !important;

    overflow-x:hidden !important;
  }

  .intro{
    display:block !important;
  }

  .intro h1{
    max-width:none !important;

    font-size:27px !important;
    line-height:1.08 !important;
  }

  .report-actions-compact{
    display:grid !important;

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

    width:100% !important;

    margin-top:16px !important;

    gap:8px !important;
  }

  .report-actions-compact #downloadReport,
  .report-actions-compact #addButton{
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  .panel{
    width:100% !important;
    max-width:100% !important;
  }

  .panel-head{
    gap:10px !important;
  }

  .problem-chart{
    width:100% !important;

    padding:
      4px
      12px
      7px !important;

    overflow:hidden !important;
  }

  .problem-row{
    min-width:0 !important;
    width:100% !important;

    grid-template-rows:auto 7px !important;

    row-gap:7px !important;

    padding:
      9px
      0
      10px !important;
  }

  .problem-line{
    display:grid !important;

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

    grid-template-rows:auto auto !important;

    gap:
      5px
      9px !important;

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

  .problem-rank{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;

    align-self:center !important;
  }

  .problem-identity{
    grid-column:2 !important;
    grid-row:1 !important;

    display:flex !important;

    min-width:0 !important;
    gap:7px !important;
  }

  .problem-channel{
    flex:1 1 auto !important;

    font-size:12px !important;
  }

  .problem-server{
    flex:0 0 auto !important;

    font-size:8px !important;
  }

  .problem-metrics{
    grid-column:2 !important;
    grid-row:2 !important;

    display:flex !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;

    gap:4px !important;

    min-width:0 !important;
  }

  .problem-incidents{
    font-size:10px !important;
  }

  .problem-chip{
    min-height:18px !important;

    padding:
      1px
      6px !important;

    font-size:8px !important;
  }

  .problem-track{
    width:calc(100% - 38px) !important;
    height:7px !important;

    margin-left:38px !important;
  }

  #resetCounters{
    padding:
      8px
      10px !important;

    font-size:9px !important;
  }
}

/* form-controls-dark-v1
   Padrao visual global para selects e controles
*/

select{
  color-scheme:dark;

  width:100%;
  min-height:38px;

  padding:8px 36px 8px 12px;

  border:1px solid #2a3c58;
  border-radius:9px;

  outline:none;

  background-color:#0d1a2b;
  color:#f4f7fb;

  font-family:inherit;
  font-size:12px;
  font-weight:600;

  cursor:pointer;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

select:hover{
  border-color:#3d5b85;
  background-color:#101f33;
}

select:focus{
  border-color:#5a8cff;

  box-shadow:
    0 0 0 3px rgba(90,140,255,.13);

  background-color:#101f33;
}

select:disabled{
  opacity:.55;
  cursor:not-allowed;
}

select option{
  background:#0d1a2b;
  color:#f4f7fb;
}


/* Labels dos controles */

label{
  color:#d9e3f2;
}

.report-select{
  color:#91a6c3 !important;
}

.report-select span{
  display:block;

  margin-bottom:4px;

  color:#91a6c3;

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


/* Relatorios */

.report-select select{
  min-height:40px;

  border-color:#2a3c58;

  background-color:#0d1a2b;
  color:#f4f7fb;
}


/* Select do periodo do dashboard */

.period-toolbar select{
  background-color:#0d1a2b;
  color:#f4f7fb;
}


/* Inputs para manter a mesma identidade */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="number"],
textarea{
  border:1px solid #2a3c58;

  background:#0d1a2b;
  color:#f4f7fb;
}

input:focus,
textarea:focus{
  border-color:#5a8cff;
  outline:none;

  box-shadow:
    0 0 0 3px rgba(90,140,255,.13);
}


/* Mobile */

@media(max-width:650px){

  select{
    min-height:39px;
    font-size:12px;
  }

  .report-select select{
    width:100%;
  }
}

/* server-filter-v1 */

.dashboard-server-filter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  margin:12px 0;
  padding:13px 16px;

  border:1px solid var(--line);
  border-radius:12px;

  background:#0d1a2b;
}

.dashboard-filter-label{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.dashboard-filter-label > span{
  color:var(--text);
  font-size:11px;
  font-weight:800;
}

.dashboard-filter-label small{
  color:var(--muted);
  font-size:9px;
}

.server-filter-dropdown{
  position:relative;
  width:min(320px,100%);
}

.server-filter-dropdown > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  min-height:40px;
  padding:9px 12px;

  border:1px solid #2a3c58;
  border-radius:9px;

  background:#101f33;
  color:#f4f7fb;

  font-size:11px;
  font-weight:700;

  cursor:pointer;
  list-style:none;
}

.server-filter-dropdown > summary::-webkit-details-marker{
  display:none;
}

.server-filter-dropdown[open] > summary{
  border-color:#5a8cff;
  box-shadow:0 0 0 3px rgba(90,140,255,.10);
}

.server-filter-arrow{
  color:#8fa7c7;
}

.server-filter-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:30;

  width:100%;
  min-width:280px;

  padding:10px;

  border:1px solid #2a3c58;
  border-radius:10px;

  background:#0b1727;

  box-shadow:0 14px 35px rgba(0,0,0,.32);
}

.server-filter-options{
  display:flex;
  flex-direction:column;
  gap:5px;

  max-height:260px;
  overflow-y:auto;
}

.server-filter-option{
  display:flex;
  align-items:center;
  gap:9px;

  min-height:35px;

  padding:7px 9px;

  border:1px solid transparent;
  border-radius:8px;

  color:#dce7f6;
  font-size:10px;

  cursor:pointer;
}

.server-filter-option:hover{
  border-color:#29405f;
  background:#101f33;
}

.server-filter-option input{
  width:15px;
  height:15px;
  margin:0;

  accent-color:#5a8cff;
}

.server-filter-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;

  margin-top:10px;
  padding-top:10px;

  border-top:1px solid var(--line);
}

.server-filter-actions button{
  min-height:34px;
  margin:0;
  padding:6px 10px;
}


/* celular */

@media(max-width:650px){

  .dashboard-server-filter{
    display:block;

    padding:11px 12px;
  }

  .dashboard-filter-label{
    margin-bottom:9px;
  }

  .server-filter-dropdown{
    width:100%;
  }

  .server-filter-panel{
    position:static;

    min-width:0;
    width:100%;

    margin-top:6px;

    box-shadow:none;
  }

  .server-filter-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

/* global-navigation-v1 */

.main-nav a{
  position:relative;
}

.main-nav a.active{
  color:#ffffff;
}

.main-nav a.active::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:-8px;

  height:2px;

  border-radius:999px;
  background:#5a8cff;
}

.nav-user{
  color:#8fa2bc;
  white-space:nowrap;
}

.nav-logout{
  margin:0;
}

.nav-logout button{
  margin:0;
  white-space:nowrap;
}

@media(max-width:650px){

  .site-header{
    position:sticky;
    top:0;
    z-index:50;

    background:#091525;
  }

  .main-nav{
    scrollbar-width:none;
  }

  .main-nav::-webkit-scrollbar{
    display:none;
  }

  .main-nav a.active::after{
    bottom:-5px;
  }
}

/* unified-header-v2 */

.site-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  width:100% !important;
  min-height:58px;

  padding:11px 4vw !important;

  border-bottom:1px solid var(--line);

  background:#091525;
}

.site-header .brand{
  display:flex !important;
  align-items:center !important;

  flex:0 0 auto !important;

  gap:9px !important;

  text-decoration:none;
  white-space:nowrap !important;
}

.brand-name{
  display:inline !important;

  color:#f5f7fb;

  font-size:18px;
  line-height:1;

  white-space:nowrap !important;
}

.brand-name b{
  color:#7fa5ff;
}


.main-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  flex:1 1 auto;

  gap:17px !important;

  min-width:0;

  margin-left:28px;
}

.main-nav a,
.nav-user,
.nav-logout,
.nav-logout button{
  flex:0 0 auto;

  white-space:nowrap !important;
}

.main-nav a{
  position:relative;

  color:#aebdd2;

  font-size:13px;
  font-weight:600;

  text-decoration:none;
}

.main-nav a:hover,
.main-nav a.active{
  color:#ffffff;
}

.main-nav a.active::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:-10px;

  height:2px;

  border-radius:999px;

  background:#5a8cff;
}

.nav-user{
  color:#8092ad;

  font-size:12px;
}

.nav-logout{
  display:flex;
  align-items:center;

  margin:0 !important;
}

.nav-logout button{
  margin:0 !important;
  padding:0 !important;

  border:0 !important;

  background:transparent !important;

  color:#aebdd2 !important;

  font-family:inherit;
  font-size:12px !important;
  font-weight:600;

  cursor:pointer;
}

.nav-logout button:hover{
  color:#fff !important;
}


.dashboard-health-row{
  display:flex;
  justify-content:flex-end;

  width:min(1160px,92%);

  margin:10px auto -4px;
}


/* Tablet */

@media(max-width:900px){

  .site-header{
    padding-inline:18px !important;
  }

  .main-nav{
    gap:13px !important;
    margin-left:20px;
  }
}


/* Celular */

@media(max-width:760px){

  .site-header{
    display:block !important;

    padding:
      9px
      12px
      7px !important;
  }

  .site-header .brand{
    width:max-content;

    margin-bottom:9px;
  }

  .brand-name{
    font-size:18px;
  }

  .main-nav{
    display:flex !important;
    justify-content:flex-start !important;

    width:100%;

    gap:16px !important;

    margin-left:0;

    padding:
      2px
      0
      6px;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:none;
  }

  .main-nav::-webkit-scrollbar{
    display:none;
  }

  .main-nav a,
  .nav-user,
  .nav-logout button{
    font-size:11px !important;
  }

  .main-nav a.active::after{
    bottom:-5px;
  }

  .dashboard-health-row{
    width:calc(100% - 24px);

    margin:
      8px
      12px
      0;
  }
}

/* integrations-accordion-v1 */

.integration-panel{
  overflow:visible;
}

.integration-panel-head{
  align-items:center;
}

.integration-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:28px;

  padding:5px 10px;

  border:1px solid #29405f;
  border-radius:999px;

  background:#101f33;
  color:#9db0cb;

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


/* Lista */

.integration-list{
  display:flex;
  flex-direction:column;

  padding:0 18px 18px;

  gap:8px;
}


/* Card fechado */

.destination-accordion{
  display:block;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden;

  border:1px solid #243a58 !important;
  border-radius:11px !important;

  background:#0d1a2b !important;
}


.destination-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  min-height:62px;

  padding:11px 14px;

  cursor:pointer;

  list-style:none;

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

.destination-summary::-webkit-details-marker{
  display:none;
}

.destination-summary:hover{
  background:#101f33;
}

.destination-accordion[open] > .destination-summary{
  border-bottom:1px solid #243a58;

  background:#101f33;
}


/* Lado esquerdo */

.destination-summary-main{
  display:flex;
  align-items:center;

  min-width:0;

  gap:10px;
}

.destination-chevron{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  width:25px;
  height:25px;

  border:1px solid #29405f;
  border-radius:7px;

  color:#7fa5ff;

  font-size:20px;
  line-height:1;

  transition:transform .15s ease;
}

.destination-accordion[open]
.destination-chevron{
  transform:rotate(90deg);
}


.destination-summary-text{
  display:flex;
  flex-direction:column;

  min-width:0;

  gap:3px;
}

.destination-summary-text strong{
  overflow:hidden;

  color:#f4f7fb;

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

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

.destination-summary-text span{
  overflow:hidden;

  color:#899db9;

  font-size:9px;

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


/* Lado direito */

.destination-summary-meta{
  display:flex;
  align-items:center;

  flex:0 0 auto;

  gap:8px;
}

.destination-server-count{
  color:#8da0bb;

  font-size:9px;
  white-space:nowrap;
}

.destination-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:54px;
  min-height:22px;

  padding:3px 8px;

  border-radius:999px;

  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
}

.destination-state.enabled{
  border:1px solid rgba(62,207,142,.34);

  background:rgba(62,207,142,.10);
  color:#75ddb0;
}

.destination-state.disabled{
  border:1px solid rgba(243,100,117,.32);

  background:rgba(243,100,117,.09);
  color:#f18b98;
}


/* Corpo aberto */

.destination-body{
  padding:16px;
}

.destination-body form{
  display:flex;
  flex-direction:column;

  gap:12px;
}

.destination-secret-info{
  display:flex;
  align-items:center;

  min-height:34px;

  padding:7px 10px;

  border:1px solid #243a58;
  border-radius:8px;

  background:#091625;

  color:#899db9;

  font-size:9px;
}

.destination-secret-info b{
  color:#c5d2e5;
}


.field-help{
  display:block;

  margin:
    3px
    0
    5px;

  color:#7286a3;

  font-size:8px;
  font-weight:400;
}


.destination-server-section{
  display:flex;
  flex-direction:column;

  gap:7px;
}

.destination-field-title{
  color:#dce6f5;

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


.destination-server-checks{
  display:flex;
  flex-wrap:wrap;

  gap:6px;
}

.destination-server-checks .check-label{
  display:flex;
  align-items:center;

  gap:6px;

  min-height:31px;

  margin:0;

  padding:5px 9px;

  border:1px solid #243a58;
  border-radius:8px;

  background:#0a1727;

  font-size:9px;
}


.destination-enabled{
  width:max-content;
}


/* Botoes */

.destination-actions{
  display:flex;
  align-items:center;

  gap:8px;

  padding-top:3px;
}

.destination-actions button{
  min-height:37px;

  margin:0;
}

.destination-delete{
  margin-left:auto !important;
}


/* Paginacao */

.integration-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin:
    0
    18px
    18px;

  padding:
    11px
    0
    0;

  border-top:1px solid var(--line);
}

.pagination-info{
  color:#8397b3;

  font-size:9px;
}

.pagination-info b{
  color:#d9e4f3;
}

.pagination-actions{
  display:flex;

  gap:7px;
}

.pagination-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:34px;

  padding:6px 11px;

  text-decoration:none;
}


/* Mobile */

@media(max-width:650px){

  .integration-list{
    padding:
      0
      10px
      12px;
  }

  .destination-summary{
    align-items:flex-start;

    min-height:58px;

    padding:10px;
  }

  .destination-summary-meta{
    flex-direction:column;
    align-items:flex-end;

    gap:4px;
  }

  .destination-server-count{
    font-size:8px;
  }

  .destination-body{
    padding:11px;
  }

  .destination-body .inline-fields{
    grid-template-columns:1fr !important;
  }

  .destination-actions{
    display:grid;

    grid-template-columns:1fr 1fr;
  }

  .destination-actions .primary{
    grid-column:1 / -1;
  }

  .destination-delete{
    margin-left:0 !important;
  }

  .integration-pagination{
    margin:
      0
      10px
      12px;
  }
}

/* dashboard-pagination-v1 */

.dashboard-pagination{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;

  min-height:0;

  margin:
    0
    18px
    14px;

  padding-top:10px;

  border-top:1px solid var(--line);
}

.dashboard-pagination:empty{
  display:none;
}

.dashboard-page-button{
  min-height:33px;

  margin:0 !important;

  padding:6px 11px !important;

  font-size:9px !important;
}

.dashboard-page-button:disabled{
  opacity:.35;

  cursor:not-allowed;
}

.dashboard-page-info{
  display:flex;
  align-items:center;

  gap:4px;

  color:#8397b3;

  font-size:9px;

  white-space:nowrap;
}

.dashboard-page-info b{
  color:#dce6f5;
}

.dashboard-page-info small{
  margin-left:5px;

  color:#667b98;

  font-size:8px;
}


/* celular */

@media(max-width:650px){

  .dashboard-pagination{
    justify-content:space-between;

    gap:6px;

    margin:
      0
      10px
      11px;

    padding-top:9px;
  }

  .dashboard-page-button{
    min-height:31px;

    padding:
      5px
      8px !important;

    font-size:8px !important;
  }

  .dashboard-page-info{
    flex-direction:column;

    gap:1px;

    text-align:center;

    font-size:8px;
  }

  .dashboard-page-info small{
    margin-left:0;

    font-size:7px;
  }
}

/* channels-pagination-v1 */

.page-size-field{
  display:flex;
  align-items:center;

  gap:7px;

  margin:0;
}

.page-size-field span{
  color:#8599b5;

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

  white-space:nowrap;
}

.page-size-field select{
  width:76px;
  min-height:37px;
}


/* paginacao */

.list-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin:
    12px
    18px
    16px;

  padding-top:11px;

  border-top:1px solid var(--line);
}

.list-page-info{
  color:#8397b3;

  font-size:9px;
}

.list-page-info b{
  color:#dce6f5;
}

.list-page-actions{
  display:flex;
  gap:7px;
}

.list-page-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:34px;

  padding:6px 11px;

  text-decoration:none;
}


/* celular */

@media(max-width:650px){

  .filter-bar{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    gap:8px !important;
  }

  .filter-bar > input[name="q"]{
    grid-column:1 / -1;
  }

  .page-size-field{
    display:block;
  }

  .page-size-field span{
    display:block;

    margin-bottom:5px;
  }

  .page-size-field select{
    width:100%;
  }

  .filter-bar button{
    align-self:end;

    min-height:39px;
  }

  .list-pagination{
    margin:
      10px
      10px
      12px;
  }

  .list-page-info{
    font-size:8px;
  }

  .list-page-actions a{
    min-height:31px;

    padding:5px 8px;

    font-size:8px;
  }

  .event-table{
    min-width:720px;
  }

  .panel:has(.event-table){
    overflow-x:auto;
  }
}

/* official-brand-logo-v1 */

.brand-mark{
  display:block;
  flex:0 0 auto;

  width:46px;
  height:46px;

  overflow:hidden;

  border:1px solid rgba(90,140,255,.28);
  border-radius:11px;

  background-image:url("hrocch-watch.2eef4710cb13.png");
  background-repeat:no-repeat;

  background-size:170%;
  background-position:center 7%;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 4px 14px rgba(0,0,0,.25);
}

.site-header .brand{
  gap:11px !important;
}

.brand-name{
  font-size:18px !important;
  font-weight:600;
  letter-spacing:-.2px;
}

.brand-name b{
  font-weight:800;
}

@media(max-width:760px){

  .brand-mark{
    width:42px;
    height:42px;

    border-radius:10px;
  }

  .brand-name{
    font-size:17px !important;
  }
}

/* channels-polish-v2
   Refinamento visual da tela Canais e erros.
   Escopo isolado pela classe .channels-page.
*/


/* =========================================================
   CABECALHO DA PAGINA
   ========================================================= */

.channels-page .intro{
  padding-top:24px;
  padding-bottom:4px;
}

.channels-page .intro .eyebrow{
  margin-bottom:12px;

  font-size:14px;
  font-weight:800;
  line-height:1;

  letter-spacing:.19em;

  color:#6d9cff;
}

.channels-page .intro h1{
  margin:0;

  font-size:34px;
  line-height:1.12;
  font-weight:800;

  letter-spacing:-.025em;
}

.channels-page .intro p:not(.eyebrow){
  margin-top:10px;

  font-size:14px;
  line-height:1.5;

  color:var(--muted);
}


/* =========================================================
   CARDS DE RESUMO
   ========================================================= */

.channels-page .stats{
  display:grid !important;

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

  gap:14px !important;

  width:100% !important;
  max-width:none !important;

  margin:26px 0 18px !important;
}

.channels-page .stats article{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:center;

  min-width:0;
  min-height:168px;

  padding:
    24px
    20px
    22px
    78px;

  border:
    1px solid
    rgba(85,135,210,.30);

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      rgba(18,39,68,.90),
      rgba(12,27,49,.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 10px 28px rgba(0,0,0,.08);

  overflow:hidden;

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

.channels-page .stats article:hover{
  transform:translateY(-2px);

  border-color:
    rgba(90,147,245,.50);

  box-shadow:
    0 13px 28px rgba(0,0,0,.14);
}


/* Circulo do indicador */

.channels-page .stats article::before{
  content:"";

  position:absolute;

  left:22px;
  top:28px;

  width:42px;
  height:42px;

  border-radius:50%;

  background:
    rgba(43,104,204,.14);

  border:
    1px solid
    rgba(73,132,225,.10);
}


/* Simbolo dentro do indicador */

.channels-page .stats article::after{
  position:absolute;

  left:22px;
  top:28px;

  display:grid;
  place-items:center;

  width:42px;
  height:42px;

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

  color:#5795ff;
}


/* Canais encontrados */

.channels-page .stats article:nth-child(1)::after{
  content:"?";
}


/* Online */

.channels-page .stats article:nth-child(2)::after{
  content:"?";

  color:#31d99a;

  text-shadow:
    0 0 9px rgba(49,217,154,.30);
}


/* Com problemas */

.channels-page .stats article:nth-child(3)::after{
  content:"!";

  color:#ffc342;
}


/* Fora do ar */

.channels-page .stats article:nth-child(4)::after{
  content:"?";

  color:#ff5c69;

  font-size:25px;
  font-weight:500;
}


.channels-page .stats article > span{
  display:block;

  margin-bottom:8px;

  font-size:14px;
  font-weight:500;

  color:#9cbef1;
}

.channels-page .stats article > strong{
  display:block;

  margin:0 0 7px;

  font-size:34px;
  line-height:1;
  font-weight:800;

  letter-spacing:-.025em;

  color:#fff;
}

.channels-page .stats article > small{
  display:block;

  font-size:11px;
  line-height:1.3;

  color:#8caed9;
}


/* =========================================================
   PAINEL PRINCIPAL
   ========================================================= */

.channels-page .panel{
  border:
    1px solid
    rgba(79,126,190,.30);

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(11,28,50,.95),
      rgba(10,25,44,.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015);
}


/* =========================================================
   BARRA DE FILTROS
   ========================================================= */

.channels-page .filter-bar{
  display:grid !important;

  grid-template-columns:
    minmax(260px,1.55fr)
    minmax(190px,1fr)
    minmax(190px,1fr)
    minmax(150px,.55fr)
    122px;

  gap:11px;

  align-items:center;

  width:100%;

  padding:17px 16px;

  margin:0;

  border-bottom:
    1px solid
    rgba(65,107,164,.16);
}


/* Campo de busca */

.channels-page .filter-bar > input{
  width:100%;
  height:48px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(73,121,190,.35);

  border-radius:10px;

  background:
    rgba(5,17,32,.54);

  color:#fff;

  font-size:13px;

  outline:none;

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

.channels-page .filter-bar > input::placeholder{
  color:#71859f;
}

.channels-page .filter-bar > input:focus{
  border-color:
    rgba(79,139,237,.70);

  box-shadow:
    0 0 0 3px
    rgba(66,126,224,.10);
}


/* Selects */

.channels-page .filter-bar > select{
  width:100%;
  height:48px;

  padding:
    0 38px
    0 14px;

  border:
    1px solid
    rgba(73,121,190,.35);

  border-radius:10px;

  background-color:
    rgba(5,17,32,.62);

  color:#fff;

  font-size:12px;
  font-weight:600;

  outline:none;

  cursor:pointer;
}


/* =========================================================
   ITENS POR PAGINA
   ========================================================= */

.channels-page .page-size-field{
  display:grid !important;

  grid-template-columns:
    minmax(62px,1fr)
    72px;

  gap:7px;

  align-items:center;

  width:100%;

  margin:0;
}

.channels-page .page-size-field span{
  font-size:9px !important;
  line-height:1.15;

  color:#89a6cb;

  white-space:nowrap;
}

.channels-page .page-size-field select{
  width:72px !important;
  height:48px !important;

  padding:
    0 28px
    0 12px !important;

  border:
    1px solid
    rgba(73,121,190,.35) !important;

  border-radius:10px !important;

  background-color:
    rgba(5,17,32,.62) !important;

  color:#fff !important;

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

  cursor:pointer;
}


/* =========================================================
   BOTAO FILTRAR
   ========================================================= */

.channels-page .filter-bar > button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:122px;
  height:48px;

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

  border:
    1px solid
    rgba(72,139,255,.65) !important;

  border-radius:10px !important;

  background:
    linear-gradient(
      135deg,
      #2469c9,
      #3382ea
    ) !important;

  color:#fff !important;

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

  box-shadow:
    0 6px 18px
    rgba(24,91,192,.20);

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

.channels-page .filter-bar > button:hover{
  transform:translateY(-1px);

  filter:brightness(1.07);

  box-shadow:
    0 8px 22px
    rgba(24,91,192,.29);
}


/* Pequeno simbolo de filtro */

.channels-page .filter-bar > button::before{
  content:"";

  display:inline-block;

  width:12px;
  height:12px;

  margin-right:7px;

  border:
    1.5px solid
    currentColor;

  border-top-width:0;

  transform:
    rotate(45deg)
    translateY(-1px);

  border-radius:1px;
}


/* =========================================================
   LISTA DE CANAIS
   ========================================================= */

.channels-page .channel-list{
  padding-top:8px;
}


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

@media(max-width:1000px){

  .channels-page .stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }

  .channels-page .filter-bar{
    grid-template-columns:
      minmax(220px,1.4fr)
      minmax(180px,1fr)
      minmax(180px,1fr);

    align-items:end;
  }

  .channels-page .page-size-field{
    grid-column:1 / 2;
  }

  .channels-page .filter-bar > button{
    grid-column:3;
    justify-self:end;
  }
}


@media(max-width:700px){

  .channels-page .intro .eyebrow{
    font-size:12px;
  }

  .channels-page .intro h1{
    font-size:29px;
  }

  .channels-page .stats{
    grid-template-columns:
      1fr !important;
  }

  .channels-page .stats article{
    min-height:140px;
  }

  .channels-page .filter-bar{
    grid-template-columns:
      1fr !important;

    gap:10px;

    padding:14px;
  }

  .channels-page .filter-bar > input,
  .channels-page .filter-bar > select,
  .channels-page .page-size-field,
  .channels-page .filter-bar > button{
    grid-column:1 !important;

    width:100% !important;
  }

  .channels-page .page-size-field{
    grid-template-columns:
      1fr 90px;
  }

  .channels-page .page-size-field select{
    width:90px !important;
  }
}

/* channels-card-color-fix-v1
   Mantem os cards da pagina Canais e erros
   com a mesma tonalidade escura do Dashboard.
*/

.channels-page .stats article{
  background:
    linear-gradient(
      145deg,
      rgb(16,28,47),
      rgb(15,27,46)
    ) !important;

  border-color:
    rgba(74,111,160,.34) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 8px 24px rgba(0,0,0,.10) !important;
}

.channels-page .stats article:hover{
  background:
    linear-gradient(
      145deg,
      rgb(16,28,47),
      rgb(15,27,46)
    ) !important;

  border-color:
    rgba(86,132,196,.42) !important;
}

/* channels-card-standard-v1
   Cor original dos cards do Hrocch Watch.
*/

.channels-page .stats article{
  background:
    linear-gradient(
      145deg,
      #132138,
      #0e192a
    ) !important;

  border:
    1px solid var(--line) !important;

  box-shadow:none !important;
}


/* Mantem a mesma cor ao passar o mouse */

.channels-page .stats article:hover{
  background:
    linear-gradient(
      145deg,
      #132138,
      #0e192a
    ) !important;

  border-color:
    var(--line) !important;

  box-shadow:none !important;

  transform:none !important;
}

/* ui-regression-fix-v1
   Correcoes pontuais sem alterar o estilo global.
*/


/* =========================================================
   CHECKBOXES
   ========================================================= */

/*
 * Nunca aplicar altura de input de texto
 * em checkbox ou radio.
 */

input[type="checkbox"],
input[type="radio"]{
  width:14px !important;
  min-width:14px !important;

  height:14px !important;
  min-height:14px !important;

  padding:0 !important;
  margin:0 !important;

  flex:0 0 14px;

  accent-color:var(--blue);
}


/* Alinhamento dos labels com checkbox */

.check-label,
label:has(> input[type="checkbox"]){
  align-items:center;
}


/* Mais espaco antes do botao final
   nos formularios de cadastro. */

.form-panel form > button:last-child{
  margin-top:14px !important;
}


/* =========================================================
   CANAIS E ERROS - ICONES
   ========================================================= */

/*
 * Usamos escapes CSS.
 * Assim o Windows/PowerShell nao transforma
 * os caracteres em ?.
 */

.channels-page .stats article:nth-child(1)::after{
  content:"\25A3" !important;

  color:#5795ff !important;

  font-size:19px !important;
  font-weight:600 !important;
}


.channels-page .stats article:nth-child(2)::after{
  content:"\25CF" !important;

  color:var(--green) !important;

  font-size:18px !important;

  text-shadow:
    0 0 8px
    rgba(57,217,138,.28);
}


.channels-page .stats article:nth-child(3)::after{
  content:"!" !important;

  color:#ffc342 !important;

  font-size:20px !important;
  font-weight:800 !important;
}


.channels-page .stats article:nth-child(4)::after{
  content:"\00D7" !important;

  color:var(--red) !important;

  font-size:24px !important;
  font-weight:500 !important;
}


/* =========================================================
   CANAIS E ERROS - FILTROS
   ========================================================= */

/*
 * Aumenta somente a area do seletor
 * 10 / 50 / 100.
 */

.channels-page .filter-bar{
  grid-template-columns:
    minmax(260px,1.55fr)
    minmax(190px,1fr)
    minmax(190px,1fr)
    178px
    122px !important;
}


.channels-page .page-size-field{
  display:grid !important;

  grid-template-columns:
    80px
    88px !important;

  gap:8px !important;

  align-items:center !important;

  width:176px !important;
}


.channels-page .page-size-field span{
  width:80px;

  font-size:9px !important;

  line-height:1.15 !important;

  white-space:nowrap;
}


.channels-page .page-size-field select{
  display:block !important;

  width:88px !important;
  min-width:88px !important;

  height:48px !important;
  min-height:48px !important;

  padding:
    0
    30px
    0
    12px !important;

  font-size:12px !important;

  overflow:visible !important;
}


/* =========================================================
   BOTAO FILTRAR
   ========================================================= */

/*
 * Substitui o simbolo que estava parecendo um check
 * por um funil feito inteiramente em CSS.
 */

.channels-page .filter-bar > button::before{
  content:"" !important;

  display:inline-block !important;

  width:14px !important;
  height:14px !important;

  margin-right:8px !important;

  border:0 !important;

  border-radius:0 !important;

  background:currentColor !important;

  clip-path:
    polygon(
      0 0,
      100% 0,
      62% 44%,
      62% 100%,
      39% 82%,
      39% 44%
    );

  transform:none !important;
}


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

@media(max-width:1000px){

  .channels-page .filter-bar{
    grid-template-columns:
      minmax(220px,1.4fr)
      minmax(180px,1fr)
      minmax(180px,1fr)
      !important;
  }

  .channels-page .page-size-field{
    width:176px !important;
  }
}


@media(max-width:700px){

  .channels-page .filter-bar{
    grid-template-columns:
      1fr !important;
  }

  .channels-page .page-size-field{
    grid-template-columns:
      1fr
      90px !important;

    width:100% !important;
  }

  .channels-page .page-size-field span{
    width:auto;
  }

  .channels-page .page-size-field select{
    width:90px !important;
    min-width:90px !important;

    justify-self:end;
  }
}

/* users-checkbox-fix-v1 */

/* Corrige somente a tela de usuarios */
.users-page input[type="checkbox"]{
  width:14px !important;
  min-width:14px !important;
  height:14px !important;
  min-height:14px !important;
  padding:0 !important;
  margin:0 !important;
  flex:0 0 14px !important;
  accent-color:var(--blue);
}

.users-page label:has(> input[type="checkbox"]),
.users-page .checkbox-row,
.users-page .server-option,
.users-page .permission-option{
  display:flex;
  align-items:center;
  gap:8px;
}

.users-page .checkbox-row{
  min-height:40px;
}

.users-page .checkbox-row input[type="checkbox"],
.users-page .server-option input[type="checkbox"],
.users-page .permission-option input[type="checkbox"]{
  align-self:center;
}

.users-page .checkbox-row span,
.users-page .server-option span,
.users-page .permission-option span{
  line-height:1.2;
}

/* users-active-toggle-v2 */

/*
 * O checkbox permanece pequeno.
 * Remove apenas a caixa enorme em volta de Usuario ativo.
 */

.users-page .user-active-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:auto !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;

  margin:8px 0 14px !important;
  padding:6px 2px !important;

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

  background:transparent !important;
  box-shadow:none !important;

  gap:8px !important;

  color:var(--text);
  cursor:pointer;
}

.users-page .user-active-toggle input[type="checkbox"]{
  width:14px !important;
  min-width:14px !important;

  height:14px !important;
  min-height:14px !important;

  margin:0 !important;
  padding:0 !important;

  flex:0 0 14px !important;
}

.users-page .user-active-toggle{
  font-size:12px;
  line-height:1.2;
}

/* integrations-spacing-fix-v1
   Cria respiro entre o cabecalho do painel
   e os roteamentos cadastrados.
*/

.integration-list{
  padding-top:14px !important;
}

.integration-list .destination-accordion:first-child{
  margin-top:0 !important;
}

/* precommit-consistency-v1 */


/* =========================================================
   TITULOS AZUIS DAS PAGINAS
   Mesmo tamanho em todas as abas.
   ========================================================= */

.intro .eyebrow,
.channels-page .intro .eyebrow{
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:800 !important;

  letter-spacing:1.7px !important;

  color:#6f98f5 !important;
}


/* =========================================================
   COMENTARIOS DOS INCIDENTES
   ========================================================= */

.incident-comments{
  display:grid;

  gap:7px;

  margin-top:11px;
  padding-top:9px;

  border-top:
    1px solid
    rgba(77,104,143,.32);
}

.incident-comments-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  color:#8ea0b9;

  font-size:10px;
}

.incident-comments-head span{
  font-weight:700;
}

.incident-comments-head b{
  display:inline-flex;

  min-width:18px;
  height:18px;

  margin-left:4px;

  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:#182b49;

  color:#a9c3ef;

  font-size:9px;
}

.incident-comments-head small{
  margin:0 !important;

  color:#6f819a !important;

  font-size:9px !important;
}

.incident-comment{
  padding:8px 10px;

  border:
    1px solid
    rgba(67,94,132,.35);

  border-radius:8px;

  background:#0b1728;
}

.incident-comment-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
}

.incident-comment-head b{
  color:#9ebdf0;

  font-size:10px;
}

.incident-comment-head time{
  color:#6f819a;

  font-size:9px;

  white-space:nowrap;
}

.incident-comment p{
  margin:5px 0 0 !important;

  color:#d1dbe8 !important;

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

  white-space:pre-wrap;
  overflow-wrap:anywhere;
}


/* =========================================================
   MENU EM JANELAS MENORES
   A navegacao permanece dentro de uma tarja.
   ========================================================= */

@media(max-width:760px){

  .site-header{
    display:grid !important;

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

    grid-template-areas:
      "brand user logout"
      "nav nav nav";

    align-items:center !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;

    padding:
      8px
      12px
      0 !important;

    gap:
      6px
      10px !important;

    background:
      #0a1422 !important;

    border-bottom:0 !important;

    overflow:visible !important;
  }

  .site-header .brand{
    grid-area:brand;

    min-width:0;

    margin:0 !important;
  }

  .main-nav{
    grid-area:nav;

    display:flex !important;

    flex-wrap:nowrap !important;
    align-items:stretch !important;

    width:
      calc(100% + 24px) !important;

    height:40px !important;
    min-height:40px !important;

    margin:
      0
      -12px !important;

    padding:
      0
      12px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    white-space:nowrap;

    background:
      #0c192b !important;

    border-top:
      1px solid
      var(--line);

    border-bottom:
      1px solid
      var(--line);

    scrollbar-width:none;
  }

  .main-nav::-webkit-scrollbar{
    display:none;
  }

  .main-nav a{
    position:relative;

    display:flex !important;

    flex:
      0
      0
      auto !important;

    align-items:center;

    height:40px !important;

    padding:
      0
      9px !important;

    font-size:11px !important;

    white-space:nowrap;
  }

  .main-nav a.active::after{
    left:9px !important;
    right:9px !important;
    bottom:0 !important;

    height:2px !important;
  }

  .nav-user{
    grid-area:user;

    align-self:center;

    white-space:nowrap;
  }

  .nav-logout{
    grid-area:logout;

    align-self:center;
    justify-self:end;

    margin:0 !important;
  }

  .nav-logout button{
    margin:0 !important;
  }

}


/* Celulares muito estreitos */

@media(max-width:480px){

  .site-header{
    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    grid-template-areas:
      "brand logout"
      "nav nav";
  }

  .nav-user{
    display:none !important;
  }

}

/* incident-details-v1 */

.incident-details-dialog {
  width: min(960px, calc(100vw - 32px));
  max-width: 960px;
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border-color: #2a3e5e;
  background: #101b2d;
}

.incident-details-dialog::backdrop {
  backdrop-filter: blur(3px);
}

.incident-details-shell {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  min-width: 0;
  overflow: hidden;
}

.incident-details-title {
  flex: 0 0 auto;
  padding: 20px 22px;
}

.incident-details-title small {
  display: block;
  margin-bottom: 4px;
}

.incident-details-title h2 {
  margin: 0;
}

.incident-details-title p {
  margin: 4px 0 0;
}

.incident-details-close {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

.incident-details-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 22px 24px;
  overflow-y: auto;
  max-height: none;
  scrollbar-color: #53647c #0b1626;
  scrollbar-width: thin;
}

.incident-details-body::-webkit-scrollbar,
.incident-history-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.incident-details-body::-webkit-scrollbar-track,
.incident-history-table-wrap::-webkit-scrollbar-track {
  background: #0b1626;
}

.incident-details-body::-webkit-scrollbar-thumb,
.incident-history-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #0b1626;
  border-radius: 10px;
  background: #53647c;
}

.incident-details-body::-webkit-scrollbar-button,
.incident-history-table-wrap::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.incident-details-body::-webkit-scrollbar-corner,
.incident-history-table-wrap::-webkit-scrollbar-corner {
  background: #0b1626;
}

.incident-detail-overview {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.incident-detail-state,
.incident-detail-metric,
.incident-detail-observation,
.incident-detail-resolution,
.incident-detail-grid > div,
.incident-detail-problem,
.incident-detail-comment {
  border: 1px solid color-mix(
    in srgb,
    currentColor 14%,
    transparent
  );
  border-radius: 12px;
}

.incident-detail-state,
.incident-detail-metric {
  padding: 14px;
}

.incident-detail-state span,
.incident-detail-metric span,
.incident-detail-observation span,
.incident-detail-resolution span,
.incident-detail-grid span {
  display: block;
  font-size: 12px;
  opacity: .68;
}

.incident-detail-state strong,
.incident-detail-metric strong {
  display: block;
  margin-top: 3px;
  font-size: 18px;
}

.incident-detail-state small {
  display: block;
  margin-top: 4px;
}

.incident-detail-observation,
.incident-detail-resolution {
  padding: 14px;
  margin-bottom: 16px;
}

.incident-detail-observation strong,
.incident-detail-resolution strong {
  display: block;
  margin-top: 4px;
}

.incident-detail-resolution small {
  display: block;
  margin-top: 4px;
}

.incident-detail-section {
  margin-top: 22px;
}

.incident-detail-section h3 {
  margin: 0 0 12px;
}

.incident-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.incident-detail-section-head h3 {
  margin: 0;
}

.incident-detail-section-head span {
  font-size: 12px;
  opacity: .7;
}

.incident-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.incident-detail-grid > div {
  padding: 12px;
  min-width: 0;
}

.incident-detail-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.incident-detail-title-text {
  margin-top: 12px;
  padding: 12px 0;
}

.incident-detail-problems,
.incident-detail-comments {
  display: grid;
  gap: 8px;
}

.incident-detail-problem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
}

.incident-detail-problem b,
.incident-detail-problem small {
  display: block;
}

.incident-detail-problem small {
  margin-top: 3px;
  opacity: .68;
}

.incident-detail-problem strong {
  font-size: 18px;
}

.incident-timeline {
  display: grid;
  gap: 0;
}

.incident-timeline-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(
    in srgb,
    currentColor 12%,
    transparent
  );
}

.incident-timeline-item:last-child {
  border-bottom: 0;
}

.incident-timeline-item time {
  font-size: 12px;
  opacity: .68;
}

.incident-timeline-item b {
  display: block;
}

.incident-timeline-item p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.incident-detail-comment {
  padding: 12px 14px;
}

.incident-detail-comment > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.incident-detail-comment time {
  font-size: 12px;
  opacity: .68;
}

.incident-detail-comment p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .incident-details-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .incident-details-title {
    padding: 16px;
  }

  .incident-details-body {
    padding: 0 16px 18px;
  }

  .incident-detail-overview {
    grid-template-columns: 1fr 1fr;
  }

  .incident-detail-state {
    grid-column: 1 / -1;
  }

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

  .incident-timeline-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* incident-details-actions-v1 */

.incident-details-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding: 14px 0 4px;
}

.incident-details-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 600px) {
  .incident-details-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .incident-details-actions button {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   Chamados - responsividade da tabela
   --------------------------------------------------------- */

.incidents-page .incident-history-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #53647c #0b1626;
  scrollbar-width: thin;
}

.incidents-page .incident-history-table {
  width: 100%;
  min-width: 980px;
}

.incidents-page .incident-history-table th,
.incidents-page .incident-history-table td {
  white-space: normal;
}

.incidents-page .incident-history-table td:last-child,
.incidents-page .incident-history-table th:last-child {
  white-space: nowrap;
}