/*
 * ========================================
 * Styles pour le Calculateur Fiscal (Thème Sombre)
 * Fichier: calculateur-style.css
 * ========================================
 */

/* === Variables CSS Globales === */
:root {
    --primary-color: #3B82F6;       /* Bleu (actif) */
    --secondary-color: #9CA3AF;     /* Gris (texte secondaire) */
    --background-color: #111827;    /* Fond principal (très foncé) */
    --card-background-color: #1F2937; /* Fond des cartes */
    --border-color: #374151;        /* Couleur des bordures */
    --text-color: #F9FAFB;          /* Texte principal (très clair) */
    --input-bg-color: #374151;      /* Fond des inputs */
    --input-text-color: #F9FAFB;    /* Texte des inputs */
    --hover-color: #4F46E5;         /* Violet-bleu (hover) */
    --red-color: #EF4444;           /* Rouge (négatif) */
    --green-color: #10B981;         /* Vert (positif) */
    --blue-highlight: #60A5FA;      /* Bleu (résultat net, titres) */
}

/* === Styles de Base === */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

hr {
    border-color: var(--border-color);
}

/* === En-tête === */
.header-bar {
    background-color: var(--card-background-color);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.header-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: var(--blue-highlight);
}

/* === Onglets === */
.tab-btn {
    padding: 0.75rem 1rem;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    font-weight: 500;
    color: var(--secondary-color);
    border-color: transparent;
    transition: all 0.2s ease-in-out;
}

.tab-btn:hover {
    color: var(--text-color);
}

.tab-btn.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
}

/* === Cartes (Conteneurs) === */
.card {
    background-color: var(--card-background-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.results-simulation-box {
    background-image: linear-gradient(145deg, var(--card-background-color) 0%, #1a2330 100%);
    border: 1px solid var(--border-color);
}

/* === Formulaires (Inputs, Selects) === */
.input-cell {
    background-color: var(--input-bg-color);
    border: 1px solid var(--border-color);
    color: var(--input-text-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    width: 100%; /* S'assurer qu'il prend toute la largeur */
}

.input-cell:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.input-cell::placeholder {
    color: var(--secondary-color);
}

/* Blocs de Checkbox */
.p-3.bg-input-bg-color {
    background-color: var(--background-color); /* Un peu plus foncé que la carte */
}

/* === Boutons === */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
}
.btn-primary:hover {
    background-color: var(--hover-color);
}

.btn-secondary {
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
}
.btn-secondary:hover {
    background-color: var(--border-color);
}

/* === Texte et Résultats === */
.text-primary-color { color: var(--primary-color); }
.text-secondary-color { color: var(--secondary-color); }
.text-text-color { color: var(--text-color); }
.text-blue-highlight { color: var(--blue-highlight); }
.text-red-color { color: var(--red-color); }
.text-green-color { color: var(--green-color); }

.currency.text-blue-highlight {
    font-weight: 800; /* Extra-bold pour le résultat net */
}

/* === Suggestions Proactives === */
#suggestions-proactives .suggestion-item {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 1rem;
    border-radius: 8px;
}

#suggestions-proactives .suggestion-item p.font-semibold {
    color: var(--blue-highlight);
}

#suggestions-proactives .suggestion-item button {
    color: var(--blue-highlight);
    font-weight: 600;
}
#suggestions-proactives .suggestion-item button:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* === Pistes d'optimisation === */
#optimizer-box {
    border-top: 1px dashed var(--border-color);
}
#optimizer-tips ul li {
    color: var(--text-color);
}
#optimizer-tips ul li strong {
    color: var(--blue-highlight);
}

/* === Alertes === */
.bg-yellow-100 {
    background-color: #3E290B; /* Fond jaune foncé */
    color: #FBBF24; /* Texte jaune */
    border: 1px solid #78350F;
}

/* === Graphiques === */
canvas {
    /* Le fond est déjà géré par la carte, pas besoin de style ici */
    /* S'assurer que le texte de Chart.js est lisible */
}