body {
    background-color: #121212;
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
}

.container { max-width: 1800px; margin: 0 auto; }

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}

h1 span { color: #00d2ff; }

/* Contrôles */
.controls { display: flex; gap: 20px; align-items: center; }
.date-container { display: flex; align-items: center; gap: 10px; }
input[type="date"] {
    background-color: #252525; color: #00d2ff; border: 1px solid #333;
    padding: 8px 12px; border-radius: 5px; cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

/* Boutons */
.btn-add {
    background-color: #00d2ff; color: #000; border: none; padding: 8px 15px;
    border-radius: 5px; font-weight: bold; cursor: pointer; transition: 0.2s;
}
.btn-add:hover { background-color: #33e0ff; }
.btn-delete {
    background: transparent; border: none; color: #666; cursor: pointer; font-size: 1.1em;
}
.btn-delete:hover { color: #ef4444; }

/* Tableau */
.table-wrapper { 
    overflow-x: auto; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); 
    border-radius: 8px; 
    padding-bottom: 50px; 
}
table { width: 100%; border-collapse: collapse; background-color: #1e1e1e; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #333; font-size: 0.9em; vertical-align: middle; }
th { background-color: #252525; color: #00d2ff; text-transform: uppercase; font-size: 0.8em; white-space: nowrap; }

/* --- REGLAGES SPECIFIQUES COLONNES (Nouvel Ordre) --- */
/* Colonne JOURS (9ème) */
th:nth-child(9), td:nth-child(9) {
    min-width: 280px;
}
/* Colonne MOIS (10ème) - On lui donne de la place pour "Jan", "Fév"... */
th:nth-child(10), td:nth-child(10) {
    min-width: 450px; 
}

/* Lignes Actives / Inactives */
.row-active { border-left: 4px solid #22c55e; background-color: rgba(22, 163, 74, 0.1); }
.row-inactive { border-left: 4px solid #ef4444; background-color: rgba(220, 38, 38, 0.05); opacity: 0.8; }

/* --- BADGES INTERACTIFS --- */
.badge-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; 
}

.badge-container {
    display: flex;
    flex-wrap: nowrap; /* Pas de retour à la ligne */
    gap: 3px; 
}

.badge-btn {
    border: 1px solid #333;
    background-color: #2a2a2a;
    color: #666;
    font-size: 0.75em;
    /* On enlève width/height fixes pour que le texte "Jan" rentre */
    padding: 3px 6px;
    min-width: 24px; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
    flex-shrink: 0; 
}

.badge-btn:hover { background-color: #444; }

.badge-btn.day-on {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border-color: #22c55e;
    font-weight: bold;
}

.badge-btn.month-on {
    background-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: #ef4444;
    font-weight: bold;
    text-decoration: line-through;
}

/* BOUTON VALIDER */
.btn-validate {
    background-color: #22c55e;
    color: #000;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0.8em;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
}
.btn-validate:hover { background-color: #4ade80; transform: scale(1.1); }
@keyframes popIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }


/* Edition Texte */
.editable { cursor: pointer; }
.editable:hover { background-color: #333; }
.editable input {
    width: 100%; background: #000; color: #fff; border: 1px solid #00d2ff;
    padding: 4px; border-radius: 3px;
}

/* Modal */
.hidden { display: none !important; }
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000;
}
.modal-content {
    background: #1e1e1e; padding: 25px; border-radius: 8px; width: 500px; border: 1px solid #333;
}
.modal-content input {
    width: 100%; padding: 10px; margin-bottom: 10px; background: #252525;
    border: 1px solid #444; color: #fff; border-radius: 4px; box-sizing: border-box;
}
.row { display: flex; gap: 10px; }
.badge-selector-group { margin-bottom: 15px; border: 1px solid #333; padding: 10px; border-radius: 5px; background: #222; }
.badge-selector-group label { display: block; margin-bottom: 8px; font-size: 0.9em; color: #00d2ff; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.btn-cancel { background: #444; color: #fff; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.btn-save { background: #22c55e; color: #fff; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }

/* --- BADGES BIAIS (Achat/Vente/Neutre) --- */
.bias-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Espace entre la flèche et le texte */
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: capitalize;
}

/* Style Achat (Vert) */
.bias-buy {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Style Vente (Rouge) */
.bias-sell {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Style Neutre (Gris) */
.bias-neutral {
    background-color: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.3);
}