/* 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); } } /* Aumenta tamanho da tabela */ .tabela-maior table { min-width: 1920px; /* Ajuste este valor conforme necessário */ } /* Botão dropdown sem o caret padrão do Bootstrap (usado em ações de ícone) */ .dropdown-toggle-no-caret::after { display: none !important; } /* Destaque de linha de tabela para NF cancelada na Bling sem situação interna. FlexAdmin/Tabler ignora .table-danger nativo, então definimos aplicação direta nas células (com !important pra sobrepor o text-secondary do template). */ tr.linha-bling-cancelada > td { background-color: #fde2e2 !important; color: #b91c1c !important; } tr.linha-bling-cancelada:hover > td { background-color: #fbcaca !important; } /* Fix global: scrollbar duplo ao abrir Bootstrap modal. Bootstrap aplica overflow:hidden + padding-right no ; em layouts onde o também tem scroll, ficavam duas barras visíveis (uma do html, outra interna). Travamos overflow no html quando modal está aberto. */ body.modal-open { padding-right: 0 !important; overflow: hidden !important; } .modal-open .modal { padding-right: 0 !important; } html:has(body.modal-open) { overflow: hidden !important; } /* ============================================================ Dark mode ============================================================ */ [data-theme="dark"] #thumbnailsContainer img { border-color: var(--border-color); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .blocos-itens-fatura, [data-theme="dark"] .blocos-itens { border-color: var(--border-color); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } [data-theme="dark"] tr.linha-bling-cancelada > td { background-color: rgba(251, 113, 133, 0.16) !important; color: #fb7185 !important; } [data-theme="dark"] tr.linha-bling-cancelada:hover > td { background-color: rgba(251, 113, 133, 0.26) !important; } /* ============================================================ Dark mode — overrides para style="..." inline com cores claras espalhadas em templates legados (Tabler-era). Estes seletores pegam padrões comuns que estavam hardcoded. ============================================================ */ [data-theme="dark"] [style*="background-color: white"], [data-theme="dark"] [style*="background-color:white"], [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background-color:#fff"] { background: var(--card-bg) !important; background-color: var(--card-bg) !important; color: var(--default-color); } /* Gradientes claros (Tabler-era) → suaves no dark */ [data-theme="dark"] [style*="linear-gradient(135deg, #f8f9fa"], [data-theme="dark"] [style*="linear-gradient(135deg,#f8f9fa"], [data-theme="dark"] [style*="linear-gradient(90deg, #ffffff"], [data-theme="dark"] [style*="linear-gradient(90deg,#ffffff"], [data-theme="dark"] [style*="linear-gradient(135deg, #ffffff"], [data-theme="dark"] [style*="linear-gradient(135deg,#ffffff"] { background: linear-gradient(135deg, var(--surface-color) 0%, var(--card-bg) 100%) !important; color: var(--default-color); } /* Badges / blobs com cinza Tailwind hardcoded em DRE/DFC */ [data-theme="dark"] [style*="background: #64748b"], [data-theme="dark"] [style*="background: #334155"] { background: var(--surface-color) !important; color: var(--default-color) !important; } /* Quill editor em fundo branco */ [data-theme="dark"] #editor-container, [data-theme="dark"] .ql-container, [data-theme="dark"] .ql-editor { background: var(--card-bg) !important; color: var(--default-color); } [data-theme="dark"] .ql-toolbar { background: var(--surface-color) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .ql-toolbar .ql-stroke { stroke: var(--default-color); } [data-theme="dark"] .ql-toolbar .ql-fill { fill: var(--default-color); } [data-theme="dark"] .ql-toolbar .ql-picker-label { color: var(--default-color); } /* Cards "sem registros" repetidos em listagens */ [data-theme="dark"] [style*="box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2)"] { background-color: var(--card-bg) !important; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5) !important; } /* Bootstrap utility: .bg-white .bg-light força branco em todo lugar */ [data-theme="dark"] .bg-white { background-color: var(--card-bg) !important; color: var(--default-color); } [data-theme="dark"] .bg-light { background-color: var(--surface-color) !important; color: var(--default-color); } [data-theme="dark"] .bg-body-secondary, [data-theme="dark"] .bg-body-tertiary { background-color: var(--surface-color) !important; color: var(--default-color); } /* Bootstrap text utilities que ficam ilegíveis em dark */ [data-theme="dark"] .text-dark { color: var(--default-color) !important; } [data-theme="dark"] .text-black { color: var(--heading-color) !important; } [data-theme="dark"] .text-muted { color: var(--muted-color) !important; } /* card-header com bg-white inline */ [data-theme="dark"] .card-header.bg-white { background-color: var(--bs-card-cap-bg) !important; color: var(--default-color); border-bottom-color: var(--border-color-light); } /* form-check-label vínhamos com cor padrão; ajustar */ [data-theme="dark"] .form-check-label, [data-theme="dark"] .form-label, [data-theme="dark"] .col-form-label { color: var(--default-color); } /* Tabela default */ [data-theme="dark"] .table { color: var(--default-color); } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--default-color); border-bottom-color: var(--border-color-light); } /* Bootstrap subtle backgrounds — em headers de cards (registro operacional etc) */ [data-theme="dark"] .bg-primary-subtle { background-color: rgba(91, 168, 122, 0.16) !important; color: var(--default-color); } [data-theme="dark"] .bg-secondary-subtle { background-color: rgba(149, 174, 190, 0.10) !important; color: var(--default-color); } [data-theme="dark"] .bg-success-subtle { background-color: rgba(74, 222, 128, 0.14) !important; color: var(--default-color); } [data-theme="dark"] .bg-info-subtle { background-color: rgba(56, 189, 248, 0.14) !important; color: var(--default-color); } [data-theme="dark"] .bg-warning-subtle { background-color: rgba(245, 158, 11, 0.14) !important; color: var(--default-color); } [data-theme="dark"] .bg-danger-subtle { background-color: rgba(251, 113, 133, 0.14) !important; color: var(--default-color); } [data-theme="dark"] .bg-light-subtle { background-color: var(--card-bg) !important; color: var(--default-color); } [data-theme="dark"] .bg-dark-subtle { background-color: var(--surface-color) !important; color: var(--default-color); } /* Tabler-era ".bg-*-lt" (light) ainda usado em alguns templates */ [data-theme="dark"] .bg-primary-lt { background-color: rgba(91, 168, 122, 0.16) !important; color: #5BA87A; } [data-theme="dark"] .bg-success-lt { background-color: rgba(74, 222, 128, 0.14) !important; color: #4ade80; } [data-theme="dark"] .bg-info-lt { background-color: rgba(56, 189, 248, 0.14) !important; color: #38bdf8; } [data-theme="dark"] .bg-warning-lt { background-color: rgba(245, 158, 11, 0.14) !important; color: #f59e0b; } [data-theme="dark"] .bg-danger-lt { background-color: rgba(251, 113, 133, 0.14) !important; color: #fb7185; } [data-theme="dark"] .bg-azure-lt { background-color: rgba(56, 189, 248, 0.14) !important; color: #38bdf8; } [data-theme="dark"] .bg-yellow-lt { background-color: rgba(245, 158, 11, 0.14) !important; color: #f59e0b; } [data-theme="dark"] .bg-orange-lt { background-color: rgba(251, 146, 60, 0.14) !important; color: #fb923c; } [data-theme="dark"] .bg-red-lt { background-color: rgba(251, 113, 133, 0.14) !important; color: #fb7185; } [data-theme="dark"] .bg-green-lt { background-color: rgba(74, 222, 128, 0.14) !important; color: #4ade80; } [data-theme="dark"] .bg-purple-lt { background-color: rgba(168, 85, 247, 0.14) !important; color: #c084fc; } [data-theme="dark"] .bg-pink-lt { background-color: rgba(244, 114, 182, 0.14) !important; color: #f472b6; } [data-theme="dark"] .bg-cyan-lt { background-color: rgba(34, 211, 238, 0.14) !important; color: #22d3ee; } [data-theme="dark"] .bg-teal-lt { background-color: rgba(45, 212, 191, 0.14) !important; color: #2dd4bf; } [data-theme="dark"] .bg-lime-lt { background-color: rgba(163, 230, 53, 0.14) !important; color: #a3e635; } /* Linhas Total/Footer de tabela com bg claro forçado */ [data-theme="dark"] .table > tfoot > tr, [data-theme="dark"] .table > tfoot > tr > th, [data-theme="dark"] .table > tfoot > tr > td, [data-theme="dark"] .table-light, [data-theme="dark"] thead.table-light th, [data-theme="dark"] tr.table-light > * { background-color: var(--table-header-bg) !important; color: var(--default-color) !important; } /* Painel claro reutilizável (centro de custo, parcelamento, etc.). Inline usa var(--bg-painel-claro, #F6F8FB) para adaptar ao dark sem conflito de classe. */ :root { --bg-painel-claro: #F6F8FB; } [data-theme="dark"] { --bg-painel-claro: var(--card-bg); }