:root {
  --accent: #0d6efd;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at 10% 20%, rgba(13, 110, 253, 0.16), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(99, 102, 241, 0.18), transparent 26%),
    #f3f4f8;
  min-height: 100vh;
}

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.page-header { background: linear-gradient(120deg, #1a9e60, #11b55e); }
.page-header .navbar-brand { font-weight: 700; letter-spacing: 0.01em; }
.content-wrap { flex: 1; }

.card-lift {
  border: none;
  border-radius: 16px;
  box-shadow: 0 16px 60px rgba(12, 20, 38, 0.16);
}

.pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e7f1ff;
  color: #0b5ed7;
  font-weight: 600;
  font-size: 0.925rem;
}

.helper { color: #4b5563; }
.muted { color: #6b7280; }
.errorlist { margin: 0 0 12px; padding-left: 16px; color: #b91c1c; }

.nav-loading {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(12, 20, 38, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.nav-loading[hidden] { display: none; }
.nav-loading-box {
  background: #1f2937; color: #fff; text-align: center;
  padding: 1.75rem 2.25rem; border-radius: 14px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4);
}

/* Overlays. base.html's ESC handler keys off `.match-overlay`, so the class
   names are load-bearing. */
.match-overlay,
.detail-overlay {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(12, 20, 38, 0.45);
  display: flex; align-items: center; justify-content: center;
}

.match-dialog,
.detail-dialog {
  background: #fff; border-radius: 14px; width: 90%;
  box-shadow: 0 16px 60px rgba(12, 20, 38, 0.28);
}
.match-dialog { max-width: 460px; }
.detail-dialog { max-width: 560px; width: 92%; max-height: 90vh; overflow-y: auto; }
.dialog-medium { max-width: 460px; }
.dialog-narrow { max-width: 360px; }

.match-row,
.detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.match-row + .match-row,
.detail-row + .detail-row { border-top: 1px solid #eef0f4; }
.detail-row .label { color: #6c757d; }

/* Tables collapse into one card per row on XS: the header row is dropped and
   each cell carries its own label. */
@media (max-width: 575.98px) {
  .stack-sm,
  .stack-sm tbody,
  .stack-sm tr,
  .stack-sm td { display: block; width: 100%; }

  .stack-sm thead { display: none; }

  .stack-sm tr {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: .75rem;
    padding: .25rem .5rem;
    background: #fff;
  }

  .stack-sm td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: none;
    padding: .35rem .25rem;
    white-space: normal;
    text-align: left;
  }
  .stack-sm td + td { border-top: 1px solid #f1f3f7; }

  .stack-sm td::before {
    content: attr(data-label);
    color: #6b7280;
    font-weight: 500;
    flex: 0 0 auto;
  }

  .stack-sm td.cell-title {
    font-weight: 600;
    font-size: 1.05rem;
    justify-content: flex-start;
  }
  .stack-sm td.cell-title::before { content: none; }

  /* Group header rows (driver name) read as a caption above their cards, not
     as cards themselves. */
  .stack-sm tr.row-heading {
    border: none;
    background: transparent;
    padding: 0;
    margin-bottom: .35rem;
  }
  .stack-sm tr.row-heading td { border-top: none; }

  /* Dialogs become bottom sheets: reachable with a thumb, never taller than
     the viewport. */
  .match-overlay,
  .detail-overlay { align-items: flex-end; }

  .match-dialog,
  .detail-dialog {
    width: 100%;
    max-width: none;
    border-radius: 14px 14px 0 0;
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   Journal RH — un axe de temps, pas une liste.

   La hauteur qui sépare deux pastilles est calculée par ``hr.timeline`` : elle
   croît avec le temps écoulé, sur une échelle compressée pour que le vide ne
   mange pas la page. Une rafale de corrections se serre, un long silence
   respire un peu et porte sa durée en clair. Partagé par l'onglet
   « Historique » d'une fiche et la page /rh/journal/, pour qu'un même
   événement se lise de la même façon aux deux endroits.
   -------------------------------------------------------------------------- */

.timeline {
  --dot: #9ca3af;
  --dot-soft: #f1f3f7;
  position: relative;
  padding-left: 34px;
}

/* Le rail. Dégradé plutôt qu'un gris plat : il donne un sens de lecture du
   récent (en haut) vers l'ancien, sans rien écrire. */
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(13, 110, 253, 0.35),
    rgba(13, 110, 253, 0.12) 45%,
    rgba(148, 163, 184, 0.22)
  );
}

.timeline-entry { position: relative; }
.timeline-entry + .timeline-entry { margin-top: 10px; }

/* La pastille. Le halo blanc l'isole du rail qui passe derrière. */
.timeline-entry::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--dot);
  box-shadow: 0 0 0 4px #fff, 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: transform 0.15s ease;
}

.timeline-entry:hover::before { transform: scale(1.18); }

/* Un changement d'état est un jalon, pas une retouche : pastille pleine et
   plus grande, elle se repère d'un coup d'œil dans une longue histoire. */
.timeline-entry.is-lifecycle::before {
  left: -33px;
  top: 10px;
  width: 18px;
  height: 18px;
  background: var(--dot);
  border-color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--dot-soft), 0 1px 4px rgba(15, 23, 42, 0.2);
}

.timeline-entry.is-create { --dot: #16a34a; --dot-soft: #dcfce7; }
.timeline-entry.is-update { --dot: #0d6efd; --dot-soft: #e0ecff; }
.timeline-entry.is-delete { --dot: #dc2626; --dot-soft: #fee2e2; }
.timeline-entry.is-lifecycle { --dot: #d97706; --dot-soft: #fef3c7; }

.timeline-card {
  background: #fcfdff;
  border: 1px solid #eaeef5;
  border-left: 3px solid var(--dot);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.timeline-entry:hover .timeline-card {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
  transform: translateX(1px);
}

.timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #6b7280;
}

.timeline-target {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--dot-soft);
  color: var(--dot);
}

.timeline-subject { font-weight: 600; color: #1f2937; text-decoration: none; }
.timeline-subject:hover { color: var(--accent); }
.timeline-who { color: #9ca3af; margin-left: auto; }

/* Le diff : la valeur qui compte est la nouvelle, elle est donc la seule en
   gras et en noir ; l'ancienne s'efface sans disparaître. */
.timeline-diff {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.timeline-diff .field { color: #6b7280; }
.timeline-diff .field::after { content: ":"; }
.timeline-diff .old {
  color: #9ca3af;
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, 0.45);
}
.timeline-diff .arrow { color: #cbd5e1; }
.timeline-diff .new { font-weight: 600; color: #111827; }

.timeline-comment {
  margin-top: 0.4rem;
  font-style: italic;
  font-size: 0.85rem;
  color: #4b5563;
}

/* Le vide entre deux événements. Sa hauteur dit l'ordre de grandeur de
   l'attente ; l'étiquette en donne la mesure exacte, que l'échelle compresse. */
.timeline-gap { position: relative; }
.timeline-gap-label {
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px dashed #d7dce5;
  background: #fff;
  color: #9ca3af;
  font-size: 0.7rem;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .timeline-who { margin-left: 0; }
}

/* Saisie d'heure du planning RH : champ texte (et non type="time") parce que
   le sélecteur natif plafonne à 23:59 et ne peut pas exprimer « 24:00 », la
   fin de journée. Largeur fixée pour que la grille reste alignée. */
.time-cell { max-width: 5.5rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Onglet portant une erreur : une pastille suffit, le bandeau au-dessus nomme
   déjà les onglets concernés. */
.tab-error { color: #dc2626; margin-left: 0.25rem; font-size: 0.8rem; line-height: 1; }

/* Le commentaire de changement est facultatif : replié par défaut, le triangle
   natif de <details> sert de bouton. */
.comment-toggle > summary {
  cursor: pointer;
  font-weight: 500;
  color: #374151;
  width: fit-content;
}
.comment-toggle > summary:hover { color: var(--accent); }