/* Tema escuro — correções dos componentes que não seguem os tokens --am-*. Duas camadas ligam juntas (ver public/javascripts/astur-theme.js): - → tokens --am-* (astur-design-system.css) - #page-container.dark-mode → ~550 regras `.dark-mode …` do Dashmix O Dashmix escurece formulários, tabelas, paginação e blocos, mas com a paleta cinzenta dele (#1b1f27, #2c323f), que ao lado do azul-marinho dos tokens parecia outro produto. Este ficheiro alinha essas superfícies com os tokens e cobre o que tem cor clara fixa: o thead das tabelas legacy, os overlays de carregamento, as listras das tabelas e botões "alt". Tudo escopado em [data-am-theme="dark"]: o tema claro não muda nada. Carregado por último em astur-styles.ejs para ganhar a cascata sem precisar de !important — os poucos que existem abaixo cobrem regras que já tinham !important antes. */ /* ── superfícies de base ─────────────────────────────────────────────── */ [data-am-theme="dark"] #page-container.dark-mode, [data-am-theme="dark"] #page-container.dark-mode #main-container { background-color: var(--am-bg); color: var(--am-text); } [data-am-theme="dark"] #page-footer, [data-am-theme="dark"] .am-app .bg-body-light, [data-am-theme="dark"] .am-app .bg-body-extra-light, [data-am-theme="dark"] .am-app .bg-white, [data-am-theme="dark"] .am-app .bg-light { background-color: var(--am-surface) !important; color: var(--am-text); } [data-am-theme="dark"] #page-footer { border-top: 1px solid var(--am-border); color: var(--am-text-muted); } /* Dashmix: `.dark-mode .block .block-header-default { #2c323f !important }` */ [data-am-theme="dark"] .am-app .block .block-header-default, [data-am-theme="dark"] .am-app .block.block-themed > .block-header { background-color: transparent !important; border-bottom-color: var(--am-border); } /* Dashmix pinta estes com !important em quatro cinzentos diferentes. */ [data-am-theme="dark"] .am-app .bg-body { background-color: var(--am-bg) !important; } [data-am-theme="dark"] .am-app .bg-body-dark { background-color: var(--am-bg) !important; } [data-am-theme="dark"] .am-app .block { background-color: var(--am-surface); box-shadow: var(--am-shadow-sm); } [data-am-theme="dark"] .am-app .text-dark, [data-am-theme="dark"] .am-app .text-black { color: var(--am-text) !important; } [data-am-theme="dark"] .am-app .text-muted { color: var(--am-text-muted) !important; } [data-am-theme="dark"] .am-app hr, [data-am-theme="dark"] .am-app .border, [data-am-theme="dark"] .am-app .border-top, [data-am-theme="dark"] .am-app .border-bottom { border-color: var(--am-border) !important; } /* ── formulários ─────────────────────────────────────────────────────── */ [data-am-theme="dark"] .am-app .form-control, [data-am-theme="dark"] .am-app .form-select, [data-am-theme="dark"] .am-app .input-group-text { background-color: var(--am-bg); border-color: var(--am-border-strong); color: var(--am-text); } [data-am-theme="dark"] .am-app .form-control::placeholder { color: var(--am-text-subtle); } [data-am-theme="dark"] .am-app .form-control:focus, [data-am-theme="dark"] .am-app .form-select:focus { background-color: var(--am-bg); border-color: var(--am-primary); box-shadow: 0 0 0 0.2rem var(--am-primary-soft); color: var(--am-text); } [data-am-theme="dark"] .am-app .form-control:disabled, [data-am-theme="dark"] .am-app .form-control[readonly], [data-am-theme="dark"] .am-app .form-select:disabled { background-color: var(--am-surface-hover); color: var(--am-text-muted); } [data-am-theme="dark"] .am-app .form-control::file-selector-button { background-color: var(--am-surface-hover); color: var(--am-text); border-color: var(--am-border-strong); } [data-am-theme="dark"] .am-app .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--am-border-strong); } /* A seta do