/* Fusion+ Console Executivo V2 — final visual layer */
:root {
  --pro-bg: #070b12;
  --pro-sidebar: #080d14;
  --pro-surface: #0e1622;
  --pro-surface-2: #121d2c;
  --pro-line: #22314a;
  --pro-line-soft: rgba(125, 146, 180, .15);
  --pro-text: #f5f7fb;
  --pro-muted: #9aa8bd;
  --pro-pink: #f02b78;
  --pro-blue: #5d9dff;
  --pro-green: #35d39a;
  --pro-orange: #ff9a4d;
  --pro-radius: 10px;
  --pro-shadow: none;
}

html body {
  background: radial-gradient(circle at 72% -22%, rgba(93, 157, 255, .08), transparent 34%), var(--pro-bg) !important;
}

body .panel,
body .kpi,
body .dashboard-command-center {
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body .panel:hover,
body .kpi:hover,
body .dashboard-command-card:hover {
  transform: none !important;
}

body .topbar {
  min-height: 68px !important;
  margin: 0 -22px 16px !important;
  padding: 12px 22px !important;
  border-bottom-color: var(--pro-line-soft) !important;
  background: rgba(7, 11, 18, .92) !important;
  box-shadow: none !important;
}

body .topbar .toolbar {
  width: min(100%, 1110px) !important;
  max-width: 1110px !important;
  gap: 8px !important;
}

body .topbar .toolbar-status,
body .topbar .dashboard-period-controls {
  gap: 8px !important;
}

body .topbar .toolbar-status .sync-btn,
body .topbar .toolbar-status .pending-payable-btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 11px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 9px !important;
  background: #0b131f !important;
  box-shadow: none !important;
}

body .topbar .toolbar .period-quick {
  display: flex !important;
  gap: 0 !important;
  min-width: 0 !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 10px !important;
  background: #0a111b !important;
}

body .topbar .toolbar .period-quick .seg {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aeb9ca !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body .topbar .toolbar .period-quick .seg:hover {
  background: rgba(255, 255, 255, .04) !important;
  color: var(--pro-text) !important;
}

body .topbar .toolbar .period-quick .seg.active,
body .topbar .toolbar .period-quick .seg[aria-pressed="true"] {
  background: var(--pro-pink) !important;
  color: #fff !important;
}

body .topbar .toolbar .parent-period-button,
body .topbar .toolbar .dashboard-period-controls .reseller-scope-filter,
body .topbar .toolbar-actions .icon-btn {
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 9px !important;
  background: #0b131f !important;
  box-shadow: none !important;
}

body .topbar .toolbar .dashboard-period-controls .reseller-scope-filter {
  width: 208px !important;
  min-width: 208px !important;
}

body .shell main #operacao.view.active {
  gap: 12px 14px !important;
}

body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1.3fr)) repeat(2, minmax(0, .82fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  background: var(--pro-surface) !important;
}

body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi,
body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(n) {
  grid-column: auto !important;
  min-height: 108px !important;
  padding: 15px 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--pro-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(4),
body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(6),
body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(8),
body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(9) {
  display: none !important;
}

body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi::before,
body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi::after {
  display: none !important;
}

body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid .kpi-icon {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
  border-radius: 9px !important;
}

body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid .metric {
  margin-top: 9px !important;
  color: var(--pro-text) !important;
  font-size: clamp(20px, 1.5vw, 27px) !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
}

body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid .delta {
  display: block !important;
  max-height: none !important;
  margin-top: 8px !important;
  opacity: 1 !important;
  transform: none !important;
  color: var(--pro-muted) !important;
  font-size: 10px !important;
}

body .shell main #operacao.view.active .panel,
body .shell main #operacao.view.active > .dashboard-command-center {
  border-color: var(--pro-line) !important;
  background: var(--pro-surface) !important;
}

body .shell main #operacao.view.active > .dashboard-command-center {
  min-height: 212px !important;
  padding: 0 14px !important;
}

body .shell main #operacao.view.active > .dashboard-command-center::before {
  min-height: 46px !important;
}

body .shell main #operacao.view.active > .dashboard-command-center .dashboard-command-card {
  min-height: 41px !important;
  padding: 7px 0 !important;
}

body .shell main #operacao.view.active .panel-header {
  min-height: 54px !important;
  padding: 12px 18px !important;
}

body .shell main #operacao.view.active .panel-title {
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body .shell main #operacao.view.active .dashboard-insights > .panel:first-child {
  min-height: 394px !important;
}

body .shell main #operacao.view.active .dashboard-finance-chart {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  min-height: 326px !important;
  padding: 14px 18px 18px !important;
}

body .shell main #operacao.view.active .dashboard-chart-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--pro-line-soft) !important;
  border-radius: 9px !important;
  background: #0b131f !important;
}

body .shell main #operacao.view.active .dashboard-chart-stat {
  min-height: 64px !important;
  padding: 11px 13px !important;
  border: 0 !important;
  border-right: 1px solid var(--pro-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .shell main #operacao.view.active .dashboard-chart-stat:last-child {
  border-right: 0 !important;
}

body .shell main #operacao.view.active .dashboard-chart-stat span,
body .shell main #operacao.view.active .dashboard-chart-extremes span,
body .shell main #operacao.view.active .dashboard-chart-equation small {
  color: var(--pro-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

body .shell main #operacao.view.active .dashboard-chart-stat strong {
  display: block !important;
  margin-top: 6px !important;
  color: var(--pro-text) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
}

body .shell main #operacao.view.active .dashboard-chart-stat.income strong { color: var(--pro-green) !important; }
body .shell main #operacao.view.active .dashboard-chart-stat.output strong { color: var(--pro-orange) !important; }
body .shell main #operacao.view.active .dashboard-chart-stat.net strong { color: var(--pro-blue) !important; }
body .shell main #operacao.view.active .dashboard-chart-stat.bad strong { color: var(--pro-orange) !important; }

body .shell main #operacao.view.active .dashboard-single-day {
  display: grid !important;
  gap: 15px !important;
  min-height: 182px !important;
  padding: 18px !important;
  border: 1px solid var(--pro-line-soft) !important;
  border-radius: 10px !important;
  background: #0b131f !important;
}

body .shell main #operacao.view.active .dashboard-single-day-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body .shell main #operacao.view.active .dashboard-single-day-head span,
body .shell main #operacao.view.active .dashboard-single-day-head strong {
  display: block !important;
}

body .shell main #operacao.view.active .dashboard-single-day-head span {
  color: var(--pro-muted) !important;
  font-size: 11px !important;
}

body .shell main #operacao.view.active .dashboard-single-day-head strong {
  margin-top: 5px !important;
  color: var(--pro-text) !important;
  font-size: 17px !important;
}

body .shell main #operacao.view.active .dashboard-single-day-head b {
  color: var(--pro-green) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

body .shell main #operacao.view.active .dashboard-single-day.negative .dashboard-single-day-head b {
  color: var(--pro-orange) !important;
}

body .shell main #operacao.view.active .dashboard-chart-equation {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding-top: 15px !important;
  border-top: 1px solid var(--pro-line-soft) !important;
}

body .shell main #operacao.view.active .dashboard-chart-equation small,
body .shell main #operacao.view.active .dashboard-chart-equation strong {
  display: block !important;
}

body .shell main #operacao.view.active .dashboard-chart-equation strong {
  margin-top: 5px !important;
  color: var(--pro-text) !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums !important;
}

body .shell main #operacao.view.active .dashboard-chart-equation i {
  color: #73819a !important;
  font-size: 18px !important;
  font-style: normal !important;
}

body .shell main #operacao.view.active .dashboard-chart-extremes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body .shell main #operacao.view.active .dashboard-chart-extremes > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 3px 10px !important;
  padding: 9px 11px !important;
  border-bottom: 1px solid var(--pro-line-soft) !important;
}

body .shell main #operacao.view.active .dashboard-chart-extremes strong {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  color: var(--pro-green) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}

body .shell main #operacao.view.active .dashboard-chart-extremes .worst strong { color: var(--pro-orange) !important; }
body .shell main #operacao.view.active .dashboard-chart-extremes small { color: #75839a !important; font-size: 10px !important; }

body .shell main #operacao.view.active .dashboard-chart-tabs {
  gap: 4px !important;
  margin: 0 !important;
}

body .shell main #operacao.view.active .dashboard-chart-tabs button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-color: transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--pro-muted) !important;
  box-shadow: none !important;
}

body .shell main #operacao.view.active .dashboard-chart-tabs button.active,
body .shell main #operacao.view.active .dashboard-chart-tabs button[aria-selected="true"] {
  border-color: rgba(240, 43, 120, .34) !important;
  background: rgba(240, 43, 120, .12) !important;
  color: #ff6da5 !important;
}

body .shell main #operacao.view.active .dashboard-chart-shell {
  min-height: 205px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .shell main #operacao.view.active .dashboard-chart-label {
  display: block !important;
  fill: #77859b !important;
  font-size: 9px !important;
}

body .shell main #operacao.view.active .dashboard-chart-grid { stroke: rgba(125, 146, 180, .14) !important; }

body .shell main #operacao.view.active .dashboard-chart-empty {
  min-height: 150px !important;
  border: 1px dashed var(--pro-line) !important;
  border-radius: 9px !important;
  background: #0b131f !important;
}

@media (max-width: 1440px) {
  body .topbar { align-items: flex-start !important; flex-direction: column !important; }
  body .topbar .toolbar { width: 100% !important; max-width: none !important; }
}

@media (max-width: 1140px) {
  body .topbar .toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "status actions" "filters filters" !important;
  }

  body .topbar .dashboard-period-controls { justify-content: flex-start !important; }

  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(1),
  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(2),
  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(3) {
    grid-column: span 2 !important;
    border-bottom: 1px solid var(--pro-line-soft) !important;
  }

  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(5),
  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(7) {
    grid-column: span 3 !important;
  }
}

@media (max-width: 760px) {
  body .topbar { margin: 0 -12px 14px !important; padding: 10px 12px !important; }

  body .topbar .dashboard-period-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .topbar .dashboard-period-controls .period-quick {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body .topbar .dashboard-period-controls .period-quick::-webkit-scrollbar { display: none !important; }

  body .topbar .toolbar .dashboard-period-controls .reseller-scope-filter,
  body .topbar .toolbar .parent-period-button { width: 100% !important; min-width: 0 !important; }

  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(n) {
    grid-column: span 1 !important;
    border-right: 1px solid var(--pro-line-soft) !important;
    border-bottom: 1px solid var(--pro-line-soft) !important;
  }

  body .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(3) { grid-column: 1 / -1 !important; }

  body .shell main #operacao.view.active .dashboard-chart-summary,
  body .shell main #operacao.view.active .dashboard-chart-extremes { grid-template-columns: 1fr !important; }

  body .shell main #operacao.view.active .dashboard-chart-stat {
    border-right: 0 !important;
    border-bottom: 1px solid var(--pro-line-soft) !important;
  }

  body .shell main #operacao.view.active .dashboard-chart-stat:last-child { border-bottom: 0 !important; }
  body .shell main #operacao.view.active .dashboard-chart-equation { grid-template-columns: 1fr !important; }
  body .shell main #operacao.view.active .dashboard-chart-equation i { display: none !important; }
  body .shell main #operacao.view.active .dashboard-single-day-head { flex-direction: column !important; }
}