/**
 * Trânsito Osasco - Modo Escuro Especializado
 * Desenvolvido especificamente para máxima legibilidade e contraste noturno
 */

[data-theme="dark"],
[data-bs-theme="dark"] {
    /* Variáveis do Bootstrap 5.3 */
    --bs-body-color: #F8FAFC;
    --bs-body-color-rgb: 248, 250, 252;
    --bs-body-bg: #0B1320;
    --bs-body-bg-rgb: 11, 19, 32;
    --bs-card-color: #F8FAFC;
    --bs-card-bg: #111D33;
    --bs-card-border-color: #1E293B;
    --bs-heading-color: #FFFFFF;
    --bs-secondary-color: #CBD5E1;
    --bs-tertiary-color: #94A3B8;
    --bs-border-color: #1E293B;
    --bs-list-group-color: #F8FAFC;
    --bs-list-group-bg: #111D33;
    --bs-list-group-border-color: #1E293B;
    --bs-light-rgb: 22, 36, 63;
    --bs-dark-rgb: 248, 250, 252;

    /* Variáveis Customizadas do Projeto */
    --primary-color: #38BDF8;
    --primary-accent: #38BDF8;
    --primary-light: rgba(56, 189, 248, 0.15);
    --secondary-color: #0F172A;
    
    --background-color: #0B1320;
    --surface-color: #16243F;
    --card-color: #111D33;
    --card-border: #1E293B;
    --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    
    --text-color: #F8FAFC;
    --text-heading: #FFFFFF;
    --text-muted: #CBD5E1; /* Prata claro luminoso de alto contraste */
    --border-color: #1E293B;
    
    --header-bg: rgba(11, 19, 32, 0.95);
    --header-border: #1E293B;
    --footer-bg: #070D18;
    --footer-text: #F8FAFC;
    --footer-muted: #94A3B8;
}

/* Base Geral no Tema Escuro */
[data-theme="dark"] body,
[data-bs-theme="dark"] body {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .border {
    border-color: #1E293B !important;
}

[data-theme="dark"] div[style*="background-color: var(--card-color)"],
[data-theme="dark"] div[style*="background-color: var(--surface-color)"] {
    color: #F8FAFC !important;
}

[data-theme="dark"] div[style*="background-color: var(--card-color)"] strong,
[data-theme="dark"] div[style*="background-color: var(--surface-color)"] strong {
    color: #FFFFFF !important;
}

[data-theme="dark"] div[style*="background-color: var(--card-color)"] .text-muted,
[data-theme="dark"] div[style*="background-color: var(--surface-color)"] .text-muted {
    color: #CBD5E1 !important;
}

/* Tipografia e Títulos */
[data-theme="dark"] h1, [data-theme="dark"] .h1,
[data-theme="dark"] h2, [data-theme="dark"] .h2,
[data-theme="dark"] h3, [data-theme="dark"] .h3,
[data-theme="dark"] h4, [data-theme="dark"] .h4,
[data-theme="dark"] h5, [data-theme="dark"] .h5,
[data-theme="dark"] h6, [data-theme="dark"] .h6 {
    color: #FFFFFF !important;
}

[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: #FFFFFF !important;
}

[data-theme="dark"] p {
    color: #F1F5F9;
}

/* Classes Utilitárias de Texto */
[data-theme="dark"] .text-muted,
[data-theme="dark"] small.text-muted {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .text-dark {
    color: #F8FAFC !important;
}

[data-theme="dark"] .text-white-50 {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .section-header-title {
    color: #F8FAFC !important;
    font-weight: 700 !important;
}

/* Cards e Contêineres */
[data-theme="dark"] .card {
    background-color: var(--card-color) !important;
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
}

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

/* Card das Vias (Corredores de Trânsito) */
[data-theme="dark"] .road-card {
    background-color: #16243F !important;
    border-color: #243552 !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .road-card:hover {
    border-color: var(--primary-accent) !important;
    background-color: #1A2C4D !important;
}

[data-theme="dark"] .road-card .road-name,
[data-theme="dark"] .road-card .fw-bold {
    color: #FFFFFF !important;
}

[data-theme="dark"] .road-card .text-muted,
[data-theme="dark"] .road-card small {
    color: #CBD5E1 !important;
}

/* Lista de Ocorrências */
[data-theme="dark"] .list-group-item {
    background-color: transparent !important;
    color: #F8FAFC !important;
    border-color: #1E293B !important;
}

[data-theme="dark"] .list-group-item strong {
    color: #FFFFFF !important;
}

[data-theme="dark"] .list-group-item p,
[data-theme="dark"] .list-group-item .text-muted {
    color: #CBD5E1 !important;
}

/* KPI Cards Superiores */
[data-theme="dark"] .kpi-card {
    background-color: var(--card-color) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .kpi-title {
    color: #94A3B8 !important;
}

[data-theme="dark"] .kpi-value {
    color: #FFFFFF !important;
}

[data-theme="dark"] .kpi-meta {
    color: #CBD5E1 !important;
    border-top-color: #1E293B !important;
}

[data-theme="dark"] .kpi-card.traffic .kpi-icon { background-color: rgba(2, 132, 199, 0.25) !important; color: #38BDF8 !important; }
[data-theme="dark"] .kpi-card.rain .kpi-icon { background-color: rgba(37, 99, 235, 0.25) !important; color: #60A5FA !important; }
[data-theme="dark"] .kpi-card.flood .kpi-icon { background-color: rgba(234, 88, 12, 0.25) !important; color: #FB923C !important; }
[data-theme="dark"] .kpi-card.occurrences .kpi-icon { background-color: rgba(239, 68, 68, 0.25) !important; color: #F87171 !important; }
[data-theme="dark"] .kpi-card.news .kpi-icon { background-color: rgba(5, 150, 105, 0.25) !important; color: #34D399 !important; }

/* Notícias */
[data-theme="dark"] .news-card {
    background-color: var(--card-color) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .news-title a,
[data-theme="dark"] .news-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .news-summary {
    color: #CBD5E1 !important;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: #FFFFFF !important;
}

/* Header & Barra Superior */
[data-theme="dark"] .main-header {
    background-color: var(--header-bg) !important;
    border-bottom-color: var(--header-border) !important;
}

[data-theme="dark"] .nav-link {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--primary-accent) !important;
    background-color: rgba(56, 189, 248, 0.12) !important;
}

[data-theme="dark"] .global-search-input {
    background-color: #0F172A !important;
    border-color: #334155 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .global-search-input::placeholder {
    color: #94A3B8 !important;
}

[data-theme="dark"] .global-search-input:focus {
    border-color: var(--primary-accent) !important;
    background-color: #16243F !important;
}

[data-theme="dark"] .search-results-dropdown {
    background-color: #111D33 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .search-result-item {
    border-bottom-color: #1E293B !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .search-result-item:hover {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #FFFFFF !important;
}

/* Map Section Card */
[data-theme="dark"] .map-section-card {
    background-color: var(--card-color) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .map-legend .legend-item {
    color: #CBD5E1 !important;
}

/* Tabelas */
[data-theme="dark"] .table {
    color: #F8FAFC !important;
    border-color: #1E293B !important;
}

[data-theme="dark"] .table-light {
    background-color: #16243F !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .table-light th {
    background-color: #16243F !important;
    color: #FFFFFF !important;
    border-color: #1E293B !important;
}

[data-theme="dark"] .table td {
    border-color: #1E293B !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .table strong {
    color: #FFFFFF !important;
}

[data-theme="dark"] .table-hover>tbody>tr:hover>* {
    background-color: rgba(56, 189, 248, 0.08) !important;
    color: #FFFFFF !important;
}

/* Badges e Botões no Modo Escuro */
[data-theme="dark"] .badge.bg-light {
    background-color: #16243F !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #CBD5E1 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #1E293B !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-outline-dark {
    color: #CBD5E1 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .btn-outline-dark:hover {
    background-color: #1E293B !important;
    color: #FFFFFF !important;
}

/* Modais e Formulários */
[data-theme="dark"] .modal-content {
    background-color: #111D33 !important;
    border-color: #1E293B !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #0F172A !important;
    border-color: #334155 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--primary-accent) !important;
    background-color: #16243F !important;
    color: #FFFFFF !important;
}

/* Mapa Leaflet - Tiles no Modo Escuro */
[data-theme="dark"] .leaflet-tile {
    filter: brightness(0.65) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.75);
}

[data-theme="dark"] .leaflet-container {
    background-color: #0B1320;
}

[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
    background-color: #111D33;
    color: #F8FAFC;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* Barra Inferior Mobile */
[data-theme="dark"] .mobile-bottom-nav {
    background-color: #0B1320 !important;
    border-top-color: #1E293B !important;
}

[data-theme="dark"] .bottom-nav-item {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .bottom-nav-item.active,
[data-theme="dark"] .bottom-nav-item:hover {
    color: var(--primary-accent) !important;
}