/* 3D Cost Pro - Definitive Premium Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #000000;
    --primary-gradient: linear-gradient(135deg, #000000 0%, #333333 100%);
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --bg-main: #f1f5f9;
    --card-bg: #ffffff;
    --text-black: #000000;
    --text-muted: #4b5563;
    --border-color: #e2e8f0;
}

#dcc-pro-app {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg-main);
    color: var(--text-black);
}

/* Force all labels and text to be Black (exceto o painel de resultados com fundo escuro) */
#dcc-pro-app h1:not(.bg-slate-900 *), 
#dcc-pro-app h2:not(.bg-slate-900 *), 
#dcc-pro-app h3:not(.bg-slate-900 *), 
#dcc-pro-app h4:not(.bg-slate-900 *), 
#dcc-pro-app label:not(.bg-slate-900 *), 
#dcc-pro-app p:not(.bg-slate-900 *), 
#dcc-pro-app span:not(.bg-slate-900 *), 
#dcc-pro-app input:not(.bg-slate-900 *), 
#dcc-pro-app select:not(.bg-slate-900 *) {
    color: var(--text-black) !important;
}

/* Premium Gradients */
.bg-premium-gradient {
    background: var(--primary-gradient);
    color: white !important;
}

.bg-accent-gradient {
    background: var(--accent-gradient);
    color: white !important;
}

/* Tab Styles - Black & White Theme */
.dcc-tab-btn {
    background-color: transparent;
    color: var(--text-muted) !important;
    transition: all 0.4s ease;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dcc-tab-btn.active {
    background: var(--text-black);
    color: white !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}

/* Card Styling */
.premium-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: var(--text-black);
}

/* Unit Labels Inside Inputs */
.input-wrapper {
    position: relative;
}

.input-unit {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    font-size: 0.7rem;
    color: #94a3b8 !important;
    background: #f8fafc;
    padding: 2px 8px;
    border-radius: 6px;
    pointer-events: none;
    border: 1px solid #e2e8f0;
}

/* Custom Buttons */
.btn-black {
    background: var(--text-black);
    color: white !important;
    font-weight: 800;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.btn-black:hover {
    background: #333333;
    transform: scale(1.02);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

/* Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Community Banner - Full Instagram Gradient (Clickable) */
#dcc-pro-app .community-banner {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border-radius: 30px;
    padding: 2.5rem;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 15px 35px -10px rgba(220, 39, 67, 0.4) !important;
    text-decoration: none !important;
    display: flex !important;
    cursor: pointer !important;
}

#dcc-pro-app .community-banner h2 {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    margin: 0 !important;
}

#dcc-pro-app .community-banner p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 0 0 !important;
}

/* Badge "Seguir" dentro do banner */
#dcc-pro-app .community-banner .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

#dcc-pro-app .community-banner:hover .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateX(5px) !important;
}

/* Ajuste nas Abas de Navegação */
#dcc-pro-app .dcc-tab-btn {
    color: #4b5563 !important; /* Cinza escuro para abas inativas */
    background-color: rgba(0,0,0,0.05) !important;
    border: 1px solid transparent !important;
}

#dcc-pro-app .dcc-tab-btn.active {
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2) !important;
}

/* Ajuste nos botões de cabeçalho (PDF, Exportar, Importar) */
#dcc-pro-app header button#dcc-btn-export-pdf {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

#dcc-pro-app header button#dcc-btn-export-data {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

#dcc-pro-app header button#dcc-btn-import-data {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

#dcc-pro-app header button:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   ELEMENTOR COMPATIBILITY FIX
   O Elementor e muitos temas sobrescrevem a cor do texto
   herdada pelo Tailwind. As regras abaixo garantem que o
   painel de resultados (fundo escuro) exiba as cores corretas.
   ============================================================ */

/* Painel de resultados - Forçando fundo Azul Marinho Premium e texto branco */
#dcc-pro-app .bg-slate-900 {
    background-color: #0f172a !important; /* Azul Marinho Profundo */
    background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#dcc-pro-app .bg-slate-900 *:not(input):not(button) {
    color: #ffffff !important;
}

/* OTIMIZAÇÃO MOBILE COMPLETA */
@media (max-width: 768px) {
    /* Ajuste do container principal */
    #dcc-pro-app {
        padding: 1rem !important;
        border-radius: 1.5rem !important;
    }

    /* Cabeçalho e Título */
    #dcc-pro-app h1 {
        font-size: 2.2rem !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    #dcc-pro-app h1 span.p-4 {
        padding: 0.75rem !important;
        font-size: 1.5rem !important;
    }

    /* Botões de Exportação no Topo */
    #dcc-pro-app header .flex.items-center.gap-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    #dcc-pro-app header button {
        padding: 0.75rem !important;
        font-size: 0.8rem !important;
        justify-content: center !important;
    }

    /* Abas de Navegação */
    #dcc-pro-app nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
    }
    
    #dcc-pro-app .dcc-tab-btn {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Inputs e Cards */
    #dcc-pro-app .bg-white.p-10 {
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
    }
    
    #dcc-pro-app .grid-cols-2, 
    #dcc-pro-app .grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Painel de Resultados */
    #dcc-pro-app .bg-slate-900 {
        position: relative !important;
        top: 0 !important;
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
        margin-top: 2rem !important;
    }
    
    #dcc-pro-app #result-total {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    #dcc-pro-app #result-suggested {
        font-size: 2rem !important;
    }

    /* Modal Mobile */
    #dcc-modal-container {
        width: 95% !important;
        border-radius: 2rem !important;
    }
    
    #dcc-modal-container .p-10 {
        padding: 1.5rem !important;
    }
    
    #dcc-modal-container .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Banner de Comunidade */
    #dcc-pro-app .community-banner {
        padding: 1.5rem !important;
        text-align: center !important;
    }
    
    #dcc-pro-app .community-banner a {
        width: 100% !important;
    }
}

/* Valor total do custo */
#dcc-pro-app #result-total {
    color: #ffffff !important;
}

/* Itens de custo individual (material, energia, mão de obra, depreciação) */
#dcc-pro-app #res-material,
#dcc-pro-app #res-energy,
#dcc-pro-app #res-labor,
#dcc-pro-app #res-wear {
    color: #ffffff !important;
}

/* Labels dos itens de custo (texto slate-400) */
#dcc-pro-app .bg-slate-900 span.text-slate-400 {
    color: #94a3b8 !important;
}

/* Preço sugerido de venda - verde esmeralda */
#dcc-pro-app #result-suggested {
    color: #34d399 !important;
}

/* Label "Margem de Lucro" e "Preço Sugerido" - roxo/índigo */
#dcc-pro-app .bg-slate-900 .text-indigo-400 {
    color: #818cf8 !important;
}

/* Input de margem de lucro no fundo escuro */
#dcc-pro-app #calc-margin {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Botão Limpar Tudo - texto cinza */
#dcc-pro-app #btn-clear-calc {
    color: #94a3b8 !important;
}

/* Botão Salvar no Histórico - texto branco */
#dcc-pro-app #btn-save-history {
    color: #ffffff !important;
}

/* Porcentagem ao lado do input de margem */
#dcc-pro-app .bg-slate-900 .text-indigo-400.font-black {
    color: #818cf8 !important;
}

/* Texto "Margem de Lucro" */
#dcc-pro-app .bg-slate-900 .text-slate-300 {
    color: #cbd5e1 !important;
}

/* Modal Fixes */
#dcc-modal-overlay {
    z-index: 99999 !important;
}

#dcc-modal-container {
    background: #ffffff !important;
    color: #000000 !important;
}

#dcc-modal-container h3 {
    color: #000000 !important;
}

#dcc-modal-container label {
    color: #4b5563 !important;
}

#dcc-modal-container input {
    color: #000000 !important;
    background-color: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
}

#dcc-modal-container input:focus {
    border-color: #000000 !important;
}

#dcc-modal-container .btn-black {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Material Row Improvements */
.material-row {
    background: white;
    border: 2px solid #f1f5f9;
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.material-row:hover {
    border-color: var(--text-black);
}