/*
 * Modo escuro (chave `xeqplaca_tema`, aplicada no app.html). O Bootstrap 5.3 já escurece os próprios componentes
 * com data-bs-theme="dark"; aqui fica só o que o layout e as telas pintam com cor fixa.
 * `!important` porque as regras dos componentes Svelte vêm depois e com o mesmo peso.
 */
[data-bs-theme="dark"] {
    color-scheme: dark;
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .right-side,
[data-bs-theme="dark"] .content { background: #121417 !important; }

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }

[data-bs-theme="dark"] .text-dark { color: var(--bs-body-color) !important; }

/* Grid.js */
[data-bs-theme="dark"] .gridjs-container,
[data-bs-theme="dark"] .gridjs-wrapper,
[data-bs-theme="dark"] .gridjs-footer,
[data-bs-theme="dark"] th.gridjs-th,
[data-bs-theme="dark"] td.gridjs-td,
[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button {
    background-color: #1b1e22 !important;
    color: var(--bs-body-color) !important;
    border-color: #2f343a !important;
}
[data-bs-theme="dark"] th.gridjs-th { background-color: #22262b !important; }
[data-bs-theme="dark"] .gridjs-tr:hover td.gridjs-td { background-color: #24292f !important; }
[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button.gridjs-currentPage { background-color: #2f343a !important; }