/* Configurações do Quill */
.ql-size-small {
    font-size: 10px; /* Tamanho pequeno */
}

.ql-size-large {
    font-size: 24px; /* Tamanho grande */
}

.ql-size-huge {
    font-size: 36px; /* Tamanho enorme */
}

/* Thumbnails de Imagens */
#thumbnailsContainer img {
    width: 100px;
    height: auto;
    padding: 5px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

#thumbnailsContainer img:hover {
    transform: scale(1.1);
}

/* Estilo para múltiplos itens na tela de fe */
.blocos-itens-fatura {
    animation: slideDown 0.3s ease-out;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Espaço entre os blocos */
    padding: 5px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo para múltiplos itens na tela de FE */
.blocos-itens {
    animation: slideDown 0.3s ease-out;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Espaço entre os blocos */
    padding: 5px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   TEMA ESCURO — overrides de componentes que o SO/bibliotecas renderizam fora
   do controle do Bootstrap (o grosso do dark/light vem do tabler.css beta20).
   data-bs-theme fica no <html> (anti-flash inline) e no <body> (demo-theme.js),
   por isso as regras cobrem ambos. Paleta slate.
   ============================================================================ */

/* <select>/<option> — o <option> é pintado pelo SO e ignora o tema Bootstrap,
   por isso precisa de regra explícita + !important em ambos os temas. */
[data-bs-theme=light] select option,
[data-bs-theme=light] .form-select option,
html:not([data-bs-theme=dark]) body:not([data-bs-theme=dark]) select option,
html:not([data-bs-theme=dark]) body:not([data-bs-theme=dark]) .form-select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}
[data-bs-theme=dark] select,
[data-bs-theme=dark] .form-select {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
[data-bs-theme=dark] select option,
[data-bs-theme=dark] .form-select option {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] select option:checked,
[data-bs-theme=dark] select option:hover {
    background-color: #273548 !important;
    color: #e2e8f0 !important;
}

/* Tom Select (dropdown custom em <div>) — não é alcançado pelas regras de <option> */
[data-bs-theme=dark] .ts-wrapper .ts-control {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] .ts-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important;
}
[data-bs-theme=dark] .ts-dropdown .active {
    background-color: #334155 !important;
    color: #fff !important;
}

/* ============================================================================
   MATRIZ DE PERMISSÕES (Cargos e Permissões)
   ============================================================================ */
.tabela-permissoes tr.linha-categoria > td {
    background-color: #f1f5f9;
    border-top: 2px solid #cbd5e1;
    padding-top: 10px; padding-bottom: 8px;
}
.tabela-permissoes tr.linha-categoria strong { letter-spacing: .04em; }
.tabela-permissoes tr.linha-categoria .btn-marcar-categoria { padding: 1px 10px; font-size: .7rem; font-weight: 500; }
.tabela-permissoes tr.linha-categoria .btn-toggle-categoria { color: #64748b; line-height: 1; text-decoration: none; }
.tabela-permissoes tr.linha-categoria .btn-toggle-categoria:hover { color: #1e293b; }
.tabela-permissoes tr.linha-categoria .icon-chevron { transition: transform .18s ease; }
.tabela-permissoes tr.linha-categoria.collapsed .icon-chevron { transform: rotate(-90deg); }
.tabela-permissoes tr.linha-categoria .categoria-titulo-clicavel { cursor: pointer; user-select: none; }
[data-bs-theme=dark] .tabela-permissoes tr.linha-categoria > td { background-color: #1e293b; border-top-color: #334155; }
[data-bs-theme=dark] .tabela-permissoes tr.linha-categoria .btn-toggle-categoria { color: #94a3b8; }

/* Aumenta tamanho da tabela */
.tabela-maior table {
    min-width: 1920px; /* Ajuste este valor conforme necessário */
}
/* ============================================================================
   TEMA ESCURO — azul mais claro no lugar do azul forte (#0054a6) do Tabler.
   Redefine a cor primária UMA vez: botões, contornos (ações), abas, links,
   foco, marcador do menu e ícones primários passam a usar #4299e1, legível no
   fundo escuro. O tema claro continua com o azul padrão. O menu lateral é
   sempre escuro (data-bs-theme="dark"), então também usa o azul claro.
   ============================================================================ */
[data-bs-theme=dark] {
  --tblr-primary: #4299e1;
  --tblr-primary-rgb: 66, 153, 225;
  --tblr-primary-darken: #3b8acb;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-text-emphasis: #93c5fd;
  --tblr-link-color: #4299e1;
  --tblr-link-color-rgb: 66, 153, 225;
  --tblr-link-hover-color: #93c5fd;
  --tblr-link-hover-color-rgb: 147, 197, 253;
}

/* Tela de login: estilos em static/css/autenticacao/login.css */

/* Modal de mensagens do sistema (estrutura/mensagens_flash.html e js/sistema/aviso.js):
   com mensagens de categorias diferentes, cada linha leva o ícone da sua cor. */
.modal-mensagem-item-misto {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  text-align: left;
}
.modal-mensagem-item-misto .icon { margin-top: .15rem; }

/* Quadro de prévia de imagem (Variáveis de Sistema › Aparência: logomarca e favicon) */
.quadro-imagem-config {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary, transparent);
}
.quadro-imagem-config img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.quadro-imagem-config-vazio {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tblr-secondary);
  white-space: nowrap;
}

/* Celular com país (macro estrutura/_campo_celular.html) */
/* (seletor com 4 classes: o tabler.css carrega depois e põe flex 1 nos selects do input-group) */
.input-group.campo-celular > .form-select.campo-ddi {
  flex: 0 0 7.25rem;
  width: 7.25rem;
}
/* Documento pessoal com país: CPF / CI (macro estrutura/_campo_documento_pessoal.html) */
.input-group.campo-documento > .form-select.campo-tipo-documento {
  flex: 0 0 7rem;
  width: 7rem;
}

/* ── Botões de ação das listagens (macros em estrutura/_botoes_acao.html) ── */
.acoes-tabela {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: nowrap;
}
.btn-acao {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-width: 1.5px;
  border-radius: 8px;
  transition: transform .12s ease, background-color .15s ease, color .15s ease;
}
.btn-acao:hover { transform: translateY(-1px); }
.btn-acao:active { transform: translateY(0); }
.btn-acao svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 575.98px) {
  .acoes-tabela { gap: .375rem; }
  .btn-acao { width: 2.25rem; height: 2.25rem; }
}

/* ── Visualizador de arquivos em modal (static/js/sistema/visualizador_arquivo.js) ── */
.visualizador-arquivo { border-radius: 14px; overflow: hidden; }
.visualizador-arquivo-titulo { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.visualizador-arquivo-titulo .modal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visualizador-arquivo-tipo {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 8px;
  font-size: .6875rem; font-weight: 700;
  color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .12);
}
.visualizador-arquivo-tipo.pdf { color: var(--tblr-danger); background: rgba(var(--tblr-danger-rgb), .12); }
.visualizador-arquivo-corpo {
  padding: 0;
  height: 75vh;
  background: rgba(var(--tblr-secondary-rgb), .08);
}
.visualizador-arquivo-pdf { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.visualizador-arquivo-imagem {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; overflow: auto; cursor: zoom-in;
}
.visualizador-arquivo-imagem img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.visualizador-arquivo-imagem.ampliada { display: block; cursor: zoom-out; text-align: center; }
.visualizador-arquivo-imagem.ampliada img { max-width: none; max-height: none; }
@media (max-width: 767.98px) {
  .visualizador-arquivo-corpo { height: auto; flex: 1; }
}