:root {
    --bg-color: #1a1a2e;
    --card-bg: #16213e;
    --primary-color: #0f3460;
    --accent-color: #e94560;
    --text-color: #e0e0e0;
    --green-color: #3ddc97;
    --font-family: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

.container { width: 100%; max-width: 900px; text-align: center; }
header h1 { font-size: 3em; color: var(--accent-color); margin-bottom: 0; }
header p { opacity: 0.8; margin-top: 5px; }
.main-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 30px 0; }
.stat-card, .job-manager, .calendar-container { background-color: var(--card-bg); padding: 25px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); border-left: 5px solid var(--accent-color); }
.money { font-size: 2.2em; font-weight: 700; color: var(--green-color); }
.timer { font-size: 2.5em; font-weight: 700; color: var(--accent-color); }
.progress-bar-container { width: 100%; background-color: var(--primary-color); border-radius: 10px; height: 20px; margin-top: 15px; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-color), #ff7f50); border-radius: 10px; transition: width 0.5s ease-in-out; }
.progress-bar.money-bar { background: linear-gradient(90deg, var(--green-color), #4caf50); }

/* CALENDRIER */
.calendar-container { border-left-color: var(--green-color); margin: 30px 0; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.calendar-header h2 { margin: 0; font-size: 1.5em; }
.calendar-header button { background: var(--accent-color); color: white; border: none; font-size: 1.5em; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-weight: 600; margin-bottom: 10px; opacity: 0.7; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendar-day { background-color: #1f2a47; min-height: 100px; padding: 8px; border-radius: 5px; text-align: left; font-size: 0.9em; overflow-y: auto; cursor: pointer; transition: background-color 0.2s; }
.calendar-day:hover { background-color: var(--primary-color); }
.calendar-day.padding-day { background-color: transparent; cursor: default; }
.calendar-day.today { border: 2px solid var(--accent-color); font-weight: bold; }
.day-number { font-weight: 600; margin-bottom: 5px; }
.job-entry { color: white; font-weight: 500; font-size: 0.75em; padding: 3px 5px; border-radius: 3px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* FORMULAIRE */
#add-job-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; text-align: left; }
#add-job-form input, #add-job-form select { width: 100%; padding: 10px; border: none; border-radius: 8px; background-color: #1f2a47; color: var(--text-color); font-size: 1em; box-sizing: border-box; }
#add-job-form button { grid-column: 1 / -1; padding: 12px 20px; border: none; border-radius: 8px; background-color: var(--accent-color); color: white; font-weight: 600; cursor: pointer; font-size: 1.1em; }
#add-job-form button:disabled { background-color: #888; cursor: not-allowed; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
#add-job-form input[type="text"] { grid-column: 1 / -1; }
.hourly-only { display: none; grid-column: 1 / -1; }
.days-of-week { display: flex; flex-wrap: wrap; gap: 10px; background-color: #1f2a47; padding: 10px; border-radius: 8px; }
.days-of-week input[type="checkbox"] { display: none; }
.days-of-week label { padding: 5px 10px; border-radius: 5px; cursor: pointer; background-color: var(--primary-color); transition: background-color 0.2s; }
.days-of-week input[type="checkbox"]:checked + label { background-color: var(--green-color); color: var(--bg-color); font-weight: bold; }

/* LISTE DES JOBS */
#job-list { list-style-type: none; padding: 0; }
#job-list li { background-color: #1f2a47; padding: 15px; margin-bottom: 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.job-list-details { flex-grow: 1; }
.job-list-details p { margin: 0; }
.delete-job-btn { background: none; border: 2px solid var(--accent-color); color: var(--accent-color); padding: 5px 10px; border-radius: 5px; cursor: pointer; }

/* NOUVEAUX STYLES POUR LA MODALE */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: var(--card-bg); padding: 30px; border-radius: 15px; width: 90%; max-width: 600px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.close-modal { position: absolute; top: 10px; right: 15px; background: none; border: none; color: white; font-size: 2.5em; cursor: pointer; }
#modal-date { margin-top: 0; color: var(--accent-color); }
#modal-jobs .modal-job-item { background: #1f2a47; padding: 15px; border-radius: 8px; margin-bottom: 10px; }
#modal-jobs .modal-job-item h3 { margin: 0 0 10px 0; }
#modal-jobs .modal-job-item p { margin: 5px 0; opacity: 0.9; }
#modal-jobs .modal-job-item span { font-weight: bold; color: var(--green-color); }