/* --- ESTILOS ORIGINAIS --- */
.rc-slider-track { background-color: #FFCC00 !important; }
.rc-slider-handle { border: solid 2px #FFCC00 !important; background-color: #222 !important; margin-top: -4px !important; }
.rc-slider-rail { background-color: #DDDDDD !important; }
.rc-slider-tooltip-inner { font-size: 10px !important; padding: 2px 6px !important; background-color: #222 !important; color: #fff !important; box-shadow: none !important; min-width: 20px !important; height: auto !important;}
.rc-slider-tooltip-arrow { border-top-color: #222 !important; }

.house-smash-tooltip {
    border-radius: 12px !important;
    padding: 12px 14px !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
    font-family: Arial, sans-serif !important;
    background-color: white !important;
    color: #333 !important;
    font-size: 13px !important;
}

/* Estilizando a Barra de Rolagem (Scrollbar) do Painel Tático */
#painel-rolagem::-webkit-scrollbar { 
    width: 6px; 
}
#painel-rolagem::-webkit-scrollbar-track { 
    background: transparent; 
}
#painel-rolagem::-webkit-scrollbar-thumb { 
    background: #FFCC00; 
    border-radius: 10px; 
}
#painel-rolagem::-webkit-scrollbar-thumb:hover { 
    background: #e6b800; 
}

/* Matando o fundo branco e a setinha padrão do Leaflet */
.leaflet-tooltip { 
    background-color: transparent !important; 
    border: none !important; 
    box-shadow: none !important; 
    padding: 0 !important; 
}
.leaflet-tooltip-left::before, .leaflet-tooltip-right::before, .leaflet-tooltip-top::before, .leaflet-tooltip-bottom::before { 
    display: none !important; 
}

/* --- NOVAS ALTERAÇÕES: MONITOR OPERAÇÃO --- */

/* Força o nome do cliente a ficar em uma linha com reticências (...) se for muito grande */
.nome-cliente-card {
    display: inline-block;
    color: #4a5568;
    font-size: 0.85em !important;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px; /* Ajusta o limite antes de cortar o nome */
    vertical-align: middle;
}

/* Garante que o container do card não mude de tamanho se o conteúdo variar */
.card-kanban-item {
    min-height: 140px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease-in-out;
}

.card-kanban-item:hover {
    transform: translateY(-3px);
}

/* Ajuste para o Rodapé das Lojas não ficar colado na borda inferior */
#container-rodape-monitor {
    padding: 20px 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 30px;
    width: 100%;
}

/* ==============================================================================
   ESTILIZAÇÃO DOS FILTROS DE DATA NATIVOS (HTML5 / DASH BOOTSTRAP) - DARK THEME
   ============================================================================== */

/* 1. Alvo principal: Todos os inputs do tipo 'date' da sua aplicação */
input[type="date"],
.form-control[type="date"] {
    background-color: #25263C !important; /* Fundo escuro combinando com o painel */
    color: #FFFFFF !important;            /* Texto branco */
    border: 1px solid #444 !important;    /* Borda sutil */
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    
    /* 🌟 A MÁGICA: Essa linha avisa ao Chrome/Firefox para abrir o calendário em Dark Mode! */
    color-scheme: dark !important;        
}

/* 2. Efeito de Foco (quando você clica na caixinha) */
input[type="date"]:focus,
.form-control[type="date"]:focus {
    border-color: #F5AF19 !important; /* Destaque na cor da sua marca */
    box-shadow: 0 0 5px rgba(245, 175, 25, 0.5) !important;
    background-color: #25263C !important;
    color: #FFFFFF !important;
}

/* 3. Ajuste do Ícone do Calendário (Para aparecer no fundo escuro) */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8) sepia(1) hue-rotate(180deg) saturate(0); /* Deixa o ícone cinza/branco */
    cursor: pointer;
}