.nav-link { display: flex; align-items: center; height: 50px; padding: 10px; transition: padding 0.3s, justify-content 0.3s, width 0.3s; } .sidebar-text { margin-left: 10px; transition: margin 0.3s, opacity 0.3s; } .collapsed .sidebar-text { display: none; } .nav-link.active { background-color: #28a745; color: white !important; } .nav-link:hover { background-color: rgba(54,249,56,0.1); color: #36F938; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #036404; color: white !important; } .nav-pills .nav-link { background-color: transparent; color: #36F938; } .nav-link:hover { background-color: rgba(54,249,56,0.1); color: #36F938; } /* Bottom nav Android - Outros dropdown toggle */ #dropdown-outros-android > a.nav-link.dropdown-toggle { color: #36F938 !important; display: flex !important; flex-direction: column !important; align-items: center !important; height: 50px !important; padding: 4px 8px !important; font-size: inherit !important; } #dropdown-outros-android > a.nav-link.dropdown-toggle::after { display: none !important; } /* Deixa o toggle do DropdownMenu com aparência de ativo */ .nav-item.active > .nav-link, .nav-item.active > .nav-link.dropdown-toggle, .nav-pills .nav-item.active > a.nav-link, .dropend.nav-item.active > .nav-link, .dropend.nav-item.active > .nav-link.dropdown-toggle, .dropend.nav-item.active > button, .dropend.nav-item.active > button.dropdown-toggle, .dropend.nav-item.active > a, .dropend.nav-item.active > a.dropdown-toggle, #dropdown-abastecimentos.active > a, #dropdown-servicos.active > a { background-color: #036404 !important; color: white !important; border-radius: var(--bs-border-radius); } .toggle-circle { position: absolute; right: -28px; top: 38px; z-index: 1000; } /* Estilo para fixar o cabeçalho */ .table-responsive thead th { position: sticky; top: 0; z-index: 2; } .text-card-value { font-size: 20pt; } .text-card-title { font-size: 12pt; } @media (max-width: 425px) { .responsive-img { height: 150px; } } @media (max-width: 375px) { .responsive-img { height: 130px; } #columns-select { width: 150px; } .text-card-value { font-size: 18pt; } } @media (max-width: 320px) { .responsive-img { height: 110px; } #columns-select { width: 140px; } } /* ============================================================ Tema claro / escuro A sidebar permanece escura nos dois temas (identidade da marca); apenas o conteúdo principal e os cartões clareiam no tema claro. O esquema é aplicado via atributo data-mantine-color-scheme no . ============================================================ */ /* Superfície do conteúdo principal (antes bg='dark.6') */ .cc-surface { background-color: var(--mantine-color-dark-6) !important; } html[data-mantine-color-scheme="light"] .cc-surface { background-color: var(--mantine-color-gray-0) !important; } /* Cartões de métricas (antes bg='dark.5') */ .cc-card { background-color: var(--mantine-color-dark-5) !important; } html[data-mantine-color-scheme="light"] .cc-card { background-color: #ffffff !important; } /* Botão de tema: alterna ícone sol/lua conforme o esquema atual. */ .cc-icon-sun, .cc-icon-moon { display: none; vertical-align: middle; } html[data-mantine-color-scheme="dark"] .cc-icon-sun { display: inline-block; } html[data-mantine-color-scheme="light"] .cc-icon-moon { display: inline-block; } /* ============================================================ Spinner de transição entre telas (dcc.Loading) — fixo no centro da viewport (antes ancorava no topo do conteúdo e cortava) ============================================================ */ .cc-page-spinner { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 6000; pointer-events: none; } .cc-page-spinner::after { content: ""; width: 50px; height: 50px; border-radius: 50%; border: 4px solid rgba(7, 225, 9, 0.25); border-top-color: #07E109; animation: cc-spin 0.8s linear infinite; } @keyframes cc-spin { to { transform: rotate(360deg); } } /* ============================================================ Sidebar / navbar adaptável ao tema (clareia no tema claro) ============================================================ */ .cc-sidebar { --cc-sidebar-border: #4A535C; background-color: var(--mantine-color-dark-6) !important; color: white; } html[data-mantine-color-scheme="light"] .cc-sidebar { --cc-sidebar-border: var(--mantine-color-gray-3); background-color: #ffffff !important; color: var(--mantine-color-dark-7); } #sidebar.cc-sidebar { border-right: 1.5px solid var(--cc-sidebar-border); } #sidebar-android.cc-sidebar { border-top: 1.5px solid var(--cc-sidebar-border); } /* Logo verde da sidebar: escurece no tema claro p/ contraste sobre branco */ html[data-mantine-color-scheme="light"] #sidebar-logo { filter: brightness(0.5) saturate(1.25); } /* Links da nav legíveis no tema claro (verde escuro sobre branco) */ html[data-mantine-color-scheme="light"] .nav-pills .nav-link { color: #036404; } html[data-mantine-color-scheme="light"] .nav-link:hover { background-color: rgba(3, 100, 4, 0.08); color: #024503; } /* Hover em item JÁ selecionado (ativo): mantém o destaque escuro em vez de clarear. Vale para os dois temas (o item ativo é verde escuro em ambos). */ .nav-pills .nav-link.active:hover, .nav-link.active:hover, .nav-item.active > .nav-link:hover, .nav-item.active > .nav-link.dropdown-toggle:hover, .dropend.nav-item.active > a:hover, .dropend.nav-item.active > a.dropdown-toggle:hover, .dropend.nav-item.active > button:hover { background-color: #024503 !important; color: white !important; } /* ============================================================ Login: painel e overlay do hero adaptáveis ao tema ============================================================ */ .cc-login-card { background-color: rgba(40, 40, 40, 0.55) !important; border: 0 !important; } .cc-login-header { background-color: rgba(20, 20, 20, 0.45) !important; border: 0 !important; } html[data-mantine-color-scheme="light"] .cc-login-card { background-color: rgba(255, 255, 255, 0.92) !important; } html[data-mantine-color-scheme="light"] .cc-login-header { background-color: rgba(255, 255, 255, 0.75) !important; } /* Overlay verde do hero (login / boas-vindas) mais leve no tema claro */ html[data-mantine-color-scheme="light"] .cc-hero-overlay { background-color: rgba(3, 100, 4, 0.45) !important; }