/* ========== Palette & typographie ========== */
:root {
  --bg-primary: #699bd3;
  --bg-secondary: #3465a0;
  --bg-light: #ffffff;
  --bg-muted: #ebebeb;
  --not-started: #000000;
  --started: var(--bg-secondary);
  --testable: #00d7c9;
  --ended: #06b106;
  --on-hold: #cc00eb;
  /* couleurs pour level warnings */
  --warning-color-0: red;
  --warning-color-1: orange;
}

body {
  font-family: 'Questrial', Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  margin: 0;
  background: var(--bg-light);
  color: #333;
}

/* container centré pour le contenu */
#users-container {
  max-width: 80%;
  margin: 0 auto;
  padding-top: 10px;
}

/* liens selon la palette */
a {
  color: var(--bg-primary);
  text-decoration: none;
}
a:hover {
  color: var(--bg-secondary);
  text-decoration: underline;
}

h1 {
  text-align: center;
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--bg-secondary);
}

/* légende des icônes + couleurs */
.legend {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0.5rem 0;
  padding-bottom: 10px;
  font-size: 0.9rem;
}
.legend-item {
  display: flex;
  align-items: center;
}
.legend-item .task-icon {
  margin-right: 0.25em;
}

/* couleur légende pour chaque statut et warning */
.legend-item.status-not_started,
.legend-item.status-not_started span {
  color: var(--not-started);
}
.legend-item.status-started,
.legend-item.status-started span {
  color: var(--started);
}
.legend-item.status-testable,
.legend-item.status-testable span {
  color: var(--testable);
}
.legend-item.status-ended,
.legend-item.status-ended span {
  color: var(--ended);
}
.legend-item.status-on_hold,
.legend-item.status-on_hold span {
  color: var(--on-hold);
}
.legend-item.warning-level-0,
.legend-item.warning-level-0 span {
  color: var(--warning-color-0);
}
.legend-item.warning-level-1,
.legend-item.warning-level-1 span {
  color: var(--warning-color-1);
}

table {
  border-collapse: collapse;
  width: 100%;
  max-width: none;
  margin: 0;
  background: white;
}

th,
td {
  padding: 0.25rem 0.5rem;
}

th {
  background: var(--bg-muted);
  text-align: left;
  font-weight: 600;
}

td {
  background: #f7f7f7;
}

thead th {
  font-size: 1rem;;
}

tbody tr:last-child td {
}

/* séparation 1px entre chaque projet */
.tables-row table tbody tr {
  border-bottom: 1px solid #d8d8d8;
}

.tables-row table tbody tr:last-child {
  border-bottom: none;
}

/* arrondir les coins du tableau */
.tables-row table tr:first-child td:first-child {
  border-top-left-radius: 4px;
}
.tables-row table tr:first-child td:last-child {
  border-top-right-radius: 4px;
}
.tables-row table tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}
.tables-row table tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}


.tasks-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.tasks-list li {
  margin: 0.3rem 0;
  display: flex;
  align-items: center;
}

.task-icon {
  width: 15px;
  height: 15px;
  margin-right: 0.5em;
  fill: currentColor;
  flex-shrink: 0;
}

.tasks-list li.status-not_started .task-icon, .tasks-list li.status-not_started a { color: var(--not-started); }
.tasks-list li.status-started     .task-icon, .tasks-list li.status-started     a { color: var(--started); }
.tasks-list li.status-testable    .task-icon, .tasks-list li.status-testable    a { color: var(--testable); }
.tasks-list li.status-ended       .task-icon, .tasks-list li.status-ended       a { color: var(--ended); }
.tasks-list li.status-on_hold     .task-icon, .tasks-list li.status-on_hold     a { color: var(--on-hold); }

/* warnings: level 0 = rouge, level 1 = orange */
.tasks-list li.warning-level-0 .warning-icon,
.tasks-list li.warning-level-0 .task-name,
.tasks-list li.warning-level-0 .task-name a {
  color: var(--warning-color-0);
}

.tasks-list li.warning-level-1 .warning-icon,
.tasks-list li.warning-level-1 .task-name,
.tasks-list li.warning-level-1 .task-name a {
  color: var(--warning-color-1);
}
 
.tasks-list li.status-ended {
  opacity: 0.6;
}

.tasks-list li.status-ended .task-name {
  text-decoration: line-through;
}

/* Section utilisateur */
.user-section {
  margin-bottom: 2rem;
}

.tables-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}

.tables-row table {
  width: 100%;
  max-width: none;
  margin: 0;
  table-layout: fixed;
}
.tables-row table td:first-child {
  font-weight: 600;
  font-size: 0.9rem;
}

/* titres des tableaux de tâches */
.table-label {
  font-weight: 600;
  font-size: 1.5rem;
  padding: 0.25rem 0.5rem;
  margin-bottom: 15px;
  text-align: center;
}

.nav-arrow {
  cursor: pointer;
  font-size: 1.5rem;
  margin: 0 0.5rem;
  user-select: none;
}

/* wrapper pour centrer le total et les tableaux */
.table-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f7f7;
  padding: 5px;
  border-radius: 7px;
}

/* total des temps passés, centré au-dessus du tableau */

/* bar de titre utilisateur + total sur la même ligne */
.user-header {
  display: flex;
  width: 50%;
  justify-content: flex-start;
  align-items: baseline;
  margin-bottom: 0.5rem;
  position: relative;
}

.user-header h2 {
  margin: 0;
  color: var(--bg-secondary);
}

/* total des temps passés affiché à côté du nom */
.user-total {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
}


/* Titre utilisateur */
.user-section > h2 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.40rem;
  color: var(--bg-secondary);
}

.tasks-list li.with-comment {
  flex-direction: column;
  align-items: flex-start;
}
.task-comment {
  font-size: 0.75rem;
  margin-top: 0.2rem;
  margin-left: calc(15px + 0.5em);
  color: #666;
  font-style: italic;
}

.task-header {
  display: inline-flex;
  align-items: center;
}
.task-hours {
  margin-left: 0.3em;
}


/* Tête de ligne pour tickets en cours/à venir : nom à gauche, dueDate à droite */
.upcoming-list .task-header {
  display: flex;
  align-items: center;
  width: 100%;
}
.upcoming-list .task-header .task-name {
  flex: 1;
}
.upcoming-list .task-due {
  margin-left: auto;
  color: #000;
}

.upcoming-list .task-progress {
  width: 40px;
  height: 8px;
  background: #dbd9d9;
  border-radius: 4px;
  overflow: hidden;
  margin-left: 0.5em;
  margin-right: 0.5em;
  flex-shrink: 0;
}
.upcoming-list .task-progress > div {
  height: 100%;
  background: var(--ended);
}