/* @layer-wrapped:vendor */
/*
 * Vendor stylesheet aggregator — importa CSS de CDN dentro da camada
 * 'vendor' (a mais baixa do nosso sistema de cascade layers).
 *
 * Por que: <link rel="stylesheet"> nao oferece um atributo `layer`
 * compativel cross-browser. Importacoes feitas com @import url(...) layer(X)
 * permitem encaixar CSS externo numa camada nomeada.
 *
 * Resultado: Bootstrap, SweetAlert e Quill viram fundacao (vencem nada
 * dentro do app); nossas camadas (base..overrides) vencem em cima delas.
 */

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css') layer(vendor);
@import url('https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css') layer(vendor);
@import url('https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css') layer(vendor);

/* ===== Modo escuro: utilitarios de fundo do Bootstrap =====
   O Bootstrap marca .bg-light/.text-bg-light como prioritarios (flag important)
   na layer 'vendor' (a mais baixa). Como cascade layers INVERTEM a prioridade
   dessa flag (layer mais baixa vence), o override de escuro em 'overrides'
   (layout-overrides.css:6167) perde a batalha de fundo e os cards ficam BRANCOS
   no escuro. A correcao precisa morar na MESMA layer 'vendor'; com maior
   especificidade + ordem posterior ela vence o utilitario do Bootstrap. Cobre
   TODAS as telas que usam .bg-light (centro de configuracoes etc.). Cor/borda ja
   sao providas pelo bloco em 'overrides' (o Bootstrap nao marca cor/borda como
   prioritaria nesses utilitarios). */
@layer vendor {
  :root[data-theme-mode="dark"] .bg-light:not(.btn):not(.badge):not(.dropdown-menu):not(.modal-content) {
    background-color: var(--theme-surface-muted) !important;
  }
  :root[data-theme-mode="dark"] .text-bg-light {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
  }
  /* O .text-muted do Bootstrap usa a cor escura --bs-secondary-color (flag de
     prioridade) e, pela inversao de layer, vence o override de escuro: vira
     texto escuro-no-escuro (subtitulos/legendas em quase todas as telas).
     Reescopa pra um cinza claro legivel. */
  :root[data-theme-mode="dark"] .text-muted {
    color: var(--color-text-muted) !important;
  }
  /* Placeholders de input/textarea (inclui .form-control do Bootstrap) usam o
     cinza escuro --bs-secondary-color -> no escuro ficam quase pretos (ilegiveis).
     Reescopa pra um cinza claro. As DS (.ds-input/.ds-textarea) ja viram sozinhas. */
  :root[data-theme-mode="dark"] input::placeholder,
  :root[data-theme-mode="dark"] textarea::placeholder {
    color: var(--color-text-muted);
  }
}