html[data-color-mode="dark"] {
  --incrivel-bg: #0f121a;
  --incrivel-border: #2a2f3a;
  --incrivel-bgColor: #f3f4f6;
  --incrivel-bgLink: #f9fafb;
  --incrivel-bgLinkHover: #ffffff;
  --incrivel-rgba: 255, 255, 255;
  --incrivel-rgbaInvert: 255, 255, 255;
  --incrivel-formBg: #1c2330;
  --incrivel-formBgHover: #252f42;
  --incrivel-formBgHoverColor: #ffffff;
  --incrivel-formBorder: #374151;
  --incrivel-formColor: #f9fafb;
  --incrivel-cardBg: #181f2b;
  --incrivel-cardColor: #f3f4f6;
  --incrivel-cardLink: #f9fafb;
  --incrivel-modalBg: #111827;
  --incrivel-modalBorder: #374151;
  --incrivel-modalColor: #f9fafb;
  --incrivel-primaria: #111827;
  --incrivel-primariaColor: #e5e7eb;
  --incrivel-primariaLink: #ffffff;
  --incrivel-primariaLinkHover: #ffffff;
  --incrivel-primariaDarken: #0b1323;
  --incrivel-primariaDarkenColor: #f9fafb;
  --incrivel-primariaDarkenLink: #ffffff;
  --incrivel-primariaDarkenLinkHover: #ffffff;
  --affiliate-quota-bg: var(--incrivel-cardBg);
  --affiliate-quota-color: var(--incrivel-cardColor);
  --affiliate-quota-track: #374151;
  --affiliate-table-border: #374151;
  --affiliate-table-stripe: #1c2330;
  --affiliate-table-hover: #252f42;
  --affiliate-table-head-bg: #059669;
  --affiliate-table-head-color: #ffffff;
}

html[data-color-mode="light"] {
  --affiliate-quota-bg: #f5f5f5;
  --affiliate-quota-color: var(--incrivel-bgColor);
  --affiliate-quota-track: #ddd;
  --affiliate-table-border: #ddd;
  --affiliate-table-stripe: #f2f2f2;
  --affiliate-table-hover: #ddd;
  --affiliate-table-head-bg: #04aa6d;
  --affiliate-table-head-color: #ffffff;
}

:root {
  --affiliate-quota-bg: #f5f5f5;
  --affiliate-quota-color: var(--incrivel-bgColor);
  --affiliate-quota-track: #ddd;
  --affiliate-table-border: #ddd;
  --affiliate-table-stripe: #f2f2f2;
  --affiliate-table-hover: #ddd;
  --affiliate-table-head-bg: #04aa6d;
  --affiliate-table-head-color: #ffffff;
}

.affiliate-quota-panel {
  background: var(--affiliate-quota-bg);
  color: var(--affiliate-quota-color);
  border-radius: 8px;
}

.affiliate-quota-panel__track {
  background: var(--affiliate-quota-track);
  border-radius: 6px;
  overflow: hidden;
  height: 12px;
}

.affiliate-quota-panel__bar {
  background: #22c55e;
  height: 12px;
}

.affiliate-table {
  border-collapse: collapse;
  width: 100%;
  color: var(--affiliate-quota-color);
}

.affiliate-table td,
.affiliate-table th {
  border: 1px solid var(--affiliate-table-border);
  padding: 8px;
}

.affiliate-table tr:nth-child(2n) {
  background-color: var(--affiliate-table-stripe);
}

.affiliate-table tr:hover {
  background-color: var(--affiliate-table-hover);
}

.affiliate-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--affiliate-table-head-bg);
  color: var(--affiliate-table-head-color);
}

html[data-color-mode="dark"] .app-form .form-control,
html[data-color-mode="dark"] .app-form .form-select {
  color: var(--incrivel-formColor);
}

html[data-color-mode="dark"] .form-control.text-black,
html[data-color-mode="dark"] .form-select.text-black,
html[data-color-mode="dark"] textarea.text-black {
  color: var(--incrivel-formColor) !important;
}

html[data-color-mode="dark"] .text-dark {
  color: #d1d5db !important;
}

html[data-color-mode="dark"] .app-main {
  --compra-surface: #1e293b;
  --compra-text: #f9fafb;
  --compra-text-muted: #94a3b8;
}

html[data-color-mode="dark"] .app-main .compra-status,
html[data-color-mode="dark"] .app-main .compra-status .app-alerta-msg--titulo,
html[data-color-mode="dark"] .app-main .compra-status .app-alerta-msg--txt,
html[data-color-mode="dark"] .app-main .compra-status .app-alerta-msg--txt p {
  color: var(--compra-text) !important;
}

html[data-color-mode="dark"] .text-muted {
  color: #9ca3af !important;
}

html[data-color-mode="dark"] .text-secondary {
  color: #9ca3af !important;
}

html[data-color-mode="dark"] .text-cor-primaria {
  color: var(--incrivel-primariaColor);
}

html[data-color-mode="dark"] .btn.app-card.btn-success,
html[data-color-mode="dark"] .app-card.btn.btn-success {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}

html[data-color-mode="dark"] .btn.app-card.btn-primary,
html[data-color-mode="dark"] .app-card.btn.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

html[data-color-mode="dark"] .btn.app-card.btn-secondary,
html[data-color-mode="dark"] .app-card.btn.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

html[data-color-mode="dark"] .btn-outline-secondary {
  color: #adb5bd;
  border-color: #6c757d;
}

html[data-color-mode="dark"] .btn-outline-secondary:hover,
html[data-color-mode="dark"] .btn-outline-secondary:focus,
html[data-color-mode="dark"] .btn-outline-secondary:active {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

html[data-color-mode="dark"] .btn-outline-primary {
  color: #6ea8fe;
  border-color: #0d6efd;
}

html[data-color-mode="dark"] .btn-outline-primary:hover,
html[data-color-mode="dark"] .btn-outline-primary:focus,
html[data-color-mode="dark"] .btn-outline-primary:active {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

html[data-color-mode="dark"] .number-picker__range-btn:not(.active) {
  color: #adb5bd;
  border-color: #6c757d;
}

html[data-color-mode="dark"] .btn-link.text-secondary {
  color: #9ca3af !important;
}

html[data-color-mode="dark"] .btn-link.text-secondary:hover,
html[data-color-mode="dark"] .btn-link.text-secondary:focus {
  color: #d1d5db !important;
}

html[data-color-mode="dark"] .landing-page {
  --landing-canvas-text: #f3f4f6;
  --landing-canvas-text-muted: rgba(255, 255, 255, 0.72);
  --landing-surface: #111827;
  --landing-surface-text: #f3f4f6;
  --landing-surface-text-muted: #d1d5db;
  --landing-surface-border: rgba(255, 255, 255, 0.16);
  --landing-surface-link: #86efac;
  --landing-surface-link-hover: #bbf7d0;
}

html[data-color-mode="dark"] .landing-page .landing-number-chip--paid {
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
  border-color: rgba(134, 239, 172, 0.25);
}

html[data-color-mode="dark"] .landing-page .landing-number-chip--pending {
  background: rgba(234, 179, 8, 0.18);
  color: #fde68a;
  border-color: rgba(253, 230, 138, 0.25);
}

html[data-color-mode="dark"] .landing-page .landing-number-chip--cancelled {
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
  border-color: rgba(254, 202, 202, 0.25);
}

html[data-color-mode="dark"] .landing-page .landing-order-numbers__pending-msg {
  background: rgba(234, 179, 8, 0.14);
  color: #fde68a;
}

html[data-color-mode="dark"] .landing-page .landing-order-referral {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(134, 239, 172, 0.22);
}

.header-app-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
}

.header-app-logo {
  flex: 1;
  text-align: center;
}

.header-app-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-app-actions .app-bar-action {
  padding: 0 !important;
  min-width: 42px;
}

.header-app-actions .app-bar-action .suporte {
  line-height: 1.1;
}

.header-app-header.campanha .header-app-actions .app-bar-action .opacity-50 {
  opacity: 1 !important;
}

@media (max-width: 420px) {
  .header-app-actions {
    gap: 8px;
  }
}