/*--------------------------------------------------------------
# SyncSeller Theme System
# Light mode (default) + Dark mode (html.dark-mode)
# Carregado após style.css — sobrescreve por ordem de cascata
--------------------------------------------------------------*/

/* ============================================================
   SEÇÃO 1: Tokens de tema
   ============================================================ */

:root {
  /* ── Marca (iguais nos 2 temas — skill syncseller-design-system / site/css/style.css) ── */
  --ss-gold:       #F59E0B;
  --ss-gold-lt:    #FBBF24;
  --ss-gold-glow:  rgba(245, 158, 11, 0.18);
  --ss-danger:     #EF4444;
  --ss-on-accent:  #080F1E; /* texto sobre teal/ouro */

  --ss-ff-display: 'Space Grotesk', system-ui, sans-serif;
  --ss-ff-body:    'Inter', system-ui, sans-serif;
  --ss-ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ss-r:    10px;
  --ss-r-lg: 18px;
  --ss-ease: cubic-bezier(.22, 1, .36, 1);
  --ss-dur:  240ms;

  /* ── Tema claro ── */
  /* Superfícies */
  --ss-bg:        #F4F7FB;
  --ss-surface:   #FFFFFF;
  --ss-surface-2: #F4F7FB;
  --ss-surface-3: #E6ECF5;

  /* Inputs (ligeiramente diferente de surface para destacar) */
  --ss-input-bg:     #FFFFFF;
  --ss-input-border: #CDD6E4;
  --ss-input-focus:  #00A88B;
  --ss-input-placeholder: #8896B0;

  /* Texto */
  --ss-text:       #1A2845;
  --ss-text-title: #0D1829;
  --ss-text-muted: #5E7294;
  --ss-text-sub:   #3A4D6E;

  /* Acento — teal da marca; #00C9A7 não tem contraste sobre branco, então o claro
     usa um teal mais fechado (accent = ícone/borda/fundo, accent-text = texto/link) */
  --ss-accent:       #00A88B;
  --ss-accent-rgb:   0, 168, 139;
  --ss-accent-text:  #007A65;
  --ss-accent-hover: #00876F;
  --ss-accent-btn:   #00C9A7; /* fundo dos botões primários (texto --ss-on-accent) */
  --ss-accent-btn-h: #00B898;

  /* Sombras */
  --ss-shadow-header: rgba(8, 15, 30, 0.08);
  --ss-shadow-card:   rgba(8, 15, 30, 0.06);
  --ss-shadow-drop:   rgba(8, 15, 30, 0.16);

  /* Scrollbar */
  --ss-scrollbar-bg:    #FFFFFF;
  --ss-scrollbar-thumb: #B8C3D6;

  /* Sidebar version badges (beta = ouro, oficial = teal) */
  --ss-badge-beta-bg:     rgba(245, 158, 11, 0.12);
  --ss-badge-beta-border: rgba(245, 158, 11, 0.45);
  --ss-badge-beta-text:   #9A5B00;
  --ss-badge-prod-bg:     rgba(0, 168, 139, 0.10);
  --ss-badge-prod-border: rgba(0, 168, 139, 0.40);
  --ss-badge-prod-text:   #007A65;
  --ss-badge-info-text:   #5E7294;
  --ss-badge-info-sep:    #CDD6E4;

  /* Footer */
  --ss-footer-border: #E6ECF5;
  --ss-footer-text:   #5E7294;

  /* Tooltip */
  --ss-tooltip-bg:    #0D1829;
  --ss-tooltip-color: #E8EDF8;

  /* FAB */
  --ss-fab-bg:     #FFFFFF;
  --ss-fab-border: #E6ECF5;

  /* IA Chat */
  --ss-ia-user-bubble-bg:    #E6ECF5;
  --ss-ia-user-bubble-color: #1A2845;

  /* Chat perguntas */
  --ss-chat-msgs-bg: #F4F7FB;
}

html.dark-mode {
  /* Superfícies */
  --ss-bg:        #080F1E;
  --ss-surface:   #0D1829;
  --ss-surface-2: #131F35;
  --ss-surface-3: #1A2845;

  /* Inputs — MAIS CLARO que surface para destacar do card */
  --ss-input-bg:     #1A2845;
  --ss-input-border: #2A3E62;
  --ss-input-focus:  #00C9A7;
  --ss-input-placeholder: #5E7294;

  /* Texto */
  --ss-text:       #D6E0F0;
  --ss-text-title: #E8EDF8;
  --ss-text-muted: #8896B0;
  --ss-text-sub:   #8896B0;

  /* Acento — teal substitui indigo no dark mode */
  --ss-accent:       #00C9A7;
  --ss-accent-rgb:   0, 201, 167;
  --ss-accent-text:  #00C9A7;
  --ss-accent-hover: #00E5BE;
  --ss-accent-btn:   #00C9A7;
  --ss-accent-btn-h: #00E5BE;

  /* Sombras */
  --ss-shadow-header: rgba(0, 0, 0, 0.4);
  --ss-shadow-card:   rgba(0, 0, 0, 0.3);
  --ss-shadow-drop:   rgba(0, 0, 0, 0.55);

  /* Scrollbar */
  --ss-scrollbar-bg:    #0D1829;
  --ss-scrollbar-thumb: #2A3E62;

  /* Sidebar version badges */
  --ss-badge-beta-bg:     rgba(245, 158, 11, 0.1);
  --ss-badge-beta-border: rgba(245, 158, 11, 0.3);
  --ss-badge-beta-text:   #FBBF24;
  --ss-badge-prod-bg:     rgba(0, 201, 167, 0.1);
  --ss-badge-prod-border: rgba(0, 201, 167, 0.3);
  --ss-badge-prod-text:   #00C9A7;
  --ss-badge-info-text:   #8896B0;
  --ss-badge-info-sep:    #1A2845;

  /* Footer */
  --ss-footer-border: rgba(0, 201, 167, 0.12);
  --ss-footer-text:   #8896B0;

  /* Tooltip */
  --ss-tooltip-bg:    #00C9A7;
  --ss-tooltip-color: #080F1E;

  /* FAB */
  --ss-fab-bg:     #131F35;
  --ss-fab-border: #2A3E62;

  /* IA Chat */
  --ss-ia-user-bubble-bg:    #1A2845;
  --ss-ia-user-bubble-color: #D6E0F0;

  /* Chat perguntas */
  --ss-chat-msgs-bg: #080F1E;
}

/* ============================================================
   SEÇÃO 2: Bootstrap variable overrides (dark mode)
   ============================================================ */

/* O BS 5.2 redeclara as --bs-card-*, --bs-dropdown-*, --bs-modal-* etc. na própria
   classe do componente (ex.: .card{--bs-card-bg:#fff}); declarar só no <html> não
   chega neles. Por isso o bloco vale também para cada componente. */
html.dark-mode,
html.dark-mode .card,
html.dark-mode .dropdown-menu,
html.dark-mode .modal,
html.dark-mode .table,
html.dark-mode .pagination,
html.dark-mode .list-group,
html.dark-mode .toast,
html.dark-mode .popover,
html.dark-mode .accordion,
html.dark-mode .offcanvas,
html.dark-mode .offcanvas-start,
html.dark-mode .offcanvas-end,
html.dark-mode .offcanvas-top,
html.dark-mode .offcanvas-bottom {

  /* ── Body ────────────────────────────────────────── */
  --bs-body-bg:            #080F1E;
  --bs-body-color:         #D6E0F0;
  --bs-secondary-color:    #8896B0;
  --bs-tertiary-color:     #5E7294;
  --bs-tertiary-bg:        #131F35;
  --bs-emphasis-color:     #E8EDF8;
  --bs-border-color:       #2A3E62;
  --bs-border-color-translucent: rgba(42, 62, 98, 0.75);

  /* ── Links ───────────────────────────────────────── */
  --bs-link-color:       #00C9A7;
  --bs-link-hover-color: #00E5BE;
  --bs-link-color-rgb:   0, 201, 167;

  /* ── Brand primary ───────────────────────────────── */
  --bs-primary:     #00C9A7;
  --bs-primary-rgb: 0, 201, 167;

  /* ── Semantic background subtle (BS 5.2+) ────────── */
  --bs-primary-bg-subtle:   rgba(0, 201, 167, 0.12);
  --bs-secondary-bg-subtle: rgba(136, 150, 176, 0.1);
  --bs-success-bg-subtle:   rgba(25, 135, 84, 0.12);
  --bs-danger-bg-subtle:    rgba(220, 53, 69, 0.12);
  --bs-warning-bg-subtle:   rgba(255, 193, 7, 0.12);
  --bs-info-bg-subtle:      rgba(13, 202, 240, 0.12);
  --bs-light-bg-subtle:     rgba(26, 40, 69, 0.5);
  --bs-dark-bg-subtle:      rgba(26, 40, 69, 0.8);

  /* Semantic text emphasis */
  --bs-primary-text-emphasis:   #00C9A7;
  --bs-secondary-text-emphasis: #8896B0;
  --bs-success-text-emphasis:   #5ec98c;
  --bs-danger-text-emphasis:    #f07781;
  --bs-warning-text-emphasis:   #ffd966;
  --bs-info-text-emphasis:      #70dbf9;

  /* ── Cards ───────────────────────────────────────── */
  --bs-card-bg:            #0D1829;
  --bs-card-border-color:  #2A3E62;
  --bs-card-cap-bg:        #0D1829;
  --bs-card-color:         #D6E0F0;
  --bs-card-cap-color:     #8896B0;

  /* ── Dropdowns ───────────────────────────────────── */
  --bs-dropdown-bg:             #131F35;
  --bs-dropdown-border-color:   #2A3E62;
  --bs-dropdown-color:          #D6E0F0;
  --bs-dropdown-link-color:     #D6E0F0;
  --bs-dropdown-link-hover-bg:  #1A2845;
  --bs-dropdown-link-hover-color: #E8EDF8;
  --bs-dropdown-link-active-bg: #00C9A7;
  --bs-dropdown-link-active-color: #080F1E;
  --bs-dropdown-divider-bg:     #2A3E62;
  --bs-dropdown-header-color:   #8896B0;

  /* ── Modais ──────────────────────────────────────── */
  --bs-modal-bg:                    #0D1829;
  --bs-modal-header-bg:             #0D1829;
  --bs-modal-border-color:          #2A3E62;
  --bs-modal-color:                 #D6E0F0;
  --bs-modal-footer-bg:             #0D1829;
  --bs-modal-header-border-color:   #2A3E62;
  --bs-modal-footer-border-color:   #2A3E62;
  --bs-modal-content-border-color:  #2A3E62;

  /* ── Tabelas ─────────────────────────────────────── */
  --bs-table-bg:            transparent;
  --bs-table-color:         #D6E0F0;
  --bs-table-border-color:  #2A3E62;
  --bs-table-striped-bg:    rgba(42, 62, 98, 0.25);
  --bs-table-striped-color: #D6E0F0;
  --bs-table-hover-bg:      rgba(0, 201, 167, 0.07);
  --bs-table-hover-color:   #E8EDF8;
  --bs-table-active-bg:     rgba(0, 201, 167, 0.12);
  --bs-table-active-color:  #E8EDF8;

  /* ── Formulários / Inputs ────────────────────────── */
  --bs-input-bg:                  #1A2845;
  --bs-input-color:               #D6E0F0;
  --bs-input-border-color:        #2A3E62;
  --bs-input-focus-border-color:  #00C9A7;
  --bs-input-placeholder-color:   #5E7294;
  --bs-form-valid-color:          #5ec98c;
  --bs-form-valid-border-color:   #5ec98c;
  --bs-form-invalid-color:        #f07781;
  --bs-form-invalid-border-color: #f07781;

  /* ── Paginação ───────────────────────────────────── */
  --bs-pagination-bg:                   #0D1829;
  --bs-pagination-color:                #D6E0F0;
  --bs-pagination-border-color:         #2A3E62;
  --bs-pagination-hover-bg:             #131F35;
  --bs-pagination-hover-color:          #E8EDF8;
  --bs-pagination-hover-border-color:   #2A3E62;
  --bs-pagination-active-bg:            #00C9A7;
  --bs-pagination-active-border-color:  #00C9A7;
  --bs-pagination-active-color:         #080F1E;
  --bs-pagination-disabled-bg:          #0D1829;
  --bs-pagination-disabled-color:       #5E7294;
  --bs-pagination-disabled-border-color:#2A3E62;

  /* ── List groups ─────────────────────────────────── */
  --bs-list-group-bg:               #0D1829;
  --bs-list-group-border-color:     #2A3E62;
  --bs-list-group-color:            #D6E0F0;
  --bs-list-group-action-hover-bg:  #131F35;
  --bs-list-group-action-active-bg: #1A2845;
  --bs-list-group-action-color:     #D6E0F0;

  /* ── Toasts ──────────────────────────────────────── */
  --bs-toast-bg:           rgba(13, 24, 41, 0.97);
  --bs-toast-border-color: #2A3E62;
  --bs-toast-color:        #D6E0F0;
  --bs-toast-header-bg:    rgba(19, 31, 53, 0.9);
  --bs-toast-header-color: #8896B0;
  --bs-toast-header-border-color: #2A3E62;

  /* ── Popovers ────────────────────────────────────── */
  --bs-popover-bg:           #131F35;
  --bs-popover-border-color: #2A3E62;
  --bs-popover-header-bg:    #1A2845;
  --bs-popover-header-color: #E8EDF8;
  --bs-popover-body-color:   #D6E0F0;

  /* ── Accordion ───────────────────────────────────── */
  --bs-accordion-bg:                   #0D1829;
  --bs-accordion-border-color:         #2A3E62;
  --bs-accordion-btn-color:            #D6E0F0;
  --bs-accordion-btn-bg:               #0D1829;
  --bs-accordion-active-color:         #00C9A7;
  --bs-accordion-active-bg:            #131F35;
  --bs-accordion-btn-focus-border-color: #00C9A7;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(0, 201, 167, 0.15);

  /* ── Offcanvas ───────────────────────────────────── */
  --bs-offcanvas-bg:     #0D1829;
  --bs-offcanvas-color:  #D6E0F0;
  --bs-offcanvas-border-color: #2A3E62;
}

html.dark-mode { color-scheme: dark; }

/* ============================================================
   SEÇÃO 2b: Marca no Bootstrap — vale para os 2 temas
   BS 5.2 compila as variáveis de botão, paginação etc. na própria classe,
   então mudar --bs-primary não basta: re-declaramos nas classes.
   ============================================================ */

:root {
  --bs-primary:        #00A88B;
  --bs-primary-rgb:    var(--ss-accent-rgb);
  --bs-link-color:     var(--ss-accent-text);
  --bs-link-hover-color: var(--ss-accent-hover);
  --bs-danger:         #EF4444;
  --bs-danger-rgb:     239, 68, 68;
  --bs-body-font-family: var(--ss-ff-body);
  --bs-font-sans-serif:  var(--ss-ff-body);
  --bs-font-monospace:   var(--ss-ff-mono);
  --bs-body-bg:        var(--ss-bg);
  --bs-body-color:     var(--ss-text);
}
html.dark-mode { --bs-danger: #EF4444; --bs-danger-rgb: 239, 68, 68; }

/* ── Botões ── */
.btn-primary {
  --bs-btn-color: var(--ss-on-accent);
  --bs-btn-bg: var(--ss-accent-btn);
  --bs-btn-border-color: var(--ss-accent-btn);
  --bs-btn-hover-color: var(--ss-on-accent);
  --bs-btn-hover-bg: var(--ss-accent-btn-h);
  --bs-btn-hover-border-color: var(--ss-accent-btn-h);
  --bs-btn-focus-shadow-rgb: var(--ss-accent-rgb);
  --bs-btn-active-color: var(--ss-on-accent);
  --bs-btn-active-bg: var(--ss-accent-btn-h);
  --bs-btn-active-border-color: var(--ss-accent-btn-h);
  --bs-btn-disabled-color: var(--ss-on-accent);
  --bs-btn-disabled-bg: var(--ss-accent-btn);
  --bs-btn-disabled-border-color: var(--ss-accent-btn);
}
.btn-outline-primary {
  --bs-btn-color: var(--ss-accent-text);
  --bs-btn-border-color: var(--ss-accent);
  --bs-btn-hover-color: var(--ss-on-accent);
  --bs-btn-hover-bg: var(--ss-accent-btn);
  --bs-btn-hover-border-color: var(--ss-accent-btn);
  --bs-btn-focus-shadow-rgb: var(--ss-accent-rgb);
  --bs-btn-active-color: var(--ss-on-accent);
  --bs-btn-active-bg: var(--ss-accent-btn);
  --bs-btn-active-border-color: var(--ss-accent-btn);
  --bs-btn-disabled-color: var(--ss-accent-text);
  --bs-btn-disabled-border-color: var(--ss-accent);
}
.btn-danger {
  --bs-btn-bg: #EF4444;
  --bs-btn-border-color: #EF4444;
  --bs-btn-hover-bg: #DC2626;
  --bs-btn-hover-border-color: #DC2626;
  --bs-btn-active-bg: #DC2626;
  --bs-btn-active-border-color: #DC2626;
  --bs-btn-disabled-bg: #EF4444;
  --bs-btn-disabled-border-color: #EF4444;
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
}
.btn-outline-danger {
  --bs-btn-color: #EF4444;
  --bs-btn-border-color: #EF4444;
  --bs-btn-hover-bg: #EF4444;
  --bs-btn-hover-border-color: #EF4444;
  --bs-btn-active-bg: #EF4444;
  --bs-btn-active-border-color: #EF4444;
  --bs-btn-disabled-color: #EF4444;
  --bs-btn-disabled-border-color: #EF4444;
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
}
.btn-link {
  --bs-btn-color: var(--ss-accent-text);
  --bs-btn-hover-color: var(--ss-accent-hover);
  --bs-btn-active-color: var(--ss-accent-hover);
}

/* Ouro = conversão (plano, upgrade, assinar). Um por bloco — ver skill syncseller-design-system */
.btn-gold {
  --bs-btn-color: var(--ss-on-accent);
  --bs-btn-bg: var(--ss-gold);
  --bs-btn-border-color: var(--ss-gold);
  --bs-btn-hover-color: var(--ss-on-accent);
  --bs-btn-hover-bg: var(--ss-gold-lt);
  --bs-btn-hover-border-color: var(--ss-gold-lt);
  --bs-btn-focus-shadow-rgb: 245, 158, 11;
  --bs-btn-active-color: var(--ss-on-accent);
  --bs-btn-active-bg: var(--ss-gold-lt);
  --bs-btn-active-border-color: var(--ss-gold-lt);
  --bs-btn-disabled-color: var(--ss-on-accent);
  --bs-btn-disabled-bg: var(--ss-gold);
  --bs-btn-disabled-border-color: var(--ss-gold);
}
.btn-gold:hover { box-shadow: 0 8px 24px var(--ss-gold-glow); }

/* reCAPTCHA v3: selo flutuante escondido; o aviso exigido pelo Google vai em texto (.ss-recaptcha-aviso) */
.grecaptcha-badge { visibility: hidden !important; }
.ss-recaptcha-aviso { margin: 12px 0 0; font-size: .72rem; line-height: 1.4; text-align: center; color: var(--ss-text-muted); }
.ss-recaptcha-aviso a { color: inherit; text-decoration: underline; }

/* Abas (nav-tabs simples): aba ativa com o fundo do painel e indicador teal */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--ss-surface-3);
  --bs-nav-tabs-link-hover-border-color: var(--ss-surface-3) var(--ss-surface-3) var(--ss-surface-3);
  --bs-nav-tabs-link-active-color: var(--ss-text-title);
  --bs-nav-tabs-link-active-bg: var(--ss-surface);
  --bs-nav-tabs-link-active-border-color: var(--ss-surface-3) var(--ss-surface-3) var(--ss-surface);
}
.nav-tabs:not(.nav-tabs-bordered) .nav-link.active { box-shadow: inset 0 2px 0 var(--ss-accent); font-weight: 600; }
html.dark-mode .nav-tabs {
  --bs-nav-tabs-border-color: #2A3E62;
  --bs-nav-tabs-link-hover-border-color: #2A3E62 #2A3E62 #2A3E62;
  --bs-nav-tabs-link-active-border-color: #2A3E62 #2A3E62 var(--ss-surface);
}

/* Alertas no escuro: fundo translúcido da cor + texto claro (o BS 5.2 fixa tons pastel na classe) */
html.dark-mode .alert { --bs-alert-link-color: inherit; }
html.dark-mode .alert-primary   { --bs-alert-color: #7FEBD9; --bs-alert-bg: rgba(0, 201, 167, .10);  --bs-alert-border-color: rgba(0, 201, 167, .30); }
html.dark-mode .alert-secondary { --bs-alert-color: #C3CCDD; --bs-alert-bg: rgba(136, 150, 176, .10); --bs-alert-border-color: rgba(136, 150, 176, .30); }
html.dark-mode .alert-success   { --bs-alert-color: #86E0AC; --bs-alert-bg: rgba(46, 202, 106, .10);  --bs-alert-border-color: rgba(46, 202, 106, .30); }
html.dark-mode .alert-danger    { --bs-alert-color: #FCA5A5; --bs-alert-bg: rgba(239, 68, 68, .10);   --bs-alert-border-color: rgba(239, 68, 68, .35); }
html.dark-mode .alert-warning   { --bs-alert-color: #FCD34D; --bs-alert-bg: rgba(245, 158, 11, .10);  --bs-alert-border-color: rgba(245, 158, 11, .35); }
html.dark-mode .alert-info      { --bs-alert-color: #7DD3FC; --bs-alert-bg: rgba(14, 165, 233, .10);  --bs-alert-border-color: rgba(14, 165, 233, .30); }
html.dark-mode .alert-light     { --bs-alert-color: #D6E0F0; --bs-alert-bg: #131F35;                 --bs-alert-border-color: #2A3E62; }
html.dark-mode .alert-dark      { --bs-alert-color: #D6E0F0; --bs-alert-bg: #080F1E;                 --bs-alert-border-color: #2A3E62; }

/* Chats somente leitura/perguntas (claims.css #mensagens-lista, anuncio.css #chat-perguntas-msgs):
   comprador = bolha neutra, vendedor = teal, mediador ML = cinza-azulado.
   Prefixo html: os CSS dos módulos carregam depois do theme.css. */
html #mensagens-lista { background: var(--ss-chat-msgs-bg); }
html .chat-list .chat-message { background: var(--ss-surface-3); color: var(--ss-text); }
html .chat-list .chat-img .chat-avatar-buyer { background: var(--ss-surface-3); color: var(--ss-text-muted); }
html .chat-list .in .chat-message:before { border-right-color: var(--ss-surface-3); }
html .chat-list .chat-img .chat-avatar-seller,
html .chat-list .out .chat-message { background: var(--ss-accent-btn); color: var(--ss-on-accent); }
html .chat-list .out .chat-message:before { border-left-color: var(--ss-accent-btn); }
html .chat-list .chat-img .chat-avatar-mediator,
html .chat-list .chat-message.chat-message-mediator { background: #5E7294; color: #fff; }
html .chat-list .in .chat-message.chat-message-mediator:before { border-right-color: #5E7294; }

/* SweetAlert com confirm/cancelButtonColor 'var(--ss-accent-btn)': texto navy sobre teal */
.swal2-styled[style*="--ss-accent-btn"] { color: var(--ss-on-accent) !important; }

.text-bg-primary { color: var(--ss-on-accent) !important; background-color: var(--ss-accent-btn) !important; }
.text-primary { color: var(--ss-accent-text) !important; }

/* ── Componentes com cor compilada ── */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ss-accent-btn);
  --bs-nav-pills-link-active-color: var(--ss-on-accent);
}
.nav {
  --bs-nav-link-color: var(--ss-accent-text);
  --bs-nav-link-hover-color: var(--ss-accent-hover);
}
.pagination {
  --bs-pagination-color: var(--ss-accent-text);
  --bs-pagination-hover-color: var(--ss-accent-hover);
  --bs-pagination-focus-color: var(--ss-accent-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--ss-accent-rgb), 0.2);
  --bs-pagination-active-color: var(--ss-on-accent);
  --bs-pagination-active-bg: var(--ss-accent-btn);
  --bs-pagination-active-border-color: var(--ss-accent-btn);
}
.progress, .progress-stacked { --bs-progress-bar-bg: var(--ss-accent-btn); }
.list-group {
  --bs-list-group-active-color: var(--ss-on-accent);
  --bs-list-group-active-bg: var(--ss-accent-btn);
  --bs-list-group-active-border-color: var(--ss-accent-btn);
}
.dropdown-menu {
  --bs-dropdown-link-active-color: var(--ss-on-accent);
  --bs-dropdown-link-active-bg: var(--ss-accent-btn);
}
.accordion {
  --bs-accordion-btn-focus-border-color: var(--ss-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--ss-accent-rgb), 0.15);
  --bs-accordion-active-color: var(--ss-accent-text);
}
html:not(.dark-mode) .accordion { --bs-accordion-active-bg: rgba(var(--ss-accent-rgb), 0.08); }

.form-control:focus,
.form-select:focus {
  border-color: var(--ss-input-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--ss-accent-rgb), 0.15);
}
.form-check-input:focus {
  border-color: var(--ss-input-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--ss-accent-rgb), 0.2);
}
.form-check-input:checked {
  background-color: var(--ss-accent);
  border-color: var(--ss-accent);
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--ss-accent);
  border-color: var(--ss-accent);
}
.form-switch .form-check-input:focus:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2300A88B'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--ss-accent); }
.form-range::-moz-range-thumb { background-color: var(--ss-accent); }
.btn-check:focus-visible + .btn,
.btn:focus-visible { box-shadow: 0 0 0 0.2rem rgba(var(--ss-accent-rgb), 0.25); }

/* ── Tipografia da marca ── */
body { font-family: var(--ss-ff-body); }
h1, h2, h3, h4, h5, h6,
.pagetitle h1, .card-title, .logo span,
.offcanvas-title, .modal-title, .btn,
.sidebar-nav .nav-heading, .sidebar-nav .nav-link,
.dashboard .info-card h6 { font-family: var(--ss-ff-display); }
code, kbd, pre, samp, .font-monospace, .mono { font-family: var(--ss-ff-mono); }
.mono, .font-monospace { font-variant-numeric: tabular-nums; }

/* ============================================================
   SEÇÃO 3: Form controls — BS5.2 não cobre tudo via vars
   ============================================================ */

/* Inputs e selects */
html.dark-mode .form-control,
html.dark-mode .form-select {
  background-color: var(--ss-input-bg);
  color: var(--ss-text);
  border-color: var(--ss-input-border);
}

html.dark-mode .form-control::placeholder { color: var(--ss-input-placeholder); }

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
  background-color: var(--ss-input-bg);
  border-color: var(--ss-input-focus);
  color: var(--ss-text);
  box-shadow: 0 0 0 0.2rem rgba(0, 201, 167, 0.15);
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly],
html.dark-mode .form-select:disabled {
  background-color: #131F35;
  color: var(--ss-text-muted);
  opacity: 0.7;
}

/* Input groups */
html.dark-mode .input-group-text {
  background-color: #131F35;
  color: var(--ss-text-muted);
  border-color: var(--ss-input-border);
}

/* Checkboxes e radios */
html.dark-mode .form-check-input {
  background-color: #1A2845;
  border-color: #2A3E62;
}
html.dark-mode .form-check-input:checked {
  background-color: var(--ss-accent);
  border-color: var(--ss-accent);
}
html.dark-mode .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 201, 167, 0.2);
}

/* Range */
html.dark-mode .form-range::-webkit-slider-runnable-track {
  background-color: #1A2845;
}
html.dark-mode .form-range::-webkit-slider-thumb {
  background-color: var(--ss-accent);
}

/* Labels */
html.dark-mode .form-label,
html.dark-mode label { color: var(--ss-text-muted); }

/* Form text (help text below fields) */
html.dark-mode .form-text { color: var(--ss-text-muted); }

/* ============================================================
   SEÇÃO 4: Bindings — re-target seletores de style.css com vars
   ============================================================ */

/* ── Base ─────────────────────────────────────────── */
body {
  background: var(--ss-bg);
  color: var(--ss-text);
}

a { color: var(--ss-accent-text); }
a:hover { color: var(--ss-accent-hover); }

/* ── Page Title ───────────────────────────────────── */
.pagetitle h1 { color: var(--ss-text-title); }

/* ── Breadcrumbs ─────────────────────────────────── */
.breadcrumb { color: var(--ss-text-muted); }
.breadcrumb a { color: var(--ss-text-muted); }
.breadcrumb a:hover { color: var(--ss-text-sub); }
.breadcrumb .breadcrumb-item::before { color: var(--ss-text-muted); }
.breadcrumb .active { color: var(--ss-text-sub); font-weight: 600; }

/* ── Cards ────────────────────────────────────────── */
.card { box-shadow: 0px 0 30px var(--ss-shadow-card); }

.card-header,
.card-footer {
  border-color: var(--ss-surface-3);
  background-color: var(--ss-surface);
  color: var(--ss-text-muted);
}

.card-title { color: var(--ss-text-title); }
.card-title span { color: var(--ss-text-muted); }

/* ── Dropdowns ───────────────────────────────────── */
.dropdown-menu {
  background-color: var(--ss-surface);
  box-shadow: 0 5px 30px 0 var(--ss-shadow-drop);
}

.dropdown-menu .dropdown-footer a { color: var(--ss-text); }
.dropdown-menu .dropdown-divider { color: var(--ss-surface-3); }
.dropdown-menu .dropdown-item:hover { background-color: var(--ss-surface-2); }

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    background: var(--ss-surface);
    border-top-color: var(--ss-surface-3);
    border-left-color: var(--ss-surface-3);
  }
}

/* ── Accordion ───────────────────────────────────── */
.accordion-item { border-color: var(--ss-surface-3); }

.accordion-button:not(.collapsed) {
  color: var(--ss-text-title);
  background-color: var(--ss-surface-2);
}

.accordion-flush .accordion-button:not(.collapsed) { color: var(--ss-accent-text); }
.accordion-flush .accordion-body { color: var(--ss-text); }

/* ── Bordered Tabs ───────────────────────────────── */
.nav-tabs-bordered { border-bottom-color: var(--ss-surface-3); }
.nav-tabs-bordered .nav-link { color: var(--ss-text); }
.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus { color: var(--ss-accent-text); }
.nav-tabs-bordered .nav-link.active {
  background-color: var(--ss-surface);
  color: var(--ss-accent-text);
  border-bottom-color: var(--ss-accent);
}

/* ── Header ──────────────────────────────────────── */
.header {
  background-color: var(--ss-surface);
  box-shadow: 0px 2px 20px var(--ss-shadow-header);
}

.header .toggle-sidebar-btn { color: var(--ss-text-title); }
.header .search-form input { color: var(--ss-text-title); }
.header .search-form button i { color: var(--ss-text-title); }

@media (max-width: 1199px) {
  .header .search-bar { background: var(--ss-surface); }
}

/* ── Logo ────────────────────────────────────────── */
.logo span { color: var(--ss-text-title); }
/* Toggle do menu colado ao nome (style.css fixava .logo em 280px no desktop) */
@media (min-width: 1200px) {
  .logo { width: auto; }
}
.header .toggle-sidebar-btn { padding-left: 0; margin-left: 16px; }

/* ── Header nav ──────────────────────────────────── */
.header-nav .nav-icon    { color: var(--ss-text-title); }
.header-nav .nav-profile { color: var(--ss-text-title); }

.header-nav .notifications .notification-item:hover { background-color: var(--ss-surface-2); }
.header-nav .messages .message-item h4 { color: var(--ss-text); }
.header-nav .messages .message-item:hover { background-color: var(--ss-surface-2); }

.header-nav .profile .dropdown-header h6 { color: var(--ss-text); }
.header-nav .profile .dropdown-item:hover { background-color: var(--ss-surface-2); }

/* Menu do perfil com largura fixa (antes variava com o nome do usuário logado);
   nomes longos quebram em mais de uma linha em vez de alargar o menu */
.header-nav .profile {
  width: 300px;
  min-width: 300px;
  max-width: calc(100vw - 24px);
}
.header-nav .profile .dropdown-header h6 {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* Cabeçalho do menu do perfil: avatar, nome, login, tipo de conta e descrição */
.header-nav .profile .profile-dd-header {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 16px 10px; text-align: center;
}
/* Logos de canal (assets/img/app/*): PNG transparente com contorno navy (ex.: Mercado Livre)
   some no tema escuro — ganham um fundo branco. Raio/padding com especificidade zero (:where)
   para não sobrescrever quem já define formato (ex.: .ss-filter-ico-img redondo). */
html.dark-mode img[src*="img/app/"] { background-color: #fff; }
:where(html.dark-mode) :where(img[src*="img/app/"]) { border-radius: 6px; padding: 2px; }

/* Avatar com iniciais (header.php) */
.ss-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(var(--ss-accent-rgb), .14);
  border: 1px solid rgba(var(--ss-accent-rgb), .35);
  color: var(--ss-accent-text);
  font: 600 .85rem/1 var(--ss-ff-display);
  letter-spacing: .02em;
}
.header-nav .profile .profile-dd-avatar { width: 56px; height: 56px; margin-bottom: 8px; font-size: 1.25rem; }
.header-nav .profile .profile-dd-header h6 { font-size: 16px; }
.header-nav .profile .profile-dd-user { font-size: 13px; font-weight: 600; color: var(--ss-text-muted); margin-top: 2px; }
.header-nav .profile .profile-dd-tipo {
  margin-top: 8px; font-size: 12px; font-weight: 600;
  background-color: var(--ss-surface-2); color: var(--ss-accent-text);
}
.header-nav .profile .profile-dd-desc {
  margin: 8px 0 0; font-size: 12px; line-height: 1.45; white-space: normal;
  color: var(--ss-text-muted);
}

/* Dados da conta (ID, cadastro, última alteração) */
.header-nav .profile .profile-dd-info { list-style: none; margin: 0; padding: 4px 16px 8px; font-size: 13px; }
.header-nav .profile .profile-dd-info li {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 0; border-top: 1px solid var(--ss-surface-3);
}
.header-nav .profile .profile-dd-info li span { color: var(--ss-text-muted); }
.header-nav .profile .profile-dd-info li strong { font-weight: 600; white-space: nowrap; }

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
  background-color: var(--ss-surface);
  box-shadow: 0px 0px 20px var(--ss-shadow-header);
}

.sidebar-nav::-webkit-scrollbar { background-color: var(--ss-scrollbar-bg); }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: var(--ss-scrollbar-thumb); }
.sidebar-nav { scrollbar-color: var(--ss-scrollbar-thumb) transparent; }

.sidebar-nav .nav-heading { color: var(--ss-text-muted); }

.sidebar-nav .nav-link {
  color: var(--ss-accent-text);
  background: var(--ss-surface-2);
}
.sidebar-nav .nav-link i { color: var(--ss-accent-text); }

.sidebar-nav .nav-link.collapsed {
  color: var(--ss-text-title);
  background: var(--ss-surface);
}
.sidebar-nav .nav-link.collapsed i { color: var(--ss-text-muted); }

.sidebar-nav .nav-link:hover {
  color: var(--ss-accent-text);
  background: var(--ss-surface-2);
}
.sidebar-nav .nav-link:hover i { color: var(--ss-accent-text); }

.sidebar-nav .nav-content a { color: var(--ss-text-title); }
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active { color: var(--ss-accent-text); }
.sidebar-nav .nav-content a.active i { background-color: var(--ss-accent); }

/* ── Sidebar badges ──────────────────────────────── */
.sidebar-version { border-top-color: var(--ss-surface-3); }

.sidebar-version-beta {
  background-color: var(--ss-badge-beta-bg);
  border-color: var(--ss-badge-beta-border);
}
.sidebar-version-beta i,
.sidebar-version-beta strong { color: var(--ss-badge-beta-text); }

/* Tag "BETA" nos itens de menu em teste (coreController::ROTAS_BETA) */
.sidebar-nav .menu-beta-tag {
  margin-left: auto;
  padding: 0 6px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 4px;
  background-color: var(--ss-badge-beta-bg);
  border: 1px solid var(--ss-badge-beta-border);
  color: var(--ss-badge-beta-text);
}

.sidebar-version-oficial {
  background-color: var(--ss-badge-prod-bg);
  border-color: var(--ss-badge-prod-border);
}
.sidebar-version-oficial i,
.sidebar-version-oficial strong { color: var(--ss-badge-prod-text); }

.sidebar-version-info { color: var(--ss-badge-info-text); }
.sidebar-version-info span + span::before { color: var(--ss-badge-info-sep); }

/* ── Dashboard ───────────────────────────────────── */
.dashboard .info-card h6 { color: var(--ss-text-title); }
.dashboard .filter .icon { color: var(--ss-text-muted); }
.dashboard .filter .icon:hover { color: var(--ss-accent-text); }
.dashboard .filter .dropdown-header h6 { color: var(--ss-text-muted); }
.dashboard .news h4 a { color: var(--ss-text-title); }
.dashboard .news h4 a:hover { color: var(--ss-accent-text); }

/* Table thead */
.card-body .table thead { background: var(--ss-surface-2); }
.dashboard .top-selling .table thead { background: var(--ss-surface-2); }

/* ── Profile page ────────────────────────────────── */
html.dark-mode .profile .profile-card h2 { color: var(--ss-text-title); }
html.dark-mode .profile .profile-overview .card-title { color: var(--ss-text-title); }
html.dark-mode .profile .profile-overview .label,
html.dark-mode .profile .profile-edit label { color: var(--ss-text-muted); }

/* ── Footer ──────────────────────────────────────── */
.footer { border-top-color: var(--ss-footer-border); }
.footer .copyright { color: var(--ss-footer-text); }
.footer .credits { color: var(--ss-footer-text); }

/* ── Tooltip ─────────────────────────────────────── */
.ss-tooltip {
  --bs-tooltip-bg: var(--ss-tooltip-bg);
  --bs-tooltip-color: var(--ss-tooltip-color);
}

/* ============================================================
   SEÇÃO 5: Toggle button
   ============================================================ */

.theme-toggle-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ss-text-title);
  padding: 0;
  margin-right: 20px;
  cursor: pointer;
  line-height: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s ease, transform 0.3s ease;
}

.theme-toggle-btn:hover {
  color: var(--ss-accent-text);
  transform: rotate(20deg);
}

/* Modo apresentação ligado: olho em destaque (círculo na cor de destaque) */
html.ss-privacy #privacy-toggle {
  color: var(--ss-accent-text);
  background: rgba(var(--ss-accent-rgb), 0.16);
  box-shadow: 0 0 0 1px rgba(var(--ss-accent-rgb), 0.45);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  justify-content: center;
  margin-right: 14px; /* compensa a largura do círculo: o espaçamento até o tema fica igual */
}

html.ss-privacy #privacy-toggle:hover { transform: none; }

/* ============================================================
   SEÇÃO 5b: Modo apresentação — embaralha dados pessoais (.ss-pii)
   O texto vira dado fictício em assets/js/privacy.js; aqui só o que o JS não troca.
   ============================================================ */

/* Até o primeiro embaralhamento (DOMContentLoaded) o dado real não aparece */
html.ss-privacy:not(.ss-privacy-pronto) .ss-pii { visibility: hidden; }

/* input/textarea editáveis: trocar o value quebraria o salvamento, então seguem desfocados.
   Abaixo de ~3px o texto de 13-14px começa a ficar legível; o blur pega a caixa inteira. */
html.ss-privacy input.ss-pii,
html.ss-privacy textarea.ss-pii { filter: blur(3px); }

/* Imagem com dado pessoal (ex.: etiqueta ZPL renderizada) não tem texto para trocar */
html.ss-privacy .ss-pii img,
html.ss-privacy .ss-pii canvas,
html.ss-privacy .ss-pii iframe,
html.ss-privacy .ss-pii embed,
html.ss-privacy .ss-pii object,
html.ss-privacy img.ss-pii { filter: blur(6px); }

/* ============================================================
   SEÇÃO 6: Dark mode — overrides específicos de componentes
   ============================================================ */

/* ── Modal ───────────────────────────────────────── */
html.dark-mode .modal-content {
  background-color: #0D1829;
  border-color: #2A3E62;
}

html.dark-mode .modal-header {
  border-bottom-color: #2A3E62;
  background-color: #0D1829;
}

html.dark-mode .modal-title { color: #E8EDF8; }

html.dark-mode .modal-footer {
  border-top-color: #2A3E62;
  background-color: #0D1829;
}

/* Close button — precisa de invert pois é SVG escuro no tema claro */
html.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(2);
}

/* ── Tabelas / Grids ─────────────────────────────── */
html.dark-mode .table {
  color: #D6E0F0;
  border-color: #2A3E62;
}

html.dark-mode .table thead th {
  background-color: #131F35;
  color: #8896B0;
  border-bottom-color: #2A3E62;
}

html.dark-mode .table td,
html.dark-mode .table th {
  border-color: #2A3E62;
}

html.dark-mode .table-hover tbody tr:hover > * {
  background-color: rgba(0, 201, 167, 0.06);
  color: #E8EDF8;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(42, 62, 98, 0.2);
  color: #D6E0F0;
}

/* table-responsive overflow não fica com fundo errado */
html.dark-mode .table-responsive { background: transparent; }

/* ── DataTables ──────────────────────────────────── */
html.dark-mode .dataTables_wrapper .dataTables_filter input,
html.dark-mode .dataTables_wrapper .dataTables_length select {
  background-color: var(--ss-input-bg);
  color: var(--ss-text);
  border-color: var(--ss-input-border);
}

html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_paginate { color: #8896B0; }

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #00C9A7;
  border-color: #00C9A7;
  color: #080F1E !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover {
  background: #131F35;
  border-color: #2A3E62;
  color: #E8EDF8 !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #5E7294 !important;
}

/* Sort icons */
html.dark-mode table.dataTable thead .sorting:before,
html.dark-mode table.dataTable thead .sorting:after,
html.dark-mode table.dataTable thead .sorting_asc:before,
html.dark-mode table.dataTable thead .sorting_desc:after {
  color: #5E7294;
}

/* Simple DataTables */
html.dark-mode .dataTable-wrapper .dataTable-input,
html.dark-mode .dataTable-wrapper .dataTable-selector {
  background-color: var(--ss-input-bg);
  color: var(--ss-text);
  border-color: var(--ss-input-border);
}

html.dark-mode .dataTable-wrapper .dataTable-info,
html.dark-mode .dataTable-wrapper .dataTable-pagination { color: #8896B0; }

html.dark-mode .dataTable-wrapper .dataTable-pagination a {
  background-color: #0D1829;
  color: #D6E0F0;
  border-color: #2A3E62;
}

html.dark-mode .dataTable-wrapper .dataTable-pagination a:hover {
  background-color: #131F35;
  color: #E8EDF8;
}

html.dark-mode .dataTable-wrapper .dataTable-pagination a.active {
  background-color: #00C9A7;
  border-color: #00C9A7;
  color: #080F1E;
}

/* ── Dashboard KPI cards ─────────────────────────── */
/* Os cards usam utilitários BS como bg-*-subtle / text-* */
/* Com as vars --bs-*-bg-subtle já declaradas acima, funcionam automaticamente */

/* Icones dos KPI - reforço do bg-subtle */
html.dark-mode .kpi-icon.bg-success-subtle { background-color: rgba(25, 135, 84, 0.15) !important; }
html.dark-mode .kpi-icon.bg-warning-subtle { background-color: rgba(255, 193, 7, 0.15) !important; }
html.dark-mode .kpi-icon.bg-primary-subtle { background-color: rgba(0, 201, 167, 0.15) !important; }
html.dark-mode .kpi-icon.bg-info-subtle    { background-color: rgba(13, 202, 240, 0.15) !important; }
html.dark-mode .kpi-icon.bg-danger-subtle  { background-color: rgba(220, 53, 69, 0.15) !important; }

/* KPI valores */
html.dark-mode .info-card h3.text-success { color: #5ec98c !important; }
html.dark-mode .info-card h3.text-warning { color: #ffd966 !important; }
html.dark-mode .info-card h3.text-primary { color: #00C9A7 !important; }
html.dark-mode .info-card h3.text-info    { color: #70dbf9 !important; }
html.dark-mode .info-card h3.text-danger  { color: #f07781 !important; }

/* ── Painel de estatísticas ──────────────────────── */
/* usa text-primary, text-success etc. — herdados via BS vars acima */
html.dark-mode .card small.text-muted { color: #8896B0 !important; }

/* Linha divisória de estatísticas (ícone de collapse) */
html.dark-mode .btn-link.text-secondary { color: #8896B0 !important; }
html.dark-mode .btn-link.text-secondary:hover { color: #00C9A7 !important; }

/* ── Chat de perguntas (anuncio.css) ─────────────── */
html.dark-mode #chat-perguntas-msgs {
  background: var(--ss-chat-msgs-bg);
}

/* Mensagem de input do chat */
html.dark-mode #chat-perguntas-msgs textarea.form-control {
  background-color: var(--ss-input-bg);
  color: var(--ss-text);
  border-color: var(--ss-input-border);
}

/* ── IA Chat bubbles (ia-chat.css) ───────────────── */
#ia-titulo-chat .ia-msg-user .ia-bubble {
  background: var(--ss-ia-user-bubble-bg);
  color: var(--ss-ia-user-bubble-color);
}

/* ── FAB ─────────────────────────────────────────── */
.fab-pinned {
  background: var(--ss-fab-bg);
  border-color: var(--ss-fab-border);
}

/* ── Quill editor ────────────────────────────────── */
html.dark-mode .ql-toolbar {
  background: #131F35 !important;
  border-color: #2A3E62 !important;
}
html.dark-mode .ql-toolbar .ql-stroke { stroke: #8896B0; }
html.dark-mode .ql-toolbar .ql-fill { fill: #8896B0; }
html.dark-mode .ql-toolbar .ql-picker { color: #8896B0; }
html.dark-mode .ql-toolbar .ql-picker-options {
  background-color: #131F35;
  border-color: #2A3E62;
}
html.dark-mode .ql-container {
  background: #0D1829 !important;
  border-color: #2A3E62 !important;
  color: #D6E0F0;
}
html.dark-mode .ql-editor.ql-blank::before { color: #5E7294; }
html.dark-mode .ql-editor { color: #D6E0F0; }

/* ── SweetAlert2 ─────────────────────────────────── */
html.dark-mode .swal2-popup {
  background: #0D1829;
  color: #D6E0F0;
  border: 1px solid #2A3E62;
}
html.dark-mode .swal2-title { color: #E8EDF8; }
html.dark-mode .swal2-html-container { color: #D6E0F0; }
html.dark-mode .swal2-confirm { background: #00C9A7 !important; color: #080F1E !important; }
html.dark-mode .swal2-cancel { background: #1A2845 !important; color: #D6E0F0 !important; border-color: #2A3E62 !important; }
html.dark-mode .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.3) !important; }
html.dark-mode .swal2-icon { border-color: #2A3E62; }
html.dark-mode .swal2-close { color: #8896B0 !important; }
html.dark-mode .swal2-close:hover { color: #E8EDF8 !important; }

/* ── Produto — scrollbar do offcanvas ── */
html.dark-mode #offcanvasProduto .offcanvas-body::-webkit-scrollbar-track,
html.dark-mode #produtoTabContent::-webkit-scrollbar-track { background: #131F35; }
html.dark-mode #offcanvasProduto .offcanvas-body::-webkit-scrollbar-thumb,
html.dark-mode #produtoTabContent::-webkit-scrollbar-thumb { background: #2A3E62; }

/* ── Botões ──────────────────────────────────────── */
html.dark-mode .btn-outline-secondary {
  color: #8896B0;
  border-color: #2A3E62;
}
html.dark-mode .btn-outline-secondary:hover {
  background-color: #131F35;
  border-color: #2A3E62;
  color: #D6E0F0;
}

html.dark-mode .btn-outline-primary {
  color: #00C9A7;
  border-color: #00C9A7;
}
html.dark-mode .btn-outline-primary:hover {
  background-color: #00C9A7;
  border-color: #00C9A7;
  color: #080F1E;
}

html.dark-mode .btn-light {
  background-color: #1A2845;
  border-color: #2A3E62;
  color: #D6E0F0;
}
html.dark-mode .btn-light:hover {
  background-color: #131F35;
  border-color: #2A3E62;
  color: #E8EDF8;
}

/* ── Badges de status/canal (anuncio.css) ────────── */
/* Mantidos — são cores de marca que não mudam com tema */

/* ── Custom bg-*-light utilities (style.css) ─────── */
html.dark-mode .bg-primary-light   { background-color: rgba(0, 201, 167, 0.1) !important; border-color: rgba(0, 201, 167, 0.2) !important; }
html.dark-mode .bg-secondary-light { background-color: rgba(136, 150, 176, 0.1) !important; border-color: rgba(136, 150, 176, 0.2) !important; }
html.dark-mode .bg-success-light   { background-color: rgba(25, 135, 84, 0.1) !important; border-color: rgba(25, 135, 84, 0.2) !important; }
html.dark-mode .bg-danger-light    { background-color: rgba(220, 53, 69, 0.1) !important; border-color: rgba(220, 53, 69, 0.2) !important; }
html.dark-mode .bg-warning-light   { background-color: rgba(255, 193, 7, 0.1) !important; border-color: rgba(255, 193, 7, 0.2) !important; }
html.dark-mode .bg-info-light      { background-color: rgba(13, 202, 240, 0.1) !important; border-color: rgba(13, 202, 240, 0.2) !important; }
html.dark-mode .bg-dark-light      { background-color: rgba(42, 62, 98, 0.3) !important; border-color: rgba(42, 62, 98, 0.5) !important; }

/* ── Activity timeline (dashboard) ──────────────── */
html.dark-mode .dashboard .activity .activity-item .activite-label::before { background-color: #1A2845; }
html.dark-mode .dashboard .activity .activity-item .activity-badge { border-color: #0D1829; }

/* ── Stepper ─────────────────────────────────────── */
html.dark-mode .step-divider { background-color: #2A3E62 !important; }

/* ============================================================
   SEÇÃO 7: Print — sempre light, independente do tema
   ============================================================ */

@media print {
  html.dark-mode body,
  html.dark-mode #main,
  html.dark-mode .card,
  html.dark-mode .card-header,
  html.dark-mode .card-body,
  html.dark-mode table,
  html.dark-mode thead,
  html.dark-mode tbody,
  html.dark-mode tr,
  html.dark-mode th,
  html.dark-mode td {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #cccccc !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   SEÇÃO 8: Bootstrap utilities — overrides dark mode
   bg-light / bg-white / text-dark / border usados em componentes
   ============================================================ */

html.dark-mode .bg-light { background-color: #131F35 !important; }
html.dark-mode .bg-white { background-color: #0D1829 !important; }

html.dark-mode .text-dark   { color: #E8EDF8 !important; }
html.dark-mode .text-body   { color: #D6E0F0 !important; }
html.dark-mode .text-muted  { color: #8896B0 !important; }
html.dark-mode .text-secondary { color: #8896B0 !important; }

/* Bordas standalone */
html.dark-mode .border        { border-color: #2A3E62 !important; }
html.dark-mode .border-top    { border-top-color: #2A3E62 !important; }
html.dark-mode .border-bottom { border-bottom-color: #2A3E62 !important; }
html.dark-mode .border-start  { border-left-color: #2A3E62 !important; }
html.dark-mode .border-end    { border-right-color: #2A3E62 !important; }

/* --bs-body-color-rgb: necessário para text-muted com opacidade */
html.dark-mode { --bs-body-color-rgb: 214, 224, 240; }

/* ============================================================
   SEÇÃO 9: card-title — reforço explícito com !important
   O binding via var() pode perder para regras com !important no BS
   ============================================================ */

html.dark-mode .card-title       { color: #E8EDF8 !important; }
html.dark-mode .card-title span  { color: #8896B0 !important; }

/* card-title dentro de modais tem fundo diferente */
html.dark-mode .modal-body .card-title { color: #D6E0F0 !important; }

/* ============================================================
   SEÇÃO 10: Grid / Tabela — thead com contraste real
   ============================================================ */

/* Fundo mais claro que o body do card (#0D1829)
   para que o cabeçalho seja claramente identificável */
html.dark-mode .table thead tr,
html.dark-mode .table thead th,
html.dark-mode .card-body .table thead tr,
html.dark-mode .card-body .table thead th {
  background-color: #1A2845 !important;
  color: #B8C8E0 !important;
  border-bottom: 2px solid #2A3E62 !important;
  font-weight: 600 !important;
}

/* Sub-labels de colunas compostas (ex: Geral/Preço/Estoque) */
html.dark-mode .table thead th span,
html.dark-mode .table thead th .d-flex span { color: #8896B0 !important; }

/* Linha de borda inferior do thead */
html.dark-mode .table > :not(:first-child) { border-top-color: #2A3E62 !important; }

/* ============================================================
   SEÇÃO 11: Modais internos — cards com bg-light
   ============================================================ */

/* Cards aninhados dentro de modal-body (ex: modal-venda-detalhes) */
html.dark-mode .modal-body .card {
  background-color: #131F35;
  border-color: #2A3E62 !important;
}

html.dark-mode .modal-body .card .card-header,
html.dark-mode .modal-body .card-header.bg-light {
  background-color: #1A2845 !important;
  border-bottom-color: #2A3E62 !important;
  color: #B8C8E0 !important;
}

html.dark-mode .modal-body .card-header h6,
html.dark-mode .modal-body .card-header .mb-0 {
  color: #D6E0F0 !important;
}

html.dark-mode .modal-body .border-top { border-top-color: #2A3E62 !important; }

/* Scrollbar do modal-body / offcanvas-body */
html.dark-mode .modal-body::-webkit-scrollbar-track,
html.dark-mode .offcanvas-body::-webkit-scrollbar-track { background: #0D1829; }
html.dark-mode .modal-body::-webkit-scrollbar-thumb,
html.dark-mode .offcanvas-body::-webkit-scrollbar-thumb { background: #2A3E62; }
html.dark-mode .modal-body::-webkit-scrollbar,
html.dark-mode .offcanvas-body::-webkit-scrollbar       { width: 6px; }

/* ── Chat de perguntas ─────────────────────────────── */
/* Barra de contexto (bg-light) */
html.dark-mode #offcanvasChatPerguntas .border-bottom.bg-light {
  background-color: #131F35 !important;
  border-bottom-color: #2A3E62 !important;
  color: #8896B0 !important;
}

/* Área de mensagens */
html.dark-mode #chat-perguntas-msgs {
  background-color: #080F1E !important;
}

/* Área de resposta (rodapé branco) */
html.dark-mode #chat-resposta-wrap {
  background-color: #0D1829 !important;
  border-top-color: #2A3E62 !important;
}

/* Textarea de resposta */
html.dark-mode #chat-resposta-texto {
  background-color: #1A2845 !important;
  color: #D6E0F0 !important;
  border-color: #2A3E62 !important;
}
html.dark-mode #chat-resposta-texto::placeholder { color: #5E7294 !important; }

/* ── Modal IA (ia-modal.php) ───────────────────────── */
/* Barra de contexto */
html.dark-mode #offcanvasIATitulo .border-bottom.bg-light {
  background-color: #131F35 !important;
  border-bottom-color: #2A3E62 !important;
  color: #8896B0 !important;
}

/* Área de chat */
html.dark-mode #ia-titulo-chat {
  background-color: #080F1E !important;
}

/* Rodapé de input */
html.dark-mode #offcanvasIATitulo .border-top.bg-white,
html.dark-mode #offcanvasIATitulo .border-top {
  background-color: #0D1829 !important;
  border-top-color: #2A3E62 !important;
}

html.dark-mode #ia-titulo-instrucoes {
  background-color: #1A2845 !important;
  color: #D6E0F0 !important;
  border-color: #2A3E62 !important;
}
html.dark-mode #ia-titulo-instrucoes::placeholder { color: #5E7294 !important; }

/* ── Offcanvas Help ────────────────────────────────── */
html.dark-mode #offcanvasHelp .offcanvas-header.bg-light {
  background-color: #131F35 !important;
  border-bottom-color: #2A3E62 !important;
}

/* ============================================================
   SEÇÃO 12: Stepper (stepper.css) — dark mode
   step-circle neutro usa #fff — precisa de override
   ============================================================ */

html.dark-mode .picking-stepper .step-circle {
  border-color: #2A3E62;
  background: #0D1829;
}

/* step-line neutra */
html.dark-mode .picking-stepper .step-line { background: #2A3E62; }

/* Estados de cor mantêm seus backgrounds (verde/azul/vermelho) */
html.dark-mode .picking-stepper .step-circle.active  { border-color: #198754; background: #198754; }
html.dark-mode .picking-stepper .step-circle.next    { border-color: var(--ss-accent-btn); background: var(--ss-accent-btn); }
html.dark-mode .picking-stepper .step-circle.done    { border-color: #198754; background: #198754; }
html.dark-mode .picking-stepper .step-circle.cancelled { border-color: #dc3545; background: #dc3545; }
html.dark-mode .picking-stepper .step-line.done   { background: #198754; }
html.dark-mode .picking-stepper .step-line.active { background: var(--ss-accent-btn); }

/* ============================================================
   SEÇÃO 13: Help (offcanvas) — estilos inline sobrescritos via dark
   O <style> em help-modal.php usa cores hardcoded
   ============================================================ */

html.dark-mode .help-md-content h5 {
  border-bottom-color: #2A3E62 !important;
  color: #D6E0F0 !important;
}
html.dark-mode .help-md-content h4,
html.dark-mode .help-md-content h6 { color: #8896B0 !important; }
html.dark-mode .help-md-content p  { color: #D6E0F0; }

html.dark-mode .help-md-content code {
  background: #131F35 !important;
  color: #f07781 !important;
}
html.dark-mode .help-md-content pre {
  background: #080F1E !important;
  border-color: #2A3E62 !important;
  color: #D6E0F0 !important;
}
html.dark-mode .help-md-content pre code { color: #D6E0F0 !important; }

html.dark-mode .help-md-content blockquote {
  border-left-color: #00C9A7 !important;
  background: rgba(0, 201, 167, 0.06) !important;
  color: #8896B0 !important;
}

html.dark-mode .help-md-content table th {
  background: #1A2845 !important;
  border-color: #2A3E62 !important;
  color: #B8C8E0 !important;
}
html.dark-mode .help-md-content table td {
  border-color: #2A3E62 !important;
  color: #D6E0F0 !important;
}
html.dark-mode .help-md-content table tr:nth-child(even) td {
  background: #131F35 !important;
}
html.dark-mode .help-md-content hr { border-color: #2A3E62 !important; }

/* ===========================================================
   MODAIS EM TELA CHEIA NO MOBILE (experiência de aplicativo)
   Replica o .modal-fullscreen do Bootstrap abaixo de 768px para
   todos os modais, sem precisar alterar cada view.
   !important nas dimensões: vários modais definem height/max-height
   inline (70vh, 88vh, calc(...)) e estilo inline vence CSS normal.
   =========================================================== */
@media (max-width: 767.98px) {
  .modal-dialog {
    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
  }
  .modal-content {
    height: 100% !important;
    max-height: 100% !important;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .modal-header,
  .modal-footer {
    flex-shrink: 0;
    border-radius: 0;
  }
  /* min-height: 0 permite o item flex encolher abaixo do conteúdo — sem isso o
     body cresce além da tela e quem rola é o modal inteiro, não o corpo */
  .modal-body {
    flex: 1 1 auto;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Forms que envolvem body+footer (form direto dentro de .modal-content) */
  .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ============================================================
   Offcanvas empilhado (.offcanvas-stack)
   Sub-painel aberto por cima de outro offcanvas ou de um modal (ex.: Preço por canal
   e IA sobre o Produto, Selecionar produtos sobre o Kit, Itens → Erros do Lote).
   Fica acima de modais (1055); cada nível empilhado sobe +2 via js/system.js
   (painel 1058, 1060, 1062…; backdrop logo abaixo de cada um).
   ============================================================ */
.offcanvas.offcanvas-stack {
  --bs-offcanvas-zindex: 1058;
}

/* SweetAlert/Toast sempre acima de qualquer nível de offcanvas empilhado
   (o padrão do SweetAlert é 1060, que empataria com o 2º nível) */
body .swal2-container {
  z-index: 1085;
}

/* ============================================================
   Offcanvas Produto (#offcanvasProduto — MarketHub, Anúncios, SupplyHub e Estoque)
   Com uma aba de descrição ativa (classe .modo-descricao, ligada em js/system.js), o corpo do
   offcanvas para de rolar e o textarea / editor Quill ocupam toda a altura livre.
   Só no desktop: abaixo de 768px a galeria empilha acima das abas e o layout normal é mantido.
   Os !important vencem as alturas fixas de markethub.css e o style inline do Estoque.
   ============================================================ */
@media (min-width: 768px) {
  #offcanvasProduto.modo-descricao .offcanvas-body { display: flex; flex-direction: column; overflow: hidden; }
  #offcanvasProduto.modo-descricao #frmProduto { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  #offcanvasProduto.modo-descricao #frmProduto > .row { flex: 1 1 0; min-height: 0; margin-bottom: 0 !important; }
  #offcanvasProduto.modo-descricao #frmProduto > .row > .col-md-9 { display: flex; flex-direction: column; min-height: 0; }
  #offcanvasProduto.modo-descricao #produtoTabContent {
    display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; height: auto !important;
  }
  #offcanvasProduto.modo-descricao #produtoTabContent > .tab-pane.active {
    display: flex; flex-direction: column; flex: 1 1 0;
    min-height: 0 !important; max-height: none !important; overflow: hidden !important; padding-bottom: 0;
  }
  #offcanvasProduto.modo-descricao #produtoTabContent > .tab-pane.active > .row { flex: 1 1 0; min-height: 0; margin-bottom: 0 !important; }
  #offcanvasProduto.modo-descricao #produtoTabContent > .tab-pane.active > .row > .col-md-12 {
    display: flex; flex-direction: column; min-height: 0; height: 100%;
  }
  #offcanvasProduto.modo-descricao #produto_descricao_text { flex: 1 1 0; min-height: 0 !important; resize: none !important; }
  #offcanvasProduto.modo-descricao #quill-editor { flex: 1 1 0; min-height: 0; height: auto !important; }
}

/* ============================================================
   Dashboard — filtro "Filtrar gráficos de vendas" (#seller-filter-dropdown)
   Botão branco que continua legível aberto (o btn-outline-secondary ficava cinza sólido
   e escondia o texto), item selecionado com check, logo + canal por conta e rolagem.
   ============================================================ */
.ss-filter-btn {
  display: flex; align-items: center; gap: 10px;
  min-width: 260px; max-width: 340px; padding: 6px 12px;
  background: var(--ss-input-bg); color: var(--ss-text);
  border: 1px solid var(--ss-input-border); border-radius: 8px;
  font-size: .875rem; text-align: left;
}
.ss-filter-btn:hover,
.ss-filter-btn:focus,
.ss-filter-btn.show,
.ss-filter-btn:active {
  background: var(--ss-input-bg) !important; color: var(--ss-text) !important;
  border-color: var(--ss-input-focus) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--ss-accent-rgb), .15);
}
.ss-filter-btn.dropdown-toggle::after { margin-left: 0; color: var(--ss-text-muted); }
.ss-filter-btn-ativo { border-color: var(--ss-accent); }
.ss-filter-display { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.ss-filter-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-filter-ico { color: var(--ss-accent-text); font-size: 1rem; }
.ss-filter-ico-img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
.ss-filter-count {
  background: var(--ss-surface-3); color: var(--ss-text-sub);
  font-size: .7rem; font-weight: 600;
}

.ss-filter-menu {
  width: 320px; padding: 6px; border: 1px solid var(--ss-surface-3); border-radius: 10px;
}
.ss-filter-search { position: relative; padding: 2px 2px 6px; }
.ss-filter-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-60%); color: var(--ss-text-muted); font-size: .8rem; }
.ss-filter-search input { padding-left: 30px; }
.ss-filter-lista { max-height: 320px; overflow-y: auto; }
.ss-filter-sep {
  padding: 8px 10px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ss-text-muted);
}
.ss-filter-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; color: var(--ss-text);
}
.ss-filter-item:hover, .ss-filter-item:focus { background: var(--ss-surface-2); color: var(--ss-text); }
.ss-filter-item.active, .ss-filter-item:active { background: var(--ss-surface-2); color: var(--ss-text); }
.ss-filter-logo {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ss-surface); border: 1px solid var(--ss-surface-3);
}
.ss-filter-logo img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; }
.ss-filter-logo-todas { color: var(--ss-accent-text); background: var(--ss-surface-2); }
.ss-filter-textos { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.ss-filter-titulo { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-filter-sub { font-size: .72rem; color: var(--ss-text-muted); }
.ss-filter-check { color: var(--ss-accent-text); font-size: 1rem; visibility: hidden; }
.ss-filter-item.active .ss-filter-check { visibility: visible; }
.ss-filter-item.active .ss-filter-titulo { color: var(--ss-accent-text); }
.ss-filter-vazio { padding: 12px; text-align: center; font-size: .8rem; color: var(--ss-text-muted); }

/* Filtros de contas/canais com checkbox (view/components/filtro-contas.php e filtro-canais.php)
   e select de conta único (assets/js/select-conta.js):
   mesmo visual do filtro do dashboard, ocupando a coluna do painel de filtros */
.ss-select-conta .ss-filter-btn,
.ss-filter-multi .ss-filter-btn {
  width: 100%; min-width: 0; max-width: none;
  min-height: calc(1.5em + .75rem + 2px); padding: 4px 10px;
}
.ss-select-conta .ss-filter-btn:disabled,
.ss-filter-multi .ss-filter-btn:disabled { opacity: .65; }
.ss-filter-multi .ss-filter-item { cursor: pointer; margin: 0; }
.ss-filter-multi .ss-filter-item .form-check-input { flex-shrink: 0; cursor: pointer; }
.ss-filter-multi .ss-fm-oculto,
.ss-filter-multi .ss-fm-busca-off { display: none !important; }
.ss-fm-logos { display: flex; flex-shrink: 0; }
.ss-fm-logos .ss-filter-ico-img {
  background: var(--ss-input-bg); border: 1px solid var(--ss-surface-3); border-radius: 50%;
}
.ss-fm-logos .ss-filter-ico-img + .ss-filter-ico-img { margin-left: -6px; }