/* assets/style.css */ /* ================================================================ 1. ESTRUTURA DA SIDEBAR ================================================================ */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 18rem; padding: 2rem 1rem; background-color: #1e293b; border-right: 1px solid #334155; transition: all 0.4s ease-in-out; z-index: 1050; overflow-x: hidden; overflow-y: auto; white-space: nowrap; } .sidebar-collapsed { width: 0rem !important; padding: 2rem 0rem !important; border: none !important; overflow: hidden !important; } .sidebar-collapsed * { opacity: 0; pointer-events: none; transition: opacity 0.1s; } /* ================================================================ 2. CONTEÚDO PRINCIPAL ================================================================ */ .content { margin-left: 18rem; padding: 2rem; background-color: #0f172a; min-height: 100vh; transition: all 0.4s ease-in-out; } .content-expanded { margin-left: 0rem !important; } /* ================================================================ 3. DROPDOWNS — Dash 2.17+ (novo componente nativo) ================================================================ */ /* --- 3A. Botão trigger --- */ button.dash-dropdown { background-color: #334155 !important; border: 1px solid #475569 !important; color: #f8fafc !important; min-height: 38px !important; border-radius: 4px !important; width: 100% !important; } button.dash-dropdown:hover { border-color: #0ea5e9 !important; } button.dash-dropdown:focus, button.dash-dropdown[data-state="open"] { border-color: #0ea5e9 !important; box-shadow: 0 0 0 1px #0ea5e9 !important; outline: none !important; } .dash-dropdown-placeholder { color: #94a3b8 !important; } .dash-dropdown-value, span.dash-dropdown-value { color: #f8fafc !important; } svg.dash-dropdown-trigger-icon { fill: #94a3b8 !important; } .dash-dropdown-grid-container { color: #94a3b8 !important; } .dash-dropdown-grid-container svg { fill: #94a3b8 !important; } /* --- 3B. POPUP / POPOVER (a parte que estava branca) --- */ /* O popup usa Radix UI popover — é renderizado via portal no . Seletores por [data-radix-popper-content-wrapper], [role="listbox"], e por classe parcial para máxima cobertura. */ /* Wrapper do popover (Radix) */ div[data-radix-popper-content-wrapper] { z-index: 9999 !important; } /* Container interno do popup */ div[data-radix-popper-content-wrapper] > div, div[class*="dash-dropdown"][role="listbox"], div[aria-controls][data-state="open"] ~ div, .dash-dropdown-wrapper > div:not(:first-child) { background-color: #1e293b !important; border: 1px solid #475569 !important; border-radius: 6px !important; } /* NUCLEAR: qualquer div dentro do popover do Radix */ div[data-radix-popper-content-wrapper] div { background-color: #1e293b !important; color: #f8fafc !important; } /* Campo de busca (Search) */ div[data-radix-popper-content-wrapper] input, div[data-radix-popper-content-wrapper] input[type="text"], div[data-radix-popper-content-wrapper] input[type="search"] { background-color: #334155 !important; color: #f8fafc !important; border: 1px solid #475569 !important; border-radius: 4px !important; padding: 6px 10px !important; } div[data-radix-popper-content-wrapper] input::placeholder { color: #94a3b8 !important; } /* Ícone de busca (lupa) */ div[data-radix-popper-content-wrapper] svg { fill: #94a3b8 !important; color: #94a3b8 !important; } /* "Select All" / "Deselect All" */ div[data-radix-popper-content-wrapper] span { color: #94a3b8 !important; } /* Opções (cada item da lista) */ div[data-radix-popper-content-wrapper] div[role="option"], div[data-radix-popper-content-wrapper] label { background-color: #1e293b !important; color: #f8fafc !important; padding: 8px 12px !important; } div[data-radix-popper-content-wrapper] div[role="option"]:hover, div[data-radix-popper-content-wrapper] div[role="option"][data-highlighted] { background-color: #475569 !important; } div[data-radix-popper-content-wrapper] div[role="option"][aria-selected="true"] { background-color: #0ea5e9 !important; color: white !important; } /* Checkboxes */ div[data-radix-popper-content-wrapper] input[type="checkbox"] { accent-color: #0ea5e9 !important; } /* Texto dos nomes nas opções */ div[data-radix-popper-content-wrapper] div[role="option"] span, div[data-radix-popper-content-wrapper] div[role="option"] label { color: #f8fafc !important; } /* Separador */ div[data-radix-popper-content-wrapper] hr, div[data-radix-popper-content-wrapper] [class*="separator"] { border-color: #334155 !important; } /* Tag de contagem (quando multi-select mostra "3 selected") */ .dash-dropdown-value-count { background-color: #0ea5e9 !important; color: white !important; border-radius: 4px !important; padding: 1px 6px !important; font-size: 0.8rem !important; } /* Clear button */ button.dash-dropdown-clear-button { color: #94a3b8 !important; background: transparent !important; border: none !important; } button.dash-dropdown-clear-button:hover { color: #ef4444 !important; } /* --- 3C. Fallback React-Select v1 (Dash < 2.17) --- */ .Select-control { background-color: #334155 !important; border: 1px solid #475569 !important; color: #f8fafc !important; } .Select-value-label, .Select-placeholder { color: #f8fafc !important; } .Select-input input { color: #f8fafc !important; } .Select-menu-outer { background-color: #1e293b !important; border: 1px solid #475569 !important; z-index: 9999 !important; } .Select-option { background-color: #1e293b !important; color: #f8fafc !important; } .Select-option:hover, .Select-option.is-focused { background-color: #475569 !important; } .Select-clear { color: #ef4444 !important; } .VirtualisedSelectOptionOverlay { color: #f8fafc !important; } .VirtualisedSelectFocusedOption { background-color: #475569 !important; } /* ================================================================ 4. DATEPICKER — Dash 2.17+ (Radix UI) Classes reais: dash-datepicker-input-wrapper, dash-datepicker-input, dash-datepicker-range-arrow, dash-datepicker-caret-icon O calendário popup usa data-radix-popper-content-wrapper (portal no body) ================================================================ */ /* Input wrapper e inputs */ .dash-datepicker-input-wrapper, .dash-datepicker-input-wrapper input, .dash-datepicker-input-wrapper button { background-color: #334155 !important; color: #f8fafc !important; border-color: #475569 !important; } /* O próprio input de data */ input.dash-datepicker-input, .dash-datepicker-input { background-color: #334155 !important; color: #f8fafc !important; border: none !important; } /* Seta entre datas e ícone caret */ svg.dash-datepicker-range-arrow { fill: #94a3b8 !important; } svg.dash-datepicker-caret-icon { fill: #94a3b8 !important; } /* Wrapper inteiro do filtro */ #filtro-data-wrapper, div[id*="filtro-data"] { background-color: #334155 !important; border: 1px solid #475569 !important; border-radius: 4px !important; } /* Calendário popup (Radix portal no body) — Já estilizado na seção 3B com div[data-radix-popper-content-wrapper], mas reforçamos para o calendário especificamente: */ div[data-radix-popper-content-wrapper] table { background-color: #1e293b !important; color: #f8fafc !important; } div[data-radix-popper-content-wrapper] table td, div[data-radix-popper-content-wrapper] table th { color: #f8fafc !important; } div[data-radix-popper-content-wrapper] table td button { color: #f8fafc !important; background-color: #1e293b !important; } div[data-radix-popper-content-wrapper] table td button:hover { background-color: #475569 !important; } /* Mês/Ano no header do calendário */ div[data-radix-popper-content-wrapper] select { background-color: #334155 !important; color: #f8fafc !important; border-color: #475569 !important; } /* Setas de navegação (← →) do calendário */ div[data-radix-popper-content-wrapper] button[class*="arrow"], div[data-radix-popper-content-wrapper] button[class*="nav"] { color: #94a3b8 !important; background-color: transparent !important; } div[data-radix-popper-content-wrapper] button[class*="arrow"] svg, div[data-radix-popper-content-wrapper] button[class*="nav"] svg { fill: #94a3b8 !important; } /* Dia selecionado */ div[data-radix-popper-content-wrapper] table td button[data-selected], div[data-radix-popper-content-wrapper] table td button[aria-selected="true"] { background-color: #0ea5e9 !important; color: white !important; } /* Range entre datas selecionadas */ div[data-radix-popper-content-wrapper] table td[class*="range"], div[data-radix-popper-content-wrapper] table td button[class*="range"] { background-color: rgba(14, 165, 233, 0.3) !important; color: white !important; } /* Dias desabilitados */ div[data-radix-popper-content-wrapper] table td button:disabled { color: #334155 !important; } /* Fallback: classes legadas do Dash antigo (mantidas por segurança) */ .DateRangePickerInput, .DateRangePickerInput__withBorder { background-color: #334155 !important; border: 1px solid #475569 !important; border-radius: 4px !important; } .DateInput, .DateInput__small { background-color: #334155 !important; } .DateInput_input, .DateInput_input__focused { background-color: #334155 !important; color: #f8fafc !important; border: none !important; } .DateRangePickerInput_arrow_svg { fill: #94a3b8 !important; } .DayPicker, .CalendarMonth, .CalendarMonthGrid { background-color: #1e293b !important; } .CalendarMonth_caption strong { color: #f8fafc !important; } .CalendarDay__default { background-color: #1e293b !important; color: #f8fafc !important; border: 1px solid #334155 !important; } .CalendarDay__selected, .CalendarDay__selected:hover { background-color: #0ea5e9 !important; color: white !important; } .CalendarDay__selected_span { background-color: rgba(14, 165, 233, 0.3) !important; color: white !important; } .DayPickerNavigation_button { background-color: #0f172a !important; border: 1px solid #334155 !important; } .DayPickerNavigation_svg__horizontal { fill: #94a3b8 !important; } /* ================================================================ 5. ÍCONES KPI ================================================================ */ .kpi-icon-container { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.08); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); } .kpi-icon-container i { display: inline-block !important; } /* ================================================================ 6. FILTROS DA TABELA (DataTable) ================================================================ */ .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th input:not([type=radio]):not([type=checkbox]) { color: #f8fafc !important; background-color: #1e293b !important; border: 1px solid #475569 !important; border-radius: 4px !important; font-family: inherit !important; font-size: 0.85rem !important; padding: 4px 8px !important; min-height: 30px !important; } .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th input::placeholder { color: #94a3b8 !important; opacity: 0.8 !important; } .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .dash-filter--case--sensitive { color: #38bdf8 !important; } /* Page size dropdown */ #page-size-selector button.dash-dropdown { background-color: #1e293b !important; border-color: #334155 !important; min-height: 30px !important; } #page-size-selector .Select-control { background-color: #1e293b !important; border-color: #334155 !important; } #page-size-selector .Select-value-label { color: #f8fafc !important; } /* ================================================================ 7. SCROLLBAR ================================================================ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #475569; }