@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', 'Segoe UI', sans-serif; }

::-webkit-scrollbar { width: 5px; height: 5px; }

/* ═══════════════════════════════════════════════
   DARK MODE (padrão)
═══════════════════════════════════════════════ */
body, #app-root { background: #080D18; color: #E8EFF8; }
::-webkit-scrollbar-track { background: #080D18; }
::-webkit-scrollbar-thumb { background: #1C2C44; border-radius: 3px; }

.dash-dropdown-dark .Select-control {
    background: #0C1827 !important; border: 1px solid #1C2C44 !important;
    border-radius: 7px !important; box-shadow: none !important;
}
.dash-dropdown-dark .Select-value-label { color: #E8EFF8 !important; }
.dash-dropdown-dark .Select-placeholder { color: #5A7395 !important; }
.dash-dropdown-dark .Select-arrow { border-top-color: #5A7395 !important; }
.dash-dropdown-dark .Select-menu-outer {
    background: #0C1827 !important; border: 1px solid #1C2C44 !important;
    border-radius: 7px !important; z-index: 9999 !important;
}
.dash-dropdown-dark .Select-option { background: #0C1827 !important; color: #E8EFF8 !important; }
.dash-dropdown-dark .Select-option:hover { background: #1A2E48 !important; }
.dash-dropdown-dark .Select-option.is-selected { background: #1A3A58 !important; color: #00D4AA !important; }
.dash-dropdown-dark .Select-input input { color: #E8EFF8 !important; background: transparent !important; }

.DateInput_input { background: #0C1827 !important; color: #E8EFF8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; border: none !important; }
.DateRangePickerInput { background: #0C1827 !important; border: 1px solid #1C2C44 !important; border-radius: 7px !important; }
.DateRangePickerInput_arrow_svg { fill: #5A7395 !important; }
.CalendarDay__selected, .CalendarDay__selected:hover { background: #00D4AA !important; border-color: #00D4AA !important; color: #000 !important; }
.DayPicker, .CalendarMonthGrid, .CalendarMonth { background: #0C1827 !important; }
.CalendarDay { color: #E8EFF8 !important; background: transparent !important; }
.CalendarDay:hover { background: #1A2E48 !important; }
.DayPickerNavigation_button { border-color: #1C2C44 !important; }
.DayPickerNavigation_svg__horizontal { fill: #5A7395 !important; }
.CalendarMonth_caption { color: #E8EFF8 !important; }
.DayPicker_weekHeader_li small { color: #5A7395 !important; }

input::placeholder { color: #5A7395 !important; opacity: 1; }
input[type=email]:focus, input[type=text]:focus {
    border-color: #00D4AA !important; box-shadow: 0 0 0 3px rgba(0,212,170,0.15) !important;
}

/* ═══════════════════════════════════════════════
   LIGHT MODE — classe .light aplicada no #app-root
═══════════════════════════════════════════════ */
.light { background: #F0F4F8 !important; color: #1A202C !important; }
.light body { background: #F0F4F8 !important; color: #1A202C !important; }

/* Todos os divs e elementos filhos */
.light *, .light *::before, .light *::after { color: #1A202C; font-weight: 500; }

/* Fundo geral */
.light #page-dashboard,
.light #dash-main,
.light #page-dashboard > div { background: #F0F4F8 !important; }

/* Header */
.light #dash-header { background: #FFFFFF !important; border-bottom: 1px solid #CBD5E0 !important; }
.light #dash-header * { color: #1A202C !important; }

/* Cards */
.light #dash-main > div,
.light #dash-main > div > div {
    background: #FFFFFF !important;
    border-color: #CBD5E0 !important;
    color: #1A202C !important;
}

/* Dropdowns light */
.light .dash-dropdown-dark .Select-control { background: #F7FAFC !important; border-color: #CBD5E0 !important; }
.light .dash-dropdown-dark .Select-value-label { color: #1A202C !important; }
.light .dash-dropdown-dark .Select-placeholder { color: #718096 !important; }
.light .dash-dropdown-dark .Select-arrow { border-top-color: #718096 !important; }
.light .dash-dropdown-dark .Select-menu-outer { background: #FFFFFF !important; border-color: #CBD5E0 !important; }
.light .dash-dropdown-dark .Select-option { background: #FFFFFF !important; color: #1A202C !important; }
.light .dash-dropdown-dark .Select-option:hover { background: #EDF2F7 !important; }
.light .dash-dropdown-dark .Select-option.is-selected { background: #E6FFFA !important; color: #00A887 !important; }
.light .dash-dropdown-dark .Select-input input { color: #1A202C !important; }

/* Input busca */
.light #f-search { background: #F7FAFC !important; border-color: #CBD5E0 !important; color: #1A202C !important; }

/* DatePicker */
.light .DateInput_input { background: #F7FAFC !important; color: #1A202C !important; }
.light .DateRangePickerInput { background: #F7FAFC !important; border-color: #CBD5E0 !important; }
.light .DayPicker, .light .CalendarMonthGrid, .light .CalendarMonth { background: #FFFFFF !important; }
.light .CalendarDay { color: #1A202C !important; }
.light .CalendarDay:hover { background: #EDF2F7 !important; }
.light .CalendarMonth_caption { color: #1A202C !important; }
.light .DayPicker_weekHeader_li small { color: #718096 !important; }

/* Tabela */
.light .dash-table-container .dash-spreadsheet td { background: #FFFFFF !important; color: #1A202C !important; border-color: #CBD5E0 !important; font-weight: 600 !important; }
.light .dash-table-container .dash-spreadsheet th { background: #EDF2F7 !important; color: #2D3748 !important; border-color: #CBD5E0 !important; font-weight: 700 !important; }
.light .dash-table-container .dash-spreadsheet tr:nth-child(even) td { background: #F7FAFC !important; }
.light .dash-table-container .dash-spreadsheet-container { background: #FFFFFF !important; }
.light .dash-table-container .previous-page, .light .dash-table-container .next-page,
.light .dash-table-container .page-number { color: #1A202C !important; background: #FFFFFF !important; }

/* Scrollbar */
.light ::-webkit-scrollbar-track { background: #F0F4F8 !important; }
.light ::-webkit-scrollbar-thumb { background: #CBD5E0 !important; }

/* Botões */
.light #btn-limpar { border-color: #DC2626 !important; color: #DC2626 !important; background: transparent !important; }

/* Labels e textos menores */
.light label, .light .dash-label { color: #718096 !important; font-weight: 600 !important; }

/* KPIs — manter cores de acento mas texto escuro */
.light #k-total, .light #k-empresas, .light #k-terceiros,
.light #k-sitedif, .light #k-contratos { font-weight: 700 !important; }