.nav-link {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 10px;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-text {
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 200px;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Recolhido: texto desvanece e encolhe junto com o painel (em vez de sumir seco) */
.collapsed .sidebar-text {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
}

/* Cross-fade do logo ao expandir/recolher: lockup completo (.cc-logo-full, expandido) ↔
   símbolo (.cc-logo-mini, recolhido), sobrepostos, alternando opacidade conforme a sidebar
   fica .collapsed. object-fit:contain escala cada um p/ a largura atual (sem estourar no 80px). */
.cc-logo-stack {
    position: relative;
    width: 100%;
    height: 40px;
}

.cc-logo-full,
.cc-logo-mini {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-logo-mini {
    opacity: 0;
}

.collapsed .cc-logo-full {
    opacity: 0;
}

.collapsed .cc-logo-mini {
    opacity: 1;
}

.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;
}

/* "..." (Android) acompanha o tema: verde escuro no tema claro */
html[data-mantine-color-scheme="light"] #dropdown-outros-android > a.nav-link.dropdown-toggle {
    color: #036404 !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;
    /* Título sempre em 1 linha (não quebrar). Os breakpoints do grid garantem cards
       largos o bastante p/ o título caber, então a altura dos cards fica igual. */
    white-space: nowrap;
    text-align: center;
}

/* Grid de gráficos: colunas PARES conforme a largura da JANELA (media query).
   Cada tela usa a classe da sua contagem (cc-grid-6/4/2). Base = 1 coluna e sobe;
   em monitor largo cabe tudo em 1 linha. Os breakpoints mantêm os cards largos o
   bastante p/ o título caber (reforçado por white-space: nowrap no .text-card-title).
   Sobrepõe o dmc.Grid; os spans das views ficam como fallback. */
.cc-graficos-grid .mantine-Grid-inner {
    display: grid;
    gap: 16px;
    margin: 0;
    width: 100%;
    grid-template-columns: 1fr;
}

.cc-graficos-grid .mantine-Grid-col {
    max-width: none;
    padding: 0;
    display: flex;
}

.cc-graficos-grid .mantine-Grid-col > * {
    width: 100%;
}

@media (min-width: 768px) {
    .cc-grid-2 .mantine-Grid-inner,
    .cc-grid-4 .mantine-Grid-inner,
    .cc-grid-6 .mantine-Grid-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .cc-grid-6 .mantine-Grid-inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1300px) {
    .cc-grid-4 .mantine-Grid-inner {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 2000px) {
    .cc-grid-6 .mantine-Grid-inner {
        grid-template-columns: repeat(6, 1fr);
    }
}

@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 <html>.
   ============================================================ */

/* 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;
}

/* Donut: os rótulos das fatias não podem ser cortados pelo limite do SVG.
   O DMC reserva só ~40px de margem; valores largos (Lucro) cortam de lado e os
   de cima cortam no topo. Liberamos o overflow p/ os rótulos usarem o espaço do card. */
.cc-donut,
.cc-donut .recharts-responsive-container,
.cc-donut .recharts-wrapper,
.cc-donut .recharts-surface {
    overflow: visible !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"] .cc-logo-full,
html[data-mantine-color-scheme="light"] .cc-logo-mini {
    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;
}

/* Dropdown de Select/MultiSelect acima do modal de filtros (zIndex 2000):
   senão as opções abrem ATRÁS do modal. */
.mantine-Combobox-dropdown,
.mantine-Select-dropdown,
.mantine-MultiSelect-dropdown,
.mantine-Popover-dropdown,
.mantine-DatePickerInput-dropdown {
    z-index: 3000 !important;
}

/* App: seletor de mês full-width — o picker (2º filho, entre as setas ◄ ►)
   cresce pra ocupar a largura toda. */
.cc-mes-cheio {
    width: 100%;
}

.cc-mes-cheio > :nth-child(2),
.cc-mes-cheio > :nth-child(3) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* App: centraliza o texto do mês dentro do seletor full-width */
.cc-mes-cheio .mantine-Input-input {
    text-align: center !important;
}

/* Primeira letra do mês em maiúscula (App e Web; pt-BR formata minúsculo: "junho" -> "Junho") */
.cc-mes-picker .mantine-Input-input::first-letter {
    text-transform: uppercase;
}

/* Dashboard (home): seletor de mês full-width no App, entre as setas ◄ ► */
.cc-dash-mes-nav > *:nth-child(2),
.cc-dash-mes-nav > *:nth-child(3) { flex: 1 1 0 !important; }

/* Dashboard (home): picker de intervalo full-width no App */
.cc-dash-intervalo > * { flex: 1 1 0 !important; }

/* Dashboard (home): texto centralizado nos seletores full-width do App (mês e intervalo) */
.cc-dash-mes-nav .mantine-Input-input,
.cc-dash-intervalo .mantine-Input-input { text-align: center; }

/* Tabela das listagens acompanha a paleta dos cards/gráficos (não o fundo escuro do frame) */
html[data-mantine-color-scheme="dark"] .table-responsive .table {
    --bs-table-bg: var(--mantine-color-dark-5);
    --bs-table-hover-bg: var(--mantine-color-dark-4);
}

html[data-mantine-color-scheme="light"] .table-responsive .table {
    --bs-table-bg: #ffffff;
}

/* Título de cadastrar/editar (h1/order=1) menor no celular — no desktop fica como está */
@media (max-width: 768px) {
    .cc-cabecalho-titulo {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 375px) {
    .cc-cabecalho-titulo {
        font-size: 1.3rem !important;
    }
}

/* ============================================================
   Mobile: telas de cadastro
   ============================================================ */

/* Sem rolagem lateral no celular. O grid dos forms usa gutter "xl" (margem
   negativa ~16px/lado), maior que o padding do #main-content no app (px=8),
   gerando ~8px de overflow de cada lado; como o conteúdo rola em Y, o X vira
   "auto" (regra do CSS) e surge a barra horizontal. No desktop o padding já
   compensa, e tabelas largas rolam dentro do .table-responsive — então cortar
   o overflow-x aqui é seguro. */
@media (max-width: 768px) {
    #main-content {
        overflow-x: hidden;
    }
}

/* Modal de quick-add (cadastrar a partir de um select, dentro de uma tela de
   cadastro "pai") em TELA CHEIA no celular — evita o "salto" de layout em telas
   pequenas. No desktop continua centralizado. */
@media (max-width: 768px) {
    .cc-qa-modal .mantine-Modal-inner {
        padding: 0 !important;
    }

    .cc-qa-modal .mantine-Modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .cc-qa-modal .mantine-Modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
    }
}