/* Dashboard charts V2 — context instead of repeating KPI totals. */
html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights {
  display: grid !important;
  grid-template-columns: minmax(0, 1.92fr) minmax(330px, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: stretch !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 0 !important;
}

html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights > .panel {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 394px !important;
  height: 394px !important;
  margin: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights > .panel:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights > .top-plan-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html body.fusion-premium-v5 .shell main #operacao.view.active .dashboard-finance-chart,
html body.fusion-premium-v5 .shell main #operacao.view.active .dashboard-expense-chart {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

body.fusion-premium-v5 #operacao .dashboard-finance-chart {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 12px 16px 16px !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-legend {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px 14px !important;
  min-width: 0 !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-legend span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #9ca8ba !important;
  font-size: 9px !important;
  font-weight: 690 !important;
  white-space: nowrap !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-legend i,
body.fusion-premium-v5 #operacao .dashboard-trend-tooltip i {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 3px !important;
  background: #46d58c !important;
  box-shadow: 0 0 9px rgba(70, 213, 140, .25) !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-legend .output i,
body.fusion-premium-v5 #operacao .dashboard-trend-tooltip .output i {
  background: #ef5b84 !important;
  box-shadow: 0 0 9px rgba(239, 91, 132, .24) !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-legend .cumulative i,
body.fusion-premium-v5 #operacao .dashboard-trend-tooltip .cumulative i,
body.fusion-premium-v5 #operacao .dashboard-trend-tooltip .result i {
  height: 3px !important;
  border-radius: 999px !important;
  background: #a78bfa !important;
  box-shadow: 0 0 9px rgba(167, 139, 250, .36) !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-context {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 2px 8px !important;
  min-width: 150px !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-context > span {
  grid-row: 1 / 3 !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 9px !important;
  border: 1px solid rgba(127, 151, 190, .17) !important;
  border-radius: 8px !important;
  background: rgba(7, 18, 32, .54) !important;
  color: #9aa7ba !important;
  font-size: 8px !important;
  font-weight: 730 !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-context strong {
  color: #a78bfa !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-context strong.crescimento { color: #46d58c !important; }
body.fusion-premium-v5 #operacao .dashboard-trend-context strong.queda { color: #ef7899 !important; }

body.fusion-premium-v5 #operacao .dashboard-trend-context small {
  color: #727f93 !important;
  font-size: 8px !important;
  font-weight: 630 !important;
  text-align: right !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-stage {
  position: relative !important;
  width: 100% !important;
  height: 265px !important;
  min-height: 265px !important;
  overflow: hidden !important;
  border: 1px solid rgba(127, 151, 190, .12) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 72% 18%, rgba(139, 92, 246, .07), transparent 38%),
    rgba(5, 14, 27, .36) !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: pan-y !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-tooltip {
  position: absolute !important;
  z-index: 6 !important;
  display: grid !important;
  gap: 5px !important;
  width: 182px !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(127, 151, 190, .25) !important;
  border-radius: 10px !important;
  background: rgba(5, 14, 27, .97) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .38) !important;
  pointer-events: none !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-tooltip[hidden],
body.fusion-premium-v5 #operacao .dashboard-expense-tooltip[hidden] { display: none !important; }

body.fusion-premium-v5 #operacao .dashboard-trend-tooltip > strong {
  padding-bottom: 4px !important;
  border-bottom: 1px solid rgba(127, 151, 190, .13) !important;
  color: #e8ecf4 !important;
  font-size: 10px !important;
  font-weight: 780 !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-tooltip span {
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-tooltip b,
body.fusion-premium-v5 #operacao .dashboard-trend-tooltip em {
  font-size: 8px !important;
  font-style: normal !important;
}

body.fusion-premium-v5 #operacao .dashboard-trend-tooltip b { color: #8e9bb0 !important; font-weight: 650 !important; }
body.fusion-premium-v5 #operacao .dashboard-trend-tooltip em { color: #f2f4f8 !important; font-weight: 780 !important; }

body.fusion-premium-v5 #operacao .dashboard-expense-chart {
  padding: 11px 13px 14px !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-layout {
  display: grid !important;
  grid-template-columns: minmax(145px, .86fr) minmax(155px, 1.14fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 300px !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-stage {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-donut {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: pan-y !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-center {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% - 2px) !important;
  z-index: 2 !important;
  width: min(104px, 50%) !important;
  min-height: 62px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
  padding: 7px !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(127, 151, 190, .17) !important;
  border-radius: 999px !important;
  background: rgba(4, 12, 24, .94) !important;
  box-shadow: inset 0 0 22px rgba(139, 92, 246, .07), 0 8px 22px rgba(0, 0, 0, .24) !important;
  text-align: center !important;
  pointer-events: none !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-center span {
  color: #8390a5 !important;
  font-size: 7px !important;
  font-weight: 740 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-center strong {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #f3f5f9 !important;
  font-size: clamp(10px, .9vw, 13px) !important;
  font-weight: 820 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-legend {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-legend button {
  display: grid !important;
  grid-template-columns: 9px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(127, 151, 190, .12) !important;
  border-radius: 8px !important;
  background: rgba(7, 18, 32, .45) !important;
  box-shadow: none !important;
  color: inherit !important;
  text-align: left !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-legend button:hover,
body.fusion-premium-v5 #operacao .dashboard-expense-legend button.active {
  transform: translateX(2px) !important;
  border-color: rgba(167, 139, 250, .3) !important;
  background: rgba(139, 92, 246, .075) !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-legend button > i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--expense-color) !important;
  box-shadow: 0 0 9px rgba(139, 92, 246, .30) !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-legend button > span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-legend b {
  overflow: hidden !important;
  color: #bfc8d7 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-legend small {
  color: #707d91 !important;
  font-size: 7px !important;
  font-weight: 650 !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-legend strong {
  color: #f0f2f7 !important;
  font-size: 9px !important;
  font-weight: 790 !important;
  white-space: nowrap !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-tooltip {
  position: absolute !important;
  z-index: 6 !important;
  display: grid !important;
  gap: 2px !important;
  width: 134px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(127, 151, 190, .25) !important;
  border-radius: 9px !important;
  background: rgba(5, 14, 27, .97) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35) !important;
  pointer-events: none !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-tooltip strong { color: #aeb8c9 !important; font-size: 8px !important; font-weight: 700 !important; }
body.fusion-premium-v5 #operacao .dashboard-expense-tooltip span { color: #f7f8fb !important; font-size: 11px !important; font-weight: 810 !important; }
body.fusion-premium-v5 #operacao .dashboard-expense-tooltip small { color: #a78bfa !important; font-size: 9px !important; font-weight: 750 !important; }

body.fusion-premium-v5 #operacao .dashboard-expense-empty,
body.fusion-premium-v5 #operacao .dashboard-chart-empty {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 6px !important;
  min-height: 278px !important;
  padding: 22px !important;
  border: 1px dashed rgba(127, 151, 190, .2) !important;
  border-radius: 10px !important;
  background: rgba(5, 14, 27, .3) !important;
  text-align: center !important;
}

body.fusion-premium-v5 #operacao .dashboard-expense-empty strong,
body.fusion-premium-v5 #operacao .dashboard-chart-empty strong { color: #e5e9f1 !important; font-size: 11px !important; }
body.fusion-premium-v5 #operacao .dashboard-expense-empty span,
body.fusion-premium-v5 #operacao .dashboard-chart-empty span { max-width: 330px !important; color: #7f8ba0 !important; font-size: 9px !important; line-height: 1.45 !important; }

body.fusion-premium-v5 #operacao .dashboard-trend-canvas:focus-visible,
body.fusion-premium-v5 #operacao .dashboard-expense-donut:focus-visible,
body.fusion-premium-v5 #operacao .dashboard-expense-legend button:focus-visible {
  outline: 2px solid rgba(167, 139, 250, .82) !important;
  outline-offset: 2px !important;
}

html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-secondary-insights > .dashboard-reseller-analysis {
  grid-column: 1 / -1 !important;
}

body.fusion-premium-v5 #operacao .dashboard-reseller-analysis .server-revenue-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

@media (max-width: 1120px) {
  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights > .panel:first-child,
  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights > .top-plan-panel {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights > .panel:first-child {
    grid-row: 1 !important;
  }

  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights > .top-plan-panel {
    grid-row: 2 !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-expense-layout {
    grid-template-columns: minmax(200px, .8fr) minmax(260px, 1.2fr) !important;
  }
}

@media (max-width: 700px) {
  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-insights > .panel {
    height: auto !important;
    min-height: 0 !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-finance-chart {
    padding: 10px 12px 13px !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-trend-head {
    align-items: flex-start !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-trend-context {
    min-width: 126px !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-trend-stage {
    height: 246px !important;
    min-height: 246px !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-expense-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-expense-stage {
    width: min(100%, 320px) !important;
    height: 210px !important;
    min-height: 210px !important;
    justify-self: center !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-reseller-analysis .server-revenue-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  body.fusion-premium-v5 #operacao .dashboard-trend-head {
    display: grid !important;
    gap: 8px !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-trend-context {
    justify-content: stretch !important;
    grid-template-columns: auto 1fr !important;
    min-width: 0 !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-trend-context strong,
  body.fusion-premium-v5 #operacao .dashboard-trend-context small { text-align: left !important; }

  body.fusion-premium-v5 #operacao .dashboard-trend-stage {
    height: 235px !important;
    min-height: 235px !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-expense-chart {
    padding-inline: 12px !important;
  }

  body.fusion-premium-v5 #operacao .dashboard-expense-legend button {
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fusion-premium-v5 #operacao .dashboard-expense-legend button {
    transition: none !important;
  }
}