/* style.css (Version finale avec correction de la modale) */

/* --- Styles Généraux --- */
body {
    font-family: 'Roboto', sans-serif;
    max-width: 1400px;
    margin: 2rem auto;
    background-color: #1a2a47;
    color: #f4f4f9;
}
h1, h2.page-title {
    color: #f4f4f9;
    text-align: center;
}
.container { display: flex; gap: 2rem; align-items: flex-start; }
.form-container { flex: 0 0 350px; }
.data-container { flex: 1; }

/* --- Boîtes Blanches (Conteneurs) --- */
.white-box {
    background: #fff;
    color: #333;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
    margin-bottom: 1.5rem;
}
.white-box h1, .white-box h2, .white-box h3, .white-box h4, .white-box label {
    color: #333;
    text-align: left;
}
.white-box h2 { text-align: center; }

/* --- Historique (Tableau de bord) --- */
.year-header, .month-header { cursor: pointer; background-color: #3f51b5; color: #fff; padding: 1rem 1.5rem; border-radius: 8px; margin-bottom: .5rem; text-align: left; transition: background-color .3s ease; display: flex; align-items: center; }
.year-header:hover, .month-header:hover { background-color: #303f9f; }
.year-header::before, .month-header::before { content: '▶'; margin-right: 10px; transition: transform .2s; }
.year-header.expanded::before, .month-header.expanded::before { transform: rotate(90deg); }

/* --- Bloc Résumé (Soldes) --- */
.summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1rem; text-align: center; padding: 2rem; }
.summary div { padding: 1rem; background-color: #e0f2f7; border-radius: 8px; }
.summary .label { font-size: .9rem; color: #555; }
.summary .value { font-size: 2.2rem; font-weight: 700; margin-top: .5rem; }
.summary .sub-value { font-size: 1rem; color: #666; margin-top: 5px; }
.summary .positive { color: #28a745; }
.summary .negative { color: #dc3545; }
.summary .neutral-value { color: #0056b3; }
.summary a { color: #007bff; text-decoration: none; font-weight: 700; }

/* --- Tableaux --- */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { padding: .8rem; text-align: left; border-bottom: 1px solid #eee; }
th { background-color: #f8f8f8; font-weight: 700; color: #555; }
tr:hover { background-color: #f0f0f0; }
.positive { color: #28a745; font-weight: 700; }
.negative { color: #dc3545; font-weight: 700; }
.neutral { color: #555; font-weight: 700; }

/* --- Formulaires & Boutons --- */
select, input[type=date], input[type=time], input[type=number], textarea { width: 100%; padding: 10px; box-sizing: border-box; margin-top: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; }
.button { display: inline-block; width: auto; padding: 12px 20px; margin-top: 1.5rem; border: none; border-radius: 8px; background: linear-gradient(45deg,#007bff,#0056b3); color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all .3s ease; text-align: center; }
.button:hover { background: linear-gradient(45deg,#0056b3,#003f7f); transform: translateY(--2px); }
.prefill-box form .button, .actions-bar form .button { width: 100%; }
.prefill-box button { background: linear-gradient(45deg,#28a745,#218838); }
.delete-btn { background: none; border: none; color: #dc3545; cursor: pointer; font-size: 1.2rem; }

/* --- Calendrier --- */
.calendar-nav { display: flex; justify-content: space-between; align-items: center; }
.actions-bar { text-align: center; }
.calendar { table-layout: fixed; }
.calendar td { height: 120px; vertical-align: top; position: relative; cursor: pointer; transition: background-color .2s ease; }
.calendar td.weekend-day { background-color: #f7f7f7; }
.calendar td:hover { background-color: #d4edff; }
.calendar td.selected { background-color: #007bff !important; color: white; }
.day-number { font-weight: 700; font-size: 1.1rem; }
.entries-preview { font-size: .75rem; margin-top: 5px; max-height: 50px; overflow: hidden; }
.entry-item { padding: 2px 4px; border-radius: 3px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-total-balance { font-weight: bold; text-align: right; position: absolute; bottom: 5px; right: 8px; }
.vacation { background-color: #e6f7ff !important; }
.recuperation { background-color: #e4f8e4 !important; }
.ferie { background-color: #fff0f5 !important; }
.holiday-name { font-size: .7rem; position: absolute; bottom: 5px; left: 5px; right: 5px; text-align: center; }

/* --- Modale (Pop-up) --- */
.modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,.6); }
.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    color: #333; /* CORRECTION : On force le texte à être foncé */
}
.modal-content h2, .modal-content h3, .modal-content label {
    color: #333; /* On s'assure que les titres et labels sont aussi foncés */
}
.close { color: #aaa; float: right; font-size: 28px; font-weight: 700; cursor: pointer; }
#day-entries-list { list-style: none; padding: 0; }
#day-entries-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #eee; }