/*
 * Modo escuro (utils/tema.ts). 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"] {
    --menuBackground: #1b1e22 !important;
    --menuTextColor: #c9ced4 !important;
    --backgroundColor: #121417;
    --lightColor: #1b1e22;
    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"] .content-header {
    background: #1b1e22 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !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; }

[data-bs-theme="dark"] header .main-menu-item,
[data-bs-theme="dark"] header .btn-link { color: var(--menuTextColor) !important; }

[data-bs-theme="dark"] .notification-item:hover,
[data-bs-theme="dark"] .notification-item.unread { background: #24292f !important; }
[data-bs-theme="dark"] .notification-icon { background: #24292f !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; }

/* Mapa: escurece os blocos de rua sem mexer em marcadores e popups */
[data-bs-theme="dark"] .leaflet-tile-pane { filter: brightness(0.7) invert(1) contrast(0.9) hue-rotate(200deg) saturate(0.4); }