/**
 * Tema Zunkfy — alinhado ao dashboard index.php (darkmode).
 * Carregar depois de style.min.css e includes/dark-theme.php.
 */

html {
  zoom: 80%;
}

/* Compensa o zoom: 80% no html — 100vh zoomed = 80% da tela, então 125vh = 100% visual */
.sidebar {
  min-height: 125vh !important;
}

.page-flex {
  min-height: 125vh !important;
}

/* Variáveis: páginas que usam var(--primary) herdão ciano/navy */
body.darkmode {
  --primary: #00d4ff;
  --primary-light: #33e5ff;
  --primary-dark: #0056b3;
  --secondary: #0056b3;
  --secondary-light: #00d4ff;
  --secondary-dark: #003d80;
  --gradient-primary: linear-gradient(135deg, #0056b3, #00d4ff);
  --gradient-secondary: linear-gradient(135deg, #0056b3, #33e5ff);
  --gradient-purple-blue: linear-gradient(135deg, #0056b3, #00d4ff);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #0a0b10 !important;
  color: #c9d1d9;
  font-size: 14px;
  line-height: 1.5;
}

.darkmode .main-wrapper,
.darkmode .main.users,
.darkmode main.main {
  background-color: #0a0b10;
}

.darkmode .main-nav--bg {
  background-color: #111319 !important;
  border-bottom: 1px solid #2a2f3a;
}

/* Títulos de página */
body.darkmode .main-title {
  color: #f0f6fc;
  font-weight: 600;
  text-shadow: none;
}

body.darkmode .main-title::after {
  background: linear-gradient(90deg, #0056b3, #00d4ff);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.25);
}

body.darkmode h1,
body.darkmode h2:not(.logo-title),
body.darkmode h3 {
  color: #f0f6fc;
}

body.darkmode .page-title,
body.darkmode .section-title {
  color: #f0f6fc;
}

/* Blocos e cartões claros → painel escuro */
body.darkmode .white-block,
body.darkmode .users-table.table-wrapper,
body.darkmode .table-wrapper:not(.no-zunk) {
  background-color: #1a1c23 !important;
  border-radius: 12px;
  border: 1px solid #252a33;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  color: #c9d1d9;
}

body.darkmode .folder-card,
body.darkmode .upsell-card,
body.darkmode .selection-card,
body.darkmode .config-card,
body.darkmode .info-card {
  background: #1a1c23 !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
}

body.darkmode .folder-card:hover,
body.darkmode .upsell-card:hover {
  border-color: rgba(0, 212, 255, 0.45) !important;
  box-shadow: 0 12px 32px rgba(0, 212, 255, 0.1) !important;
}

body.darkmode .upsell-card::before {
  background: var(--gradient-primary) !important;
}

body.darkmode .padrao-card .card-title,
body.darkmode .personalizado-card .card-title,
body.darkmode .card-title {
  color: #00d4ff !important;
}

body.darkmode .card-description,
body.darkmode .text-muted {
  color: #8b949e !important;
}

body.darkmode .card-badge {
  background: rgba(0, 212, 255, 0.12) !important;
  color: #00d4ff !important;
}

body.darkmode .folder-name,
body.darkmode .stat-item span,
body.darkmode label {
  color: #c9d1d9 !important;
}

body.darkmode .stat-item {
  border-bottom-color: #2a2f3a !important;
}

body.darkmode .stat-value,
body.darkmode .folder-icon {
  color: #00d4ff !important;
}

body.darkmode .btn-folder-action {
  background: #21262d !important;
  color: #c9d1d9 !important;
}

body.darkmode .btn-folder-action:hover {
  background: #2a2f3a !important;
  color: #f0f6fc !important;
}

body.darkmode .btn-folder-action.edit:hover {
  background: rgba(0, 212, 255, 0.15) !important;
  color: #00d4ff !important;
}

/* Mesmo visual que "Criar Nova Pasta" (meusbots): contorno ciano, sem sombra */
body.darkmode .criar-bot-btn,
body.darkmode .criar-pasta-btn,
body.darkmode .primary-action-btn {
  background: rgba(0, 212, 255, 0.15) !important;
  color: #00d4ff !important;
  border: 1px solid rgba(0, 212, 255, 0.35) !important;
  box-shadow: none !important;
}

body.darkmode .criar-bot-btn:hover,
body.darkmode .criar-pasta-btn:hover,
body.darkmode .primary-action-btn:hover {
  filter: brightness(1.08);
  color: #00d4ff !important;
}

/* Tabelas */
.darkmode .users-table table,
.darkmode .posts-table {
  color: #c9d1d9;
}

.darkmode .users-table-info,
.darkmode .users-table-info th,
.darkmode .posts-table thead th {
  background-color: #21262d !important;
  color: #8b949e !important;
  border-color: #2a2f3a !important;
}

.darkmode .users-table td,
.darkmode .posts-table tbody td {
  background-color: #1a1c23 !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
}

.darkmode .users-table tbody tr:hover td,
.darkmode .posts-table tbody tr:hover td {
  background-color: #21262d !important;
}

.darkmode .bot-name,
.darkmode .product-name {
  color: #f0f6fc !important;
}

/* Formulários */
body.darkmode input[type="text"],
body.darkmode input[type="email"],
body.darkmode input[type="password"],
body.darkmode input[type="number"],
body.darkmode input[type="url"],
body.darkmode input[type="search"],
body.darkmode input[type="tel"],
body.darkmode input[type="date"],
body.darkmode input[type="datetime-local"],
body.darkmode textarea,
body.darkmode select {
  background-color: #21262d !important;
  border: 1px solid #2a2f3a !important;
  color: #c9d1d9 !important;
  border-radius: 8px;
}

body.darkmode input:focus,
body.darkmode textarea:focus,
body.darkmode select:focus {
  border-color: #00d4ff !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

body.darkmode input::placeholder,
body.darkmode textarea::placeholder {
  color: #8b949e;
}

/* Botões comuns do style.min */
body.darkmode .form-btn.primary-default-btn,
body.darkmode .primary-default-btn {
  background: linear-gradient(135deg, #0056b3, #00d4ff) !important;
  color: #0a0b10 !important;
  border: none !important;
}

body.darkmode .form-btn.primary-default-btn:hover {
  filter: brightness(1.08);
}

body.darkmode .transparent-btn:not(.sidebar-toggle):not(.menu-toggle) {
  color: #00d4ff !important;
  border-color: rgba(0, 212, 255, 0.35) !important;
}

body.darkmode .secondary-default-btn,
body.darkmode .gray-btn {
  background: #21262d !important;
  color: #c9d1d9 !important;
  border: 1px solid #2a2f3a !important;
}

/* Paginação e links */
body.darkmode .pagination a,
body.darkmode .page-link {
  color: #00d4ff !important;
}

body.darkmode a:not(.sidebar-body-menu a):not(.logo-wrapper):not(.upsell-card):not(.folder-card-link) {
  color: #00d4ff;
}

/* Menu lateral: branco (especificidade alta vs. style.min) */
html body.darkmode .sidebar .sidebar-body-menu a,
html body.darkmode .sidebar .cat-sub-menu.visible a {
  color: #ffffff !important;
}

html body.darkmode .sidebar .sidebar-body-menu a:hover,
html body.darkmode .sidebar .cat-sub-menu.visible a:hover {
  color: #ffffff !important;
}

html body.darkmode .sidebar .sidebar-body-menu a.active,
html body.darkmode .sidebar .sidebar-body-menu a.show {
  color: #ffffff !important;
}

html body.darkmode .sidebar .sidebar-body-menu a::after {
  background-color: #ffffff !important;
}

html body.darkmode .sidebar .sidebar-body-menu a > .icon,
html body.darkmode .sidebar .category__btn .icon.arrow-down {
  background-color: #ffffff !important;
}

html body.darkmode .sidebar .sidebar-body-menu a:hover > .icon,
html body.darkmode .sidebar .sidebar-body-menu a:hover .category__btn .icon.arrow-down,
html body.darkmode .sidebar .sidebar-body-menu a.active > .icon,
html body.darkmode .sidebar .sidebar-body-menu a.show > .icon,
html body.darkmode .sidebar .sidebar-body-menu li:has(.cat-sub-menu.visible) > a.show-cat-btn > .icon,
html body.darkmode .sidebar .sidebar-body-menu li:has(.cat-sub-menu.visible) > a.show-cat-btn .category__btn .icon {
  background-color: #ffffff !important;
}

html body.darkmode .sidebar-head .menu-toggle {
  background-color: #ffffff !important;
}

html body.darkmode .sidebar-head .menu-toggle:hover {
  background-color: #ffffff !important;
}

html body.darkmode .sidebar .logo-version,
html body.darkmode .sidebar .logo-text h6 {
  color: #ffffff !important;
}

html body.darkmode .sidebar .sidebar-user__subtitle {
  color: #ffffff !important;
}

/* Modais / overlays genéricos */
body.darkmode .modal-content,
body.darkmode .dropdown-menu {
  background: #1a1c23 !important;
  border: 1px solid #2a2f3a !important;
  color: #c9d1d9 !important;
}

body.darkmode .modal-header,
body.darkmode .modal-footer {
  border-color: #2a2f3a !important;
}

/* Alertas e bordas */
body.darkmode .alert,
body.darkmode .notice {
  background: #21262d !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
}

/* Tabs / pills */
body.darkmode .nav-tabs .nav-link,
body.darkmode .tab-btn {
  color: #8b949e !important;
  border-color: #2a2f3a !important;
}

body.darkmode .nav-tabs .nav-link.active,
body.darkmode .tab-btn.active {
  color: #00d4ff !important;
  border-color: #00d4ff !important;
  background: rgba(0, 212, 255, 0.08) !important;
}

/* Lista / cards de bots genéricos */
body.darkmode .bot-item,
body.darkmode .list-group-item {
  background: #1a1c23 !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
}

/* Financeiro / estatísticas cards */
body.darkmode .stat-card,
body.darkmode .metric-box {
  background: #1a1c23 !important;
  border: 1px solid #252a33 !important;
  color: #f0f6fc !important;
}

/* Layer (overlay menu mobile) */
body.darkmode .layer {
  background: rgba(10, 11, 16, 0.6);
}

/* Notification bell dropdown no topo */
body.darkmode .notification-dropdown,
body.darkmode .users-item-dropdown.notification-dropdown {
  background: #1a1c23 !important;
  border: 1px solid #2a2f3a !important;
}

body.darkmode .notification-dropdown__title {
  color: #f0f6fc !important;
}

body.darkmode .notification-dropdown__subtitle {
  color: #8b949e !important;
}

/* Sort bar / filtros */
body.darkmode .sort-bar,
body.darkmode .filter-bar {
  background: #1a1c23 !important;
  border-color: #2a2f3a !important;
}

/* Code / pre */
body.darkmode pre,
body.darkmode code {
  background: #21262d !important;
  color: #c9d1d9 !important;
  border: 1px solid #2a2f3a;
}

/* =============================================================================
   Alta especificidade + carregamento tardio (via script no body)
   Vence <style> inline com !important das páginas (perfil, upsell, meusbots…)
   ============================================================================= */

html body.darkmode .main,
html body.darkmode main.main {
  color: #c9d1d9;
}

html body.darkmode .main .main-title,
html body.darkmode main.main .main-title {
  color: #f0f6fc !important;
  text-shadow: none !important;
}

html body.darkmode .main .main-title::after,
html body.darkmode main.main .main-title::after {
  background: linear-gradient(90deg, #0056b3, #00d4ff) !important;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.25) !important;
}

html body.darkmode .main h3,
html body.darkmode .main h4,
html body.darkmode .main h5,
html body.darkmode .main .profile-section h3,
html body.darkmode .main .section-title {
  color: #f0f6fc !important;
  border-bottom-color: rgba(0, 212, 255, 0.2) !important;
}

/* Perfil e cards genéricos (.profile-container é só wrapper — sem fundo de “card”) */
html body.darkmode .profile-header,
html body.darkmode .profile-card {
  background: #1a1c23 !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html body.darkmode .profile-container {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

html body.darkmode .profile-avatar,
html body.darkmode .profile-icon {
  background: rgba(0, 212, 255, 0.12) !important;
  color: #00d4ff !important;
}

html body.darkmode .profile-header p {
  color: #8b949e !important;
}

/* Card de nível (includes/nivel-card.php) */
html body.darkmode .user-level {
  background: #1a1c23 !important;
  border: 1px solid #2a2f3a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html body.darkmode .level-name,
html body.darkmode .level-info,
html body.darkmode .level-values span {
  color: #f0f6fc !important;
}

html body.darkmode .level-description {
  color: #8b949e !important;
}

html body.darkmode .next-level {
  color: #00d4ff !important;
}

html body.darkmode .user-level .plaque-progress-track {
  background: #21262d !important;
  border-color: #2a2f3a !important;
}

html body.darkmode .user-level .plaque-progress-fill {
  background: linear-gradient(90deg, #0056b3, #00d4ff) !important;
}

html body.darkmode .user-level .plaque-progress-pct {
  color: #f0f6fc !important;
}

html body.darkmode .btn-ver-niveis {
  background: linear-gradient(135deg, #0056b3, #00d4ff) !important;
  color: #0a0b10 !important;
  border: none !important;
}

/* Form controls (Bootstrap + páginas custom) */
html body.darkmode .main .form-control,
html body.darkmode .main .form-input,
html body.darkmode .main .form-textarea,
html body.darkmode .main .form-select,
html body.darkmode .main select:not([class*="sidebar"]),
html body.darkmode .main textarea,
html body.darkmode .main input[type="text"],
html body.darkmode .main input[type="email"],
html body.darkmode .main input[type="password"],
html body.darkmode .main input[type="number"],
html body.darkmode .main input[type="url"],
html body.darkmode .main input[type="search"],
html body.darkmode .main input[type="tel"],
html body.darkmode .main input[type="date"],
html body.darkmode .main input[type="datetime-local"],
html body.darkmode .main input[type="time"] {
  background-color: #21262d !important;
  background: #21262d !important;
  color: #c9d1d9 !important;
  border-color: #2a2f3a !important;
}

html body.darkmode .main .form-control:focus,
html body.darkmode .main input:focus,
html body.darkmode .main textarea:focus,
html body.darkmode .main select:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
  background-color: #21262d !important;
}

html body.darkmode .main input[style*="background"],
html body.darkmode .main textarea[style*="background"] {
  background-color: #21262d !important;
  color: #c9d1d9 !important;
}

html body.darkmode .main .form-label,
html body.darkmode .main label {
  color: #c9d1d9 !important;
}

html body.darkmode .main input[type="checkbox"],
html body.darkmode .main input[type="radio"] {
  accent-color: #00d4ff;
}

/* Botões */
html body.darkmode .main .btn-primary,
html body.darkmode .main button.btn-primary,
html body.darkmode .main .btn.btn-primary {
  background: linear-gradient(135deg, #0056b3, #00d4ff) !important;
  color: #0a0b10 !important;
  border: none !important;
}

html body.darkmode .main .btn-primary:hover {
  filter: brightness(1.08);
  color: #0a0b10 !important;
}

html body.darkmode .main .btn-secondary,
html body.darkmode .main .btn.btn-secondary {
  background: #21262d !important;
  color: #00d4ff !important;
  border: 2px solid rgba(0, 212, 255, 0.35) !important;
}

html body.darkmode .main .btn-secondary:hover {
  background: rgba(0, 212, 255, 0.12) !important;
}

html body.darkmode .main .btn-danger,
html body.darkmode .main .btn.btn-danger {
  background: rgba(248, 113, 113, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.4) !important;
}

html body.darkmode .main .btn,
html body.darkmode .main .btn-light {
  color: #c9d1d9;
}

html body.darkmode .main .close-modal,
html body.darkmode .main .btn-folder-action {
  background: #21262d !important;
  color: #c9d1d9 !important;
}

/* Modais */
html body.darkmode .modal-overlay,
html body.darkmode .modal-backdrop {
  background: rgba(10, 11, 16, 0.75) !important;
}

html body.darkmode .modal,
html body.darkmode .modal-content,
html body.darkmode .modal-dialog {
  background: #1a1c23 !important;
  border: 1px solid #2a2f3a !important;
  color: #c9d1d9 !important;
}

html body.darkmode .modal-header,
html body.darkmode .modal-footer,
html body.darkmode .modal-body {
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
}

/* Alertas */
html body.darkmode .alert-message,
html body.darkmode .success-message,
html body.darkmode .error-message,
html body.darkmode .alert-content {
  background: #21262d !important;
  border: 1px solid #2a2f3a !important;
  color: #c9d1d9 !important;
}

html body.darkmode .success-message {
  border-color: rgba(0, 212, 255, 0.35) !important;
}

html body.darkmode .error-message {
  border-color: rgba(248, 113, 113, 0.4) !important;
}

/* Tabelas Bootstrap / genéricas */
html body.darkmode .main .table,
html body.darkmode .main table.table {
  color: #c9d1d9 !important;
  --bs-table-bg: #1a1c23;
  --bs-table-striped-bg: #21262d;
}

html body.darkmode .main .table thead th,
html body.darkmode .main .table th {
  background: #21262d !important;
  color: #8b949e !important;
  border-color: #2a2f3a !important;
}

html body.darkmode .main .table td,
html body.darkmode .main .table tbody td {
  background: #1a1c23 !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
}

html body.darkmode .main .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #1a1c23 !important;
}

/* Cards / pastas / bots */
html body.darkmode .main .folder-card,
html body.darkmode .main .bot-card,
html body.darkmode .main .flow-bot-card,
html body.darkmode .main .settings-card {
  background: #1a1c23 !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
}

html body.darkmode .main .folder-name,
html body.darkmode .main .folder-icon {
  color: #00d4ff !important;
}

html body.darkmode .main .stat-item {
  border-bottom-color: #2a2f3a !important;
}

html body.darkmode .main .stat-item span {
  color: #8b949e !important;
}

html body.darkmode .main .stat-value {
  color: #00d4ff !important;
}

html body.darkmode .main .stat-item i,
html body.darkmode .main .stat-item svg {
  color: #00d4ff !important;
}

/* Seleção remarketing / disparo / cards de opção */
html body.darkmode .main .option-card,
html body.darkmode .main .choice-card,
html body.darkmode .main .config-block,
html body.darkmode .main .settings-section,
html body.darkmode .main .content-section {
  background: #1a1c23 !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
}

/* Texto utilitário claro → escuro */
html body.darkmode .main .text-dark,
html body.darkmode .main [class*="text-gray"] {
  color: #c9d1d9 !important;
}

html body.darkmode .main .border,
html body.darkmode .main .border-bottom,
html body.darkmode .main hr {
  border-color: #2a2f3a !important;
}

/* Listas */
html body.darkmode .main .list-group-item {
  background: #1a1c23 !important;
  border-color: #2a2f3a !important;
  color: #c9d1d9 !important;
}