/* ============================================================ APPI - Modo escuro ------------------------------------------------------------ Arquivo separado de propósito: nenhuma regra do tema claro foi alterada. Tudo aqui vive sob html[data-theme="dark"], então remover o desta folha desliga o recurso por inteiro. O atributo é escrito por js/tema.js (e, antes do primeiro paint, pelo trecho inline no de cada página). Junto dele vai data-bs-theme="dark", que aciona o modo escuro nativo do Bootstrap 5.3 — é ele que cuida de card, modal, table, dropdown, form-control e .text-muted. O que está aqui é o que o Bootstrap não conhece: o CSS próprio do projeto. Índice 1. Tokens da paleta 2. Base (body, títulos, links, scrollbar) 3. Topbar, menu e perfil 4. Containers, tabelas e paginação 5. Badges e textos de apoio 6. Botões e campos 7. Editores (Quill) e seletores (TomSelect) 8. Cartões de estatística da agenda 9. Tabela da agenda (filtros, ordenação, status) 10. Página de ações da sessão 11. Formulários e respostas 12. Feedback 13. Termo assinado 14. Calendário 15. Painel (dashboard) 16. Guia interativo 17. Toasts e utilitários ============================================================ */ /* ============================================================ 1. Tokens da paleta ------------------------------------------------------------ Família slate, a mesma que o tema claro já usa (#f8fafc, #e2e8f0, #475569, #1e293b), só que invertida. As cores de estado são dessaturadas: o verde/vermelho puro do tema claro vibra sobre fundo escuro e cansa a leitura. ============================================================ */ html[data-theme="dark"] { --appi-bg: #0f172a; --appi-surface: #1e293b; --appi-surface-2: #273449; --appi-surface-3: #334155; --appi-surface-hover: #2f3e57; --appi-border: #334155; --appi-border-soft: #2a3648; /* Clara o bastante para a borda ser vista sobre o cartão (~2,7:1); o #47566d que a paleta sugeria sumia contra o fundo. */ --appi-border-strong: #5b6b85; --appi-text: #e2e8f0; --appi-text-soft: #cbd5e1; --appi-text-muted: #94a3b8; /* Placeholder e ícones apagados: acima de 3:1 mesmo no campo mais claro — abaixo disso o texto de exemplo vira um borrão. */ --appi-text-faint: #7c8ba3; --appi-accent: #60a5fa; --appi-accent-strong: #93c5fd; --appi-accent-bg: rgba(96, 165, 250, 0.16); --appi-accent-border: rgba(96, 165, 250, 0.42); --appi-success: #4ade80; --appi-success-bg: rgba(74, 222, 128, 0.15); --appi-success-border: rgba(74, 222, 128, 0.38); --appi-warning: #fbbf24; --appi-warning-bg: rgba(251, 191, 36, 0.15); --appi-warning-border: rgba(251, 191, 36, 0.38); --appi-danger: #f87171; --appi-danger-bg: rgba(248, 113, 113, 0.15); --appi-danger-border: rgba(248, 113, 113, 0.38); --appi-info: #38bdf8; --appi-info-bg: rgba(56, 189, 248, 0.15); --appi-info-border: rgba(56, 189, 248, 0.38); --appi-purple: #c4b5fd; --appi-purple-bg: rgba(167, 139, 250, 0.16); --appi-purple-border: rgba(167, 139, 250, 0.38); --appi-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --appi-shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35); /* Alinha os tokens do Bootstrap à mesma paleta */ --bs-body-bg: var(--appi-bg); --bs-body-color: var(--appi-text); --bs-border-color: var(--appi-border); --bs-secondary-color: var(--appi-text-muted); --bs-emphasis-color: #f8fafc; --bs-heading-color: var(--appi-text); --bs-link-color: var(--appi-accent); --bs-link-hover-color: var(--appi-accent-strong); --bs-tertiary-bg: var(--appi-surface-2); color-scheme: dark; } /* ============================================================ 2. Base ============================================================ */ html[data-theme="dark"] body { background-color: var(--appi-bg); color: var(--appi-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3, html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 { color: var(--appi-text); } html[data-theme="dark"] hr { border-color: var(--appi-border); } /* Barras de rolagem: a padrão clara corta o visual em telas cheias */ html[data-theme="dark"] * { scrollbar-color: var(--appi-surface-3) transparent; } html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--appi-surface-3); border-radius: 999px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--appi-border-strong); } /* ============================================================ 3. Topbar, menu e perfil ============================================================ */ html[data-theme="dark"] .app-topbar { background: var(--appi-surface); border-bottom-color: var(--appi-border); } html[data-theme="dark"] .app-topbar p { color: var(--appi-text-muted); } html[data-theme="dark"] .hamburger-btn, html[data-theme="dark"] .app-topbar .hamburger-btn { background: var(--appi-surface-2); border-color: var(--appi-border); color: var(--appi-text-soft); } html[data-theme="dark"] .hamburger-btn:hover, html[data-theme="dark"] .app-topbar .hamburger-btn:hover { background: var(--appi-surface-hover); color: var(--appi-accent); } html[data-theme="dark"] .hamburger-menu { background: var(--appi-surface); border-right-color: var(--appi-border); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .hamburger-menu .menu-brand { border-bottom-color: var(--appi-border); } html[data-theme="dark"] .hamburger-menu .nav-link { color: var(--appi-text-soft); } html[data-theme="dark"] .hamburger-menu .nav-link:hover { background-color: var(--appi-accent-bg); color: var(--appi-accent-strong); } html[data-theme="dark"] .hamburger-menu .nav-link.active { background-color: #1d4ed8; color: #fff; } html[data-theme="dark"] .hamburger-menu .nav-link.active:hover { background-color: #1e40af; } html[data-theme="dark"] .hamburger-overlay { background: rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .profile-trigger { background: var(--appi-surface-2); border-color: var(--appi-border); color: var(--appi-text); } html[data-theme="dark"] .profile-trigger .profile-role { color: var(--appi-text-muted); } /* ============================================================ 4. Containers, tabelas e paginação ============================================================ */ html[data-theme="dark"] .crud-table-container, html[data-theme="dark"] .crud-filters-card, html[data-theme="dark"] .card { background: var(--appi-surface); border-color: var(--appi-border); } html[data-theme="dark"] .crud-table-container th { background-color: var(--appi-surface-2); color: var(--appi-text-soft); border-bottom-color: var(--appi-border-strong); } html[data-theme="dark"] .crud-table-container tbody tr:hover { background-color: var(--appi-surface-2); } html[data-theme="dark"] .crud-filters-card .form-label, html[data-theme="dark"] .crud-modal .form-label, html[data-theme="dark"] #agenda-action-page .form-label { color: var(--appi-text-soft); } html[data-theme="dark"] .crud-pagination { color: var(--appi-text-muted); } /* A tabela do Bootstrap pinta as células com a cor do body: no escuro isso deixa a linha do zebrado mais clara que o próprio cartão. */ html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--appi-text); --bs-table-border-color: var(--appi-border); --bs-table-hover-bg: var(--appi-surface-2); --bs-table-hover-color: var(--appi-text); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-striped-color: var(--appi-text); } html[data-theme="dark"] .card-ue-resumo { background: var(--appi-surface-2); border-color: var(--appi-border); } /* ============================================================ 5. Badges e textos de apoio ------------------------------------------------------------ .badge.bg-light + .text-dark é o par mais usado no projeto e o Bootstrap não o adapta sozinho (são cores fixas). Aqui ele vira superfície elevada com texto claro; as coloridas ganham fundo translúcido e texto na própria cor, que no escuro lê melhor do que cor sólida com texto branco. ============================================================ */ html[data-theme="dark"] .badge.bg-light, html[data-theme="dark"] .badge.bg-light.text-dark { background-color: var(--appi-surface-3) !important; color: var(--appi-text) !important; border-color: var(--appi-border-strong) !important; } html[data-theme="dark"] .badge.bg-light.text-danger { color: var(--appi-danger) !important; } html[data-theme="dark"] .badge.bg-light.text-warning { color: var(--appi-warning) !important; } html[data-theme="dark"] .badge.bg-light.text-success { color: var(--appi-success) !important; } html[data-theme="dark"] .badge.bg-light.text-muted { color: var(--appi-text-muted) !important; } html[data-theme="dark"] .badge.bg-primary { background-color: #2563eb !important; } html[data-theme="dark"] .badge.bg-success { background-color: #15803d !important; } html[data-theme="dark"] .badge.bg-danger { background-color: #b91c1c !important; } html[data-theme="dark"] .badge.bg-warning { background-color: #a16207 !important; color: #fef3c7 !important; } html[data-theme="dark"] .badge.bg-info { background-color: #0369a1 !important; color: #e0f2fe !important; } html[data-theme="dark"] .badge.bg-secondary { background-color: var(--appi-surface-3) !important; } /* Texto: as classes fixas do Bootstrap não acompanham o tema */ html[data-theme="dark"] .text-dark { color: var(--appi-text) !important; } html[data-theme="dark"] .text-body-secondary, html[data-theme="dark"] .text-muted { color: var(--appi-text-muted) !important; } html[data-theme="dark"] .border { border-color: var(--appi-border) !important; } html[data-theme="dark"] .bg-light { background-color: var(--appi-surface-2) !important; } html[data-theme="dark"] .bg-white { background-color: var(--appi-surface) !important; } /* Alertas: o Bootstrap 5.3 já os escurece, mas o projeto usa muito alert-warning/info em faixa fina — aqui eles ficam translúcidos. */ html[data-theme="dark"] .alert-warning { background-color: var(--appi-warning-bg); border-color: var(--appi-warning-border); color: #fde68a; } html[data-theme="dark"] .alert-info { background-color: var(--appi-info-bg); border-color: var(--appi-info-border); color: #bae6fd; } html[data-theme="dark"] .alert-success { background-color: var(--appi-success-bg); border-color: var(--appi-success-border); color: #bbf7d0; } html[data-theme="dark"] .alert-danger { background-color: var(--appi-danger-bg); border-color: var(--appi-danger-border); color: #fecaca; } /* ============================================================ 6. Botões e campos ============================================================ */ html[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--appi-text-soft); --bs-btn-border-color: var(--appi-border-strong); --bs-btn-hover-bg: var(--appi-surface-3); --bs-btn-hover-border-color: var(--appi-border-strong); --bs-btn-hover-color: var(--appi-text); } html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--appi-accent); --bs-btn-border-color: var(--appi-accent-border); --bs-btn-hover-bg: var(--appi-accent-bg); --bs-btn-hover-border-color: var(--appi-accent); --bs-btn-hover-color: var(--appi-accent-strong); } html[data-theme="dark"] .btn-outline-success { --bs-btn-color: var(--appi-success); --bs-btn-border-color: var(--appi-success-border); --bs-btn-hover-bg: var(--appi-success-bg); --bs-btn-hover-color: var(--appi-success); } html[data-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--appi-danger); --bs-btn-border-color: var(--appi-danger-border); --bs-btn-hover-bg: var(--appi-danger-bg); --bs-btn-hover-color: var(--appi-danger); } html[data-theme="dark"] .btn-outline-info { --bs-btn-color: var(--appi-info); --bs-btn-border-color: var(--appi-info-border); --bs-btn-hover-bg: var(--appi-info-bg); --bs-btn-hover-color: var(--appi-info); } html[data-theme="dark"] .btn-outline-warning { --bs-btn-color: var(--appi-warning); --bs-btn-border-color: var(--appi-warning-border); --bs-btn-hover-bg: var(--appi-warning-bg); --bs-btn-hover-color: var(--appi-warning); } html[data-theme="dark"] .btn-outline-dark { --bs-btn-color: var(--appi-text-soft); --bs-btn-border-color: var(--appi-border-strong); --bs-btn-hover-bg: var(--appi-surface-3); --bs-btn-hover-color: var(--appi-text); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--appi-surface-2); border-color: var(--appi-border); color: var(--appi-text); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--appi-surface-2); border-color: var(--appi-accent); color: var(--appi-text); box-shadow: 0 0 0 0.2rem var(--appi-accent-bg); } html[data-theme="dark"] .form-control::placeholder { color: var(--appi-text-faint); } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-select:disabled { background-color: var(--appi-surface); color: var(--appi-text-muted); } html[data-theme="dark"] .form-text { color: var(--appi-text-muted); } /* Ícone do seletor de data/hora nativo, preto por padrão */ html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } html[data-theme="dark"] .modal-content { background: var(--appi-surface); border-color: var(--appi-border); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--appi-border); } /* ============================================================ 7. Editores (Quill) e seletores (TomSelect) ------------------------------------------------------------ O Quill desenha os ícones da barra com stroke/fill pretos: sem inverter, a barra fica ilegível. ============================================================ */ html[data-theme="dark"] .ql-toolbar.ql-snow { background: var(--appi-surface-2) !important; border-color: var(--appi-border) !important; } html[data-theme="dark"] .ql-container.ql-snow { background: var(--appi-surface-2) !important; border-color: var(--appi-border) !important; color: var(--appi-text); } html[data-theme="dark"] .ql-editor { color: var(--appi-text); } html[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--appi-text-faint) !important; } html[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--appi-text-soft); } html[data-theme="dark"] .ql-snow .ql-fill { fill: var(--appi-text-soft); } html[data-theme="dark"] .ql-snow .ql-picker { color: var(--appi-text-soft); } html[data-theme="dark"] .ql-snow .ql-picker-options { background: var(--appi-surface-3); border-color: var(--appi-border-strong); } html[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke, html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--appi-accent); } html[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-fill, html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--appi-accent); } html[data-theme="dark"] .descricao-richtext-wrapper, html[data-theme="dark"] .form-descricao-wrapper { border-color: var(--appi-border); } html[data-theme="dark"] .form-descricao-editor.ql-container.ql-snow { background: var(--appi-surface-2); } html[data-theme="dark"] .ts-wrapper .ts-control, html[data-theme="dark"] .ts-control { background: var(--appi-surface-2); border-color: var(--appi-border); color: var(--appi-text); } html[data-theme="dark"] .ts-control input, html[data-theme="dark"] .ts-control input::placeholder { color: var(--appi-text-muted) !important; } html[data-theme="dark"] .ts-dropdown { background: var(--appi-surface-3); border-color: var(--appi-border-strong); color: var(--appi-text); box-shadow: var(--appi-shadow); } html[data-theme="dark"] .ts-dropdown .option:hover, html[data-theme="dark"] .ts-dropdown .active { background: var(--appi-accent-bg); color: var(--appi-accent-strong); } html[data-theme="dark"] .ts-wrapper.multi .item { background: var(--appi-surface-hover); border-color: var(--appi-border-strong); color: var(--appi-text); } /* ============================================================ 8. Cartões de estatística da agenda ============================================================ */ html[data-theme="dark"] .stats-group { background: var(--appi-surface); border-color: var(--appi-border); border-top-color: var(--appi-border-strong); } html[data-theme="dark"] .stats-group-agendamentos { background: var(--appi-surface); border-top-color: #64748b; } html[data-theme="dark"] .stats-group-status { background: var(--appi-surface); border-top-color: #818cf8; } html[data-theme="dark"] .stats-group-realizadas { background: var(--appi-surface); border-top-color: var(--appi-success); } html[data-theme="dark"] .stats-group-agendamentos .stats-group-label { color: #94a3b8; } html[data-theme="dark"] .stats-group-status .stats-group-label { color: #a5b4fc; } html[data-theme="dark"] .stats-group-realizadas .stats-group-label { color: var(--appi-success); } html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stats-group .stat-card { background: var(--appi-surface-2); border-color: var(--appi-border); } html[data-theme="dark"] .stat-card .stat-value { color: var(--appi-text); } html[data-theme="dark"] .stat-card .stat-label { color: var(--appi-text-muted); } html[data-theme="dark"] .stat-card .stat-value .stat-pct { color: var(--appi-text-faint); } /* Faixa superior colorida: tons um pouco mais claros para não sumirem contra o cartão escuro. */ html[data-theme="dark"] .stat-card.border-top-success { border-top-color: var(--appi-success); } html[data-theme="dark"] .stat-card.border-top-info { border-top-color: var(--appi-info); } html[data-theme="dark"] .stat-card.border-top-danger { border-top-color: var(--appi-danger); } html[data-theme="dark"] .stat-card.border-top-primary { border-top-color: #818cf8; } html[data-theme="dark"] .stat-card.border-top-warning { border-top-color: var(--appi-warning); } html[data-theme="dark"] .stat-card.border-top-lido { border-top-color: #a78bfa; } html[data-theme="dark"] .stat-card.stat-card-total { border-top-color: #94a3b8; } /* Cartões de status: mesma cor das badges .agenda-status-* no escuro, já lá em cima. */ html[data-theme="dark"] .stat-card.border-top-status-programada { border-top-color: var(--appi-purple); } html[data-theme="dark"] .stat-card.border-top-status-realizada { border-top-color: #7dd3fc; } html[data-theme="dark"] .stat-card.border-top-status-concluida { border-top-color: #86efac; } html[data-theme="dark"] .stat-card.border-top-status-cancelada { border-top-color: #fca5a5; } html[data-theme="dark"] .stats-filter-card.active { background: var(--appi-accent-bg); box-shadow: inset 0 0 0 1px var(--appi-accent-border), 0 10px 24px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .stats-filter-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .stats-derived-toggle-group { background: var(--appi-surface); border-color: var(--appi-border); } html[data-theme="dark"] .stats-derived-toggle { color: var(--appi-text-muted); } html[data-theme="dark"] .stats-derived-toggle:hover { background: var(--appi-accent-bg); color: var(--appi-accent-strong); } html[data-theme="dark"] .stats-derived-toggle.active { background: #2563eb; color: #fff; } /* ============================================================ 9. Tabela da agenda ============================================================ */ html[data-theme="dark"] #table-agenda td:not(:last-child), html[data-theme="dark"] #table-agenda th:not(:last-child) { border-right-color: var(--appi-border-soft); } html[data-theme="dark"] #table-agenda .agenda-cell-id { color: var(--appi-text-muted); } html[data-theme="dark"] .agenda-action-nav-btn .agenda-action-nav-check { color: var(--appi-success); } html[data-theme="dark"] #table-agenda th.agenda-sortable:hover { background-color: var(--appi-surface-2); } html[data-theme="dark"] #table-agenda .agenda-sort-icon { color: var(--appi-text-faint); } html[data-theme="dark"] #table-agenda th.agenda-sortable:hover .agenda-sort-icon { color: var(--appi-text-muted); } html[data-theme="dark"] #table-agenda th.agenda-sort-active, html[data-theme="dark"] #table-agenda th.agenda-sort-active .agenda-sort-icon { color: var(--appi-accent); } html[data-theme="dark"] #table-agenda th:hover .agenda-column-resizer::after { background: var(--appi-border-strong); } html[data-theme="dark"] .agenda-header-filter-btn { color: var(--appi-text-faint); } html[data-theme="dark"] .agenda-header-filter-btn:hover, html[data-theme="dark"] .agenda-header-filter-btn.filter-active { color: var(--appi-accent); } html[data-theme="dark"] #header-filter-panel { background: var(--appi-surface-3); border-color: var(--appi-border-strong); box-shadow: var(--appi-shadow); } html[data-theme="dark"] #header-filter-panel .header-filter-actions { background: var(--appi-surface-3); border-top-color: var(--appi-border-strong); } html[data-theme="dark"] .hfilter-option:hover { background: var(--appi-surface-hover); } /* Status: fundo translúcido e texto na cor — cor sólida com texto branco fica pesada demais no meio de uma tabela escura. */ html[data-theme="dark"] .agenda-status-programada { background: var(--appi-purple-bg) !important; color: var(--appi-purple) !important; border-color: var(--appi-purple-border) !important; } html[data-theme="dark"] .agenda-status-realizada { background: var(--appi-info-bg) !important; color: #7dd3fc !important; border-color: var(--appi-info-border) !important; } html[data-theme="dark"] .agenda-status-concluida { background: var(--appi-success-bg) !important; color: #86efac !important; border-color: var(--appi-success-border) !important; } html[data-theme="dark"] .agenda-status-cancelada { background: var(--appi-danger-bg) !important; color: #fca5a5 !important; border-color: var(--appi-danger-border) !important; } /* ============================================================ 10. Página de ações da sessão ============================================================ */ html[data-theme="dark"] .agenda-action-page { background: var(--appi-bg); color: var(--appi-text); } html[data-theme="dark"] .agenda-action-sidebar { background: var(--appi-surface); border-right-color: var(--appi-border); border-bottom-color: var(--appi-border); } html[data-theme="dark"] .agenda-action-sidebar-brand { color: var(--appi-text); } html[data-theme="dark"] .agenda-action-sidebar-brand i, html[data-theme="dark"] .agenda-action-section-title i { color: var(--appi-accent); } html[data-theme="dark"] .agenda-action-nav-btn { color: var(--appi-text-soft); } html[data-theme="dark"] .agenda-action-nav-btn:hover, html[data-theme="dark"] .agenda-action-nav-btn.active { background: var(--appi-accent-bg); color: var(--appi-accent-strong); } html[data-theme="dark"] .agenda-action-section { background: var(--appi-surface); border-color: var(--appi-border); } html[data-theme="dark"] .agenda-action-section-title { color: var(--appi-text); } html[data-theme="dark"] .agenda-action-session-item strong { color: var(--appi-text-muted); } html[data-theme="dark"] .agenda-action-session-item span { color: var(--appi-text); } html[data-theme="dark"] .agenda-action-tematicas { background: var(--appi-surface-2); border-color: var(--appi-border); } html[data-theme="dark"] #agenda-pane-dados-footer, html[data-theme="dark"] #agenda-pane-realizacao-footer, html[data-theme="dark"] #agenda-pane-formularios-footer, html[data-theme="dark"] #agenda-pane-feedback-footer { border-top-color: var(--appi-border); } /* ============================================================ 11. Formulários e respostas ------------------------------------------------------------ Os campos de resposta carregam style="background:#fff" inline (js/forms_pergunta_card.js), e inline só cede a !important. ============================================================ */ html[data-theme="dark"] #forms-list-container { border-bottom-color: var(--appi-border); } html[data-theme="dark"] .agenda-form-tab { background: var(--appi-surface-2); border-color: var(--appi-border); color: var(--appi-text-soft); } html[data-theme="dark"] .agenda-form-tab:hover, html[data-theme="dark"] .agenda-form-tab.active { background: var(--appi-accent-bg); border-color: var(--appi-accent-border); color: var(--appi-accent-strong); box-shadow: none; } html[data-theme="dark"] .agenda-form-meta-card { background: var(--appi-surface-2); border-color: var(--appi-border); } html[data-theme="dark"] .agenda-form-meta-grid strong, html[data-theme="dark"] .agenda-form-meta-description { color: var(--appi-text-soft); } html[data-theme="dark"] #agenda-pane-formularios-response .view-form-header { border-bottom-color: var(--appi-border); } html[data-theme="dark"] .sim-card { background: var(--appi-surface-2); border-color: var(--appi-border); } html[data-theme="dark"] .resp-input, html[data-theme="dark"] .sim-input, html[data-theme="dark"] .resp-quill-auto, html[data-theme="dark"] .resp-quill-auto .ql-editor { background: var(--appi-surface-3) !important; color: var(--appi-text) !important; border-color: var(--appi-border-strong); } html[data-theme="dark"] .resp-dica { color: var(--appi-text-muted); } html[data-theme="dark"] .resp-erro { color: var(--appi-danger); } html[data-theme="dark"] .sim-card-invalido { border-color: var(--appi-danger) !important; box-shadow: 0 0 0 0.15rem rgba(248, 113, 113, 0.18); } html[data-theme="dark"] .sim-card-invalido .card-title { color: #fca5a5; } html[data-theme="dark"] .view-form-header { border-bottom-color: var(--appi-border); } /* ============================================================ 12. Feedback ============================================================ */ html[data-theme="dark"] .feedback-section-card { background: var(--appi-surface); border-color: var(--appi-border); box-shadow: none; } html[data-theme="dark"] .feedback-section-card .card-header { background: var(--appi-surface-2); border-bottom-color: var(--appi-border); } html[data-theme="dark"] .feedback-section-card .card-header:hover { background: var(--appi-surface-hover); } html[data-theme="dark"] .feedback-subsection { background: var(--appi-surface-2); border-color: var(--appi-border); } html[data-theme="dark"] .feedback-subsection-header { color: var(--appi-text-soft); } html[data-theme="dark"] .feedback-subsection-header:hover { background: var(--appi-surface-hover); } html[data-theme="dark"] .feedback-subsection .collapse.show + .feedback-subsection-header { border-bottom-color: var(--appi-border); } html[data-theme="dark"] .feedback-subsection .feedback-editor .ql-toolbar, html[data-theme="dark"] .feedback-subsection .feedback-editor .ql-container { background: var(--appi-surface-2) !important; border-color: var(--appi-border) !important; } html[data-theme="dark"] .feedback-section-card .collapse-icon, html[data-theme="dark"] .feedback-subsection .collapse-icon { color: var(--appi-text-faint); } html[data-theme="dark"] .feedback-error { color: var(--appi-danger); } html[data-theme="dark"] .feedback-success { color: var(--appi-success); } /* ============================================================ 13. Termo assinado ============================================================ */ html[data-theme="dark"] [data-termo-painel] code { background: var(--appi-surface-3); color: var(--appi-accent-strong); padding: 0.05rem 0.3rem; border-radius: 0.25rem; } /* A caixa tracejada do estado vazio já nasce apagada por opacidade; no escuro ela precisa de borda visível para continuar sendo caixa. */ html[data-theme="dark"] [data-termo-el="vazio"] { border-color: var(--appi-border-strong) !important; color: var(--appi-text-muted) !important; } html[data-theme="dark"] [data-termo-el="link"] { color: var(--appi-accent-strong); } /* ============================================================ 14. Calendário ============================================================ */ html[data-theme="dark"] .agenda-calendar-summary { background: var(--appi-surface); border-color: var(--appi-border); } html[data-theme="dark"] .agenda-calendar-summary p, html[data-theme="dark"] .agenda-calendar-controls-rotulo, html[data-theme="dark"] .agenda-calendar-loading { color: var(--appi-text-muted); } html[data-theme="dark"] .agenda-calendar-legend, html[data-theme="dark"] .agenda-calendar-actions { border-left-color: var(--appi-border); } html[data-theme="dark"] .agenda-calendar-card { background: var(--appi-surface); border-color: var(--appi-border); box-shadow: var(--appi-shadow); } html[data-theme="dark"] .agenda-calendar-card .fc { --fc-border-color: var(--appi-border); --fc-page-bg-color: var(--appi-surface); --fc-neutral-bg-color: var(--appi-surface-2); --fc-list-event-hover-bg-color: var(--appi-surface-hover); --fc-today-bg-color: rgba(96, 165, 250, 0.10); color: var(--appi-text); } html[data-theme="dark"] .agenda-calendar-card .fc .fc-scrollgrid-section-header > *, html[data-theme="dark"] .agenda-calendar-card .fc .fc-col-header, html[data-theme="dark"] .agenda-calendar-card .fc .fc-col-header-cell, html[data-theme="dark"] .agenda-calendar-card .fc .fc-col-header-cell-cushion { background-color: var(--appi-surface) !important; } html[data-theme="dark"] .agenda-calendar-card .fc .fc-scrollgrid-section-header { box-shadow: 0 1px 0 var(--appi-border); } html[data-theme="dark"] .agenda-calendar-card .fc .fc-toolbar-title, html[data-theme="dark"] .agenda-calendar-card .fc .fc-daygrid-day-number { color: var(--appi-text); } html[data-theme="dark"] .agenda-calendar-card .fc .fc-col-header-cell-cushion { color: var(--appi-text-soft); } html[data-theme="dark"] .agenda-calendar-card .fc .fc-timegrid-slot-label-cushion, html[data-theme="dark"] .agenda-calendar-card .fc .fc-timegrid-axis-cushion { color: var(--appi-text-muted); } html[data-theme="dark"] .agenda-calendar-card .fc .fc-button { background: var(--appi-surface-2); border-color: var(--appi-border-strong); color: var(--appi-text); } html[data-theme="dark"] .agenda-calendar-card .fc .fc-button:hover { background: var(--appi-accent-bg); border-color: var(--appi-accent-border); color: var(--appi-accent-strong); } html[data-theme="dark"] .agenda-calendar-card .fc .fc-button-primary:not(:disabled).fc-button-active, html[data-theme="dark"] .agenda-calendar-card .fc .fc-button-primary:not(:disabled):active { background: var(--appi-accent); border-color: var(--appi-accent); color: #0f172a; } html[data-theme="dark"] .agenda-calendar-card .fc .fc-day-today { background: rgba(96, 165, 250, 0.10) !important; } html[data-theme="dark"] .agenda-calendar-card .fc .fc-day-today .fc-daygrid-day-number { background: var(--appi-accent-bg); color: var(--appi-accent-strong); } html[data-theme="dark"] .agenda-calendar-card .fc .fc-day-other .fc-daygrid-day-top { opacity: 0.45; } /* Chips dos eventos: fundo translúcido e texto claro */ html[data-theme="dark"] .agenda-calendar-chip { box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28); } html[data-theme="dark"] .agenda-calendar-chip-agenda { background: rgba(59, 130, 246, 0.22); color: #bfdbfe; } html[data-theme="dark"] .agenda-calendar-chip-roteiro { background: rgba(249, 115, 22, 0.22); color: #fed7aa; } html[data-theme="dark"] .agenda-calendar-escolar-feriado, html[data-theme="dark"] .agenda-calendar-escolar-nao_letivo, html[data-theme="dark"] .agenda-calendar-escolar-sabado_letivo, html[data-theme="dark"] .agenda-calendar-escolar-avaliacao, html[data-theme="dark"] .agenda-calendar-escolar-recesso, html[data-theme="dark"] .agenda-calendar-escolar-letivo, html[data-theme="dark"] .agenda-calendar-escolar-conselho, html[data-theme="dark"] .agenda-calendar-escolar-exame_final, html[data-theme="dark"] .agenda-calendar-escolar-tae { background: var(--appi-surface-3); border-color: var(--appi-border-strong); color: var(--appi-text); } html[data-theme="dark"] .agenda-calendar-coordenadoria-filter, html[data-theme="dark"] .agenda-calendar-mediador-filter, html[data-theme="dark"] .agenda-calendar-lider-filter { background-color: var(--appi-surface-2); border-color: var(--appi-border); color: var(--appi-text); } html[data-theme="dark"] .agenda-calendar-controls .ts-control { border-color: var(--appi-border) !important; background: var(--appi-surface-2) !important; } html[data-theme="dark"] .calendar-action-summary { background: var(--appi-surface-2); border-color: var(--appi-border); } html[data-theme="dark"] .calendar-action-meta { color: var(--appi-text-soft); } /* Legendas: mantêm a cor de identificação, só trocam o contraste */ html[data-theme="dark"] .legend-toggle-agenda { background: rgba(59, 130, 246, 0.20) !important; color: #bfdbfe !important; border-color: rgba(59, 130, 246, 0.45) !important; } html[data-theme="dark"] .legend-toggle-roteiro { background: rgba(245, 158, 11, 0.20) !important; color: #fde68a !important; border-color: rgba(245, 158, 11, 0.45) !important; } html[data-theme="dark"] .legend-toggle-escolar { background: rgba(148, 163, 184, 0.22) !important; color: var(--appi-text) !important; border-color: rgba(148, 163, 184, 0.5) !important; } html[data-theme="dark"] .agenda-calendar-legend .legend-toggle-agenda.active { background: rgba(59, 130, 246, 0.35) !important; border-color: var(--appi-accent) !important; } html[data-theme="dark"] .agenda-calendar-legend .legend-toggle-roteiro.active { background: rgba(245, 158, 11, 0.35) !important; border-color: var(--appi-warning) !important; } html[data-theme="dark"] .agenda-calendar-legend .legend-toggle-escolar.active { background: rgba(148, 163, 184, 0.38) !important; border-color: #cbd5e1 !important; } /* ============================================================ 15. Painel (dashboard) ------------------------------------------------------------ O dashboard já trabalha com tokens próprios, declarados por JS em .adash-root: basta redefini-los. As cores das séries dos gráficos continuam as mesmas — são tons médios, que funcionam sobre fundo claro e escuro. ============================================================ */ html[data-theme="dark"] .adash-root { --adash-ink: var(--appi-text); --adash-secondary: var(--appi-text-soft); --adash-muted: var(--appi-text-muted); --adash-gridline: var(--appi-border); --adash-surface: var(--appi-surface); --adash-border: rgba(226, 232, 240, 0.14); } html[data-theme="dark"] .adash-card { background: var(--appi-surface); border-color: var(--appi-border) !important; box-shadow: var(--appi-shadow-soft); } html[data-theme="dark"] .adash-switch-tab { background: var(--appi-surface-2); color: var(--appi-text-soft); } html[data-theme="dark"] .adash-switch-tab:hover { background: var(--appi-surface-hover); } html[data-theme="dark"] .adash-switch-tab.is-active { background: var(--appi-accent-bg); color: var(--appi-accent-strong); } html[data-theme="dark"] .adash-hbar-track { background: var(--appi-surface-3); } html[data-theme="dark"] .adash-legend-row:hover, html[data-theme="dark"] .adash-legend-row.is-selected { background: var(--appi-surface-2); } html[data-theme="dark"] .adash-tooltip { background: #0b1220; color: var(--appi-text); border: 1px solid var(--appi-border-strong); } /* ============================================================ 16. Guia interativo ============================================================ */ html[data-theme="dark"] .appi-guide-tooltip { background: var(--appi-surface); color: var(--appi-text); border: 1px solid var(--appi-border-strong); box-shadow: var(--appi-shadow); } html[data-theme="dark"] .appi-guide-tooltip h6 { color: var(--appi-text); } html[data-theme="dark"] .appi-guide-tooltip p { color: var(--appi-text-soft); } html[data-theme="dark"] .appi-guide-progress { color: var(--appi-text-muted); } html[data-theme="dark"] .appi-guide-backdrop { background: rgba(0, 0, 0, 0.65); } /* ============================================================ 17. Toasts e utilitários ============================================================ */ html[data-theme="dark"] #toast-container > div { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] code { color: var(--appi-accent-strong); } html[data-theme="dark"] .page-header p { color: var(--appi-text-muted); } /* Botão do tema, ao lado do "Iniciar guia" */ /* Formato de pílula, igual aos vizinhos na topbar: o "Iniciar guia" (.appi-guide-start) e o cartão de perfil (.profile-trigger). A altura mínima acompanha a do botão do guia — o .btn-sm sozinho fica alguns pixels mais baixo, e lado a lado isso salta à vista. */ .appi-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 34px; border-radius: 999px; white-space: nowrap; } html[data-theme="dark"] .appi-theme-toggle { --bs-btn-color: var(--appi-warning); --bs-btn-border-color: var(--appi-warning-border); --bs-btn-hover-bg: var(--appi-warning-bg); --bs-btn-hover-border-color: var(--appi-warning); --bs-btn-hover-color: var(--appi-warning); } /* Diálogos compartilhados */ html[data-theme="dark"] .appi-dialog-backdrop { background: rgba(2, 6, 23, 0.76); } html[data-theme="dark"] .appi-dialog { background: var(--appi-surface); color: var(--appi-text); border-color: var(--appi-border-strong); box-shadow: var(--appi-shadow); } html[data-theme="dark"] .appi-dialog__header, html[data-theme="dark"] .appi-dialog__footer { border-color: var(--appi-border); } html[data-theme="dark"] .appi-dialog__footer { background: var(--appi-surface-2); } html[data-theme="dark"] .appi-dialog__title { color: var(--appi-text); } html[data-theme="dark"] .appi-dialog__message { color: var(--appi-text-soft); } html[data-theme="dark"] .appi-dialog__label { color: var(--appi-text); } html[data-theme="dark"] .appi-dialog__close { color: var(--appi-text-muted); } html[data-theme="dark"] .appi-dialog__close:hover { background: var(--appi-surface-3); color: var(--appi-text); } html[data-theme="dark"] .appi-dialog__input { background: var(--appi-surface-2); border-color: var(--appi-border-strong); color: var(--appi-text); } html[data-theme="dark"] .appi-dialog__input::placeholder { color: var(--appi-text-faint); } html[data-theme="dark"] .appi-dialog__feedback { color: var(--appi-danger); } html[data-theme="dark"] .appi-dialog__icon { background: var(--appi-accent-bg); color: var(--appi-accent-strong); } html[data-theme="dark"] .appi-dialog--danger .appi-dialog__icon { background: var(--appi-danger-bg); color: var(--appi-danger); } html[data-theme="dark"] .appi-dialog--warning .appi-dialog__icon { background: var(--appi-warning-bg); color: var(--appi-warning); } html[data-theme="dark"] .appi-dialog--success .appi-dialog__icon { background: var(--appi-success-bg); color: var(--appi-success); } html[data-theme="dark"] .appi-dialog--info .appi-dialog__icon { background: var(--appi-info-bg); color: var(--appi-info); } /* Alternância de layout da página de ações (documento / dividido) */ html[data-theme="dark"] .agenda-action-layout-toggle .btn.active { background: var(--appi-accent-bg); border-color: var(--appi-accent); color: var(--appi-accent-strong); } html[data-theme="dark"] .agenda-action-col-side.is-highlighted > .agenda-action-section { box-shadow: 0 0 0 2px var(--appi-accent); } html[data-theme="dark"] .agenda-action-sidebar-toggle { color: var(--appi-text-muted); } html[data-theme="dark"] .agenda-action-sidebar-toggle:hover { background: var(--appi-surface-2); color: var(--appi-accent-strong); } html[data-theme="dark"] .agenda-action-col-resizer::before { background: var(--appi-border); } html[data-theme="dark"] .agenda-action-col-resizer:hover::before, html[data-theme="dark"] .agenda-action-col-resizer.is-dragging::before { background: var(--appi-accent); }