body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f7f7f7;
  margin: 0;
  padding: 40px;
}

h2 {
  margin-top: 0.5em;
}

.btn {
  background: #4169e1;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}
.btn_export {
  background: #4169e1;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 10px;
}
.btn:hover {
  background: #294ec2;
}
.reset-btn {
  background: #ff4444;
  margin-left: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px #ccc;
  margin-top: 20px;
}
th,
td {
  padding: 16px;
  border: 1px solid #eee;
  vertical-align: top;
}
th {
  background: #4169e1;
  color: #fff;
  font-size: 1.2em;
}

.task {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(90deg, #dbeafe, #e0ffe7);
  border-left: 5px solid #4169e1;
  box-shadow: 0 1px 2px #b9b9b955;
  position: relative;
  min-width: 130px;
}
.task .category {
  font-size: 0.9em;
  background: #fffbe6;
  color: #bb7b00;
  border: 1px solid #ffe9ae;
  border-radius: 6px;
  padding: 2px 9px;
  margin-right: 7px;
}
.task .demandeur {
  font-size: 0.9em;
  color: #1b664d;
  font-weight: bold;
}
.task .duration {
  font-size: 0.93em;
  color: #555;
  margin-left: 2px;
}
.multi-arrow {
  position: absolute;
  right: 7px;
  top: 12px;
  font-size: 1.2em;
  color: #4169e1;
}

/* Modal styles */
.modal-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(30, 40, 50, 0.4);
  z-index: 999;
}
.modal {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 34px 30px 24px;
  border-radius: 14px;
  min-width: 340px;
  box-shadow: 0 6px 36px #32346545;
  z-index: 1000;
}
.modal label {
  font-weight: bold;
  margin-top: 10px;
}
.modal input,
.modal select {
  padding: 8px;
  margin-top: 5px;
  width: 100%;
  border-radius: 7px;
  border: 1px solid #ccc;
}
.modal .btn {
  width: 100%;
  margin-top: 17px;
}
.close-modal {
  background: transparent;
  border: none;
  font-size: 1.6em;
  color: #4169e1;
  position: absolute;
  right: 15px;
  top: 12px;
  cursor: pointer;
}
@media print {
  .btn,
  .modal-bg,
  form {
    display: none !important;
  }
  body {
    background: white !important;
  }
}
.commentaire-semaine {
  margin: 18px 0;
  padding: 13px 16px;
  background: #f0f4f9;
  border-radius: 10px;
  border: 1px solid #b3c2d7;
  font-size: 1.11em;
}
.commentaire-form {
  margin-bottom: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.commentaire-form textarea {
  width: 100%;
  min-height: 36px;
  border-radius: 7px;
  border: 1px solid #aac0db;
  font-size: 1em;
  padding: 7px 10px;
  resize: vertical;
}
.commentaire-form button {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: #4169e1;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.commentaire-form button:hover {
  background: #2b56ba;
}