/**
 * AdsX Premium Design System - Componentes
 * 
 * Este arquivo define classes premium para componentes (cards, botões, inputs)
 * baseadas no design system do guia premium.
 * 
 * Classes com prefixo `adsx-` para evitar conflitos com estilos existentes.
 * Aplicadas quando [data-theme='dark'] ou .adsx-premium está presente.
 */

/* ============================================
   CARDS PREMIUM
   ============================================ */

/* Card Base Premium */
.adsx-card {
  background-color: var(--adsx-bg-card, #18181b);
  border-radius: 16px;
  padding: 24px;
  border: var(--adsx-border-default, 1px solid #27272a);
  transition: all var(--adsx-transition-base, 200ms ease-in-out);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card com Elevação (Sombra) */
.adsx-card-elevated {
  background-color: var(--adsx-bg-card, #18181b);
  border-radius: 16px;
  padding: 24px;
  border: var(--adsx-border-default, 1px solid #27272a);
  box-shadow: var(--adsx-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.4));
  transition: all var(--adsx-transition-base, 200ms ease-in-out);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card Interativo (com hover) */
.adsx-card-interactive {
  background-color: var(--adsx-bg-card, #18181b);
  border-radius: 16px;
  padding: 24px;
  border: var(--adsx-border-default, 1px solid #27272a);
  transition: all var(--adsx-transition-base, 200ms ease-in-out);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adsx-card-interactive:hover {
  box-shadow: var(--adsx-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
  border-color: var(--adsx-primary, #8b5cf6);
}

/* Título do Card */
.adsx-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--adsx-text-primary, #fafafa);
  margin: 0;
  line-height: 1.5;
}

/* Subtítulo do Card */
.adsx-card-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: var(--adsx-text-secondary, #a1a1aa);
  margin: 0;
  line-height: 1.5;
}

/* Conteúdo do Card */
.adsx-card-content {
  font-size: 0.95rem;
  color: var(--adsx-text-secondary, #a1a1aa);
  line-height: 1.5;
  flex: 1;
}

/* Ações do Card (botões, links) */
.adsx-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

/* Ícone do Card */
.adsx-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--adsx-primary, #8b5cf6), var(--adsx-primary-dark, #6d28d9));
  color: #ffffff;
  flex-shrink: 0;
}

/* ============================================
   BOTÕES PREMIUM
   ============================================ */

/* Botão Base */
.adsx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  border: none;
  cursor: pointer;
  transition: all var(--adsx-transition-base, 200ms ease-in-out);
  text-decoration: none;
  line-height: 1.5;
  min-height: 40px;
}

/* Botão Primário */
.adsx-btn-primary {
  background-color: var(--adsx-primary, #8b5cf6);
  color: #ffffff;
  box-shadow: var(--adsx-shadow-purple, 0 4px 14px 0 rgba(139, 92, 246, 0.2));
}

/* Botões padrão do HTML - aplicar cores premium (consolidado na seção BOTÕES PADRÃO) */

[data-theme='dark'] .btn-success,
.adsx-premium .btn-success {
  background-color: var(--adsx-success, #10b981) !important;
  color: #ffffff !important;
}

[data-theme='dark'] .btn-success:hover,
.adsx-premium .btn-success:hover {
  background-color: var(--adsx-success-dark, #059669) !important;
}

[data-theme='dark'] .btn-danger,
.adsx-premium .btn-danger {
  background-color: var(--adsx-danger, #ef4444) !important;
  color: #ffffff !important;
}

[data-theme='dark'] .btn-danger:hover,
.adsx-premium .btn-danger:hover {
  background-color: var(--adsx-danger-dark, #dc2626) !important;
}

[data-theme='dark'] .btn-warning,
.adsx-premium .btn-warning {
  background-color: var(--adsx-warning, #f59e0b) !important;
  color: #ffffff !important;
}

[data-theme='dark'] .btn-warning:hover,
.adsx-premium .btn-warning:hover {
  background-color: var(--adsx-warning-dark, #d97706) !important;
}

.adsx-btn-primary:hover {
  background-color: var(--adsx-primary-dark, #6d28d9);
  box-shadow: var(--adsx-shadow-purple, 0 6px 20px 0 rgba(139, 92, 246, 0.3));
}

.adsx-btn-primary:active {
  box-shadow: var(--adsx-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.3));
}

.adsx-btn-primary:focus {
  outline: 2px solid var(--adsx-primary-light, #a78bfa);
  outline-offset: 2px;
}

.adsx-btn-primary:disabled {
  background-color: var(--adsx-text-disabled, #52525b);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Botão Secundário */
.adsx-btn-secondary {
  background-color: var(--adsx-bg-card, #18181b);
  color: var(--adsx-text-primary, #fafafa);
  border: var(--adsx-border-default, 1px solid #27272a);
}

.adsx-btn-secondary:hover {
  background-color: var(--adsx-bg-card, #18181b);
  border-color: var(--adsx-primary, #8b5cf6);
  color: var(--adsx-primary, #8b5cf6);
}

/* Botões padrão do HTML - mesma cor de background e border */
[data-theme='dark'] .btn-secondary,
.adsx-premium .btn-secondary {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border: var(--adsx-border-default, 1px solid #27272a) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
}

[data-theme='dark'] .btn-secondary:hover,
.adsx-premium .btn-secondary:hover {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: var(--adsx-primary, #8b5cf6) !important;
}

.adsx-btn-secondary:active {
  background-color: var(--adsx-bg-detail, #1f2937);
}

.adsx-btn-secondary:focus {
  outline: 2px solid var(--adsx-primary-light, #a78bfa);
  outline-offset: 2px;
}

.adsx-btn-secondary:disabled {
  color: var(--adsx-text-disabled, #52525b);
  border-color: var(--adsx-text-disabled, #52525b);
  cursor: not-allowed;
}

/* Botão Ghost (sem fundo) */
.adsx-btn-ghost {
  background-color: transparent;
  color: var(--adsx-text-primary, #fafafa);
  border: none;
}

.adsx-btn-ghost:hover {
  background-color: var(--adsx-bg-border, #27272a);
  color: var(--adsx-primary, #8b5cf6);
}

.adsx-btn-ghost:active {
  background-color: var(--adsx-bg-detail, #1f2937);
}

/* Botão Success */
.adsx-btn-success {
  background-color: var(--adsx-success, #10b981);
  color: #ffffff;
}

.adsx-btn-success:hover {
  background-color: var(--adsx-success-dark, #059669);
  transform: translateY(-1px);
}

/* Botão Danger */
.adsx-btn-danger {
  background-color: var(--adsx-danger, #ef4444);
  color: #ffffff;
}

.adsx-btn-danger:hover {
  background-color: var(--adsx-danger-dark, #dc2626);
}

/* Tamanhos de Botão */
.adsx-btn-small {
  padding: 6px 12px;
  font-size: 0.75rem;
  min-height: 32px;
}

.adsx-btn-large {
  padding: 14px 28px;
  font-size: 1rem;
  min-height: 48px;
}

/* ============================================
   INPUTS PREMIUM
   ============================================ */

/* Input Base */
.adsx-input {
  width: 100%;
  padding: 10px 14px;
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
  border-radius: 8px;
  color: var(--adsx-text-secondary, #a1a1aa);
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  transition: all var(--adsx-transition-base, 200ms ease-in-out);
  outline: none;
  -webkit-text-fill-color: var(--adsx-text-secondary, #a1a1aa); /* Para garantir cor do texto no WebKit */
}

/* Inputs padrão do HTML - mesma cor de background e border */
[data-theme='dark'] input[type='text'],
[data-theme='dark'] input[type='email'],
[data-theme='dark'] input[type='password'],
[data-theme='dark'] input[type='number'],
[data-theme='dark'] input[type='url'],
[data-theme='dark'] input[type='search'],
[data-theme='dark'] input[type='tel'],
[data-theme='dark'] input[type='date'],
[data-theme='dark'] input[type='time'],
[data-theme='dark'] input[type='datetime-local'],
[data-theme='dark'] textarea,
[data-theme='dark'] select,
.adsx-premium input[type='text'],
.adsx-premium input[type='email'],
.adsx-premium input[type='password'],
.adsx-premium input[type='number'],
.adsx-premium input[type='url'],
.adsx-premium input[type='search'],
.adsx-premium input[type='tel'],
.adsx-premium input[type='date'],
.adsx-premium input[type='time'],
.adsx-premium input[type='datetime-local'],
.adsx-premium textarea,
.adsx-premium select {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border: var(--adsx-border-default, 1px solid #27272a) !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  border-radius: 8px;
  -webkit-text-fill-color: var(--adsx-text-secondary, #a1a1aa) !important; /* Para garantir cor do texto no WebKit */
}

[data-theme='dark'] input[type='text']:focus,
[data-theme='dark'] input[type='email']:focus,
[data-theme='dark'] input[type='password']:focus,
[data-theme='dark'] input[type='number']:focus,
[data-theme='dark'] input[type='url']:focus,
[data-theme='dark'] input[type='search']:focus,
[data-theme='dark'] input[type='tel']:focus,
[data-theme='dark'] input[type='date']:focus,
[data-theme='dark'] input[type='time']:focus,
[data-theme='dark'] input[type='datetime-local']:focus,
[data-theme='dark'] textarea:focus,
[data-theme='dark'] select:focus,
.adsx-premium input[type='text']:focus,
.adsx-premium input[type='email']:focus,
.adsx-premium input[type='password']:focus,
.adsx-premium input[type='number']:focus,
.adsx-premium input[type='url']:focus,
.adsx-premium input[type='search']:focus,
.adsx-premium input[type='tel']:focus,
.adsx-premium input[type='date']:focus,
.adsx-premium input[type='time']:focus,
.adsx-premium input[type='datetime-local']:focus,
.adsx-premium textarea:focus,
.adsx-premium select:focus {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  outline: none !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  -webkit-text-fill-color: var(--adsx-text-secondary, #a1a1aa) !important; /* Para garantir cor do texto no WebKit */
}

.adsx-input::placeholder {
  color: var(--adsx-text-tertiary, #71717a);
  opacity: 0.5;
}

/* Placeholders dos inputs padrão */
[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder,
.adsx-premium input::placeholder,
.adsx-premium textarea::placeholder {
  color: var(--adsx-text-tertiary, #71717a) !important;
  opacity: 0.5 !important;
}

.adsx-input:hover {
  border-color: var(--adsx-bg-border, #27272a);
}

.adsx-input:focus {
  border-color: var(--adsx-primary, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  color: var(--adsx-text-secondary, #a1a1aa);
  -webkit-text-fill-color: var(--adsx-text-secondary, #a1a1aa); /* Para garantir cor do texto no WebKit */
}

.adsx-input:disabled {
  background-color: var(--adsx-bg-detail, #1f2937);
  color: var(--adsx-text-disabled, #52525b);
  cursor: not-allowed;
  border-color: var(--adsx-text-disabled, #52525b);
}

/* Textarea */
.adsx-textarea {
  width: 100%;
  padding: 10px 14px;
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
  border-radius: 8px;
  color: var(--adsx-text-secondary, #a1a1aa);
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  transition: all var(--adsx-transition-base, 200ms ease-in-out);
  outline: none;
  resize: vertical;
  min-height: 100px;
  -webkit-text-fill-color: var(--adsx-text-secondary, #a1a1aa); /* Para garantir cor do texto no WebKit */
}

.adsx-textarea::placeholder {
  color: var(--adsx-text-tertiary, #71717a);
  opacity: 0.5;
}

.adsx-textarea:hover {
  border-color: var(--adsx-bg-border, #27272a);
}

.adsx-textarea:focus {
  border-color: var(--adsx-primary, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  color: var(--adsx-text-secondary, #a1a1aa);
  -webkit-text-fill-color: var(--adsx-text-secondary, #a1a1aa); /* Para garantir cor do texto no WebKit */
}

.adsx-textarea:disabled {
  background-color: var(--adsx-bg-detail, #1f2937);
  color: var(--adsx-text-disabled, #52525b);
  cursor: not-allowed;
  border-color: var(--adsx-text-disabled, #52525b);
}

/* Label para Input */
.adsx-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--adsx-text-primary, #fafafa);
  margin-bottom: 6px;
}

/* Grupo de Input (label + input) */
.adsx-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

/* ============================================
   BADGES / TAGS PREMIUM
   ============================================ */

.adsx-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

.adsx-badge-primary {
  background-color: rgba(139, 92, 246, 0.2);
  color: var(--adsx-primary, #8b5cf6);
}

.adsx-badge-success {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--adsx-success, #10b981);
}

.adsx-badge-info {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--adsx-info, #3b82f6);
}

.adsx-badge-warning {
  background-color: rgba(245, 158, 11, 0.2);
  color: var(--adsx-warning, #f59e0b);
}

.adsx-badge-danger {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--adsx-danger, #ef4444);
}

/* ============================================
   DIVISORES PREMIUM
   ============================================ */

.adsx-divider {
  height: 1px;
  background-color: var(--adsx-bg-border, #27272a);
  border: none;
  margin: 16px 0;
}

.adsx-divider-vertical {
  width: 1px;
  height: 100%;
  background-color: var(--adsx-bg-border, #27272a);
  border: none;
  margin: 0 16px;
}

/* Header right content container */
[data-theme='dark'] .header-right-content,
.adsx-premium .header-right-content {
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
}

/* Header theme divider - linha vertical pequena */
[data-theme='dark'] .header-theme-divider,
.adsx-premium .header-theme-divider {
  width: 1px !important;
  height: 24px !important; /* Altura pequena para linha vertical */
  background-color: var(--adsx-bg-border, #27272a) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* ============================================
   BACKGROUNDS PREMIUM (Conforme Documentação)
   ============================================ */

/* Fundo Global (Body) - zinc-950 (dark) ou slate-50 (light) */
[data-theme='dark'] body,
.adsx-premium body {
  background-color: var(--adsx-bg-global, #09090b);
  color: var(--adsx-text-primary, #fafafa);
}

/* Premium Light - Body */
[data-theme='light'] .adsx-premium body,
.adsx-premium-light body {
  background-color: var(--adsx-bg-global, #f8fafc);
  color: var(--adsx-text-primary, #0f172a);
}

/* Topbar (Header) - zinc-950 (dark) ou slate-50 (light) - Ao lado do sidenav */
[data-theme='dark'] .floating-header,
.adsx-premium .floating-header {
  background-color: var(--adsx-bg-global, #09090b);
  left: 240px !important; /* Começa onde o sidenav termina */
  width: calc(100% - 240px) !important; /* Largura ajustada para compensar o sidenav */
  z-index: 100; /* Mesmo nível do sidenav */
  border-bottom: 1px solid var(--adsx-bg-border, #27272a); /* Borda inferior zinc-800 */
  justify-content: flex-end !important; /* Alinha elementos à direita */
}

/* Premium Light - Topbar (Header) */
[data-theme='light'] .adsx-premium .floating-header,
.adsx-premium-light .floating-header {
  background-color: var(--adsx-bg-global, #f8fafc);
  border-bottom: 1px solid var(--adsx-bg-border, #e2e8f0); /* slate-200 */
}

/* Ocultar logo e nome do pacote na topbar no modo premium */
[data-theme='dark'] .floating-header #header-left-container,
.adsx-premium .floating-header #header-left-container {
  display: none !important;
}

/* Garantir que elementos da direita fiquem alinhados à direita */
[data-theme='dark'] .floating-header #header-right-container,
.adsx-premium .floating-header #header-right-container {
  margin-left: auto; /* Empurra para a direita */
}

/* Sidebar - zinc-900 (dark) ou white (light) - Altura completa da tela */
[data-theme='dark'] .sidenav,
.adsx-premium .sidenav {
  background-color: var(--adsx-bg-card, #18181b);
  top: 0 !important; /* Ocupa altura completa da tela, começando do topo */
  height: 100vh !important; /* Altura total da viewport */
  z-index: 100; /* Mesmo nível do header */
  display: flex;
  flex-direction: column;
  padding-right: 0.3rem;
  overflow-y: auto;
}

/* Premium Light - Sidebar */
[data-theme='light'] .adsx-premium .sidenav,
.adsx-premium-light .sidenav {
  background-color: var(--adsx-bg-card, #ffffff);
}

/* Container do menu sidenav - flex container para distribuir espaço */
[data-theme='dark'] #sidenav-menu,
[data-theme='dark'] #sidenav-menu-announce,
.adsx-premium #sidenav-menu,
.adsx-premium #sidenav-menu-announce {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible;
  background-color: var(--adsx-bg-card, #18181b);
  border-right: 1px solid var(--adsx-bg-border, #27272a) !important;
}

/* Header do Sidenav (Logo e Nome) - Topo do sidenav */
[data-theme='dark'] .sidenav-header-premium,
.adsx-premium .sidenav-header-premium {
  padding: 0px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Container do logo no sidenav - layout horizontal (logo e badge lado a lado) */
[data-theme='dark'] .sidenav-header-premium #sidenav-logo-container,
.adsx-premium .sidenav-header-premium #sidenav-logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* Logo no sidenav */
[data-theme='dark'] .sidenav-header-premium .miner-main-icon,
.adsx-premium .sidenav-header-premium .miner-main-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--adsx-text-primary, #fafafa);
  transition: opacity 0.2s ease;
}

[data-theme='dark'] .sidenav-header-premium .miner-main-icon:hover,
.adsx-premium .sidenav-header-premium .miner-main-icon:hover {
  opacity: 0.8;
}

[data-theme='dark'] .sidenav-header-premium .logo-icon,
.adsx-premium .sidenav-header-premium .logo-icon {
  height: 28px;
  width: auto;
}

[data-theme='dark'] .sidenav-header-premium .logo-text,
.adsx-premium .sidenav-header-premium .logo-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--adsx-text-primary, #fafafa);
  font-family: 'Inter', sans-serif;
}

[data-theme='dark'] .sidenav-header-premium .logo-text .logo-text-primary,
.adsx-premium .sidenav-header-premium .logo-text .logo-text-primary {
  color: var(--adsx-primary, #8b5cf6);
}

/* Nome do pacote no sidenav - alinhado horizontalmente com o logo */
[data-theme='dark'] .sidenav-header-premium #sidenav-package-name-container,
.adsx-premium .sidenav-header-premium #sidenav-package-name-container {
  display: flex;
  align-items: center;
}

[data-theme='dark'] .sidenav-header-premium .package-name-badge,
.adsx-premium .sidenav-header-premium .package-name-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  /* Mesmas cores dos botões de filtro de período (não ativo) */
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--adsx-text-secondary, #a1a1aa);
  white-space: normal; /* Permite quebra de linha */
  word-break: break-word; /* Quebra palavras se necessário */
  line-height: 1.4;
}

[data-theme='dark'] .sidenav-header-premium .package-name-text,
.adsx-premium .sidenav-header-premium .package-name-text {
  font-weight: 500;
  color: var(--adsx-text-secondary, #a1a1aa);
  font-family: 'Inter', sans-serif;
  white-space: normal; /* Permite quebra de linha */
  word-break: break-word; /* Quebra palavras se necessário */
  /* Permite quebra específica entre "escala" e "max" */
  overflow-wrap: break-word;
  hyphens: auto;
}

[data-theme='dark'] .sidenav-header-premium .package-name-icon,
.adsx-premium .sidenav-header-premium .package-name-icon {
  font-size: 18px;
}

/* Ajustar menu scrollable para ocupar espaço restante */
[data-theme='dark'] .sidenav-menu-scrollable,
.adsx-premium .sidenav-menu-scrollable {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}

/* Main content ajustado para começar do topo no modo premium */
[data-theme='dark'] .main-content,
.adsx-premium .main-content {
  margin-top: 85px; /* Mantém margin-top para o header */
  padding-top: 0; /* Remove padding-top extra */
}

/* Main Content - zinc-950 (dark) ou slate-50 (light) */
[data-theme='dark'] .main-content,
.adsx-premium .main-content {
  background-color: var(--adsx-bg-global, #09090b);
  color: var(--adsx-text-primary, #fafafa);
}

/* Premium Light - Main Content */
[data-theme='light'] .adsx-premium .main-content,
.adsx-premium-light .main-content {
  background-color: var(--adsx-bg-global, #f8fafc);
  color: var(--adsx-text-primary, #0f172a);
}

/* Cards - zinc-900 (dark) ou white (light) */
[data-theme='dark'] .dashboard-card,
[data-theme='dark'] .md3-card,
[data-theme='dark'] .domain-card,
.adsx-premium .dashboard-card,
.adsx-premium .md3-card,
.adsx-premium .domain-card {
  background-color: var(--adsx-bg-card, #18181b);
}

/* Premium Light - Cards */
[data-theme='light'] .adsx-premium .dashboard-card,
[data-theme='light'] .adsx-premium .md3-card,
[data-theme='light'] .adsx-premium .domain-card,
.adsx-premium-light .dashboard-card,
.adsx-premium-light .md3-card,
.adsx-premium-light .domain-card {
  background-color: var(--adsx-bg-card, #ffffff);
}

/* Cards Premium (classes adsx-card já têm a cor definida, mas garantimos) */
[data-theme='dark'] .adsx-card,
[data-theme='dark'] .adsx-card-elevated,
[data-theme='dark'] .adsx-card-interactive,
.adsx-premium .adsx-card,
.adsx-premium .adsx-card-elevated,
.adsx-premium .adsx-card-interactive {
  background-color: var(--adsx-bg-card, #18181b);
}

/* Premium Light - Cards Premium */
[data-theme='light'] .adsx-premium .adsx-card,
[data-theme='light'] .adsx-premium .adsx-card-elevated,
[data-theme='light'] .adsx-premium .adsx-card-interactive,
.adsx-premium-light .adsx-card,
.adsx-premium-light .adsx-card-elevated,
.adsx-premium-light .adsx-card-interactive {
  background-color: var(--adsx-bg-card, #ffffff);
}

/* Tabelas elevadas - zinc-900 */
[data-theme='dark'] .table-elevated,
.adsx-premium .table-elevated {
  background-color: var(--adsx-bg-card, #18181b);
}

/* Container principal - zinc-950 (dark) ou slate-50 (light) */
[data-theme='dark'] .container,
.adsx-premium .container {
  background-color: var(--adsx-bg-global, #09090b);
}

/* Premium Light - Container */
[data-theme='light'] .adsx-premium .container,
.adsx-premium-light .container {
  background-color: var(--adsx-bg-global, #f8fafc);
}

/* Bordas dos cards - zinc-800 */
[data-theme='dark'] .dashboard-card,
[data-theme='dark'] .md3-card,
[data-theme='dark'] .domain-card,
[data-theme='dark'] .adsx-card,
.adsx-premium .dashboard-card,
.adsx-premium .md3-card,
.adsx-premium .domain-card,
.adsx-premium .adsx-card {
  border-color: var(--adsx-bg-border, #27272a);
}

/* ============================================
   CORES DE TEXTO PREMIUM (Conforme Documentação)
   ============================================ */

/* Texto principal - aplicado ao body e elementos base (cinza claro secundário) */
[data-theme='dark'] body,
[data-theme='dark'] p,
[data-theme='dark'] span,
[data-theme='dark'] div,
[data-theme='dark'] li,
[data-theme='dark'] td,
[data-theme='dark'] th,
.adsx-premium body,
.adsx-premium p,
.adsx-premium span,
.adsx-premium div,
.adsx-premium li,
.adsx-premium td,
.adsx-premium th {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Títulos principais - branco brilhante */
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] .page-title,
.adsx-premium h1,
.adsx-premium h2,
.adsx-premium .page-title {
  color: var(--adsx-text-bright, #ffffff);
}

/* Container do título da página - conforme exemplo (flex items-center gap-2) */
[data-theme='dark'] .miner-page-title,
.adsx-premium .miner-page-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 */
  margin-bottom: 0.5rem !important; /* mb-2 */
}

/* Título da página (miner-page-title) - conforme exemplo */
[data-theme='dark'] .miner-page-title h1,
[data-theme='dark'] .miner-page-title h2,
.adsx-premium .miner-page-title h1,
.adsx-premium .miner-page-title h2 {
  color: var(--adsx-text-bright, #ffffff) !important; /* text-white no dark - H1 sempre branco */
  font-size: 1.5rem !important; /* text-2xl */
  font-weight: 700 !important; /* font-bold */
  letter-spacing: -0.025em !important; /* tracking-tight */
  margin: 0 !important;
}

/* Premium Light - Títulos */
[data-theme='light'] .adsx-premium .miner-page-title h1,
[data-theme='light'] .adsx-premium .miner-page-title h2,
.adsx-premium-light .miner-page-title h1,
.adsx-premium-light .miner-page-title h2 {
  color: var(--adsx-text-primary, #0f172a) !important; /* slate-900 no light */
}

[data-theme='light'] .adsx-premium h1,
[data-theme='light'] .adsx-premium h2,
[data-theme='light'] .adsx-premium .page-title,
.adsx-premium-light h1,
.adsx-premium-light h2,
.adsx-premium-light .page-title {
  color: var(--adsx-text-primary, #0f172a);
}

/* Parte do título em roxo (ex: "Ads<span>Dashboard</span>") - apenas quando há duas cores no H1 */
[data-theme='dark'] .miner-page-title h1 span:not(.google-account-limit-indicator):not([class*="indicator"]):not([class*="badge"]),
[data-theme='dark'] .miner-page-title h2 span:not(.google-account-limit-indicator):not([class*="indicator"]):not([class*="badge"]),
.adsx-premium .miner-page-title h1 span:not(.google-account-limit-indicator):not([class*="indicator"]):not([class*="badge"]),
.adsx-premium .miner-page-title h2 span:not(.google-account-limit-indicator):not([class*="indicator"]):not([class*="badge"]) {
  color: var(--adsx-primary-light, #a78bfa) !important; /* text-purple-500 no dark */
}

/* Elementos específicos dentro do H1 mantêm suas próprias cores (indicadores, badges, etc) */
[data-theme='dark'] .miner-page-title h1 .google-account-limit-indicator,
[data-theme='dark'] .miner-page-title h2 .google-account-limit-indicator,
.adsx-premium .miner-page-title h1 .google-account-limit-indicator,
.adsx-premium .miner-page-title h2 .google-account-limit-indicator {
  color: inherit !important; /* Mantém a cor definida pelo próprio elemento */
}

/* Subtítulos e títulos menores - branco quase puro */
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6,
.adsx-premium h3,
.adsx-premium h4,
.adsx-premium h5,
.adsx-premium h6 {
  color: var(--adsx-text-primary, #fafafa);
}

/* Números grandes e métricas - branco brilhante */
[data-theme='dark'] .metric-value,
[data-theme='dark'] .kpi-value,
[data-theme='dark'] .number-large,
[data-theme='dark'] .big-number,
.adsx-premium .metric-value,
.adsx-premium .kpi-value,
.adsx-premium .number-large,
.adsx-premium .big-number {
  color: var(--adsx-text-bright, #ffffff);
}

/* Cards de campanhas - Conversões, Valor convertido e ROAS quando > 0: verde esmeralda */
[data-theme='dark'] .metric-value.metric-conversions,
[data-theme='dark'] .metric-value.metric-success,
.adsx-premium .metric-value.metric-conversions,
.adsx-premium .metric-value.metric-success {
  color: var(--adsx-success, #10b981) !important; /* emerald-500 - verde esmeralda */
}

/* Cards de campanhas - Investimento e CPA quando > 0: cor primária (roxo) */
[data-theme='dark'] .metric-value.metric-cost,
[data-theme='dark'] .metric-value.metric-cpa,
.adsx-premium .metric-value.metric-cost,
.adsx-premium .metric-value.metric-cpa {
  color: var(--adsx-primary, #8b5cf6) !important; /* violet-500 - cor primária */
}

/* Garantir que os valores dentro de .metric-value também herdem a cor */
[data-theme='dark'] .metric-value .value-number,
[data-theme='dark'] .metric-value .value-indicator,
.adsx-premium .metric-value .value-number,
.adsx-premium .metric-value .value-indicator {
  color: inherit;
}

/* Para Conversões, Valor convertido e ROAS quando > 0, aplicar verde também nos elementos internos */
[data-theme='dark'] .metric-value.metric-conversions .value-number,
[data-theme='dark'] .metric-value.metric-conversions .value-indicator,
[data-theme='dark'] .metric-value.metric-success .value-number,
[data-theme='dark'] .metric-value.metric-success .value-indicator,
.adsx-premium .metric-value.metric-conversions .value-number,
.adsx-premium .metric-value.metric-conversions .value-indicator,
.adsx-premium .metric-value.metric-success .value-number,
.adsx-premium .metric-value.metric-success .value-indicator {
  color: var(--adsx-success, #10b981) !important; /* emerald-500 */
}

/* Para Investimento e CPA quando > 0, aplicar cor primária também nos elementos internos */
[data-theme='dark'] .metric-value.metric-cost .value-number,
[data-theme='dark'] .metric-value.metric-cost .value-indicator,
[data-theme='dark'] .metric-value.metric-cpa .value-number,
[data-theme='dark'] .metric-value.metric-cpa .value-indicator,
.adsx-premium .metric-value.metric-cost .value-number,
.adsx-premium .metric-value.metric-cost .value-indicator,
.adsx-premium .metric-value.metric-cpa .value-number,
.adsx-premium .metric-value.metric-cpa .value-indicator {
  color: var(--adsx-primary, #8b5cf6) !important; /* violet-500 - cor primária */
}

/* Texto secundário - para labels, descrições, etc (já aplicado por padrão) */
[data-theme='dark'] .text-secondary,
[data-theme='dark'] label,
[data-theme='dark'] .label,
[data-theme='dark'] .description,
[data-theme='dark'] .subtitle,
.adsx-premium .text-secondary,
.adsx-premium label,
.adsx-premium .label,
.adsx-premium .description,
.adsx-premium .subtitle {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Sidebar - itens de navegação inativos (conforme exemplo: text-zinc-400) */
[data-theme='dark'] .sidenav-menu a:not(.active),
[data-theme='dark'] .sidenav-menu li:not(.active) a,
.adsx-premium .sidenav-menu a:not(.active),
.adsx-premium .sidenav-menu li:not(.active) a {
  color: var(--adsx-text-secondary, #a1a1aa); /* zinc-400 */
}

/* Sidebar - ícones dos itens inativos */
[data-theme='dark'] .sidenav-menu a:not(.active) .material-icons,
[data-theme='dark'] .sidenav-menu a:not(.active) .material-symbols-outlined,
[data-theme='dark'] .sidenav-menu li:not(.active) a .material-icons,
[data-theme='dark'] .sidenav-menu li:not(.active) a .material-symbols-outlined,
.adsx-premium .sidenav-menu a:not(.active) .material-icons,
.adsx-premium .sidenav-menu a:not(.active) .material-symbols-outlined,
.adsx-premium .sidenav-menu li:not(.active) a .material-icons,
.adsx-premium .sidenav-menu li:not(.active) a .material-symbols-outlined {
  color: var(--adsx-text-tertiary, #71717a); /* zinc-500 */
}


/* Sidebar - hover (conforme exemplo: hover:bg-zinc-900 hover:text-zinc-200) */
[data-theme='dark'] .sidenav-menu a:not(.active):hover,
.adsx-premium .sidenav-menu a:not(.active):hover {
  background-color: var(--adsx-bg-global, #09090b); /* hover:bg-zinc-900 */
  color: var(--adsx-text-primary, #fafafa); /* hover:text-zinc-200 */
}

/* Texto terciário - para placeholders, hints, etc */
[data-theme='dark'] .text-tertiary,
[data-theme='dark'] .hint,
[data-theme='dark'] .helper-text,
.adsx-premium .text-tertiary,
.adsx-premium .hint,
.adsx-premium .helper-text {
  color: var(--adsx-text-tertiary, #71717a);
}

/* ============================================
   LIGHT MODE OVERRIDES (Premium Light)
   ============================================ */

/* Fundos */
[data-theme='light'] .adsx-premium body,
.adsx-premium-light body {
  background-color: var(--adsx-bg-global, #f8fafc);
  color: var(--adsx-text-primary, #0f172a);
}

[data-theme='light'] .adsx-premium .adsx-card,
[data-theme='light'] .adsx-premium .dashboard-card,
[data-theme='light'] .adsx-premium .md3-card,
[data-theme='light'] .adsx-premium .domain-card,
.adsx-premium-light .adsx-card,
.adsx-premium-light .dashboard-card,
.adsx-premium-light .md3-card,
.adsx-premium-light .domain-card {
  background-color: var(--adsx-bg-card, #ffffff);
  border-color: var(--adsx-bg-border, #e2e8f0);
  box-shadow: var(--adsx-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}

[data-theme='light'] .adsx-premium .adsx-card-interactive:hover,
.adsx-premium-light .adsx-card-interactive:hover {
  box-shadow: var(--adsx-shadow-lg, 0 12px 30px rgba(15, 23, 42, 0.1));
  border-color: var(--adsx-primary, #8b5cf6);
}

/* Títulos e textos */
[data-theme='light'] .adsx-premium h1,
[data-theme='light'] .adsx-premium h2,
[data-theme='light'] .adsx-premium .page-title,
.adsx-premium-light h1,
.adsx-premium-light h2,
.adsx-premium-light .page-title {
  color: var(--adsx-text-primary, #0f172a);
}

[data-theme='light'] .adsx-premium p,
[data-theme='light'] .adsx-premium span,
[data-theme='light'] .adsx-premium div,
[data-theme='light'] .adsx-premium li,
[data-theme='light'] .adsx-premium td,
[data-theme='light'] .adsx-premium th,
.adsx-premium-light p,
.adsx-premium-light span,
.adsx-premium-light div,
.adsx-premium-light li,
.adsx-premium-light td,
.adsx-premium-light th {
  color: var(--adsx-text-secondary, #334155);
}

[data-theme='light'] .adsx-premium .metric-value,
.adsx-premium-light .metric-value {
  color: var(--adsx-text-primary, #0f172a);
}

/* Botões */
[data-theme='light'] .adsx-premium .btn-primary,
[data-theme='light'] .adsx-premium .elevated.btn-primary,
.adsx-premium-light .btn-primary,
.adsx-premium-light .elevated.btn-primary {
  background-color: var(--adsx-primary, #8b5cf6) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: #ffffff !important;
}

[data-theme='light'] .adsx-premium .btn-primary:hover,
[data-theme='light'] .adsx-premium .elevated.btn-primary:hover,
.adsx-premium-light .btn-primary:hover,
.adsx-premium-light .elevated.btn-primary:hover {
  background-color: var(--adsx-primary-dark, #6d28d9) !important;
  border-color: var(--adsx-primary-dark, #6d28d9) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2) !important;
}

[data-theme='light'] .adsx-premium .btn-secondary,
.adsx-premium-light .btn-secondary {
  background-color: var(--adsx-bg-card, #ffffff) !important;
  border: 1px solid var(--adsx-bg-border, #e2e8f0) !important;
  color: var(--adsx-text-primary, #0f172a) !important;
}

[data-theme='light'] .adsx-premium .btn-secondary:hover,
.adsx-premium-light .btn-secondary:hover {
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: var(--adsx-primary, #8b5cf6) !important;
  background-color: rgba(139, 92, 246, 0.08) !important;
}

[data-theme='light'] .adsx-premium .adsx-btn-ghost,
.adsx-premium-light .adsx-btn-ghost {
  color: var(--adsx-primary, #8b5cf6);
  background-color: transparent;
}

[data-theme='light'] .adsx-premium .adsx-btn-ghost:hover,
.adsx-premium-light .adsx-btn-ghost:hover {
  background-color: rgba(139, 92, 246, 0.08);
}

/* Inputs */
[data-theme='light'] .adsx-premium input[type='text'],
[data-theme='light'] .adsx-premium input[type='email'],
[data-theme='light'] .adsx-premium input[type='password'],
[data-theme='light'] .adsx-premium input[type='number'],
[data-theme='light'] .adsx-premium input[type='url'],
[data-theme='light'] .adsx-premium input[type='search'],
[data-theme='light'] .adsx-premium input[type='tel'],
[data-theme='light'] .adsx-premium input[type='date'],
[data-theme='light'] .adsx-premium input[type='time'],
[data-theme='light'] .adsx-premium input[type='datetime-local'],
[data-theme='light'] .adsx-premium textarea,
[data-theme='light'] .adsx-premium select,
.adsx-premium-light input[type='text'],
.adsx-premium-light input[type='email'],
.adsx-premium-light input[type='password'],
.adsx-premium-light input[type='number'],
.adsx-premium-light input[type='url'],
.adsx-premium-light input[type='search'],
.adsx-premium-light input[type='tel'],
.adsx-premium-light input[type='date'],
.adsx-premium-light input[type='time'],
.adsx-premium-light input[type='datetime-local'],
.adsx-premium-light textarea,
.adsx-premium-light select {
  background-color: var(--adsx-bg-card, #ffffff) !important;
  border: 1px solid var(--adsx-bg-border, #e2e8f0) !important;
  color: var(--adsx-text-secondary, #334155) !important;
  -webkit-text-fill-color: var(--adsx-text-secondary, #334155) !important;
}

[data-theme='light'] .adsx-premium input:focus,
[data-theme='light'] .adsx-premium textarea:focus,
[data-theme='light'] .adsx-premium select:focus,
.adsx-premium-light input:focus,
.adsx-premium-light textarea:focus,
.adsx-premium-light select:focus {
  border-color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
  outline: none !important;
  color: var(--adsx-text-secondary, #334155) !important;
  -webkit-text-fill-color: var(--adsx-text-secondary, #334155) !important;
}

[data-theme='light'] .adsx-premium input::placeholder,
[data-theme='light'] .adsx-premium textarea::placeholder,
.adsx-premium-light input::placeholder,
.adsx-premium-light textarea::placeholder {
  color: var(--adsx-text-tertiary, #64748b) !important;
}

/* Badges */
[data-theme='light'] .adsx-premium .adsx-badge-primary,
.adsx-premium-light .adsx-badge-primary {
  background-color: rgba(139, 92, 246, 0.14);
  color: var(--adsx-primary, #8b5cf6);
}

[data-theme='light'] .adsx-premium .adsx-badge-success,
.adsx-premium-light .adsx-badge-success {
  background-color: rgba(16, 185, 129, 0.14);
  color: var(--adsx-success, #10b981);
}

[data-theme='light'] .adsx-premium .adsx-badge-info,
.adsx-premium-light .adsx-badge-info {
  background-color: rgba(59, 130, 246, 0.14);
  color: var(--adsx-info, #3b82f6);
}

[data-theme='light'] .adsx-premium .adsx-badge-warning,
.adsx-premium-light .adsx-badge-warning {
  background-color: rgba(245, 158, 11, 0.16);
  color: var(--adsx-warning, #f59e0b);
}

[data-theme='light'] .adsx-premium .adsx-badge-danger,
.adsx-premium-light .adsx-badge-danger {
  background-color: rgba(239, 68, 68, 0.14);
  color: var(--adsx-danger, #ef4444);
}

/* Navegação lateral */
[data-theme='light'] .adsx-premium .sidenav-menu a:not(.active),
[data-theme='light'] .adsx-premium .sidenav-menu li:not(.active) a,
.adsx-premium-light .sidenav-menu a:not(.active),
.adsx-premium-light .sidenav-menu li:not(.active) a {
  color: var(--adsx-text-secondary, #334155);
}

[data-theme='light'] .adsx-premium .sidenav-menu a:not(.active):hover,
.adsx-premium-light .sidenav-menu a:not(.active):hover {
  background-color: var(--adsx-bg-detail, #f1f5f9);
  color: var(--adsx-text-primary, #0f172a);
}

[data-theme='light'] .adsx-premium .sidenav-menu a.active,
[data-theme='light'] .adsx-premium .sidenav-menu li.active a,
.adsx-premium-light .sidenav-menu a.active,
.adsx-premium-light .sidenav-menu li.active a {
  background-color: rgba(139, 92, 246, 0.12) !important;
  border: 1px solid rgba(139, 92, 246, 0.18) !important;
  color: var(--adsx-primary, #8b5cf6) !important;
}

[data-theme='light'] .adsx-premium .sidenav-menu a.active span,
[data-theme='light'] .adsx-premium .sidenav-menu li.active a span,
.adsx-premium-light .sidenav-menu a.active span,
.adsx-premium-light .sidenav-menu li.active a span {
  color: var(--adsx-primary, #8b5cf6) !important;
}

/* Tabelas */
[data-theme='light'] .adsx-premium .table,
[data-theme='light'] .adsx-premium .table-elevated,
.adsx-premium-light .table,
.adsx-premium-light .table-elevated {
  color: var(--adsx-text-secondary, #334155);
  border-color: var(--adsx-bg-border, #e2e8f0);
}

[data-theme='light'] .adsx-premium .table th,
.adsx-premium-light .table th {
  color: var(--adsx-text-primary, #0f172a);
}

/* Texto desabilitado */
[data-theme='dark'] .text-disabled,
[data-theme='dark'] :disabled,
[data-theme='dark'] [disabled],
.adsx-premium .text-disabled,
.adsx-premium :disabled,
.adsx-premium [disabled] {
  color: var(--adsx-text-disabled, #52525b);
}

/* Links - usar cor primária (roxo) - conforme exemplo */
/* Aplicar a todos os links clicáveis, exceto sidebar, botões e elementos específicos */
[data-theme='dark'] a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button),
[data-theme='dark'] .link:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.class-next-button):not(.class-previous-button),
[data-theme='dark'] .redirect_link,
[data-theme='dark'] .title_links a,
.adsx-premium a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button),
.adsx-premium .link:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.class-next-button):not(.class-previous-button),
.adsx-premium .redirect_link,
.adsx-premium .title_links a {
  color: var(--adsx-primary-light, #a78bfa) !important; /* purple-400 - roxo claro premium */
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  transition: color 0.2s ease-in-out !important;
}

[data-theme='dark'] a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button):hover,
[data-theme='dark'] .link:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.class-next-button):not(.class-previous-button):hover,
[data-theme='dark'] .redirect_link:hover,
[data-theme='dark'] .title_links a:hover,
.adsx-premium a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button):hover,
.adsx-premium .link:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.class-next-button):not(.class-previous-button):hover,
.adsx-premium .redirect_link:hover,
.adsx-premium .title_links a:hover {
  color: var(--adsx-primary-light, #a78bfa) !important; /* purple-400 - roxo claro premium */
  text-decoration: underline !important;
}

/* Texto (span) dentro de links externos premium */
[data-theme='dark'] .redirect_link span,
[data-theme='dark'] .redirect_link > span,
[data-theme='dark'] a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button) span,
[data-theme='dark'] a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button) > span,
.adsx-premium .redirect_link span,
.adsx-premium .redirect_link > span,
.adsx-premium a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button) span,
.adsx-premium a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button) > span {
  color: inherit !important; /* Herda a cor do link */
  text-decoration: inherit !important;
  transition: color 0.2s ease-in-out !important;
}

/* Ícones dentro de links externos premium */
[data-theme='dark'] .redirect_link i,
[data-theme='dark'] .redirect_link .material-icons,
[data-theme='dark'] .redirect_link .material-symbols,
[data-theme='dark'] .redirect_link .redirect-link-icon,
[data-theme='dark'] a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button) i,
[data-theme='dark'] a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button) .material-icons,
.adsx-premium .redirect_link i,
.adsx-premium .redirect_link .material-icons,
.adsx-premium .redirect_link .material-symbols,
.adsx-premium .redirect_link .redirect-link-icon,
.adsx-premium a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button) i,
.adsx-premium a[href]:not(.sidenav-menu a):not(.btn):not(.period-filter-button):not(.gift-link):not(.gift a):not(.class-next-button):not(.class-previous-button) .material-icons {
  color: inherit !important; /* Herda a cor do link */
  font-size: 1rem !important;
  vertical-align: middle !important;
  transition: color 0.2s ease-in-out !important;
}

/* Ícone do título da página - conforme exemplo (bg-purple-500/20, text-purple-400) */
[data-theme='dark'] .miner-page-title-icon,
.adsx-premium .miner-page-title-icon {
  background-color: rgba(139, 92, 246, 0.2) !important; /* bg-purple-500/20 no dark */
  padding: 12px; /* p-1.5 */
  border-radius: 4px !important; /* rounded */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-theme='dark'] .miner-page-title-icon .material-symbols-outlined,
[data-theme='dark'] .miner-page-title-icon .material-icons,
[data-theme='dark'] .miner-page-title-icon i,
.adsx-premium .miner-page-title-icon .material-symbols-outlined,
.adsx-premium .miner-page-title-icon .material-icons,
.adsx-premium .miner-page-title-icon i {
  color: var(--adsx-primary-light, #a78bfa) !important; /* text-purple-400 no dark */
  font-size: 20px !important; /* size={20} */
}

/* Outros ícones com cor primária */
[data-theme='dark'] .material-icons[style*="color"],
.adsx-premium .material-icons[style*="color"] {
  color: var(--adsx-primary, #8b5cf6) !important;
}

/* Botão de troca de tema - estilo premium (conforme exemplo) */
[data-theme='dark'] .theme-toggle-btn,
.adsx-premium .theme-toggle-btn {
  width: 32px !important; /* w-8 */
  height: 32px !important; /* h-8 */
  min-width: 32px !important; /* Garante que não fique oval */
  min-height: 32px !important; /* Garante que não fique oval */
  aspect-ratio: 1 / 1 !important; /* Garante formato circular */
  background-color: var(--adsx-bg-card, #18181b) !important; /* bg-zinc-900 no dark */
  border: 1px solid var(--adsx-bg-border, #27272a) !important; /* border-zinc-800 no dark */
  border-radius: 50% !important; /* rounded-full */
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease;
  box-sizing: border-box !important;
}

[data-theme='dark'] .theme-toggle-btn .theme-toggle-icon,
[data-theme='dark'] .theme-toggle-btn .material-symbols-outlined,
[data-theme='dark'] .theme-toggle-btn i.material-symbols-outlined,
.adsx-premium .theme-toggle-btn .theme-toggle-icon,
.adsx-premium .theme-toggle-btn .material-symbols-outlined,
.adsx-premium .theme-toggle-btn i.material-symbols-outlined {
  color: var(--adsx-text-secondary, #a1a1aa) !important; /* text-zinc-400 no dark */
  font-size: 16px !important; /* size={16} */
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* ============================================
   BOTÃO DE TROCA DE IDIOMA (language-toggle-btn)
   ============================================ */

/* Wrapper do botão de idioma */
[data-theme='dark'] .language-toggle-wrapper,
.adsx-premium .language-toggle-wrapper {
  position: relative !important;
  display: inline-flex !important;
}

/* Botão de troca de idioma - estilo premium (similar ao theme-toggle-btn) */
[data-theme='dark'] .language-toggle-btn,
.adsx-premium .language-toggle-btn {
  width: 32px !important; /* w-8 */
  height: 32px !important; /* h-8 */
  min-width: 32px !important; /* Garante que não fique oval */
  min-height: 32px !important; /* Garante que não fique oval */
  aspect-ratio: 1 / 1 !important; /* Garante formato circular */
  background-color: var(--adsx-bg-card, #18181b) !important; /* bg-zinc-900 no dark */
  border: 1px solid var(--adsx-bg-border, #27272a) !important; /* border-zinc-800 no dark */
  border-radius: 50% !important; /* rounded-full */
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: 0.5rem !important; /* Espaçador no lado direito */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  transition: all 0.3s ease;
  box-sizing: border-box !important;
}

[data-theme='dark'] .language-toggle-btn .language-toggle-icon,
[data-theme='dark'] .language-toggle-btn .material-symbols-outlined,
[data-theme='dark'] .language-toggle-btn i.material-symbols-outlined,
.adsx-premium .language-toggle-btn .language-toggle-icon,
.adsx-premium .language-toggle-btn .material-symbols-outlined,
.adsx-premium .language-toggle-btn i.material-symbols-outlined {
  color: var(--adsx-text-secondary, #a1a1aa) !important; /* text-zinc-400 no dark */
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

[data-theme='dark'] .language-toggle-btn .language-toggle-current,
.adsx-premium .language-toggle-btn .language-toggle-current {
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dropdown menu de idioma */
[data-theme='dark'] .language-toggle-dropdown,
.adsx-premium .language-toggle-dropdown {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  right: 0 !important;
  background-color: var(--adsx-bg-card, #18181b) !important;
  min-width: 120px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  z-index: 1000 !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
}

[data-theme='dark'] .language-toggle-dropdown.show,
.adsx-premium .language-toggle-dropdown.show {
  display: block !important;
}

[data-theme='dark'] .language-toggle-item,
.adsx-premium .language-toggle-item {
  padding: 10px 15px !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--adsx-bg-border, #27272a) !important;
  transition: background-color 0.2s ease;
  font-size: 14px !important;
}

[data-theme='dark'] .language-toggle-item:hover,
.adsx-premium .language-toggle-item:hover {
  background-color: rgba(139, 92, 246, 0.1) !important;
}

[data-theme='dark'] .language-toggle-item.active,
.adsx-premium .language-toggle-item.active {
  background-color: rgba(139, 92, 246, 0.15) !important;
  color: var(--adsx-primary-light, #a78bfa) !important;
  font-weight: 600 !important;
}

[data-theme='dark'] .language-toggle-item:last-child,
.adsx-premium .language-toggle-item:last-child {
  border-bottom: none !important;
}

/* Premium Light - Language Toggle */
[data-theme='light'] .adsx-premium .language-toggle-btn,
.adsx-premium-light .language-toggle-btn {
  background-color: var(--adsx-bg-card, #ffffff) !important;
  border: 1px solid var(--adsx-bg-border, #e2e8f0) !important;
}

[data-theme='light'] .adsx-premium .language-toggle-btn .language-toggle-icon,
[data-theme='light'] .adsx-premium .language-toggle-btn .material-symbols-outlined,
.adsx-premium-light .language-toggle-btn .language-toggle-icon,
.adsx-premium-light .language-toggle-btn .material-symbols-outlined {
  color: var(--adsx-text-secondary, #64748b) !important;
}

[data-theme='light'] .adsx-premium .language-toggle-btn .language-toggle-current,
.adsx-premium-light .language-toggle-btn .language-toggle-current {
  color: var(--adsx-text-secondary, #64748b) !important;
}

[data-theme='light'] .adsx-premium .language-toggle-dropdown,
.adsx-premium-light .language-toggle-dropdown {
  background-color: var(--adsx-bg-card, #ffffff) !important;
  border: 1px solid var(--adsx-bg-border, #e2e8f0) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme='light'] .adsx-premium .language-toggle-item,
.adsx-premium-light .language-toggle-item {
  color: var(--adsx-text-primary, #0f172a) !important;
  border-bottom: 1px solid var(--adsx-bg-border, #e2e8f0) !important;
}

[data-theme='light'] .adsx-premium .language-toggle-item:hover,
.adsx-premium-light .language-toggle-item:hover {
  background-color: rgba(139, 92, 246, 0.08) !important;
}

[data-theme='light'] .adsx-premium .language-toggle-item.active,
.adsx-premium-light .language-toggle-item.active {
  background-color: rgba(139, 92, 246, 0.12) !important;
  color: var(--adsx-primary, #8b5cf6) !important;
}

/* ============================================
   BOTÃO "NOTAS GLOBAIS" (modal-notes-button)
   ============================================ */

/* Botão de notas globais - background igual ao ícone do título da página */
[data-theme='dark'] #modal-notes-button,
[data-theme='dark'] #modal-notes-button.icon-button,
[data-theme='dark'] #modal-notes-button.floating-button,
.adsx-premium #modal-notes-button,
.adsx-premium #modal-notes-button.icon-button,
.adsx-premium #modal-notes-button.floating-button {
  background-color: rgba(139, 92, 246, 0.2) !important; /* bg-purple-500/20 - mesmo do miner-page-title-icon */
  border: none !important;
  box-shadow: none !important;
  padding: 12px !important; /* p-1.5 - mesmo padding do miner-page-title-icon */
  border-radius: 4px !important; /* rounded - mesmo border-radius */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  min-height: 40px !important;
  /* Posicionamento fixo */
  top: 100px !important;
  right: 35px !important;
}

/* Esconder qualquer texto dentro do botão */
[data-theme='dark'] #modal-notes-button *:not(.material-symbols-outlined),
[data-theme='dark'] #modal-notes-button i:not(.material-symbols-outlined),
[data-theme='dark'] #modal-notes-button span:not(.material-symbols-outlined),
.adsx-premium #modal-notes-button *:not(.material-symbols-outlined),
.adsx-premium #modal-notes-button i:not(.material-symbols-outlined),
.adsx-premium #modal-notes-button span:not(.material-symbols-outlined) {
  display: none !important;
}

/* Ícone edit_note - cor primária */
[data-theme='dark'] #modal-notes-button .material-symbols-outlined,
.adsx-premium #modal-notes-button .material-symbols-outlined {
  color: var(--adsx-primary-light, #a78bfa) !important; /* Cor primária clara para o ícone */
  font-size: 1.5rem !important;
  display: inline-flex !important;
}

[data-theme='dark'] #modal-notes-button:hover,
.adsx-premium #modal-notes-button:hover {
  background-color: rgba(139, 92, 246, 0.3) !important; /* Background mais escuro no hover */
}

[data-theme='dark'] #modal-notes-button:hover .material-symbols-outlined,
.adsx-premium #modal-notes-button:hover .material-symbols-outlined {
  color: var(--adsx-primary-light, #a78bfa) !important; /* Mantém cor primária clara no hover */
}

[data-theme='dark'] #modal-notes-button:active,
.adsx-premium #modal-notes-button:active {
  background-color: rgba(139, 92, 246, 0.4) !important;
}

[data-theme='dark'] #modal-notes-button:focus,
.adsx-premium #modal-notes-button:focus {
  outline: 2px solid var(--adsx-primary-light, #a78bfa) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ============================================
   BOTÃO "NOTAS DO PRODUTO" (product-notes-button)
   ============================================ */

/* Botão de notas do produto - background igual ao ícone do título da página */
[data-theme='dark'] #product-notes-button,
[data-theme='dark'] #product-notes-button.icon-button,
[data-theme='dark'] #product-notes-button.floating-button,
.adsx-premium #product-notes-button,
.adsx-premium #product-notes-button.icon-button,
.adsx-premium #product-notes-button.floating-button {
  background-color: rgba(139, 92, 246, 0.2) !important; /* bg-purple-500/20 - mesmo do miner-page-title-icon */
  border: none !important;
  box-shadow: none !important;
  padding: 12px !important; /* p-1.5 - mesmo padding do miner-page-title-icon */
  border-radius: 4px !important; /* rounded - mesmo border-radius */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  min-height: 40px !important;
  /* Posicionamento: ao lado esquerdo do modal-notes-button */
  top: 100px !important; /* Mesma altura do modal-notes-button */
  right: 95px !important; /* 35px (modal-notes-button) + 60px (espaçamento entre botões) */
}

/* Esconder qualquer texto dentro do botão */
[data-theme='dark'] #product-notes-button *:not(.material-symbols-outlined),
[data-theme='dark'] #product-notes-button i:not(.material-symbols-outlined),
[data-theme='dark'] #product-notes-button span:not(.material-symbols-outlined),
.adsx-premium #product-notes-button *:not(.material-symbols-outlined),
.adsx-premium #product-notes-button i:not(.material-symbols-outlined),
.adsx-premium #product-notes-button span:not(.material-symbols-outlined) {
  display: none !important;
}

/* Ícone edit_note - cor primária */
[data-theme='dark'] #product-notes-button .material-symbols-outlined,
.adsx-premium #product-notes-button .material-symbols-outlined {
  color: var(--adsx-primary-light, #a78bfa) !important; /* Cor primária clara para o ícone */
  font-size: 1.5rem !important;
  display: inline-flex !important;
}

[data-theme='dark'] #product-notes-button:hover,
.adsx-premium #product-notes-button:hover {
  background-color: rgba(139, 92, 246, 0.3) !important; /* Background mais escuro no hover */
}

[data-theme='dark'] #product-notes-button:hover .material-symbols-outlined,
.adsx-premium #product-notes-button:hover .material-symbols-outlined {
  color: var(--adsx-primary-light, #a78bfa) !important; /* Mantém cor primária clara no hover */
}

[data-theme='dark'] #product-notes-button:active,
.adsx-premium #product-notes-button:active {
  background-color: rgba(139, 92, 246, 0.4) !important;
}

[data-theme='dark'] #product-notes-button:focus,
.adsx-premium #product-notes-button:focus {
  outline: 2px solid var(--adsx-primary-light, #a78bfa) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ============================================
   BOTÕES PADRÃO - ESTILOS GLOBAIS
   ============================================ */

/* Botões primários padrão - border radius 8px, cores premium */
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .elevated.btn-primary,
.adsx-premium .btn-primary,
.adsx-premium .elevated.btn-primary {
  background-color: var(--adsx-primary, #8b5cf6) !important; /* Roxo primário */
  color: #ffffff !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  border: none !important;
  border-radius: 8px !important; /* Border radius padrão */
  box-shadow: none !important; /* Sem sombra conforme padrão */
  padding: 0.625rem 1.25rem !important; /* Padding adequado */
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; /* Gap entre elementos */
  transition: all 200ms ease-in-out !important;
  min-height: 40px !important;
}

[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .elevated.btn-primary:hover,
.adsx-premium .btn-primary:hover,
.adsx-premium .elevated.btn-primary:hover {
  background-color: var(--adsx-primary-dark, #6d28d9) !important; /* Roxo mais escuro no hover */
  border-color: var(--adsx-primary-dark, #6d28d9) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important; /* Sombra roxa sutil no hover */
}

[data-theme='dark'] .btn-primary:active,
[data-theme='dark'] .elevated.btn-primary:active,
.adsx-premium .btn-primary:active,
.adsx-premium .elevated.btn-primary:active {
  box-shadow: none !important;
}

[data-theme='dark'] .btn-primary:focus,
[data-theme='dark'] .elevated.btn-primary:focus,
.adsx-premium .btn-primary:focus,
.adsx-premium .elevated.btn-primary:focus {
  outline: 2px solid var(--adsx-primary-light, #a78bfa) !important;
  outline-offset: 2px !important;
}

[data-theme='dark'] .btn-primary:disabled,
[data-theme='dark'] .elevated.btn-primary:disabled,
.adsx-premium .btn-primary:disabled,
.adsx-premium .elevated.btn-primary:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Texto dentro dos botões primários */
[data-theme='dark'] .btn-primary span,
[data-theme='dark'] .elevated.btn-primary span,
.adsx-premium .btn-primary span,
.adsx-premium .elevated.btn-primary span {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Ícones dentro dos botões primários */
[data-theme='dark'] .btn-primary i,
[data-theme='dark'] .btn-primary .material-icons,
[data-theme='dark'] .btn-primary .material-symbols-outlined,
[data-theme='dark'] .elevated.btn-primary i,
[data-theme='dark'] .elevated.btn-primary .material-icons,
[data-theme='dark'] .elevated.btn-primary .material-symbols-outlined,
.adsx-premium .btn-primary i,
.adsx-premium .btn-primary .material-icons,
.adsx-premium .btn-primary .material-symbols-outlined,
.adsx-premium .elevated.btn-primary i,
.adsx-premium .elevated.btn-primary .material-icons,
.adsx-premium .elevated.btn-primary .material-symbols-outlined {
  color: #ffffff !important;
  font-size: 1.25rem !important;
}

[data-theme='dark'] .theme-toggle-btn:hover,
.adsx-premium .theme-toggle-btn:hover {
  background-color: var(--adsx-bg-global, #09090b) !important; /* hover:bg-zinc-900 */
  border-color: var(--adsx-bg-border, #27272a) !important;
}

[data-theme='dark'] .theme-toggle-btn:hover .theme-toggle-icon,
[data-theme='dark'] .theme-toggle-btn:hover .material-symbols-outlined,
.adsx-premium .theme-toggle-btn:hover .theme-toggle-icon,
.adsx-premium .theme-toggle-btn:hover .material-symbols-outlined {
  color: var(--adsx-text-primary, #fafafa) !important; /* hover:text-zinc-200 */
}

/* User Circle - mesmo estilo do item selecionado no sidemenu */
[data-theme='dark'] .user-circle,
.adsx-premium .user-circle {
  background-color: rgba(139, 92, 246, 0.1) !important; /* bg-purple-500/10 - mesmo do item ativo */
  border: 1px solid rgba(139, 92, 246, 0.2) !important; /* border-purple-500/20 - mesma borda */
  color: white /* Cor primária roxa - mesma cor do texto do item ativo */
}


[data-theme='dark'] .sidenav-menu a.active,
[data-theme='dark'] .sidenav-menu li.active a,
[data-theme='dark'] .sidenav-menu li a.active,
.adsx-premium .sidenav-menu a.active,
.adsx-premium .sidenav-menu li.active a,
.adsx-premium .sidenav-menu li a.active {
  background-color: rgba(139, 92, 246, 0.1) !important; /* bg-purple-500/10 */
  border: 1px solid rgba(139, 92, 246, 0.2) !important; /* border-purple-500/20 */
  color: var(--adsx-primary, #8b5cf6) !important; /* Cor primária - purple-500/600 */
  border-radius: 8px !important; /* rounded-lg */
  font-weight: 500 !important; /* font-medium */
}

/* Sidebar - texto (span) dos itens ativos com cor primária */
[data-theme='dark'] .sidenav-menu a.active span,
[data-theme='dark'] .sidenav-menu li.active a span,
[data-theme='dark'] .sidenav-menu li a.active span,
.adsx-premium .sidenav-menu a.active span,
.adsx-premium .sidenav-menu li.active a span,
.adsx-premium .sidenav-menu li a.active span {
  color: var(--adsx-primary, #8b5cf6) !important; /* Cor primária - purple-500/600 */
}

/* Sidebar - ícones dos itens ativos também com cor primária */
[data-theme='dark'] .sidenav-menu a.active .material-icons,
[data-theme='dark'] .sidenav-menu a.active .material-symbols-outlined,
[data-theme='dark'] .sidenav-menu a.active i,
[data-theme='dark'] .sidenav-menu a.active .material-icons-outlined,
[data-theme='dark'] .sidenav-menu li.active a .material-icons,
[data-theme='dark'] .sidenav-menu li.active a .material-symbols-outlined,
[data-theme='dark'] .sidenav-menu li.active a i,
[data-theme='dark'] .sidenav-menu li.active a .material-icons-outlined,
[data-theme='dark'] .sidenav-menu li a.active .material-icons,
[data-theme='dark'] .sidenav-menu li a.active .material-symbols-outlined,
[data-theme='dark'] .sidenav-menu li a.active i,
[data-theme='dark'] .sidenav-menu li a.active .material-icons-outlined,
.adsx-premium .sidenav-menu a.active .material-icons,
.adsx-premium .sidenav-menu a.active .material-symbols-outlined,
.adsx-premium .sidenav-menu a.active i,
.adsx-premium .sidenav-menu a.active .material-icons-outlined,
.adsx-premium .sidenav-menu li.active a .material-icons,
.adsx-premium .sidenav-menu li.active a .material-symbols-outlined,
.adsx-premium .sidenav-menu li.active a i,
.adsx-premium .sidenav-menu li.active a .material-icons-outlined,
.adsx-premium .sidenav-menu li a.active .material-icons,
.adsx-premium .sidenav-menu li a.active .material-symbols-outlined,
.adsx-premium .sidenav-menu li a.active i,
.adsx-premium .sidenav-menu li a.active .material-icons-outlined {
  color: var(--adsx-primary, #8b5cf6) !important; /* Cor primária - purple-500/600 */
}

/* ============================================
   SUBMENUS PREMIUM - SidenavMenuAnnounce
   ============================================ */

/* Submenu container */
[data-theme='dark'] .sidenav-submenu,
.adsx-premium .sidenav-submenu {
  list-style: none !important;
  padding-left: 28px !important; /* Alinhado com o texto do item pai */
  margin: 0 !important;
  width: 100% !important;
}

/* Itens de submenu - links (apenas itens INATIVOS) */
[data-theme='dark'] .sidenav-submenu li a:not(.active),
.adsx-premium .sidenav-submenu li a:not(.active) {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important; /* Cinza claro secundário - inativo */
  text-decoration: none !important;
  border-radius: 0 8px 8px 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  white-space: nowrap !important;
  background-color: transparent !important; /* Garantir que itens inativos não tenham background */
}

/* Hover em itens de submenu inativos */
[data-theme='dark'] .sidenav-submenu li a:not(.active):hover,
.adsx-premium .sidenav-submenu li a:not(.active):hover {
  background-color: var(--adsx-bg-global, #09090b) !important; /* hover:bg-zinc-900 */
  color: var(--adsx-text-primary, #fafafa) !important; /* hover:text-zinc-200 */
}

/* Item de submenu ativo - APENAS o item com classe .active */
[data-theme='dark'] .sidenav-submenu li a.active,
.adsx-premium .sidenav-submenu li a.active {
  background-color: rgba(139, 92, 246, 0.1) !important; /* bg-purple-500/10 */
  border: 1px solid rgba(139, 92, 246, 0.2) !important; /* border-purple-500/20 */
  color: var(--adsx-primary, #8b5cf6) !important; /* Cor primária - purple-500/600 */
  border-radius: 8px !important; /* rounded-lg */
  font-weight: 500 !important; /* font-medium */
}

/* Garantir que itens do submenu SEM a classe .active não tenham background */
[data-theme='dark'] .sidenav-submenu li a:not(.active),
.adsx-premium .sidenav-submenu li a:not(.active) {
  background-color: transparent !important;
}

/* Menu item com submenu - item pai */
[data-theme='dark'] .menu-item-with-submenu > a,
.adsx-premium .menu-item-with-submenu > a {
  position: relative !important;
  width: 100% !important;
}

/* Menu item com submenu ativo - item pai */
[data-theme='dark'] .menu-item-with-submenu.active > a,
.adsx-premium .menu-item-with-submenu.active > a {
  background-color: rgba(139, 92, 246, 0.1) !important; /* bg-purple-500/10 */
  border: 1px solid rgba(139, 92, 246, 0.2) !important; /* border-purple-500/20 */
  color: var(--adsx-primary, #8b5cf6) !important; /* Cor primária */
  border-radius: 8px !important;
  font-weight: 500 !important;
}

/* Menu toggle - hover */
[data-theme='dark'] .menu-toggle:hover,
.adsx-premium .menu-toggle:hover {
  background-color: var(--adsx-bg-global, #09090b) !important; /* hover:bg-zinc-900 */
  color: var(--adsx-text-primary, #fafafa) !important; /* hover:text-zinc-200 */
}

/* Indicador de submenu (expand_more/expand_less) */
[data-theme='dark'] .submenu-indicator,
.adsx-premium .submenu-indicator {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 20px !important;
  transition: transform 0.3s ease !important;
  color: var(--adsx-text-tertiary, #71717a) !important; /* Cinza médio para indicador inativo */
}

/* Indicador de submenu quando o item pai está ativo */
[data-theme='dark'] .menu-item-with-submenu.active .submenu-indicator,
.adsx-premium .menu-item-with-submenu.active .submenu-indicator {
  color: var(--adsx-primary, #8b5cf6) !important; /* Cor primária quando ativo */
}

/* Hover no indicador de submenu */
[data-theme='dark'] .menu-toggle:hover .submenu-indicator,
.adsx-premium .menu-toggle:hover .submenu-indicator {
  color: var(--adsx-text-primary, #fafafa) !important; /* Cor mais clara no hover */
}

/* Ícones dentro de itens de submenu */
[data-theme='dark'] .sidenav-submenu li a .material-icons,
[data-theme='dark'] .sidenav-submenu li a .material-symbols-outlined,
[data-theme='dark'] .sidenav-submenu li a i,
.adsx-premium .sidenav-submenu li a .material-icons,
.adsx-premium .sidenav-submenu li a .material-symbols-outlined,
.adsx-premium .sidenav-submenu li a i {
  color: inherit !important; /* Herda a cor do link pai */
}

/* Ícones dentro de itens de submenu ativos */
[data-theme='dark'] .sidenav-submenu li a.active .material-icons,
[data-theme='dark'] .sidenav-submenu li a.active .material-symbols-outlined,
[data-theme='dark'] .sidenav-submenu li a.active i,
.adsx-premium .sidenav-submenu li a.active .material-icons,
.adsx-premium .sidenav-submenu li a.active .material-symbols-outlined,
.adsx-premium .sidenav-submenu li a.active i {
  color: var(--adsx-primary, #8b5cf6) !important; /* Cor primária quando ativo */
}

/* Separador (hr) dentro do sidenav-menu */
[data-theme='dark'] .sidenav-menu hr,
.adsx-premium .sidenav-menu hr {
  border: none !important;
  border-top: 1px solid var(--adsx-bg-border, #27272a) !important; /* zinc-800 */
  margin: 1rem 0 !important;
  width: 100% !important;
}

/* ============================================
   ANNOUNCE TITLE COMPONENT PREMIUM
   ============================================ */

/* Título do produto no announce_title_component - cor branca de destaque */
[data-theme='dark'] .announce_title,
[data-theme='dark'] .announce_title strong,
[data-theme='dark'] #announce_title_component,
[data-theme='dark'] #announce_title_component strong,
.adsx-premium .announce_title,
.adsx-premium .announce_title strong,
.adsx-premium #announce_title_component,
.adsx-premium #announce_title_component strong {
  color: var(--adsx-text-bright, #ffffff) !important; /* Branco brilhante de destaque */
}

/* Links dentro do announce_title (title_links) mantêm cor primária */
/* Os links já têm estilos premium aplicados via .redirect_link */
[data-theme='dark'] .announce_title .title_links,
[data-theme='dark'] #announce_title_component .title_links,
.adsx-premium .announce_title .title_links,
.adsx-premium #announce_title_component .title_links {
  /* Estilos aplicados via .redirect_link */
  color: inherit;
}

/* Aplicar cores semânticas em elementos de dados - conforme exemplo */
/* Conversões, Lucro Líquido, ROAS: verde esmeralda */
[data-theme='dark'] .metric-success,
[data-theme='dark'] .profit-value,
[data-theme='dark'] .positive-value,
[data-theme='dark'] .conversion-value,
[data-theme='dark'] .roas-value,
.adsx-premium .metric-success,
.adsx-premium .profit-value,
.adsx-premium .positive-value,
.adsx-premium .conversion-value,
.adsx-premium .roas-value {
  color: #10b981 !important; /* emerald-500 */
}

/* Investimento, CPA: roxo */
[data-theme='dark'] .investment-value,
[data-theme='dark'] .cpa-value,
.adsx-premium .investment-value,
.adsx-premium .cpa-value {
  color: var(--adsx-primary, #8b5cf6) !important; /* purple-600 */
}

/* Cliques, CPC, CTR: branco (texto padrão) */
[data-theme='dark'] .metric-info,
[data-theme='dark'] .clicks-value,
[data-theme='dark'] .volume-value,
[data-theme='dark'] .cpc-value,
[data-theme='dark'] .ctr-value,
.adsx-premium .metric-info,
.adsx-premium .clicks-value,
.adsx-premium .volume-value,
.adsx-premium .cpc-value,
.adsx-premium .ctr-value {
  color: var(--adsx-text-bright, #ffffff) !important; /* white */
}

[data-theme='dark'] .metric-warning,
[data-theme='dark'] .warning-value,
.adsx-premium .metric-warning,
.adsx-premium .warning-value {
  color: var(--adsx-warning, #f59e0b) !important;
}

[data-theme='dark'] .metric-danger,
[data-theme='dark'] .error-value,
[data-theme='dark'] .danger-value,
.adsx-premium .metric-danger,
.adsx-premium .error-value,
.adsx-premium .danger-value {
  color: var(--adsx-danger, #ef4444) !important;
}

/* Textos em cards, tabelas e outros componentes (cinza claro secundário) */
[data-theme='dark'] .dashboard-card,
[data-theme='dark'] .md3-card,
[data-theme='dark'] .domain-card,
[data-theme='dark'] .table,
[data-theme='dark'] .table td,
[data-theme='dark'] .table th,
.adsx-premium .dashboard-card,
.adsx-premium .md3-card,
.adsx-premium .domain-card,
.adsx-premium .table,
.adsx-premium .table td,
.adsx-premium .table th {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Cards de métricas - Título (h3) mantém como está (cor branca brilhante) */
[data-theme='dark'] .card-title h3,
[data-theme='dark'] .summary-card .card-title h3,
[data-theme='dark'] .dashboard-card .card-title h3,
.adsx-premium .card-title h3,
.adsx-premium .summary-card .card-title h3,
.adsx-premium .dashboard-card .card-title h3,
[data-theme='light'] .adsx-premium .summary-card .card-title h3,
.adsx-premium-light .summary-card .card-title h3 {
  color: var(--adsx-text-bright, #ffffff) !important; /* Mantém cor branca brilhante */
}

/* Cards de métricas - Parágrafo (p) abaixo do h3 com cor menos branca */
[data-theme='dark'] .card-title p,
.adsx-premium .card-title p {
  color: var(--adsx-text-tertiary, #71717a) !important; /* Cor menos branca que o h3 */
}

/* Cards de métricas - Valores (card-number) com cor branca do h3 */
[data-theme='dark'] .card-number,
.adsx-premium .card-number,
[data-theme='light'] .adsx-premium .summary-card .card-number,
.adsx-premium-light .summary-card .card-number {
  color: var(--adsx-text-bright, #ffffff) !important; /* Mesma cor branca do h3 */
}

/* Cards de métricas - Conversões, Lucro Líquido e ROAS quando > 0: verde esmeralda */
[data-theme='dark'] .card-number.metric-conversions,
[data-theme='dark'] .card-number.metric-success,
.adsx-premium .card-number.metric-conversions,
.adsx-premium .card-number.metric-success {
  color: var(--adsx-success, #10b981) !important; /* emerald-500 - verde esmeralda */
}

/* Garantir que os valores dentro de .card-number também herdem a cor */
[data-theme='dark'] .card-number .value-number,
[data-theme='dark'] .card-number .value-indicator,
.adsx-premium .card-number .value-number,
.adsx-premium .card-number .value-indicator,
[data-theme='light'] .adsx-premium .summary-card .card-number .value-number,
[data-theme='light'] .adsx-premium .summary-card .card-number .value-indicator,
.adsx-premium-light .summary-card .card-number .value-number,
.adsx-premium-light .summary-card .card-number .value-indicator {
  color: inherit;
}

/* Para Conversões, Lucro Líquido e ROAS quando > 0, aplicar verde também nos elementos internos */
[data-theme='dark'] .card-number.metric-conversions .value-number,
[data-theme='dark'] .card-number.metric-conversions .value-indicator,
[data-theme='dark'] .card-number.metric-success .value-number,
[data-theme='dark'] .card-number.metric-success .value-indicator,
.adsx-premium .card-number.metric-conversions .value-number,
.adsx-premium .card-number.metric-conversions .value-indicator,
.adsx-premium .card-number.metric-success .value-number,
.adsx-premium .card-number.metric-success .value-indicator {
  color: var(--adsx-success, #10b981) !important; /* emerald-500 */
}

/* Cards de métricas - Investimento e CPA quando > 0: cor primária (roxo) */
[data-theme='dark'] .card-number.metric-cost,
[data-theme='dark'] .card-number.metric-cpa,
.adsx-premium .card-number.metric-cost,
.adsx-premium .card-number.metric-cpa {
  color: var(--adsx-primary, #8b5cf6) !important; /* violet-500 - cor primária */
}

/* Para Investimento e CPA quando > 0, aplicar cor primária também nos elementos internos */
[data-theme='dark'] .card-number.metric-cost .value-number,
[data-theme='dark'] .card-number.metric-cost .value-indicator,
[data-theme='dark'] .card-number.metric-cpa .value-number,
[data-theme='dark'] .card-number.metric-cpa .value-indicator,
.adsx-premium .card-number.metric-cost .value-number,
.adsx-premium .card-number.metric-cost .value-indicator,
.adsx-premium .card-number.metric-cpa .value-number,
.adsx-premium .card-number.metric-cpa .value-indicator {
  color: var(--adsx-primary, #8b5cf6) !important; /* violet-500 - cor primária */
}

/* Cards de métricas - Ícones dentro de quadrado com background (sem sombra) */
[data-theme='dark'] .card-icon,
[data-theme='dark'] .summary-card .card-icon,
[data-theme='dark'] .dashboard-card .card-icon,
.adsx-premium .card-icon,
.adsx-premium .summary-card .card-icon,
.adsx-premium .dashboard-card .card-icon {
  background-color: #212125 !important; /* Background do quadrado */
  box-shadow: none !important; /* Sem sombra */
  border-radius: 8px !important; /* Bordas levemente arredondadas para quadrado */
}

/* Premium Light - Ícones dos cards com maior contraste */
[data-theme='light'] .adsx-premium .card-icon,
[data-theme='light'] .adsx-premium .summary-card .card-icon,
[data-theme='light'] .adsx-premium .dashboard-card .card-icon,
.adsx-premium-light .card-icon,
.adsx-premium-light .summary-card .card-icon,
.adsx-premium-light .dashboard-card .card-icon {
  background-color: var(--adsx-bg-detail, #f4f4f5) !important;
  color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.card-icon .material-symbols-outlined,
.card-icon .material-icons {
  color: inherit;
}

/* Cabeçalhos de tabela - cor simples, maiúsculas e fonte menor */
[data-theme='dark'] .table th,
[data-theme='dark'] .table thead th,
[data-theme='dark'] .table-elevated th,
[data-theme='dark'] .table-elevated thead th,
.adsx-premium .table th,
.adsx-premium .table thead th,
.adsx-premium .table-elevated th,
.adsx-premium .table-elevated thead th {
  color: var(--adsx-text-tertiary, #71717a) !important; /* Cinza médio - cor simples */
  text-transform: uppercase !important; /* Totalmente em maiúsculas */
  font-size: 0.75rem !important; /* 12px - menor que o texto padrão (0.875rem = 14px) */
  font-weight: 500 !important; /* Medium weight */
  letter-spacing: 0.05em !important; /* Espaçamento entre letras para melhor legibilidade em maiúsculas */
}

/* Nome do usuário e elementos do header - branco brilhante */
[data-theme='dark'] .user-name,
[data-theme='dark'] .welcome-message,
[data-theme='dark'] .header-user-name,
.adsx-premium .user-name,
.adsx-premium .welcome-message,
.adsx-premium .header-user-name {
  color: var(--adsx-text-bright, #ffffff);
}

/* Labels de formulários e campos - cinza claro secundário */
[data-theme='dark'] .form-label,
[data-theme='dark'] .field-label,
[data-theme='dark'] .input-label,
.adsx-premium .form-label,
.adsx-premium .field-label,
.adsx-premium .input-label {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Label "Conta" - cor primária (purple-400 no dark mode, conforme exemplo) */
[data-theme='dark'] label[for="google-account-selector"],
.adsx-premium label[for="google-account-selector"] {
  color: var(--adsx-primary-light, #a78bfa) !important; /* purple-400 (violet-400) - conforme exemplo */
}

/* Textos de explicação e ajuda - cinza claro secundário */
[data-theme='dark'] .explanation,
[data-theme='dark'] .help-text,
[data-theme='dark'] .info-text,
.adsx-premium .explanation,
.adsx-premium .help-text,
.adsx-premium .info-text {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Categorias e seções na sidebar - cinza mais sutil */
[data-theme='dark'] .sidenav-category,
[data-theme='dark'] .menu-category,
.adsx-premium .sidenav-category,
.adsx-premium .menu-category {
  color: var(--adsx-text-muted, #52525b);
}

/* Textos secundários em cards e descrições */
[data-theme='dark'] .card-description,
[data-theme='dark'] .card-subtitle,
[data-theme='dark'] .explanation,
[data-theme='dark'] .subtitle,
.adsx-premium .card-description,
.adsx-premium .card-subtitle,
.adsx-premium .explanation,
.adsx-premium .subtitle {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* ============================================
   BOTÕES DE FILTRO DE PERÍODO PREMIUM
   ============================================ */

/* Botão de filtro de período - estado normal */
[data-theme='dark'] .period-filter-button,
.adsx-premium .period-filter-button {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border: var(--adsx-border-default, 1px solid #27272a) !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
}

[data-theme='dark'] .period-filter-button:hover,
.adsx-premium .period-filter-button:hover {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
}

/* Botão de filtro de período - estado ativo (conforme exemplo) */
[data-theme='dark'] .period-filter-button.active,
.adsx-premium .period-filter-button.active {
  background-color: var(--adsx-primary, #8b5cf6) !important; /* purple-600 */
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3), 0 4px 6px -2px rgba(139, 92, 246, 0.2) !important; /* shadow-lg shadow-purple-900/30 */
}

[data-theme='dark'] .period-filter-button.active:hover,
.adsx-premium .period-filter-button.active:hover {
  background-color: var(--adsx-primary-dark, #6d28d9) !important;
  border-color: var(--adsx-primary-dark, #6d28d9) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4), 0 4px 6px -2px rgba(139, 92, 246, 0.3) !important;
}

/* ============================================
   BOTÃO PRINCIPAL (CTA PRINCIPAL) - principal-btn
   Baseado no estilo period-filter-button.active
   ============================================ */

/* Botão principal - estado padrão */
[data-theme='dark'] .principal-btn,
[data-theme='dark'] button.principal-btn,
[data-theme='dark'] .btn.principal-btn,
.adsx-premium .principal-btn,
.adsx-premium button.principal-btn,
.adsx-premium .btn.principal-btn {
  background-color: var(--adsx-primary, #8b5cf6) !important; /* purple-500 - roxo premium */
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3), 0 4px 6px -2px rgba(139, 92, 246, 0.2) !important; /* shadow-lg shadow-purple-900/30 */
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
}

/* Botão principal - hover */
[data-theme='dark'] .principal-btn:hover,
[data-theme='dark'] button.principal-btn:hover,
[data-theme='dark'] .btn.principal-btn:hover,
.adsx-premium .principal-btn:hover,
.adsx-premium button.principal-btn:hover,
.adsx-premium .btn.principal-btn:hover {
  background-color: var(--adsx-primary-dark, #6d28d9) !important; /* purple-700 - roxo mais escuro */
  border-color: var(--adsx-primary-dark, #6d28d9) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4), 0 4px 6px -2px rgba(139, 92, 246, 0.3) !important; /* Sombra mais intensa no hover */
}

/* Botão principal - estado ativo/focado */
[data-theme='dark'] .principal-btn:active,
[data-theme='dark'] .principal-btn:focus,
[data-theme='dark'] button.principal-btn:active,
[data-theme='dark'] button.principal-btn:focus,
[data-theme='dark'] .btn.principal-btn:active,
[data-theme='dark'] .btn.principal-btn:focus,
.adsx-premium .principal-btn:active,
.adsx-premium .principal-btn:focus,
.adsx-premium button.principal-btn:active,
.adsx-premium button.principal-btn:focus,
.adsx-premium .btn.principal-btn:active,
.adsx-premium .btn.principal-btn:focus {
  background-color: var(--adsx-primary-dark, #6d28d9) !important;
  border-color: var(--adsx-primary-dark, #6d28d9) !important;
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4), 0 4px 6px -2px rgba(139, 92, 246, 0.3) !important;
  outline: none !important;
}

/* Botão principal - desabilitado */
[data-theme='dark'] .principal-btn:disabled,
[data-theme='dark'] button.principal-btn:disabled,
[data-theme='dark'] .btn.principal-btn:disabled,
.adsx-premium .principal-btn:disabled,
.adsx-premium button.principal-btn:disabled,
.adsx-premium .btn.principal-btn:disabled {
  background-color: var(--adsx-bg-border, #27272a) !important;
  border-color: var(--adsx-bg-border, #27272a) !important;
  color: var(--adsx-text-muted, #52525b) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* ============================================
   GIFT CONTAINER PREMIUM
   ============================================ */

/* Container do gift no header - estilo premium */
[data-theme='dark'] .gift-container,
[data-theme='dark'] .gift,
.adsx-premium .gift-container,
.adsx-premium .gift {
  background-color: rgba(139, 92, 246, 0.1) !important; /* Fundo roxo translúcido */
  border: 1px solid rgba(139, 92, 246, 0.2) !important; /* Borda roxa translúcida */
  border-radius: 8px !important;
  padding: 8px 16px !important;
  backdrop-filter: blur(4px);
  transition: all var(--adsx-transition-base, 200ms ease-in-out);
}

[data-theme='dark'] .gift:hover,
.adsx-premium .gift:hover {
  background-color: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

/* Link do gift - texto branco brilhante */
[data-theme='dark'] .gift-link,
[data-theme='dark'] .gift a,
.adsx-premium .gift-link,
.adsx-premium .gift a {
  color: var(--adsx-text-bright, #ffffff) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.5px !important;
  transition: color var(--adsx-transition-base, 200ms ease-in-out);
}

[data-theme='dark'] .gift-link:hover,
[data-theme='dark'] .gift a:hover,
.adsx-premium .gift-link:hover,
.adsx-premium .gift a:hover {
  color: var(--adsx-primary-light, #a78bfa) !important;
}

/* Gift countdown - estilo premium */
[data-theme='dark'] .gift-countdown,
.adsx-premium .gift-countdown {
  background-color: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  font-size: 0.875rem !important;
  backdrop-filter: blur(4px);
}

[data-theme='dark'] .gift-countdown > strong,
.adsx-premium .gift-countdown > strong {
  color: var(--adsx-text-bright, #ffffff) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* User menu container */
[data-theme='dark'] .user-menu,
.adsx-premium .user-menu {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  position: relative !important;
}

/* Dropdown menu do usuário */
[data-theme='dark'] .user-menu .dropdown-menu,
.adsx-premium .user-menu .dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  background-color: var(--adsx-bg-card, #18181b) !important;
  min-width: 100px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  z-index: 1000 !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
}

[data-theme='dark'] .user-menu .dropdown-menu.show,
.adsx-premium .user-menu .dropdown-menu.show {
  display: block !important;
}

[data-theme='dark'] .user-menu .dropdown-item,
.adsx-premium .user-menu .dropdown-item {
  padding: 10px 15px !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--adsx-bg-border, #27272a) !important;
  transition: background-color 0.2s ease;
}

[data-theme='dark'] .user-menu .dropdown-item:hover,
.adsx-premium .user-menu .dropdown-item:hover {
  background-color: rgba(139, 92, 246, 0.1) !important;
}

[data-theme='dark'] .user-menu .dropdown-item:last-child,
.adsx-premium .user-menu .dropdown-item:last-child {
  border-bottom: none !important;
}

/* Dropdown arrow na topbar - mesmo ícone dos droplists */
[data-theme='dark'] .floating-header .dropdown-arrow,
[data-theme='dark'] .user-menu .dropdown-arrow,
[data-theme='dark'] .user-menu .material-icons.dropdown-arrow,
[data-theme='dark'] .user-menu .material-symbols-outlined.dropdown-arrow,
[data-theme='dark'] .user-menu i.material-icons.dropdown-arrow,
[data-theme='dark'] .user-menu span.material-icons.dropdown-arrow,
[data-theme='dark'] .user-menu span.material-symbols-outlined.dropdown-arrow,
.adsx-premium .floating-header .dropdown-arrow,
.adsx-premium .user-menu .dropdown-arrow,
.adsx-premium .user-menu .material-icons.dropdown-arrow,
.adsx-premium .user-menu .material-symbols-outlined.dropdown-arrow,
.adsx-premium .user-menu i.material-icons.dropdown-arrow,
.adsx-premium .user-menu span.material-icons.dropdown-arrow,
.adsx-premium .user-menu span.material-symbols-outlined.dropdown-arrow {
  color: var(--adsx-text-secondary, #a1a1aa) !important; /* Mesma cor dos itens inativos */
  font-size: 20px !important; /* Tamanho padrão do Material Icons */
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.3s ease;
  user-select: none;
  font-family: 'Material Icons' !important; /* Garante que use Material Icons */
}

/* Font variation settings apenas para Material Symbols */
[data-theme='dark'] .user-menu .material-symbols-outlined.dropdown-arrow,
[data-theme='dark'] .user-menu span.material-symbols-outlined.dropdown-arrow,
.adsx-premium .user-menu .material-symbols-outlined.dropdown-arrow,
.adsx-premium .user-menu span.material-symbols-outlined.dropdown-arrow {
  font-family: 'Material Symbols Outlined' !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

[data-theme='dark'] .floating-header .dropdown-arrow:hover,
[data-theme='dark'] .user-menu .dropdown-arrow:hover,
[data-theme='dark'] .user-menu .material-icons.dropdown-arrow:hover,
[data-theme='dark'] .user-menu .material-symbols-outlined.dropdown-arrow:hover,
[data-theme='dark'] .user-menu i.material-icons.dropdown-arrow:hover,
[data-theme='dark'] .user-menu span.material-icons.dropdown-arrow:hover,
[data-theme='dark'] .user-menu span.material-symbols-outlined.dropdown-arrow:hover,
.adsx-premium .floating-header .dropdown-arrow:hover,
.adsx-premium .user-menu .dropdown-arrow:hover,
.adsx-premium .user-menu .material-icons.dropdown-arrow:hover,
.adsx-premium .user-menu .material-symbols-outlined.dropdown-arrow:hover,
.adsx-premium .user-menu i.material-icons.dropdown-arrow:hover,
.adsx-premium .user-menu span.material-icons.dropdown-arrow:hover,
.adsx-premium .user-menu span.material-symbols-outlined.dropdown-arrow:hover {
  color: var(--adsx-text-primary, #fafafa) !important; /* Cor mais clara no hover */
}

/* ============================================
   ESTILOS PARA PÁGINA DE DOMÍNIOS (MINER HOSTING)
   ============================================ */

/* Título da seção de domínios */
[data-theme='dark'] .presell-pages-title,
[data-theme='dark'] .presell-pages-type-itens h2,
[data-theme='dark'] .presell-pages-type-itens .presell-pages-title,
.adsx-premium .presell-pages-title,
.adsx-premium .presell-pages-type-itens h2,
.adsx-premium .presell-pages-type-itens .presell-pages-title,
[data-theme='dark'] .ads-pages-type-itens h2,
.adsx-premium .ads-pages-type-itens h2 {
  display: flex !important;
  gap: 0.7rem !important;
  color: var(--adsx-text-bright, #ffffff) !important; /* Branco brilhante como outros H2 */
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Indicador de limite de domínios dentro do H2 */
[data-theme='dark'] .presell-pages-title .domain-limit-indicator,
[data-theme='dark'] .presell-pages-type-itens .domain-limit-indicator,
[data-theme='dark'] .domain-limit-indicator,
.adsx-premium .presell-pages-title .domain-limit-indicator,
.adsx-premium .presell-pages-type-itens .domain-limit-indicator,
.adsx-premium .domain-limit-indicator {
  color: var(--adsx-text-bright, #ffffff) !important; /* Branco brilhante */
}

/* Botão de adicionar domínio */
[data-theme='dark'] .add-domain-button,
.adsx-premium .add-domain-button {
  width: 100% !important;
}

/* Container de cards de domínio - remover margin-top inline */
[data-theme='dark'] .domain-cards-row,
.adsx-premium .domain-cards-row {
  margin-top: 2.5rem !important; /* 40px */
}

/* Espaçamento específico para link na seção presell-pages-type */
[data-theme='dark'] .presell-pages-type .redirect_link,
.adsx-premium .presell-pages-type .redirect_link {
  margin-top: 0.5rem !important;
}

/* Container principal - alinhamento padrão */
[data-theme='dark'] .main-container,
.adsx-premium .main-container {
  text-align: left;
}

/* Seção presell-pages-type - alinhamento à esquerda */
[data-theme='dark'] .presell-pages-type,
.adsx-premium .presell-pages-type {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  text-align: left !important;
}

/* Seção ads-pages-type - alinhamento à esquerda (mesmo estilo de presell-pages-type) */
[data-theme='dark'] .ads-pages-type,
.adsx-premium .ads-pages-type {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  text-align: left !important;
}

/* Títulos e ícones da seção presell-pages */
[data-theme='dark'] .presell-pages-type .title-icons,
.adsx-premium .presell-pages-type .title-icons {
  color: var(--adsx-primary-light, #a78bfa) !important;
}

/* Títulos e ícones da seção ads-pages */
[data-theme='dark'] .ads-pages-type .title-icons,
.adsx-premium .ads-pages-type .title-icons {
  color: var(--adsx-primary-light, #a78bfa) !important;
}

/* ============================================
   ESTILOS GERAIS PARA TÍTULOS H2 COM ÍCONES (PREMIUM)
   ============================================ */

/* Ícones de título (title-icons) - estilo geral */
[data-theme='dark'] .title-icons,
.adsx-premium .title-icons {
  font-size: 1.3rem !important;
  color: var(--adsx-primary-light, #a78bfa) !important; /* purple-400 - Roxo claro */
}

/* Títulos H2 em containers com ícones */
[data-theme='dark'] .faq-title-container h2,
[data-theme='dark'] .section-title-container h2,
.adsx-premium .faq-title-container h2,
.adsx-premium .section-title-container h2 {
  margin: 0 !important;
  color: var(--adsx-text-bright, #ffffff) !important; /* Branco brilhante */
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

/* Status de domínio online - texto e ícone verdes */
[data-theme='dark'] .domain-card__status--online,
[data-theme='dark'] .domain-card__status--online .domain-card__status-icon,
[data-theme='dark'] .domain-card__status--online .domain-card__status-text,
[data-theme='dark'] .domain-card__status--online .domain-status,
.adsx-premium .domain-card__status--online,
.adsx-premium .domain-card__status--online .domain-card__status-icon,
.adsx-premium .domain-card__status--online .domain-card__status-text,
.adsx-premium .domain-card__status--online .domain-status {
  color: var(--adsx-success, #10b981) !important; /* Verde esmeralda */
}

/* ============================================
   BOTÕES DOS CARDS DE DOMÍNIO (PREMIUM)
   ============================================ */

/* Container de ações dos cards de domínio */
[data-theme='dark'] .domain-card__actions,
.adsx-premium .domain-card__actions {
  border-top-color: var(--adsx-bg-border, #27272a) !important;
  gap: 0.75rem !important;
  padding-top: 1rem !important;
}

/* Botões btn-white dentro dos cards de domínio */
[data-theme='dark'] .domain-card__actions .btn-white,
[data-theme='dark'] .domain-card__actions .btn-white.btn,
.adsx-premium .domain-card__actions .btn-white,
.adsx-premium .domain-card__actions .btn-white.btn {
  background-color: var(--adsx-bg-card, #18181b) !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
}

/* Hover dos botões btn-white nos cards de domínio */
[data-theme='dark'] .domain-card__actions .btn-white:hover,
[data-theme='dark'] .domain-card__actions .btn-white.btn:hover,
.adsx-premium .domain-card__actions .btn-white:hover,
.adsx-premium .domain-card__actions .btn-white.btn:hover {
  background-color: var(--adsx-bg-border, #27272a) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
}

/* Botão de remover (icon-button-danger) nos cards de domínio */
[data-theme='dark'] .domain-card__actions .icon-button-danger,
[data-theme='dark'] .domain-card__actions .elevated.icon-button-danger,
.adsx-premium .domain-card__actions .icon-button-danger,
.adsx-premium .domain-card__actions .elevated.icon-button-danger {
  background-color: transparent !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important; /* Mesma cor do texto dos botões ao lado */
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hover do botão de remover */
[data-theme='dark'] .domain-card__actions .icon-button-danger:hover,
[data-theme='dark'] .domain-card__actions .elevated.icon-button-danger:hover,
.adsx-premium .domain-card__actions .icon-button-danger:hover,
.adsx-premium .domain-card__actions .elevated.icon-button-danger:hover {
  background-color: var(--adsx-bg-border, #27272a) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: var(--adsx-text-primary, #fafafa) !important; /* Mesma cor do texto no hover dos botões ao lado */
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
}

/* Ícones dentro dos botões de remover */
[data-theme='dark'] .domain-card__actions .icon-button-danger i,
[data-theme='dark'] .domain-card__actions .icon-button-danger .material-icons,
[data-theme='dark'] .domain-card__actions .icon-button-danger .material-symbols,
.adsx-premium .domain-card__actions .icon-button-danger i,
.adsx-premium .domain-card__actions .icon-button-danger .material-icons,
.adsx-premium .domain-card__actions .icon-button-danger .material-symbols {
  color: inherit !important;
}

/* Espaçamento e tamanho dos botões nos cards */
[data-theme='dark'] .domain-card__actions button,
.adsx-premium .domain-card__actions button {
  min-height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
}

/* Botão icon-button (remover) - tamanho fixo */
[data-theme='dark'] .domain-card__actions .icon-button,
.adsx-premium .domain-card__actions .icon-button {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================
   NAME SERVERS NOS CARDS DE DOMÍNIO (PREMIUM)
   ============================================ */

/* Container de name servers */
[data-theme='dark'] .domain-card__nameservers,
.adsx-premium .domain-card__nameservers {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 1rem 0 !important;
}

/* Título "Name Servers" - roxo brilhante, centralizado, bold */
[data-theme='dark'] .domain-card__nameservers-title,
.adsx-premium .domain-card__nameservers-title {
  color: var(--adsx-primary, #8b5cf6) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
}

/* Lista de name servers */
[data-theme='dark'] .domain-card__nameservers-list,
.adsx-premium .domain-card__nameservers-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
}

/* Item de name server - campo escuro com bordas arredondadas */
[data-theme='dark'] .domain-card__nameserver-item,
.adsx-premium .domain-card__nameserver-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: var(--adsx-bg-border, #27272a) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
  font-family: monospace !important;
  font-size: 0.875rem !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hover no item de name server */
[data-theme='dark'] .domain-card__nameserver-item:hover,
.adsx-premium .domain-card__nameserver-item:hover {
  border-color: var(--adsx-primary, #8b5cf6) !important;
  background-color: rgba(139, 92, 246, 0.1) !important;
}

/* Texto do name server */
[data-theme='dark'] .domain-card__nameserver-item span,
.adsx-premium .domain-card__nameserver-item span {
  color: var(--adsx-text-primary, #fafafa) !important;
  flex: 1 !important;
  word-break: break-all !important;
}

/* Ícone de copiar - branco */
[data-theme='dark'] .domain-card__nameserver-copy,
[data-theme='dark'] .domain-card__nameserver-item .domain-card__nameserver-copy,
.adsx-premium .domain-card__nameserver-copy,
.adsx-premium .domain-card__nameserver-item .domain-card__nameserver-copy {
  color: var(--adsx-text-bright, #ffffff) !important;
  font-size: 1.125rem !important;
  padding: 0.25rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
  margin-left: 0.5rem !important;
}

/* Hover no ícone de copiar */
[data-theme='dark'] .domain-card__nameserver-copy:hover,
[data-theme='dark'] .domain-card__nameserver-item .domain-card__nameserver-copy:hover,
.adsx-premium .domain-card__nameserver-copy:hover,
.adsx-premium .domain-card__nameserver-item .domain-card__nameserver-copy:hover {
  color: var(--adsx-primary-light, #a78bfa) !important;
  transform: scale(1.1) !important;
}

/* Mensagem de propagação */
[data-theme='dark'] .domain-card__propagation-message,
.adsx-premium .domain-card__propagation-message {
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  margin-top: 0.5rem !important;
}

[data-theme='dark'] .domain-card__propagation-message a,
.adsx-premium .domain-card__propagation-message a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  vertical-align: baseline !important;
}

/* Links dentro da mensagem de propagação - herdam estilos gerais de redirect_link */

/* ============================================
   PRESELL CARDS PREMIUM
   ============================================ */

/* Cards de Presell - usar estrutura de campaign-card */
[data-theme='dark'] .presell-card.dashboard-card,
[data-theme='dark'] .presell-card.campaign-card,
.adsx-premium .presell-card.dashboard-card,
.adsx-premium .presell-card.campaign-card {
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
  border-radius: 16px;
  padding: 24px;
  min-width: 405px;
  box-sizing: border-box;
}

/* Header do card de presell */
[data-theme='dark'] .presell-card__header.campaign-card-header,
.adsx-premium .presell-card__header.campaign-card-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: var(--adsx-border-default, 1px solid #27272a);
}

/* Título do card de presell */
[data-theme='dark'] .presell-card__title.campaign-name,
.adsx-premium .presell-card__title.campaign-name {
  color: var(--adsx-text-bright, #ffffff);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

[data-theme='dark'] .presell-card__title.campaign-name a,
.adsx-premium .presell-card__title.campaign-name a {
  color: var(--adsx-text-bright, #ffffff);
  text-decoration: none;
  transition: color 0.2s ease;
}

[data-theme='dark'] .presell-card__title.campaign-name a:hover,
.adsx-premium .presell-card__title.campaign-name a:hover {
  color: var(--adsx-primary-light, #a78bfa);
}

/* Ícone do tipo de presell */
[data-theme='dark'] .presell-card__type-icon,
.adsx-premium .presell-card__type-icon {
  color: var(--adsx-primary, #8b5cf6);
  margin-right: 8px;
  vertical-align: middle;
}

/* Separador do header */
[data-theme='dark'] .presell-card__header-separator,
.adsx-premium .presell-card__header-separator {
  margin: 0 8px;
  color: var(--adsx-text-tertiary, #71717a);
}

/* Grid de métricas do presell - 2 colunas fixas */
[data-theme='dark'] .presell-card__info.campaign-metrics-grid,
.adsx-premium .presell-card__info.campaign-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

/* Responsivo: 1 coluna em telas menores */
@media (max-width: 768px) {
  [data-theme='dark'] .presell-card__info.campaign-metrics-grid,
  .adsx-premium .presell-card__info.campaign-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Item de informação do presell */
[data-theme='dark'] .presell-card__info-item.metric-item,
.adsx-premium .presell-card__info-item.metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label do item de informação */
[data-theme='dark'] .presell-card__info-item-label.metric-label,
.adsx-premium .presell-card__info-item-label.metric-label {
  color: var(--adsx-text-secondary, #a1a1aa);
  font-size: 0.875rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Valor do item de informação */
[data-theme='dark'] .presell-card__info-item-value.metric-value,
.adsx-premium .presell-card__info-item-value.metric-value {
  color: var(--adsx-text-bright, #ffffff);
  font-size: 1rem;
  font-weight: 500;
}

/* Tracking habilitado - verde */
[data-theme='dark'] .presell-card__tracking-enabled.metric-success,
.adsx-premium .presell-card__tracking-enabled.metric-success {
  color: var(--adsx-success, #10b981) !important;
}

/* Tracking desabilitado */
[data-theme='dark'] .presell-card__tracking-disabled,
.adsx-premium .presell-card__tracking-disabled {
  color: var(--adsx-text-tertiary, #71717a);
}

/* Ações do card de presell - igual aos cards de domínio */
[data-theme='dark'] .presell-card__actions.domain-card__actions,
.adsx-premium .presell-card__actions.domain-card__actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: var(--adsx-border-default, 1px solid #27272a);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

[data-theme='dark'] .presell-card__actions.domain-card__actions button,
[data-theme='dark'] .presell-card__actions.domain-card__actions a,
.adsx-premium .presell-card__actions.domain-card__actions button,
.adsx-premium .presell-card__actions.domain-card__actions a {
  flex: 1;
  min-width: fit-content;
  font-size: 0.875rem;
  white-space: nowrap;
}

[data-theme='dark'] .presell-card__actions.domain-card__actions .icon-button,
.adsx-premium .presell-card__actions.domain-card__actions .icon-button {
  flex: 0 0 auto;
}

/* Grid de cards de domain */
[data-theme='dark'] .domain-cards-grid,
.adsx-premium .domain-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(405px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

[data-theme='dark'] .domain-cards-grid > *,
.adsx-premium .domain-cards-grid > * {
  min-width: 405px;
  max-width: 100%;
}

/* Grid de cards de presell */
[data-theme='dark'] .presell-cards-grid,
.adsx-premium .presell-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(405px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

[data-theme='dark'] .presell-cards-grid > *,
.adsx-premium .presell-cards-grid > * {
  min-width: 405px;
  max-width: 100%;
}

/* Ícones dos itens de informação do presell */
[data-theme='dark'] .presell-card__info-item-icon,
.adsx-premium .presell-card__info-item-icon {
  color: var(--adsx-text-tertiary, #71717a);
  font-size: 1rem;
  vertical-align: middle;
  display: inline-block;
}

/* ============================================
   LOADER CONTAINER (PREMIUM)
   ============================================ */
.loader-container {
  text-align: center;
  padding: 10px;
}

/* ============================================
   FORM ROW ALIGNMENT (PREMIUM)
   ============================================ */
/* Alinha elementos do form-row ao final para que botões fiquem alinhados com inputs/selects */
[data-theme='dark'] .form-row,
.adsx-premium .form-row {
  align-items: flex-end;
}

/* Garante que form-group-50 com botão alinhe ao final */
[data-theme='dark'] .form-group-50:has(button),
.adsx-premium .form-group-50:has(button) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Fallback para navegadores que não suportam :has() */
[data-theme='dark'] .form-group-50.form-group-button,
.adsx-premium .form-group-50.form-group-button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Label espaçador invisível para alinhar botões com inputs/selects */
[data-theme='dark'] .label-spacer,
.adsx-premium .label-spacer {
  visibility: hidden;
  display: block;
  font-weight: 500;
  color: var(--color-gray);
  margin-bottom: 10px;
  height: auto;
  line-height: normal;
}

/* Botão com largura total */
[data-theme='dark'] .btn-full-width,
.adsx-premium .btn-full-width {
  width: 100%;
}

/* ============================================
   BOTÕES BTN-WHITE (PREMIUM)
   ============================================ */
/* Botões btn-white gerais no layout premium */
[data-theme='dark'] .btn-white,
[data-theme='dark'] .btn.btn-white,
.adsx-premium .btn-white,
.adsx-premium .btn.btn-white {
  background-color: var(--adsx-bg-card, #18181b) !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  min-height: 2.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

/* Hover dos botões btn-white no layout premium */
[data-theme='dark'] .btn-white:hover,
[data-theme='dark'] .btn.btn-white:hover,
.adsx-premium .btn-white:hover,
.adsx-premium .btn.btn-white:hover {
  background-color: var(--adsx-bg-border, #27272a) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
}

/* Focus dos botões btn-white no layout premium */
[data-theme='dark'] .btn-white:focus,
[data-theme='dark'] .btn.btn-white:focus,
.adsx-premium .btn-white:focus,
.adsx-premium .btn.btn-white:focus {
  outline: none !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

/* Disabled dos botões btn-white no layout premium */
[data-theme='dark'] .btn-white:disabled,
[data-theme='dark'] .btn.btn-white:disabled,
.adsx-premium .btn-white:disabled,
.adsx-premium .btn.btn-white:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ============================================
   CUSTOM SELECT BUTTON (PREMIUM)
   ============================================ */
/* Custom select button com estilo btn-white */
[data-theme='dark'] .custom-select-button,
.adsx-premium .custom-select-button {
  background-color: var(--adsx-bg-card, #18181b) !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  min-height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}

[data-theme='dark'] .custom-select-button:hover,
.adsx-premium .custom-select-button:hover {
  background-color: var(--adsx-bg-border, #27272a) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
}

[data-theme='dark'] .custom-select-button:focus,
.adsx-premium .custom-select-button:focus {
  outline: none !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

/* Custom select options (dropdown) com estilo premium */
[data-theme='dark'] .custom-select-options,
.adsx-premium .custom-select-options {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
  z-index: 10 !important;
}

/* Custom option (itens do dropdown) com estilo premium */
[data-theme='dark'] .custom-option,
.adsx-premium .custom-option {
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  transition: all 0.2s ease-in-out !important;
}

[data-theme='dark'] .custom-option:hover,
.adsx-premium .custom-option:hover {
  background-color: var(--adsx-bg-border, #27272a) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
}

/* Selected option dentro do custom-select-button */
[data-theme='dark'] .custom-select-button .selected-option,
.adsx-premium .custom-select-button .selected-option {
  color: inherit !important;
}

/* Dropdown arrow dentro do custom-select-button */
[data-theme='dark'] .custom-select-button .dropdown-arrow,
.adsx-premium .custom-select-button .dropdown-arrow {
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  transition: transform 0.2s ease-in-out !important;
}

[data-theme='dark'] .custom-select-button:hover .dropdown-arrow,
.adsx-premium .custom-select-button:hover .dropdown-arrow {
  color: var(--adsx-text-primary, #fafafa) !important;
}

/* Correção de alinhamento: quando form-group-40 está dentro de form-group-30 */
[data-theme='dark'] .form-group-30 > .form-group-40,
.adsx-premium .form-group-30 > .form-group-40 {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Garantir que labels dentro de form-group-30 > form-group-40 fiquem alinhados */
[data-theme='dark'] .form-group-30 > .form-group-40 > label,
[data-theme='dark'] .form-group-40 > label,
.adsx-premium .form-group-30 > .form-group-40 > label,
.adsx-premium .form-group-40 > label {
  display: block !important;
  margin-bottom: 10px !important;
  line-height: 1.5 !important;
  min-height: 1.5rem !important;
  margin-top: 0 !important;
}

/* Alinhamento vertical de inputs em form-row - garantir mesma altura e alinhamento na base */
[data-theme='dark'] .form-row .form-group-5,
[data-theme='dark'] .form-row .form-group-10,
[data-theme='dark'] .form-row .form-group-30,
[data-theme='dark'] .form-row .form-group-40,
.adsx-premium .form-row .form-group-5,
.adsx-premium .form-row .form-group-10,
.adsx-premium .form-row .form-group-30,
.adsx-premium .form-row .form-group-40 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* Alinhar elementos no topo dentro de generated-announce */
[data-theme='dark'] #generated-announce .form-row,
.adsx-premium #generated-announce .form-row {
  align-items: flex-start !important;
}

/* Garantir que form-group-30 dentro de generated-announce alinhe conteúdo no topo */
[data-theme='dark'] #generated-announce .form-group-30,
.adsx-premium #generated-announce .form-group-30 {
  align-self: flex-start !important;
  justify-content: flex-start !important;
}

/* Estilos para elementos li dentro de generated-announce - garantir background visível */
[data-theme='dark'] #generated-announce ol li,
.adsx-premium #generated-announce ol li {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
}

[data-theme='light'] #generated-announce ol li {
  background-color: var(--adsx-bg-card, #ffffff) !important;
  border: 1px solid var(--adsx-bg-border, #e2e8f0) !important;
}

/* Garantir que todos os inputs tenham a mesma altura */
[data-theme='dark'] .form-row input[type="url"],
[data-theme='dark'] .form-row input[type="text"],
[data-theme='dark'] .form-row input[type="color"].color-box,
[data-theme='dark'] .form-row select,
.adsx-premium .form-row input[type="url"],
.adsx-premium .form-row input[type="text"],
.adsx-premium .form-row input[type="color"].color-box,
.adsx-premium .form-row select {
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  box-sizing: border-box !important;
  padding: 0.5rem 1rem !important;
}

/* Alinhar labels na mesma linha com margin-bottom consistente */
[data-theme='dark'] .form-row .form-group-5 > label,
[data-theme='dark'] .form-row .form-group-10 > label,
[data-theme='dark'] .form-row .form-group-30 > label,
[data-theme='dark'] .form-row .form-group-40 > label,
.adsx-premium .form-row .form-group-5 > label,
.adsx-premium .form-row .form-group-10 > label,
.adsx-premium .form-row .form-group-30 > label,
.adsx-premium .form-row .form-group-40 > label {
  margin-bottom: 10px !important;
  line-height: 1.5 !important;
  min-height: 1.5rem !important;
  display: block !important;
}

/* Garantir que o input-group dentro do form-group-40 tenha altura consistente e alinhamento na base */
[data-theme='dark'] .form-group-40 .input-group,
.adsx-premium .form-group-40 .input-group {
  display: flex !important;
  align-items: flex-end !important;
  align-content: flex-end !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  box-sizing: border-box !important;
}

/* Garantir que custom-select-button dentro do input-group tenha altura fixa e esteja alinhado na base */
[data-theme='dark'] .form-group-40 .input-group .custom-select-button,
.adsx-premium .form-group-40 .input-group .custom-select-button {
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  align-self: flex-end !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Garantir que file-input-facade dentro do input-group tenha mesma altura e esteja alinhado na base */
[data-theme='dark'] .form-group-40 .input-group .file-input-facade:not([style*="display: none"]),
.adsx-premium .form-group-40 .input-group .file-input-facade:not([style*="display: none"]) {
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-end !important;
  box-sizing: border-box !important;
  flex-grow: 1 !important;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
}

/* Garantir que video-input-glued dentro do input-group também tenha a mesma altura */
[data-theme='dark'] .form-group-40 .input-group .video-input-glued:not([style*="display: none"]),
.adsx-premium .form-group-40 .input-group .video-input-glued:not([style*="display: none"]) {
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  box-sizing: border-box !important;
  flex-grow: 1 !important;
}

/* Garantir que o custom-select-wrapper não adicione altura extra */
[data-theme='dark'] .form-group-40 .custom-select-wrapper,
.adsx-premium .form-group-40 .custom-select-wrapper {
  height: 2.5rem !important;
  display: flex !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
}

/* ============================================
   INPUTS DE COR E ARQUIVO (PREMIUM)
   ============================================ */
/* Inputs de cor (color picker) com estilo btn-white */
[data-theme='dark'] input[type="color"].color-box,
[data-theme='dark'] .color-box,
.adsx-premium input[type="color"].color-box,
.adsx-premium .color-box {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
  border-radius: 8px !important;
  width: 100% !important;
  height: 2.5rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  padding: 0 !important;
}

[data-theme='dark'] input[type="color"].color-box:hover,
[data-theme='dark'] .color-box:hover,
.adsx-premium input[type="color"].color-box:hover,
.adsx-premium .color-box:hover {
  border-color: var(--adsx-primary, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
}

[data-theme='dark'] input[type="color"].color-box:focus,
[data-theme='dark'] .color-box:focus,
.adsx-premium input[type="color"].color-box:focus,
.adsx-premium .color-box:focus {
  outline: none !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

/* File input facade (labels que simulam inputs de arquivo) com estilo btn-white */
/* IMPORTANTE: Não usar display: !important para não interferir na lógica JavaScript de visibilidade */
/* O JavaScript controla a visibilidade via style.display, então aplicamos estilos apenas quando visível */
[data-theme='dark'] .file-input-facade:not([style*="display: none"]),
.adsx-premium .file-input-facade:not([style*="display: none"]) {
  background-color: var(--adsx-bg-card, #18181b) !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  min-height: 2.5rem !important;
  align-items: center !important;
  justify-content: flex-start !important;
  cursor: pointer !important;
}

[data-theme='dark'] .file-input-facade:not([style*="display: none"]):hover,
.adsx-premium .file-input-facade:not([style*="display: none"]):hover {
  background-color: var(--adsx-bg-border, #27272a) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
}

[data-theme='dark'] .file-input-facade:not([style*="display: none"]):focus,
.adsx-premium .file-input-facade:not([style*="display: none"]):focus {
  outline: none !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

/* Video input glued (inputs de texto para vídeo/youtube) com estilo btn-white */
[data-theme='dark'] .video-input-glued:not([style*="display: none"]),
.adsx-premium .video-input-glued:not([style*="display: none"]) {
  background-color: var(--adsx-bg-card, #18181b) !important;
  color: var(--adsx-text-secondary, #a1a1aa) !important;
  border: 1px solid var(--adsx-bg-border, #27272a) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  min-height: 2.5rem !important;
}

[data-theme='dark'] .video-input-glued:not([style*="display: none"]):hover,
.adsx-premium .video-input-glued:not([style*="display: none"]):hover {
  border-color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
}

[data-theme='dark'] .video-input-glued:not([style*="display: none"]):focus,
.adsx-premium .video-input-glued:not([style*="display: none"]):focus {
  outline: none !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
}

/* ============================================
   INFO BOX (PREMIUM)
   ============================================ */
/* InfoBox com background transparente no layout premium */
[data-theme='dark'] .alert-info,
.adsx-premium .alert-info {
  background-color: transparent !important;
}

/* ============================================
   WHATSAPP PAGE (PREMIUM)
   ============================================ */
/* Explicação destacada - texto mais proeminente */
[data-theme='dark'] .explanation--highlight,
.adsx-premium .explanation--highlight {
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  margin-bottom: 0.75rem;
}

/* Container do link do WhatsApp */
.whatsapp-link-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  padding: 1.5rem 0;
}

/* Link do WhatsApp */
.whatsapp-link {
  display: inline-block;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  text-decoration: none;
}

.whatsapp-link:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.whatsapp-link:active {
  transform: scale(0.98);
}

/* Imagem do WhatsApp */
.whatsapp-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s ease-in-out;
}

[data-theme='dark'] .whatsapp-image,
.adsx-premium .whatsapp-image {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.whatsapp-link:hover .whatsapp-image {
  box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.4);
}

[data-theme='dark'] .whatsapp-link:hover .whatsapp-image,
.adsx-premium .whatsapp-link:hover .whatsapp-image {
  box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.6);
}

/* ============================================
   ICON BUTTONS PREMIUM EM TABELAS
   ============================================ */

/* Botões de ícone dentro da tabela - flat, sem sombra, sem cor de fundo, sem cores */
[data-theme='dark'] .table-buttons .icon-button,
[data-theme='dark'] .table-buttons .elevated.icon-button,
.adsx-premium .table-buttons .icon-button,
.adsx-premium .table-buttons .elevated.icon-button {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important; /* Sem border radius para botões de ícone */
  padding: 0.5rem !important;
  cursor: pointer !important;
}

[data-theme='dark'] .table-buttons .icon-button:hover,
[data-theme='dark'] .table-buttons .elevated.icon-button:hover,
.adsx-premium .table-buttons .icon-button:hover,
.adsx-premium .table-buttons .elevated.icon-button:hover {
  background-color: rgba(255, 255, 255, 0.05) !important; /* Hover sutil */
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Ícones dentro dos botões flat - SEM CORES, apenas cinza */
[data-theme='dark'] .table-buttons .icon-button i,
[data-theme='dark'] .table-buttons .icon-button .material-icons,
[data-theme='dark'] .table-buttons .icon-button .material-symbols-outlined,
[data-theme='dark'] .table-buttons .icon-button-secondary i,
[data-theme='dark'] .table-buttons .icon-button-secondary .material-icons,
[data-theme='dark'] .table-buttons .icon-button-warning i,
[data-theme='dark'] .table-buttons .icon-button-warning .material-icons,
[data-theme='dark'] .table-buttons .icon-button-danger i,
[data-theme='dark'] .table-buttons .icon-button-danger .material-icons,
[data-theme='dark'] .table-buttons .icon-button-primary i,
[data-theme='dark'] .table-buttons .icon-button-primary .material-icons,
[data-theme='dark'] .table-buttons .icon-button-success i,
[data-theme='dark'] .table-buttons .icon-button-success .material-icons,
.adsx-premium .table-buttons .icon-button i,
.adsx-premium .table-buttons .icon-button .material-icons,
.adsx-premium .table-buttons .icon-button .material-symbols-outlined,
.adsx-premium .table-buttons .icon-button-secondary i,
.adsx-premium .table-buttons .icon-button-secondary .material-icons,
.adsx-premium .table-buttons .icon-button-warning i,
.adsx-premium .table-buttons .icon-button-warning .material-icons,
.adsx-premium .table-buttons .icon-button-danger i,
.adsx-premium .table-buttons .icon-button-danger .material-icons,
.adsx-premium .table-buttons .icon-button-primary i,
.adsx-premium .table-buttons .icon-button-primary .material-icons,
.adsx-premium .table-buttons .icon-button-success i,
.adsx-premium .table-buttons .icon-button-success .material-icons {
  color: var(--adsx-text-secondary, #a1a1aa) !important; /* Todos os ícones em cinza */
}

/* Remover sombra de botões com texto dentro da tabela */
[data-theme='dark'] .table-buttons .btn,
[data-theme='dark'] .table-buttons .elevated.btn,
.adsx-premium .table-buttons .btn,
.adsx-premium .table-buttons .elevated.btn {
  box-shadow: none !important;
  border-radius: 8px !important; /* Border radius de 8px para botões com texto */
}

/* Aumentar gap entre botões e garantir alinhamento horizontal */
[data-theme='dark'] .table-buttons,
.adsx-premium .table-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important; /* Gap maior entre botões */
}

/* ============================================
   COMPATIBILIDADE REVERSA TEMPORÁRIA
   (Classes antigas que ainda estão em uso durante migração gradual)
   ============================================ */

/* Botões antigos - aplicam estilos premium quando .adsx-premium está presente */
.adsx-premium .btn-white,
.adsx-premium .elevated.btn-white,
[data-theme='dark'] .btn-white,
[data-theme='dark'] .elevated.btn-white {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border: var(--adsx-border-default, 1px solid #27272a) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
}

.adsx-premium .btn-white:hover,
.adsx-premium .elevated.btn-white:hover,
[data-theme='dark'] .btn-white:hover,
[data-theme='dark'] .elevated.btn-white:hover {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: var(--adsx-primary, #8b5cf6) !important;
}

.adsx-premium .btn-primary,
.adsx-premium .elevated.btn-primary,
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .elevated.btn-primary {
  background-color: var(--adsx-primary, #8b5cf6) !important;
  color: #ffffff !important;
  box-shadow: var(--adsx-shadow-purple, 0 4px 14px 0 rgba(139, 92, 246, 0.2)) !important;
  border: none !important;
}

.adsx-premium .btn-primary:hover,
.adsx-premium .elevated.btn-primary:hover,
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .elevated.btn-primary:hover {
  background-color: var(--adsx-primary-dark, #6d28d9) !important;
  box-shadow: var(--adsx-shadow-purple, 0 6px 20px 0 rgba(139, 92, 246, 0.3)) !important;
}

/* Light mode para classes antigas */
[data-theme='light'] .adsx-premium .btn-white,
[data-theme='light'] .adsx-premium .elevated.btn-white,
.adsx-premium-light .btn-white,
.adsx-premium-light .elevated.btn-white {
  background-color: var(--adsx-bg-card, #ffffff) !important;
  border: 1px solid var(--adsx-bg-border, #e2e8f0) !important;
  color: var(--adsx-text-primary, #0f172a) !important;
}

[data-theme='light'] .adsx-premium .btn-white:hover,
[data-theme='light'] .adsx-premium .elevated.btn-white:hover,
.adsx-premium-light .btn-white:hover,
.adsx-premium-light .elevated.btn-white:hover {
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: var(--adsx-primary, #8b5cf6) !important;
  background-color: rgba(139, 92, 246, 0.08) !important;
}

[data-theme='light'] .adsx-premium .btn-primary,
[data-theme='light'] .adsx-premium .elevated.btn-primary,
.adsx-premium-light .btn-primary,
.adsx-premium-light .elevated.btn-primary {
  background-color: var(--adsx-primary, #8b5cf6) !important;
  color: #ffffff !important;
  border: none !important;
}

[data-theme='light'] .adsx-premium .btn-primary:hover,
[data-theme='light'] .adsx-premium .elevated.btn-primary:hover,
.adsx-premium-light .btn-primary:hover,
.adsx-premium-light .elevated.btn-primary:hover {
  background-color: var(--adsx-primary-dark, #6d28d9) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2) !important;
}

/* ============================================
   CLASSES CRÍTICAS MIGRADAS DE elements.css
   Para permitir remoção completa do arquivo antigo
   ============================================ */

/* Icon Button - Cores de ícone específicas */
.icon-button-primary i,
.icon-button-primary svg,
.icon-button-primary .material-icons,
.icon-button-primary .material-symbols {
  color: var(--color-primary);
}

.icon-button-secondary i,
.icon-button-secondary svg,
.icon-button-secondary .material-icons,
.icon-button-secondary .material-symbols {
  color: var(--color-secondary);
}

.icon-button-success i,
.icon-button-success svg,
.icon-button-success .material-icons,
.icon-button-success .material-symbols {
  color: var(--color-success);
}

.icon-button-danger i,
.icon-button-danger svg,
.icon-button-danger .material-icons,
.icon-button-danger .material-symbols {
  color: var(--color-danger);
}

.icon-button-warning i,
.icon-button-warning svg,
.icon-button-warning .material-icons,
.icon-button-warning .material-symbols {
  color: var(--color-warning);
}

.icon-button-accent i,
.icon-button-accent svg,
.icon-button-accent .material-icons,
.icon-button-accent .material-symbols {
  color: var(--color-accent);
}

/* Account Card Styles - Migradas de elements.css */
.account-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.account-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #7e57c2);
  font-size: 1.8rem;
}

.account-card__title {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  color: rgba(15, 23, 42, 0.85);
}

.account-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.account-info-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.account-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(126, 87, 194, 0.05);
}

.account-info-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

.account-info-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-gray, #424242);
  word-break: break-word;
}

.account-order-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: rgba(15, 23, 42, 0.06);
  font-size: 0.95rem;
  font-weight: 600;
  width: fit-content;
}

.account-order-status[data-state='active'] {
  color: var(--color-success-dark, #2e7d32);
  background-color: rgba(46, 125, 50, 0.12);
}

.account-order-status[data-state='pending'],
.account-order-status[data-state='processing'] {
  color: var(--color-warning-dark, #ef6c00);
  background-color: rgba(239, 108, 0, 0.12);
}

.account-order-status[data-state='overdue'],
.account-order-status[data-state='suspended'],
.account-order-status[data-state='canceled'],
.account-order-status[data-state='cancelled'],
.account-order-status[data-state='inactive'] {
  color: var(--color-danger-dark, #c62828);
  background-color: rgba(198, 40, 40, 0.12);
}

.account-order-status[data-state='unknown'] {
  color: rgba(15, 23, 42, 0.45);
  background-color: rgba(15, 23, 42, 0.06);
}

.account-feature-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.account-feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background-color: rgba(248, 249, 252, 0.92);
  min-height: 92px;
}

.account-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: rgba(15, 23, 42, 0.68);
  background: rgba(99, 102, 241, 0.14);
}

.account-feature-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.account-feature-status {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.72);
}

.account-feature-status[data-state='enabled'] {
  color: var(--color-success-dark, #2e7d32);
}

.account-feature-status[data-state='disabled'] {
  color: var(--color-danger-dark, #c62828);
}

.account-feature-status[data-state='unknown'] {
  color: rgba(15, 23, 42, 0.45);
}

.account-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  width: 100%;
}

.account-layout > * {
  width: 100%;
}

#account-upgrade-container {
  display: contents;
}

@media (min-width: 960px) {
  .account-layout .account-upgrade-card,
  section.account-upgrade-card {
    grid-column: 1;
    position: relative;
    top: calc(-1 * 1.5rem);
  }
}

/* Account Upgrade Card */
.account-upgrade-card__header {
  align-items: center;
  gap: 1rem;
  padding-bottom: 0;
  border-bottom: none;
}

.account-upgrade-card__icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-warning));
  color: var(--color-white);
  border-radius: 999px;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  animation: upgrade-icon-blink 1.5s ease-in-out infinite;
}

@keyframes upgrade-icon-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.account-upgrade-card__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-warning);
  font-weight: 600;
}

.account-upgrade-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.account-upgrade-card__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray-dark);
}

.account-upgrade-card__benefits {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.account-upgrade-card__benefits-title {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-gray-dark);
}

.account-upgrade-card__benefits ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.account-upgrade-card__benefits li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-gray-dark);
}

.account-upgrade-card__benefits li .material-icons {
  font-size: 1.25rem;
  color: var(--color-warning);
}

.account-upgrade-card__coupon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white-dark, #f8f9fb);
  border: 1px dashed var(--color-warning);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

.account-upgrade-card__coupon-icon {
  background: var(--color-warning);
  color: var(--color-white);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-upgrade-card__coupon-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.account-upgrade-card__coupon-code {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gray-dark);
}

.account-upgrade-card__coupon-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--color-warning);
  font-weight: 600;
}

.account-upgrade-card__cta {
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1rem 0 0 0;
  animation: blink-pulse 2s ease-in-out infinite;
}

@keyframes blink-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

.blink-pulse {
  animation: blink-pulse 2s ease-in-out infinite;
}

.fade {
  animation: fade 2s ease-in-out infinite;
}

@keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@media (max-width: 599px) {
  .account-upgrade-card__benefits ul {
    gap: 0.75rem;
  }

  .account-upgrade-card__cta {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .account-card {
    padding: 1.5rem;
  }

  .account-card__title {
    font-size: 1.2rem;
  }
}

/* Dark Mode para Account Cards */
[data-theme='dark'] .account-card {
  background-color: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .account-card__title {
  color: var(--color-gray);
}

[data-theme='dark'] .account-order-status[data-state='unknown'] {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.65);
}

[data-theme='dark'] .account-info-item {
  background: rgba(126, 87, 194, 0.12);
}

[data-theme='dark'] .account-info-label {
  color: rgba(226, 232, 240, 0.72);
}

[data-theme='dark'] .account-info-value {
  color: var(--color-gray-dark);
}

[data-theme='dark'] .account-feature-card {
  border-color: rgba(255, 255, 255, 0.08);
  background-color: rgba(32, 36, 44, 0.95);
}

[data-theme='dark'] .account-feature-icon {
  color: rgba(226, 232, 240, 0.85);
  background: rgba(99, 102, 241, 0.35);
}

[data-theme='dark'] .account-feature-label {
  color: rgba(226, 232, 240, 0.82);
}

[data-theme='dark'] .account-feature-status {
  color: rgba(248, 250, 252, 0.86);
}

[data-theme='dark'] .account-feature-status[data-state='enabled'] {
  color: var(--color-success, #43a047);
}

[data-theme='dark'] .account-feature-status[data-state='disabled'] {
  color: var(--color-danger, #e53935);
}

[data-theme='dark'] .account-feature-status[data-state='unknown'] {
  color: rgba(226, 232, 240, 0.6);
}

.google-account-limit-indicator {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-gray);
}

.google-account-limit-reached {
  color: var(--color-danger) !important;
}

/* ============================================
   CLASSES USADAS MIGRADAS DE elements.css
   (advanced-fields, custom-select, input-group, file-input, video-input, publish-ads-modal, escala-max, account-upgrade-menu-card)
   ============================================ */

/* Advanced Fields Component */
.advanced-fields-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: transparent;
  border: 1px solid var(--color-gray-light);
  border-radius: 5px;
  color: var(--color-gray);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.advanced-fields-toggle:hover {
  background-color: var(--color-white-dark);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.advanced-fields-toggle .material-symbols-outlined {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.advanced-fields-container {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 2000px;
  opacity: 1;
}

.advanced-fields-container.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.advanced-fields-container.collapsed .form-row {
  display: none;
}

[data-theme='dark'] .advanced-fields-toggle {
  background-color: #2d2d2d;
  border-color: var(--color-gray-light);
  color: var(--color-gray);
}

/* Custom Select Dropdown */
.custom-select-wrapper {
  position: relative;
}

.custom-select-button {
  width: 100%;
  background-color: var(--color-surface-container-highest, #f0f0f0);
  border: 1px solid var(--color-outline, #ccc);
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-on-surface, #333);
  height: auto;
  min-height: 38px;
}

.custom-select-button .selected-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-select-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-surface-container-high, #fff);
  border: 1px solid var(--color-outline, #ccc);
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 70px;
}

.custom-option {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.custom-option:hover {
  background-color: var(--color-surface-container-hover, #f5f5f5);
}

/* Input Group for combining elements */
.input-group {
  display: flex;
  width: 100%;
}

/* Style for the file input facade */
.file-input-facade {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--color-surface-container-highest, #f0f0f0);
  border: 1px solid var(--color-outline, #ccc);
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
  cursor: pointer;
  color: var(--color-on-surface-variant, #777);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-input-facade:hover {
  border-color: var(--color-primary, #6750a4);
}

.file-input-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide the actual file input */
.file-input-hidden {
  display: none;
}

/* Adjustments for the custom select button within an input group */
.input-group .custom-select-wrapper .custom-select-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.video-input-glued {
  flex-grow: 1;
  border: 1px solid var(--color-outline, #ccc);
  border-radius: 0px 4px 4px 0px !important;
  margin-left: -1px;
  padding: 8px 12px;
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--color-on-surface, #333);
}

/* Dark Mode Adjustments for Custom Selects and Inputs */
[data-theme='dark'] .custom-select-button {
  background-color: var(--color-white-dark);
  border-color: var(--color-gray-light);
  color: var(--color-gray);
}

[data-theme='dark'] .custom-select-options {
  background-color: var(--color-white-dark);
  border-color: var(--color-gray-light);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .custom-option {
  color: var(--color-gray);
}

[data-theme='dark'] .custom-option:hover {
  background-color: rgba(126, 87, 194, 0.15);
  color: var(--color-primary-light);
}

[data-theme='dark'] .file-input-facade {
  background-color: var(--color-white-dark);
  border-color: var(--color-gray-light);
  color: var(--color-gray-light);
}

[data-theme='dark'] .video-input-glued {
  background-color: var(--color-white-dark);
  border-color: var(--color-gray-light);
  color: var(--color-gray);
}

/* Publish Ads Modal */
.publish-ads-modal__content {
  max-width: 800px;
  width: 100%;
}

.publish-ads-modal__close-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.publish-ads-modal__close-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-text-dark, #333333);
}

.publish-ads-modal__title {
  margin-bottom: 1.5rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.publish-ads-modal__title img {
  display: inline-block;
}

.publish-ads-modal__budget-hint {
  color: var(--color-gray, #6b7280);
  margin-top: 0.5rem;
  display: block;
}

.publish-ads-modal__actions {
  margin-top: 2rem;
}

.publish-ads-modal__info {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--color-gray, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.publish-ads-modal__info-icon {
  font-size: 18px;
}

.publish-ads-modal__full-width {
  width: 100%;
}

/* Account Upgrade Menu Card */
.account-upgrade-menu-card-wrapper {
  padding: 0.75rem 0.5rem;
  width: 100%;
  display: block;
  margin: 0rem 1rem 3rem 0;
}

.account-upgrade-menu-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.account-upgrade-menu-card {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(251, 140, 0, 0.2);
  background: linear-gradient(
      140deg,
      rgba(251, 140, 0, 0.18),
      rgba(251, 140, 0, 0.05)
    ),
    rgba(255, 255, 255, 0.95);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  font-weight: 100;
}

.account-upgrade-menu-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(251, 140, 0, 0.25);
}

.account-upgrade-menu-card__icon {
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-white);
}

.account-upgrade-menu-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.account-upgrade-menu-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.75);
  line-height: 1.2;
}

.account-upgrade-menu-card__lead {
  font-size: 0.75rem;
  color: rgba(15, 23, 42, 0.65);
  line-height: 1.3;
}

.account-upgrade-menu-card__lead strong {
  color: var(--color-warning-dark, #ef6c00);
  font-weight: 100;
}

.account-upgrade-menu-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.42rem 0.95rem;
  margin-top: 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  background: linear-gradient(135deg, #7c3aed, #a855f7, #ec4899);
  box-shadow: 0 0 0 rgba(124, 58, 237, 0.5);
}

@keyframes upgrade-menu-cta-pulse {
  0% {
    box-shadow: 0 0 0 rgba(124, 58, 237, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 24px rgba(124, 58, 237, 0.75),
      0 0 38px rgba(236, 72, 153, 0.35);
    transform: scale(1.08);
  }
  100% {
    box-shadow: 0 0 0 rgba(124, 58, 237, 0.5);
    transform: scale(1);
  }
}

.account-upgrade-menu-card__cta {
  animation: upgrade-menu-cta-pulse 1.3s ease-in-out infinite;
}

/* Dark Mode for Upgrade Menu Card */
[data-theme='dark'] .account-upgrade-menu-card {
  border-color: rgba(251, 140, 0, 0.35);
  background: linear-gradient(
      140deg,
      rgba(251, 140, 0, 0.25),
      rgba(251, 140, 0, 0.08)
    ),
    rgba(30, 30, 30, 0.95);
}

[data-theme='dark'] .account-upgrade-menu-card__title {
  color: rgba(226, 232, 240, 0.9);
}

[data-theme='dark'] .account-upgrade-menu-card__lead {
  color: rgba(226, 232, 240, 0.7);
}

[data-theme='dark'] .account-upgrade-menu-card__lead strong {
  color: var(--color-warning-light, #ffcc80);
  font-weight: 100;
}

[data-theme='dark'] .account-upgrade-menu-card__cta {
  background: linear-gradient(135deg, #c084fc, #a855f7, #ec4899);
  box-shadow: 0 0 0 rgba(200, 132, 252, 0.5);
}

/* Escala Max / MinerTracking Content Styles */
.escala-max-content {
  margin-top: 2rem;
  max-width: 100%;
}

/* Subtítulo no título da página */
.escala-max-subtitle-separator {
  margin: 0 0.5rem;
  color: var(--adsx-text-secondary, rgba(255, 255, 255, 0.6));
  font-weight: 400;
}

[data-theme='light'] .adsx-premium .escala-max-subtitle-separator,
.adsx-premium-light .escala-max-subtitle-separator {
  color: var(--adsx-text-secondary, rgba(15, 23, 42, 0.6));
}

.escala-max-subtitle {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--adsx-text-secondary, rgba(255, 255, 255, 0.7));
  letter-spacing: 0;
}

[data-theme='light'] .adsx-premium .escala-max-subtitle,
.adsx-premium-light .escala-max-subtitle {
  color: var(--adsx-text-secondary, rgba(15, 23, 42, 0.7));
}

.escala-max-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--adsx-text-primary, #ffffff);
}

[data-theme='light'] .adsx-premium .escala-max-section-title,
.adsx-premium-light .escala-max-section-title {
  color: var(--adsx-text-primary, #0f172a);
}

.escala-max-section-title--large {
  font-size: 1.5rem;
}

.escala-max-paragraph {
  margin-bottom: 1.5rem;
  color: var(--adsx-text-secondary, rgba(255, 255, 255, 0.8));
  line-height: 1.7;
}

[data-theme='light'] .adsx-premium .escala-max-paragraph,
.adsx-premium-light .escala-max-paragraph {
  color: var(--adsx-text-secondary, rgba(15, 23, 42, 0.8));
}

.escala-max-paragraph strong {
  color: var(--adsx-text-primary, #ffffff);
  font-weight: 600;
}

[data-theme='light'] .adsx-premium .escala-max-paragraph strong,
.adsx-premium-light .escala-max-paragraph strong {
  color: var(--adsx-text-primary, #0f172a);
}

.escala-max-paragraph--large-spacing {
  margin-bottom: 2rem;
}

.escala-max-paragraph--bold {
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--adsx-text-primary, #ffffff);
  font-size: 1.125rem;
}

[data-theme='light'] .adsx-premium .escala-max-paragraph--bold,
.adsx-premium-light .escala-max-paragraph--bold {
  color: var(--adsx-text-primary, #0f172a);
}

.escala-max-list {
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.8;
  color: var(--adsx-text-secondary, rgba(255, 255, 255, 0.8));
}

[data-theme='light'] .adsx-premium .escala-max-list,
.adsx-premium-light .escala-max-list {
  color: var(--adsx-text-secondary, rgba(15, 23, 42, 0.8));
}

.escala-max-list-item {
  margin-bottom: 0.75rem;
}

.escala-max-list-item em {
  font-style: italic;
  color: var(--adsx-text-primary, #ffffff);
  font-weight: 500;
}

[data-theme='light'] .adsx-premium .escala-max-list-item em,
.adsx-premium-light .escala-max-list-item em {
  color: var(--adsx-text-primary, #0f172a);
}

.escala-max-divider {
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  margin: 2rem 0;
}

[data-theme='dark'] .escala-max-divider {
  border-top-color: rgba(226, 232, 240, 0.1);
}

.escala-max-demo-container {
  margin: 2.5rem 0 1.5rem 0;
  display: flex;
  justify-content: center;
}

.escala-max-demo-container .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.escala-max-demo-container .btn .material-symbols-outlined {
  font-size: 1.25rem;
}

.escala-max-youtube-icon {
  color: #ef5350;
}

.escala-max-upgrade-container {
  margin: 2.5rem 0 3rem 0;
  display: flex;
  justify-content: center;
}

.escala-max-upgrade-container .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.escala-max-upgrade-container .btn .material-symbols-outlined {
  font-size: 1.25rem;
}

.escala-max-gold-icon {
  color: #FFD700;
  background: linear-gradient(to top, #FFA500, #FFD700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.escala-max-warning-border-btn {
  background-color: var(--color-white);
  color: var(--color-gray);
  border: 2px solid var(--color-warning);
}

.escala-max-warning-border-btn:hover {
  background-color: rgba(251, 140, 0, 0.05);
  border-color: var(--color-warning-dark);
  transition: background-color 0.3s ease, border-color 0.3s ease;
  transform: translateY(-2px);
}

[data-theme='dark'] .escala-max-warning-border-btn {
  background-color: #2d2d2d;
  color: var(--color-gray-light);
  border: 2px solid var(--color-warning);
}

[data-theme='dark'] .escala-max-warning-border-btn:hover {
  background-color: rgba(251, 140, 0, 0.1);
  border-color: var(--color-warning-dark);
}

.escala-max-primary-icon {
  color: var(--color-primary);
}

/* Modal de vídeo do YouTube */
.escala-max-video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.escala-max-video-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.escala-max-video-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  background: var(--color-white);
  border-radius: 0.5rem;
  padding: 1rem;
  z-index: 10001;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .escala-max-video-modal-content {
  background: var(--color-gray-dark);
}

.escala-max-video-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10002;
  color: var(--color-white);
  transition: background-color 0.2s ease;
}

.escala-max-video-modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.escala-max-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.escala-max-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
}

.upgrade-tutorial-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.upgrade-tutorial-image:last-child {
  margin-bottom: 0;
}

/* Dark Mode Adjustments for Elevated Icon Buttons */
[data-theme='dark'] button.elevated.icon-button,
[data-theme='dark'] .btn.elevated.icon-button {
  background-color: #2d2d2d;
  border: 1px solid var(--color-gray-light);
}

[data-theme='dark'] button.elevated.icon-button:hover,
[data-theme='dark'] .btn.elevated.icon-button:hover {
  background-color: #3a3a3a;
  border-color: var(--color-gray-light);
}

/* ============================================
   CLASS COMPONENTS (Páginas de Demonstração)
   ============================================ */

/* Class Text Component */
.class-text-component {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
  font-size: 1rem;
  margin-bottom: 3rem;
  padding: 2rem;
}

.class-text-component h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--adsx-text-primary, #fafafa);
  margin: 0 0 1.5rem 0;
  line-height: 1.4;
}

.class-text-component p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--adsx-text-primary, #fafafa);
  margin: 0 0 1rem 0;
  padding: 0;
}

.class-text-component p:last-child {
  margin-bottom: 0;
}

[data-theme='dark'] .class-text-component,
.adsx-premium .class-text-component {
  color: var(--adsx-text-primary, #fafafa);
}

[data-theme='dark'] .class-text-component h2,
.adsx-premium .class-text-component h2 {
  color: var(--adsx-text-primary, #fafafa);
}

[data-theme='dark'] .class-text-component p,
.adsx-premium .class-text-component p {
  color: var(--adsx-text-primary, #fafafa);
}

[data-theme='light'] .adsx-premium .class-text-component,
.adsx-premium-light .class-text-component {
  color: var(--adsx-text-primary-light, #18181b);
}

[data-theme='light'] .adsx-premium .class-text-component h2,
.adsx-premium-light .class-text-component h2 {
  color: var(--adsx-text-primary-light, #18181b);
}

[data-theme='light'] .adsx-premium .class-text-component p,
.adsx-premium-light .class-text-component p {
  color: var(--adsx-text-primary-light, #18181b);
}

/* Class Video Component */
.class-video-component {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
}

.class-video-component iframe {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
  border: none;
}

.class-video-component::before {
  content: '';
  display: block;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.class-video-error {
  padding: 1rem;
  color: var(--adsx-text-secondary, #a1a1aa);
  text-align: center;
  font-size: 0.9rem;
}

/* Class Video Delay Component */
.class-video-delay-component {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
}

.class-video-delay-component iframe {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
  border: none;
}

.class-video-delay-component::before {
  content: '';
  display: block;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.class-video-delay-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  padding: 2rem;
}

.class-video-delay-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.class-video-delay-countdown-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--adsx-primary, #8b5cf6);
  line-height: 1;
  font-family: 'Space', sans-serif;
}

.class-video-delay-countdown-label {
  font-size: 0.875rem;
  color: var(--adsx-text-secondary, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.class-video-delay-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--adsx-text-secondary, #a1a1aa);
  text-align: center;
  font-size: 1rem;
  width: 100%;
  padding: 2rem;
}

.class-video-delay-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--adsx-text-secondary, #a1a1aa);
  text-align: center;
  font-size: 0.9rem;
  width: 100%;
  padding: 2rem;
}

/* Dark theme variants */
[data-theme='dark'] .class-video-delay-component,
.adsx-premium .class-video-delay-component {
  background-color: var(--adsx-bg-card, #18181b);
}

[data-theme='dark'] .class-video-delay-countdown-value,
.adsx-premium .class-video-delay-countdown-value {
  color: var(--adsx-primary, #8b5cf6);
}

[data-theme='dark'] .class-video-delay-countdown-label,
.adsx-premium .class-video-delay-countdown-label {
  color: var(--adsx-text-secondary, #a1a1aa);
}

[data-theme='dark'] .class-video-delay-placeholder,
.adsx-premium .class-video-delay-placeholder {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Light theme variants */
[data-theme='light'] .adsx-premium .class-video-delay-component,
.adsx-premium-light .class-video-delay-component {
  background-color: #ffffff;
}

[data-theme='light'] .adsx-premium .class-video-delay-countdown-value,
.adsx-premium-light .class-video-delay-countdown-value {
  color: var(--adsx-primary, #8b5cf6);
}

[data-theme='light'] .adsx-premium .class-video-delay-countdown-label,
.adsx-premium-light .class-video-delay-countdown-label {
  color: #71717a;
}

[data-theme='light'] .adsx-premium .class-video-delay-placeholder,
.adsx-premium-light .class-video-delay-placeholder {
  color: #71717a;
}

/* Class Text Delay Component */
.class-text-delay-component {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
  padding: 2rem;
  min-height: 200px;
}

.class-text-delay-text {
  color: var(--adsx-text-primary, #fafafa);
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  width: 100%;
}

.class-text-delay-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  padding: 2rem;
}

.class-text-delay-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.class-text-delay-countdown-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--adsx-primary, #8b5cf6);
  line-height: 1;
  font-family: 'Space', sans-serif;
}

.class-text-delay-countdown-label {
  font-size: 0.875rem;
  color: var(--adsx-text-secondary, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.class-text-delay-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--adsx-text-secondary, #a1a1aa);
  text-align: center;
  font-size: 1rem;
  width: 100%;
  padding: 2rem;
}

/* Dark theme variants */
[data-theme='dark'] .class-text-delay-component,
.adsx-premium .class-text-delay-component {
  background-color: var(--adsx-bg-card, #18181b);
}

[data-theme='dark'] .class-text-delay-text,
.adsx-premium .class-text-delay-text {
  color: var(--adsx-text-primary, #fafafa);
}

[data-theme='dark'] .class-text-delay-countdown-value,
.adsx-premium .class-text-delay-countdown-value {
  color: var(--adsx-primary, #8b5cf6);
}

[data-theme='dark'] .class-text-delay-countdown-label,
.adsx-premium .class-text-delay-countdown-label {
  color: var(--adsx-text-secondary, #a1a1aa);
}

[data-theme='dark'] .class-text-delay-placeholder,
.adsx-premium .class-text-delay-placeholder {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Light theme variants */
[data-theme='light'] .adsx-premium .class-text-delay-component,
.adsx-premium-light .class-text-delay-component {
  background-color: #ffffff;
}

[data-theme='light'] .adsx-premium .class-text-delay-text,
.adsx-premium-light .class-text-delay-text {
  color: #09090b;
}

[data-theme='light'] .adsx-premium .class-text-delay-countdown-value,
.adsx-premium-light .class-text-delay-countdown-value {
  color: var(--adsx-primary, #8b5cf6);
}

[data-theme='light'] .adsx-premium .class-text-delay-countdown-label,
.adsx-premium-light .class-text-delay-countdown-label {
  color: #71717a;
}

[data-theme='light'] .adsx-premium .class-text-delay-placeholder,
.adsx-premium-light .class-text-delay-placeholder {
  color: #71717a;
}

/* Class Next Button - Padronizado com .btn-primary */
.class-next-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.625rem 1.25rem !important;
  background-color: var(--adsx-primary, #8b5cf6) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  text-decoration: none;
  font-weight: 500 !important;
  font-size: 1rem;
  transition: all 200ms ease-in-out !important;
  cursor: pointer;
  min-height: 40px !important;
  box-shadow: none !important;
}

.class-next-button:hover {
  background-color: var(--adsx-primary-dark, #6d28d9) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

.class-next-button:active {
  box-shadow: none !important;
}

.class-next-button:focus {
  outline: 2px solid var(--adsx-primary-light, #a78bfa) !important;
  outline-offset: 2px !important;
}

/* Texto dentro do botão next */
.class-next-button-text {
  display: inline-block;
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Ícone dentro do botão next */
.class-next-button-icon {
  font-size: 1.25rem !important;
  display: inline-flex;
  align-items: center;
  color: #ffffff !important;
}

/* Garantir que todos os elementos internos herdem a cor */
.class-next-button span,
.class-next-button .material-symbols-outlined,
.class-next-button .material-icons,
.class-next-button i {
  color: #ffffff !important;
}

/* Container para botão de início da página bem-vindo */
.bem-vindo-start-button-container {
  text-align: right !important;
  margin-top: 1rem !important;
}

/* Class Previous Button - Padronizado com .btn-secondary/.btn-white */
.class-previous-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.625rem 1.25rem !important;
  background-color: var(--adsx-bg-card, #18181b) !important;
  color: var(--adsx-text-primary, #fafafa) !important;
  border: var(--adsx-border-default, 1px solid #27272a) !important;
  border-radius: 8px !important;
  text-decoration: none;
  font-weight: 500 !important;
  font-size: 1rem;
  transition: all 200ms ease-in-out !important;
  cursor: pointer;
  min-height: 40px !important;
  box-shadow: none !important;
}

.class-previous-button:hover {
  background-color: var(--adsx-bg-card, #18181b) !important;
  border-color: var(--adsx-primary, #8b5cf6) !important;
  color: var(--adsx-primary, #8b5cf6) !important;
}

.class-previous-button:active {
  box-shadow: none !important;
}

.class-previous-button:focus {
  outline: 2px solid var(--adsx-primary-light, #a78bfa) !important;
  outline-offset: 2px !important;
}

/* Texto dentro do botão previous */
.class-previous-button-text {
  display: inline-block;
  color: var(--adsx-text-primary, #fafafa) !important;
  font-weight: 500 !important;
}

/* Ícone dentro do botão previous */
.class-previous-button-icon {
  font-size: 1.25rem !important;
  display: inline-flex;
  align-items: center;
  color: var(--adsx-text-primary, #fafafa) !important;
}

/* Garantir que todos os elementos internos herdem a cor */
.class-previous-button span,
.class-previous-button .material-symbols-outlined,
.class-previous-button .material-icons,
.class-previous-button i {
  color: var(--adsx-text-primary, #fafafa) !important;
}

/* Hover - elementos internos ficam roxos */
.class-previous-button:hover span,
.class-previous-button:hover .material-symbols-outlined,
.class-previous-button:hover .material-icons,
.class-previous-button:hover i {
  color: var(--adsx-primary, #8b5cf6) !important;
}

/* Class Navigation Link Component */
.class-navigation-link {
  color: var(--adsx-primary-light, #a78bfa) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  transition: color 0.2s ease-in-out !important;
  font-weight: 500 !important;
}

.class-navigation-link:hover {
  color: var(--adsx-primary, #8b5cf6) !important;
  text-decoration: underline !important;
}

.class-navigation-link:focus {
  outline: 2px solid var(--adsx-primary-light, #a78bfa) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

[data-theme='light'] .adsx-premium .class-navigation-link,
.adsx-premium-light .class-navigation-link {
  color: var(--adsx-primary, #8b5cf6) !important;
}

[data-theme='light'] .adsx-premium .class-navigation-link:hover,
.adsx-premium-light .class-navigation-link:hover {
  color: var(--adsx-primary-dark, #6d28d9) !important;
}

/* Class Image Component */
.class-image-component {
  width: 100%;
  margin: 1.5rem 0;
  padding: 2rem;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
  display: flex;
  justify-content: center;
  align-items: center;
}

.class-image-component img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-width: 100%;
}

.class-image-error {
  padding: 1rem;
  color: var(--adsx-text-secondary, #a1a1aa);
  text-align: center;
  font-size: 0.9rem;
  background-color: var(--adsx-bg-card, #18181b);
  border: var(--adsx-border-default, 1px solid #27272a);
}

/* Class Buttons Container - Alinha botões horizontalmente */
.class-buttons-container {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.class-buttons-container > div {
  flex: 0 0 auto;
}

/* Light Mode Adjustments for Class Components */
[data-theme='light'] .adsx-premium .class-text-component,
.adsx-premium-light .class-text-component {
  color: var(--adsx-text-primary-light, #18181b);
}

[data-theme='light'] .adsx-premium .class-image-component,
.adsx-premium-light .class-image-component {
  background-color: var(--adsx-bg-card-light, #ffffff);
}

[data-theme='light'] .adsx-premium .class-image-component.class-image-error,
.adsx-premium-light .class-image-component.class-image-error {
  background-color: var(--adsx-bg-card-light, #ffffff);
  color: var(--adsx-text-secondary-light, #71717a);
}

[data-theme='light'] .adsx-premium .class-video-component,
.adsx-premium-light .class-video-component {
  background-color: var(--adsx-bg-card-light, #ffffff);
}

[data-theme='light'] .adsx-premium .class-previous-button,
.adsx-premium-light .class-previous-button {
  background-color: var(--adsx-bg-card-light, #ffffff);
  color: var(--adsx-text-primary-light, #18181b);
}

[data-theme='light'] .adsx-premium .class-previous-button:hover,
.adsx-premium-light .class-previous-button:hover {
  background-color: var(--adsx-bg-hover-light, #f4f4f5);
  border-color: var(--adsx-primary, #8b5cf6);
}

/* ============================================
   PRESELL TABLE (PREMIUM)
   ============================================ */
/* Células da tabela de presell */
[data-theme='dark'] .presell-table-cell,
.adsx-premium .presell-table-cell {
  color: var(--adsx-text-secondary, #a1a1aa);
}

[data-theme='dark'] .presell-table-cell-text,
.adsx-premium .presell-table-cell-text {
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Container de ações da tabela */
.presell-table-cell-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

/* Loader da tabela */
.presell-table-loader {
  display: none;
}