body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding-bottom: 60px;
    position: relative;
    min-height: calc(100vh - 40px);
}

/* ... (tous vos styles précédents pour header, nav, etc.) ... */

/* -- NOUVELLE SECTION POUR LA RECHERCHE ET LES SÉPARATEURS -- */
.search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 6px;
}
.search-form input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}
.search-form button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}
.search-form button:hover {
    background-color: #2980b9;
}
/* -- SECTION MODIFIÉE POUR LES SÉPARATEURS DE MOIS -- */
.search-form {
    display: flex; gap: 10px; margin-bottom: 20px; padding: 15px;
    background-color: #f8f9fa; border-radius: 6px;
}
.search-form input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 1em; }
.search-form button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; }
.search-form button:hover { background-color: #2980b9; }

.month-divider td {
    background-color: #34495e !important;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    padding: 8px 12px;
    cursor: pointer; /* Le curseur change pour indiquer que c'est cliquable */
}
.chevron {
    display: inline-block;
    margin-right: 10px;
    transition: transform 0.2s ease-in-out; /* Petite animation */
}
.chevron.open {
    transform: rotate(90deg); /* Le chevron pivote quand c'est ouvert */
}
/* -- FIN DE LA SECTION MODIFIÉE -- */

/* --- Section de l'en-tête --- */
.main-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #ddd; margin-bottom: 15px; }
.header-logo img { height: 60px; display: block; }
.header-title h1 { margin: 0; color: #2c3e50; font-size: 2em; }
.header-user-info { text-align: right; font-size: 0.9em; color: #555; min-width: 150px; }
.header-user-info a { color: #e74c3c; text-decoration: none; font-weight: bold; }

nav { text-align: center; margin-bottom: 20px; }
nav a { margin: 0 15px; text-decoration: none; color: #3498db; font-weight: bold; font-size: 1.1em; }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h2 { margin: 0; }

.btn-add { display: inline-block; padding: 10px 15px; background-color: #27ae60; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; }
.btn-add:hover { background-color: #229954; }

/* --- Section des Tableaux et Statuts --- */
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border: 1px solid #ddd; text-align: left; vertical-align: middle; }
th { background-color: #e8f4f8; }
tr:nth-child(even) { background-color: #f9f9f9; }

/* On s'assure que la classe text-right est bien définie */
.text-right {
    text-align: right;
}

.child-row { display: none; background-color: #fdfdfd !important; }
.child-row td:first-child { padding-left: 40px; position: relative; }
.child-row td:first-child::before { content: '└ '; position: absolute; left: 20px; color: #999; }
.toggle-btn { cursor: pointer; font-family: monospace; font-weight: bold; color: #3498db; margin-right: 10px; }

/* Styles communs pour tous les statuts */
.status-paid, .status-unpaid, .status-pending, .status-accepted, .status-refused, .status-invoiced {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
}

/* Statuts de facture */
.status-paid { color: #27ae60; background-color: #eaf8f1; }
.status-unpaid { color: #e67e22; background-color: #fdf3e7; }

/* STATUTS POUR LES DEVIS */
.status-pending { color: #e67e22; background-color: #fdf3e7; }
.status-accepted { color: #27ae60; background-color: #eaf8f1; }
.status-refused { color: #c0392b; background-color: #fbecec; }
.status-invoiced { color: #8e44ad; background-color: #f4ecf7; }


/* --- SECTION DU TABLEAU DE BORD --- */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; }
.kpi-card { background-color: #e8f4f8; border-radius: 8px; padding: 20px; text-align: center; border-left: 5px solid #3498db; }
.kpi-card.unpaid { background-color: #fdf3e7; border-left-color: #e67e22; }
.kpi-card.late { background-color: #fdeded; border-left-color: #e74c3c; }
.kpi-value { font-size: 2.5em; font-weight: bold; color: #2c3e50; margin-bottom: 5px; white-space: nowrap; }
.kpi-label { font-size: 1em; color: #555; }
.chart-container { position: relative; height: 400px; width: 100%; margin-top: 40px; padding: 20px; background-color: #fdfdfd; border: 1px solid #eee; border-radius: 8px; box-sizing: border-box; }


/* --- SECTION DES FORMULAIRES --- */
.form-container .form-group { margin-bottom: 15px; }
.form-container label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-container input[type="text"], .form-container input[type="password"], .form-container input[type="date"], .form-container input[type="email"], .form-container input[type="number"], .form-container select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 1em; }
.form-container button { width: 100%; padding: 12px 15px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1.1em; font-weight: bold; }
.form-container button:hover { background-color: #2980b9; }

/* --- NOUVELLE SECTION POUR L'AUTOCOMPLÉTION D'ADRESSE --- */
.autocomplete-container {
    position: relative; /* Conteneur de référence pour la liste */
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 99;
    top: 100%; /* Se positionne juste en dessous de l'input */
    left: 0;
    right: 0;
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ddd; 
}

.autocomplete-items div:hover {
    background-color: #e9e9e9; 
}

.autocomplete-active {
    /* Style pour l'élément sélectionné avec les flèches du clavier */
    background-color: DodgerBlue !important; 
    color: #ffffff; 
}
/* --- FIN DE LA NOUVELLE SECTION --- */
/* -- NOUVELLE SECTION POUR LA PAGE DE CONNEXION RESPONSIVE -- */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Utilise min-height au lieu de height */
    padding: 20px; /* Ajoute un peu de marge sur les petits écrans */
    box-sizing: border-box; /* S'assure que le padding est inclus dans la taille */
}

/* On s'assure que le container de la page login ne prend pas toute la largeur sur mobile */
.login-page .container {
    width: 100%;
}
/* -- FIN DE LA NOUVELLE SECTION -- */

/* --- FOOTER --- */
footer { text-align: center; color: #777; font-size: 0.9em; padding: 20px 0; margin-top: 30px; }