/*
 * Cabeçalhos e primeira faixa de indicadores no padrão dos dashboards NOC.
 * Mensageria/WhatsApp usa uma linguagem própria e fica explicitamente fora.
 */

html body :is(
  .sga-device-menu-header:not(.sga-device-menu-header--messaging),
  .noc-main > .noc-hero,
  .audit-hero,
  .version-hero,
  .sr-hero,
  .pol-hero,
  .auto-hero,
  .inv-hero
){
  position:relative!important;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  min-height:146px!important;
  margin-bottom:14px!important;
  padding:20px 22px!important;
  overflow:hidden!important;
  border:1px solid rgba(249,115,22,.26)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 8% 0,rgba(249,115,22,.18),transparent 34%),
    linear-gradient(135deg,#302722,#202124 48%,#151619)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24)!important;
  box-sizing:border-box;
}

html body :is(
  .sga-device-menu-header:not(.sga-device-menu-header--messaging),
  .noc-main > .noc-hero,
  .audit-hero,
  .version-hero,
  .sr-hero,
  .pol-hero,
  .auto-hero,
  .inv-hero
)::before{
  content:none!important;
}

html body :is(
  .sga-device-menu-header:not(.sga-device-menu-header--messaging),
  .noc-main > .noc-hero,
  .audit-hero,
  .version-hero,
  .sr-hero,
  .pol-hero,
  .auto-hero,
  .inv-hero
)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  right:-70px!important;
  top:-110px!important;
  bottom:auto!important;
  width:290px!important;
  height:290px!important;
  border:1px solid rgba(249,115,22,.10)!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:0 0 0 34px rgba(249,115,22,.035),0 0 0 72px rgba(249,115,22,.02)!important;
  pointer-events:none;
}

html body :is(
  .sga-device-menu-header:not(.sga-device-menu-header--messaging),
  .noc-main > .noc-hero,
  .audit-hero,
  .version-hero,
  .sr-hero,
  .pol-hero,
  .auto-hero,
  .inv-hero
) > *{
  position:relative;
  z-index:1;
  min-width:0;
}

html body :is(
  .sga-device-menu-header__kicker,
  .noc-kicker,
  .audit-eyebrow,
  .version-kicker,
  .pol-kicker,
  .auto-hero > div:first-child > span,
  .inv-hero > div:first-child > span,
  .sr-hero > div:first-child > span
){
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:27px!important;
  margin:0 0 11px!important;
  padding:0 10px!important;
  border:1px solid rgba(249,115,22,.30)!important;
  border-radius:999px!important;
  background:rgba(249,115,22,.11)!important;
  color:#fed7aa!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

html body :is(
  .sga-device-menu-header__kicker,
  .audit-eyebrow,
  .version-kicker,
  .pol-kicker,
  .auto-hero > div:first-child > span,
  .inv-hero > div:first-child > span,
  .sr-hero > div:first-child > span
)::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#f97316;
  box-shadow:0 0 12px rgba(249,115,22,.72);
}

html body :is(
  .sga-device-menu-header:not(.sga-device-menu-header--messaging),
  .noc-main > .noc-hero,
  .audit-hero,
  .version-hero,
  .sr-hero,
  .pol-hero,
  .auto-hero,
  .inv-hero
) :is(h1,h2){
  margin:0 0 8px!important;
  color:#fff!important;
  font-size:29px!important;
  font-weight:950!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}

html body :is(
  .sga-device-menu-header:not(.sga-device-menu-header--messaging),
  .noc-main > .noc-hero,
  .audit-hero,
  .version-hero,
  .sr-hero,
  .pol-hero,
  .auto-hero,
  .inv-hero
) p{
  max-width:820px;
  margin:0!important;
  color:#c5cad2!important;
  font-size:13px!important;
  font-weight:650;
  line-height:1.55!important;
}

/* Somente as faixas-resumo imediatamente associadas aos cabeçalhos. */
html body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) :is(
  .grid.stats,
  .grid.stats2,
  .sga-standard-metrics,
  .sga-agent-summary,
  .sga-alert-summary,
  .wp-metrics,
  .hours-stats
),
html body :is(
  .noc-hero-metrics,
  .version-metrics,
  .audit-kpi-grid,
  .sr-kpis,
  .pol-cards,
  .auto-kpis,
  .inv-kpis
){
  grid-auto-rows:62px!important;
  gap:8px!important;
  margin-bottom:14px!important;
}

html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metrics > .sga-standard-metric,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article,
  .noc-hero-metrics > .noc-metric,
  .version-metrics > .version-metric,
  .audit-kpi-grid > .audit-kpi,
  .sr-kpis > article,
  .pol-cards > .pol-card,
  .auto-kpis > div,
  .inv-kpis > div
){
  --sga-page-accent:#ff8a24;
  --sga-page-ring:rgba(255,138,36,.10);
  --sga-page-glow:rgba(255,138,36,.13);
  --sga-page-border:rgba(148,163,184,.16);
  --sga-page-background:linear-gradient(180deg,rgba(42,42,42,.74),rgba(20,23,25,.92));
  position:relative!important;
  display:grid!important;
  grid-template-columns:12px minmax(0,1fr)!important;
  grid-template-rows:24px 14px!important;
  align-content:center!important;
  column-gap:8px!important;
  min-width:0!important;
  min-height:62px!important;
  height:62px!important;
  margin:0!important;
  padding:9px 10px!important;
  overflow:hidden!important;
  border:1px solid var(--sga-page-border)!important;
  border-radius:12px!important;
  background:var(--sga-page-background)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)!important;
  box-sizing:border-box!important;
  color:inherit;
  text-decoration:none;
}

html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metrics > .sga-standard-metric,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article,
  .noc-hero-metrics > .noc-metric,
  .version-metrics > .version-metric,
  .audit-kpi-grid > .audit-kpi,
  .sr-kpis > article,
  .pol-cards > .pol-card,
  .auto-kpis > div,
  .inv-kpis > div
)::before{
  content:""!important;
  display:block!important;
  position:relative!important;
  z-index:2!important;
  grid-column:1!important;
  grid-row:1/3!important;
  align-self:center!important;
  width:10px!important;
  height:10px!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--sga-page-accent)!important;
  box-shadow:0 0 0 4px var(--sga-page-ring)!important;
}

html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metrics > .sga-standard-metric,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article,
  .noc-hero-metrics > .noc-metric,
  .version-metrics > .version-metric,
  .audit-kpi-grid > .audit-kpi,
  .sr-kpis > article,
  .pol-cards > .pol-card,
  .auto-kpis > div,
  .inv-kpis > div
)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  right:-20px!important;
  top:-24px!important;
  bottom:auto!important;
  width:66px!important;
  height:66px!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--sga-page-glow)!important;
  box-shadow:none!important;
  opacity:1!important;
  pointer-events:none;
}

html body :is(
  .sga-agent-summary > .sga-summary-card > div,
  .sga-alert-summary > .sga-summary-card > div,
  .audit-kpi-grid > .audit-kpi > div:last-child,
  .noc-hero-metrics > .noc-metric > div
){display:contents!important}

html body :is(
  .sga-standard-metric__dot,
  .sga-summary-dot,
  .audit-kpi-icon,
  .noc-hero-metrics .kpi-dot
){display:none!important}

html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat > .num,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat > .num,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metric__value,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card strong,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card strong,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article > strong,
  .noc-hero-metrics > .noc-metric strong,
  .version-metrics > .version-metric > strong,
  .audit-kpi-grid > .audit-kpi strong,
  .sr-kpis > article > strong,
  .pol-cards > .pol-card > strong,
  .auto-kpis > div > b,
  .inv-kpis > div > b
){
  position:relative!important;
  z-index:2!important;
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden;
  color:#fff!important;
  font-size:20px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat > .label,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat > .label,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metric__label,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card span:not(.sga-summary-dot),
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card span:not(.sga-summary-dot),
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article > span,
  .noc-hero-metrics > .noc-metric small,
  .version-metrics > .version-metric > small,
  .audit-kpi-grid > .audit-kpi span,
  .sr-kpis > article > span,
  .pol-cards > .pol-card > span,
  .auto-kpis > div > small,
  .inv-kpis > div > small
){
  position:relative!important;
  z-index:2!important;
  grid-column:2!important;
  grid-row:2!important;
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#aeb5be!important;
  font-size:9px!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:.035em!important;
  text-overflow:ellipsis!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat > .sub,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat > .sub,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metric__meta,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card small,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card small,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article > small,
  .version-metrics > .version-metric > span,
  .audit-kpi-grid > .audit-kpi small,
  .sr-kpis > article > small,
  .pol-cards > .pol-card > small
){display:none!important}

/* Estados permitidos pelo padrão: laranja, verde, amarelo e vermelho. */
html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metrics > .sga-standard-metric,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article,
  .noc-hero-metrics > .noc-metric,
  .version-metrics > .version-metric,
  .audit-kpi-grid > .audit-kpi,
  .sr-kpis > article,
  .pol-cards > .pol-card,
  .auto-kpis > div,
  .inv-kpis > div
):is(.greenish,.online,.success,.good,.ok,.positive,.is-success,.metric-online){
  --sga-page-accent:#20d47b;
  --sga-page-ring:rgba(32,212,123,.10);
  --sga-page-glow:rgba(32,212,123,.14);
  --sga-page-border:rgba(32,212,123,.38);
  --sga-page-background:linear-gradient(180deg,rgba(22,75,49,.28),rgba(20,23,25,.92));
}

html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metrics > .sga-standard-metric,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article,
  .noc-hero-metrics > .noc-metric,
  .version-metrics > .version-metric,
  .audit-kpi-grid > .audit-kpi,
  .sr-kpis > article,
  .pol-cards > .pol-card,
  .auto-kpis > div,
  .inv-kpis > div
):is(.yellowish,.warning,.warn,.attention,.pending,.is-warning){
  --sga-page-accent:#f2c94c;
  --sga-page-ring:rgba(242,201,76,.10);
  --sga-page-glow:rgba(242,201,76,.14);
  --sga-page-border:rgba(242,201,76,.38);
  --sga-page-background:linear-gradient(180deg,rgba(84,67,13,.27),rgba(20,23,25,.92));
}

html body :is(
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .grid.stats2 > .stat,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-standard-metrics > .sga-standard-metric,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-agent-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .sga-alert-summary > .sga-summary-card,
  body:has(.sga-device-menu-header:not(.sga-device-menu-header--messaging)) .wp-metrics > article,
  .noc-hero-metrics > .noc-metric,
  .version-metrics > .version-metric,
  .audit-kpi-grid > .audit-kpi,
  .sr-kpis > article,
  .pol-cards > .pol-card,
  .auto-kpis > div,
  .inv-kpis > div
):is(.critical,.danger,.offline,.bad,.failed,.error,.is-danger){
  --sga-page-accent:#ff4d57;
  --sga-page-ring:rgba(255,77,87,.10);
  --sga-page-glow:rgba(255,77,87,.15);
  --sga-page-border:rgba(255,77,87,.38);
  --sga-page-background:linear-gradient(180deg,rgba(92,24,31,.30),rgba(20,23,25,.92));
}

html body .auto-kpis > div:nth-child(2),
html body .inv-kpis > div:nth-child(3),
html body .pol-cards > .pol-card:nth-child(2){
  --sga-page-accent:#20d47b;
  --sga-page-ring:rgba(32,212,123,.10);
  --sga-page-glow:rgba(32,212,123,.14);
  --sga-page-border:rgba(32,212,123,.38);
  --sga-page-background:linear-gradient(180deg,rgba(22,75,49,.28),rgba(20,23,25,.92));
}

html body .auto-kpis > div:nth-child(3){
  --sga-page-accent:#f2c94c;
  --sga-page-ring:rgba(242,201,76,.10);
  --sga-page-glow:rgba(242,201,76,.14);
  --sga-page-border:rgba(242,201,76,.38);
  --sga-page-background:linear-gradient(180deg,rgba(84,67,13,.27),rgba(20,23,25,.92));
}

html body .inv-kpis > div:nth-child(4),
html body .pol-cards > .pol-card.danger{
  --sga-page-accent:#ff4d57;
  --sga-page-ring:rgba(255,77,87,.10);
  --sga-page-glow:rgba(255,77,87,.15);
  --sga-page-border:rgba(255,77,87,.38);
  --sga-page-background:linear-gradient(180deg,rgba(92,24,31,.30),rgba(20,23,25,.92));
}

@media(max-width:1180px){
  html body :is(
    .sga-device-menu-header:not(.sga-device-menu-header--messaging),
    .noc-main > .noc-hero,
    .audit-hero,
    .version-hero,
    .sr-hero,
    .pol-hero,
    .auto-hero,
    .inv-hero
  ){
    grid-template-columns:1fr;
    min-height:132px!important;
  }
}

@media(max-width:680px){
  html body :is(
    .sga-device-menu-header:not(.sga-device-menu-header--messaging),
    .noc-main > .noc-hero,
    .audit-hero,
    .version-hero,
    .sr-hero,
    .pol-hero,
    .auto-hero,
    .inv-hero
  ){
    padding:16px!important;
    border-radius:16px!important;
  }

  html body :is(
    .sga-device-menu-header:not(.sga-device-menu-header--messaging),
    .noc-main > .noc-hero,
    .audit-hero,
    .version-hero,
    .sr-hero,
    .pol-hero,
    .auto-hero,
    .inv-hero
  ) :is(h1,h2){font-size:23px!important}
}