/*
 * Fusion+ visual system v6
 * Final, authoritative presentation layer. Business rules remain in app.js.
 */

html body {
  --v6-surface: #0a1522;
  --v6-surface-raised: #0d1a29;
  --v6-line: rgba(126, 151, 187, .18);
  --v6-line-strong: rgba(145, 169, 205, .28);
  --v6-text: #f4f7fb;
  --v6-muted: #97a5ba;
  --v6-brand: #ef2f8f;
  --v6-brand-soft: rgba(239, 47, 143, .12);
  --v6-success: #42d88f;
  --v6-danger: #fb7185;
  --v6-warning: #f7b955;
}

html body .panel,
html body .kpi,
html body .finance-summary-card,
html body .dashboard-command-card {
  border-color: var(--v6-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(155deg, rgba(12, 26, 42, .97), rgba(7, 17, 30, .99)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14), inset 0 1px rgba(255, 255, 255, .018) !important;
}

html body .panel-header,
html body .panel-head {
  min-height: 56px !important;
  padding: 14px 16px !important;
  border-bottom-color: var(--v6-line) !important;
}

html body .panel-title,
html body .panel-head h2 {
  color: var(--v6-text) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

html body .panel-note {
  color: var(--v6-muted) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

html body .action-btn,
html body button,
html body .control {
  border-radius: 8px !important;
}

html body .action-btn {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-color: var(--v6-line-strong) !important;
  background: rgba(14, 28, 44, .88) !important;
  color: #d5ddea !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

html body .action-btn:hover {
  border-color: rgba(239, 47, 143, .42) !important;
  background: rgba(239, 47, 143, .08) !important;
  color: #fff !important;
}

html body .action-btn.approved,
html body .action-btn.primary {
  border-color: var(--v6-brand) !important;
  background: var(--v6-brand) !important;
  color: #fff !important;
}

html body .action-btn.danger-subtle {
  border-color: rgba(251, 113, 133, .28) !important;
  background: rgba(251, 113, 133, .07) !important;
  color: #fda4af !important;
}

html body .action-btn.success-subtle {
  border-color: rgba(66, 216, 143, .28) !important;
  background: rgba(66, 216, 143, .07) !important;
  color: #73e7ad !important;
}

html body .table-scroll,
html body .table-wrap {
  border-color: var(--v6-line) !important;
  border-radius: 10px !important;
}

html body table thead th {
  height: 42px !important;
  color: #8f9db1 !important;
  background: #0b1725 !important;
  font-size: 10px !important;
  font-weight: 780 !important;
  letter-spacing: .045em !important;
}

html body table td {
  border-color: rgba(126, 151, 187, .11) !important;
  color: #d2d9e5 !important;
}

html body table tbody tr:hover {
  background: rgba(239, 47, 143, .035) !important;
}

html body .finance-empty {
  min-height: 118px !important;
  display: grid !important;
  place-items: center !important;
  padding: 26px !important;
  border: 1px dashed rgba(126, 151, 187, .2) !important;
  border-radius: 10px !important;
  background: rgba(7, 17, 30, .42) !important;
  color: var(--v6-muted) !important;
}

/* Dashboard: four primary KPIs with consistent rhythm. */
html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(1),
html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(2),
html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(3),
html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(7) {
  min-height: 132px !important;
  padding: 16px !important;
}

html body.fusion-premium-v5 .shell main #operacao.view.active .dashboard-grid .metric {
  margin-top: 12px !important;
  font-size: clamp(21px, 1.8vw, 27px) !important;
}

html body.fusion-premium-v5 .shell main #operacao.view.active .dashboard-grid .delta {
  display: -webkit-box !important;
  max-height: 2.8em !important;
  padding-top: 9px !important;
  overflow: hidden !important;
  color: var(--v6-muted) !important;
  font-size: 10px !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body.fusion-premium-v5 .shell main #operacao [data-dashboard="netRevenue"].good,
html body.fusion-premium-v5 .shell main #operacao [data-dashboard="netRevenue"].blue {
  color: var(--v6-success) !important;
}

html body.fusion-premium-v5 .shell main #operacao [data-dashboard="netRevenue"].bad,
html body.fusion-premium-v5 .shell main #operacao [data-dashboard="netRevenue"].warn {
  color: var(--v6-danger) !important;
}

html body #operacao > .dashboard-command-center {
  gap: 10px !important;
  border-color: var(--v6-line) !important;
  border-radius: 12px !important;
  background: rgba(8, 20, 34, .72) !important;
}

/* Clients: five indicators stay balanced instead of leaving an orphan card. */
html body #clientes > .kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body #clientes > .kpi-grid > .kpi {
  min-height: 112px !important;
  padding: 14px !important;
}

html body #clientes > .kpi-grid .metric {
  margin-top: 10px !important;
  font-size: 24px !important;
}

html body #clientes > .kpi-grid .delta {
  margin-top: 7px !important;
  color: var(--v6-muted) !important;
  font-size: 10px !important;
}

/* Financial workspace: four equally weighted summaries. */
html body #carteira .finance-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body #carteira .finance-summary-grid > .finance-summary-card:nth-child(n) {
  grid-column: auto !important;
  min-height: 88px !important;
  padding: 13px 14px !important;
}

html body #carteira .finance-summary-grid > .finance-summary-card:nth-child(5) {
  display: none !important;
}

html body #carteira .finance-summary-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
}

html body #carteira .finance-summary-label {
  color: var(--v6-muted) !important;
  font-size: 10px !important;
  letter-spacing: .045em !important;
}

html body #carteira .finance-summary-value {
  margin-top: 5px !important;
  color: var(--v6-text) !important;
  font-size: clamp(18px, 1.5vw, 23px) !important;
  font-variant-numeric: tabular-nums;
}

/* Reseller administration: concise base form + optional integrations. */
html body .reseller-access-layout {
  grid-template-columns: minmax(360px, .72fr) minmax(0, 1.55fr) !important;
  gap: 14px !important;
}

html body .reseller-access-form {
  gap: 12px !important;
}

html body .reseller-integration-disclosure {
  overflow: hidden !important;
  border: 1px solid var(--v6-line) !important;
  border-radius: 10px !important;
  background: rgba(7, 18, 31, .7) !important;
}

html body .reseller-integration-disclosure > summary {
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 13px !important;
  cursor: pointer !important;
  list-style: none !important;
}

html body .reseller-integration-disclosure > summary::-webkit-details-marker {
  display: none;
}

html body .reseller-integration-disclosure > summary span:first-child {
  display: grid !important;
  gap: 3px !important;
}

html body .reseller-integration-disclosure > summary strong {
  color: #dde5f0 !important;
  font-size: 12px !important;
}

html body .reseller-integration-disclosure > summary small {
  color: var(--v6-muted) !important;
  font-size: 10px !important;
}

html body .integration-disclosure-chevron {
  color: var(--v6-muted) !important;
  font-size: 17px !important;
  transition: transform .2s ease;
}

html body .reseller-integration-disclosure[open] .integration-disclosure-chevron {
  transform: rotate(180deg);
}

html body .reseller-integration-disclosure[open] > summary {
  border-bottom: 1px solid var(--v6-line) !important;
}

html body .integration-config-content {
  display: grid !important;
  gap: 12px !important;
  padding: 13px !important;
}

html body .reseller-access-table {
  overflow-x: auto !important;
}

html body .reseller-access-table table {
  min-width: 940px !important;
}

html body .reseller-access-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html body .reseller-access-actions .action-btn {
  min-width: max-content !important;
  min-height: 34px !important;
  padding-inline: 10px !important;
}

html body .reseller-form-actions {
  padding-top: 2px !important;
}

html body .callout {
  padding: 12px 13px !important;
  color: #a9b5c7 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

/* Settings and filter surfaces use the same density and hierarchy. */
html body #configuracoes > .grid {
  gap: 14px !important;
}

html body .parent-settings-tabs {
  padding: 4px !important;
  border: 1px solid var(--v6-line) !important;
  border-radius: 10px !important;
  background: rgba(7, 18, 31, .72) !important;
}

html body .parent-settings-tabs button {
  min-height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--v6-muted) !important;
}

html body .parent-settings-tabs button.active,
html body .parent-settings-tabs button[aria-selected="true"] {
  background: var(--v6-brand-soft) !important;
  color: #ff77b8 !important;
  box-shadow: inset 0 -2px var(--v6-brand) !important;
}

@media (max-width: 1500px) {
  html body .reseller-access-layout {
    grid-template-columns: 1fr !important;
  }

  html body #revendedores .reseller-access-layout > .panel:first-child {
    width: min(100%, 720px) !important;
  }
}

@media (max-width: 1180px) {
  html body #clientes > .kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body #clientes > .kpi-grid > .kpi {
    grid-column: span 2 !important;
  }

  html body #clientes > .kpi-grid > .kpi:nth-last-child(-n + 2) {
    grid-column: span 3 !important;
  }
}

@media (max-width: 760px) {
  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid,
  html body.mobile-premium-v5.fusion-premium-v5 .shell main #carteira.view.active .finance-summary-grid,
  html body.mobile-premium-v5.fusion-premium-v5 .shell main #clientes.view.active > .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(1),
  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(2),
  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(3),
  html body.fusion-premium-v5 .shell main #operacao.view.active > .dashboard-surface .dashboard-grid.kpi-grid > .kpi:nth-child(7) {
    min-height: 116px !important;
    padding: 12px !important;
  }

  html body.fusion-premium-v5 .shell main #operacao.view.active .dashboard-grid .name {
    font-size: 10px !important;
  }

  html body.fusion-premium-v5 .shell main #operacao.view.active .dashboard-grid .kpi-icon {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
  }

  html body.fusion-premium-v5 .shell main #operacao.view.active .dashboard-grid .metric {
    margin-top: 9px !important;
    font-size: clamp(17px, 5.1vw, 21px) !important;
  }

  html body.fusion-premium-v5 .shell main #operacao.view.active .dashboard-grid .delta {
    padding-top: 7px !important;
    font-size: 9px !important;
    -webkit-line-clamp: 1;
  }

  html body.mobile-premium-v5.fusion-premium-v5 .shell main #clientes.view.active > .kpi-grid > .kpi:nth-child(n) {
    grid-column: auto !important;
    min-height: 104px !important;
    padding: 11px !important;
  }

  html body.mobile-premium-v5.fusion-premium-v5 .shell main #clientes.view.active > .kpi-grid > .kpi:last-child {
    grid-column: 1 / -1 !important;
    min-height: 82px !important;
  }

  html body.mobile-premium-v5.fusion-premium-v5 .shell main #clientes.view.active > .kpi-grid .metric {
    margin-top: 7px !important;
    font-size: 20px !important;
  }

  html body.mobile-premium-v5.fusion-premium-v5 .shell main #clientes.view.active > .kpi-grid .delta {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.mobile-premium-v5.fusion-premium-v5 .shell main #carteira.view.active .finance-summary-grid > .finance-summary-card:nth-child(n) {
    grid-column: auto !important;
    min-height: 82px !important;
    padding: 11px !important;
  }

  html body.mobile-premium-v5.fusion-premium-v5 .shell main #carteira.view.active .finance-summary-value {
    font-size: clamp(16px, 5vw, 20px) !important;
  }

  html body .panel-header,
  html body .panel-head {
    min-height: 52px !important;
    padding: 12px !important;
  }

  html body .panel-note {
    max-width: 76vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body .reseller-access-table {
    margin-inline: -1px !important;
  }

  html body .reseller-access-table table {
    min-width: 820px !important;
  }

  html body .reseller-access-actions {
    justify-content: flex-start !important;
  }

  html body .parent-settings-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .mobile-bottom-nav {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .integration-disclosure-chevron {
    transition: none !important;
  }
}

/* Final mobile placement for the separated parent period/filter controls. */
html body.fusion-premium-v5 .premium-filter-count[hidden],
html body.fusion-premium-v5 .mobile-filter-trigger[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  html body.mobile-premium-v5.fusion-premium-v5 .topbar > .toolbar {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "status" "filters" !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  html body.mobile-premium-v5.fusion-premium-v5 .topbar .toolbar-status {
    grid-area: status !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.mobile-premium-v5.fusion-premium-v5 .topbar .dashboard-period-controls[data-separated-filters="true"] {
    grid-area: filters !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    justify-content: stretch !important;
  }
}