/* ============================================================================
   TEMPS — encart des saisies, posé sous celui des tickets sur le tableau de bord.

   Chargée par base.html.twig APRÈS app.css : elle ne définit que ce qui est
   propre à l'encart, et l'emporte sur les règles générales des cartes sans avoir
   à forcer quoi que ce soit.

   MOBILE D'ABORD, et ce n'est pas une figure de style : une saisie de temps a
   huit informations (date, heure, durée, boutique, client, ticket, libellé,
   état de facturation). En tableau, cela déborde de n'importe quel téléphone.
   On empile donc des CARTES — une colonne au téléphone, puis jusqu'à 6 à mesure
   qu'il y a de la place. Aucune largeur fixe nulle part. Depuis le 13/10/2026 la
   carte est COMPACTE (projet, date, durée, libellé) ; le reste vit dans la fiche
   de la saisie (.tp-fiche, en bas de cette feuille).
   ============================================================================ */

/* Largeur de l'encart : réglable depuis le 24/09/2026 (grille des encarts, app.css) ;
   pleine largeur par défaut. Ses mises en page internes suivent la largeur de
   L'ENCART (container queries « encart »), plus celle de l'écran. */

/* ---------------------------------------------------------------- en-tête */

.tp-encart-tete { margin-bottom: 8px; }
.tp-encart-filtres {
  flex: 1 1 100%; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tp-filtre-combo { flex: 1 1 200px; min-width: 0; }
.tp-filtre-combo input[type="text"] { width: 100%; min-width: 0; }
.tp-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-dates input[type="date"] { min-width: 0; flex: 1 1 140px; }
@container encart (min-width: 814px) {
  /* De la place : les filtres reviennent à droite du titre, sur une seule ligne. */
  .tp-encart-filtres { flex: 0 1 auto; }
  .tp-filtre-combo { flex: 0 1 240px; }
  .tp-dates input[type="date"] { flex: 0 0 auto; }
}

/* Encart en cours de rechargement : on montre que ça travaille sans faire sauter
   la mise en page (le contenu reste en place, simplement estompé). */
.tp-encart[aria-busy="true"] { opacity: .55; transition: opacity .12s ease; }

/* ------------------------------------------------------- navigation de mois */

.tp-mois {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 12px;
}
.tp-mois .spacer { flex: 1 1 auto; }
.tp-mois-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted); text-decoration: none; line-height: 1;
}
a.tp-mois-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
span.tp-mois-btn { opacity: .35; }
.tp-mois-nom {
  font-weight: 600; color: var(--fg);
  text-transform: capitalize; white-space: nowrap;
}
.tp-mois-retour { color: var(--muted); font-size: 11.5px; }
.tp-resume { color: var(--muted); white-space: nowrap; }
.tp-resume strong { font-family: var(--font-num); color: var(--warn); }

/* CIBLES AU POUCE. Sous 768 px on est sur un téléphone : 44 px de côté, le minimum
   tenable debout dans une boutique. 31/10/2026 : aussi au DOIGT sur grand écran
   (iPad Pro 13, 1032-1376 px) — ces règles ne changent que des tailles, pas la mise en page. */
@media (max-width: 767px), (pointer: coarse) {
  .tp-mois-btn { min-width: 44px; min-height: 44px; font-size: 15px; }
  .tp-mois-retour { min-height: 44px; display: inline-flex; align-items: center; }
  .tp-encart-filtres .btn { min-height: 44px; }
  .tp-encart-filtres input[type="date"],
  .tp-filtre-combo input[type="text"] { min-height: 44px; }
  /* La carte entière est la zone de lecture : ses liens (boutique, ticket,
     facture) restent au-dessus du seuil grâce à leur propre hauteur. */
  .tp-ou a, .tp-ticket, .tp-badge.facturee { min-height: 28px; display: inline-flex; align-items: center; }
}

/* --------------------------------------------------------- liste de cartes */

.tp-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 9px;
  grid-template-columns: minmax(0, 1fr);
}
/* minmax(0, 1fr) et non 1fr : sans le 0, une colonne de grille vaut au minimum sa
   taille min-content (le plus long mot d'un libellé, un numéro de facture), la
   grille s'élargit au-delà de son conteneur et c'est TOUTE la page du tableau de
   bord qui part en travers. Même piège que la grille des tickets. */
/* Cartes compactes (13/10/2026) : plus étroites, donc plus nombreuses par ligne. Une
   colonne sous 482 px (téléphone), puis 2, 3, 4, 5 et 6 à mesure que l'encart s'élargit. */
.tp-liste { gap: 6px; }
@container encart (min-width: 482px) { .tp-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container encart (min-width: 700px) { .tp-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container encart (min-width: 960px) { .tp-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container encart (min-width: 1314px) { .tp-liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container encart (min-width: 1600px) { .tp-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tp-carte {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 11px 9px 13px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
}
/* Liseré d'état : vert = à facturer, ambre = non facturable, éteint = déjà facturé. */
.tp-carte::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
  background: var(--accent);
}
.tp-carte.tp-non-facturable::before { background: var(--warn); }
.tp-carte.tp-facturee::before { background: var(--border-lit); }
.tp-carte.tp-facturee { opacity: .82; }

/* ------------------------------------------- carte compacte (13/10/2026)
   Franck : « simplement indiquer le projet, la date, la durée et l'intitulé ». La carte
   n'est plus qu'UN lien (.tp-lien) vers la fiche de la saisie : c'est lui qui porte le
   rembourrage, pour que TOUTE la carte soit cliquable, et la hauteur de 44 px au doigt.
     PROJET ············ 12/10
     Libellé sur une ligne…   1h30                                                      */
.tp-carte.tp-compacte { padding: 0; gap: 0; }
.tp-lien {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'projet date' 'libelle duree';
  align-items: baseline; gap: 1px 10px;
  min-height: 44px; box-sizing: border-box; padding: 6px 10px 6px 13px;
  border-radius: inherit; color: inherit; text-decoration: none;
}
.tp-lien:hover { text-decoration: none; }
.tp-carte:has(.tp-lien:hover) { border-color: var(--accent); }
.tp-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-lien .tp-projet {
  grid-area: projet; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.tp-lien .tp-projet.tp-sans-site { color: var(--warn); justify-self: start; }
.tp-lien .tp-date { grid-area: date; font-size: 11px; font-weight: 500; color: var(--muted); justify-self: end; }
.tp-lien .tp-duree { grid-area: duree; justify-self: end; font-weight: 700; }
/* UNE ligne de libellé (texte complet en title et dans la fiche). nowrap + ellipsis et
   min-width: 0 : un libellé sans espace ne peut pas élargir sa colonne. */
.tp-compacte .tp-libelle {
  grid-area: libelle; min-width: 0;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-line-clamp: unset;
}

.tp-tete { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 11px; color: var(--muted); }
.tp-tete .spacer { flex: 1 1 auto; }
.tp-date { font-family: var(--font-num); color: var(--fg); font-weight: 600; }
.tp-heure { font-family: var(--font-num); }
.tp-duree { font-family: var(--font-num); font-size: 14px; color: var(--fg); }

.tp-ou { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; font-size: 11px; }
.tp-ou a { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.tp-ou a:hover { color: var(--accent); text-decoration: none; }
.tp-client { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
/* Saisie sans boutique : une anomalie à corriger (le parc la range sur « sans boutique »). Elle se voit. */
.tp-sans-site {
  color: var(--warn); font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px dotted var(--warn);
}

.tp-ticket {
  font-size: 11px; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-ticket:hover { text-decoration: underline; }

/* Deux lignes de libellé, puis les points de suspension : à trois cartes par
   ligne, un libellé de chrono tient rarement sur une seule. `anywhere` : une
   référence sans espace ne doit pas élargir sa colonne. */
.tp-libelle {
  margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

.tp-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 10px; margin-top: auto; }
.tp-src, .tp-badge {
  display: inline-block; padding: 0 6px; line-height: 1.7; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.tp-src-delmak { color: var(--accent); border-color: rgba(53, 208, 242, .35); }
.tp-src-historique { border-style: dashed; }
.tp-badge.non-fact { color: var(--warn); border-color: rgba(251, 191, 36, .45); }
.tp-badge.a-facturer { color: var(--success); border-color: rgba(52, 211, 153, .4); }
a.tp-badge.facturee { color: var(--muted); }
a.tp-badge.facturee:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.tp-encart-vide { padding: 26px 16px; }
.tp-encart-pied { margin: 8px 0 0; }

/* --------------------------------------------- correction d'une saisie (26/09/2026)
   Replié par défaut (<details>) : la carte reste une carte de lecture. Ouvert, le
   formulaire prend la largeur de la carte ; jour / début / fin sur une ligne dès
   qu'il y a la place, les uns sous les autres sinon. */
.tp-edit { border-top: 1px dashed var(--border); margin-top: 3px; padding-top: 5px; }
.tp-edit > summary, .tp-dup > summary {
  cursor: pointer; list-style: none; font-size: 11px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px; user-select: none;
}
.tp-edit > summary::-webkit-details-marker, .tp-dup > summary::-webkit-details-marker { display: none; }
.tp-edit > summary::before, .tp-dup > summary::before { content: '✎'; font-size: 12px; }
.tp-edit > summary:hover, .tp-edit[open] > summary, .tp-dup > summary:hover, .tp-dup[open] > summary { color: var(--accent); }
.tp-edit-form { display: grid; gap: 7px; margin-top: 7px; }
.tp-edit-grille { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
/* La CARTE est le conteneur : à 2, 3 ou 4 cartes par ligne, c’est sa largeur à elle
   qui dit si jour, début et fin tiennent côte à côte. */
.tp-carte { container: tpcarte / inline-size; }
@container tpcarte (min-width: 300px) { .tp-edit-grille { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.tp-edit-form label { display: grid; gap: 3px; font-size: 10.5px; color: var(--muted); min-width: 0; }
.tp-edit-form input[type="date"], .tp-edit-form input[type="time"], .tp-edit-form input[type="text"] {
  width: 100%; min-width: 0; box-sizing: border-box; font-size: 13px;
}
/* Les champs HEURE n’ont pas le style commun des champs (app.css l.152 ne liste pas
   type=time) : même boîte que les champs date, sinon ils sont plus bas et plus petits
   qu’eux sur la même ligne. Vaut aussi pour le formulaire de l’écran Temps. */
input[type=time] {
  width: 100%; background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 13px; font: 400 13.5px var(--font); line-height: 1.45;
  outline: none; color-scheme: dark;
}
.tp-edit-form input[type="time"], .tp-edit-form input[type="date"] { font-family: var(--font-num); }
.tp-edit-note { margin: 0; font-size: 11px; color: var(--warn); }
.tp-edit-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tp-edit-form label.tp-edit-case { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg); }
.tp-suppr-form { margin-top: 6px; display: flex; justify-content: flex-end; }
/* Modifier et Dupliquer sur UNE ligne (29/09/2026) ; celui qu'on ouvre prend toute la
   largeur de la carte, l'autre reste accessible au-dessus ou en dessous. */
.tp-actions { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 16px; border-top: 1px dashed var(--border); margin-top: 3px; padding-top: 5px; }
.tp-actions > .tp-edit { border-top: 0; margin-top: 0; padding-top: 0; min-width: 0; }
.tp-actions > .tp-edit[open], .tp-actions > .tp-dup[open] { flex-basis: 100%; }
.tp-dup > summary::before { content: '⧉'; }
.tp-dup-note { font-size: 11px; color: var(--muted); }
.tp-suppr { color: var(--danger); }
.tp-suppr:hover { border-color: var(--danger); }
@media (max-width: 767px), (pointer: coarse) {
  .tp-edit > summary, .tp-dup > summary { min-height: 44px; font-size: 12.5px; }
  .tp-edit-form input[type="date"], .tp-edit-form input[type="time"], .tp-edit-form input[type="text"],
  .tp-edit-form .btn, .tp-suppr { min-height: 44px; font-size: 15px; }
}

/* ------------------------------------ rattacher un temps à un ticket (26/09/2026) */
.tp-tk label { display: flex; gap: 4px; align-items: baseline; }
.tp-tk-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dim); }
.tp-tk input[type="text"] { width: 100%; }
.tp-tk .kl-combo-liste li { white-space: normal; overflow-wrap: anywhere; }
/* Le « # » du chrono sans ticket, dans l'en-tête : discret, mais une vraie cible. */
.chrono-lier {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px;
  font: 700 12px var(--font-num); color: var(--muted); text-decoration: none;
  border: 1px dashed var(--border-lit);
}
.chrono-lier:hover, .chrono-lier:focus-visible { color: var(--accent); border-color: var(--accent); text-decoration: none; }
@media (max-width: 767px), (pointer: coarse) { .chrono-lier { min-width: 32px; height: 32px; font-size: 14px; } }
.tc-carte { max-width: 640px; }
.tc-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 639px) { .tc-actions .btn { width: 100%; min-height: 44px; } }

/* Écran Temps, colonne d'actions : ⧉ fermé reste sur la ligne de ▶ (29/09/2026). */
.tp-dup-ligne:not([open]) { display: inline-block; vertical-align: middle; }
.tp-dup-ligne > summary::-webkit-details-marker { display: none; }
.tp-dup-ligne > summary { list-style: none; }

/* ---------------------------------------------- fiche d'une saisie (13/10/2026)
   Ouverte en modale depuis la carte compacte de l'encart (time/fiche.html.twig) : tout ce
   que la carte portait avant, plus le libellé ENTIER. Une colonne, des cibles de 44 px au
   téléphone ; les formulaires Modifier / Dupliquer gardent leurs styles (.tp-edit-*), la
   fiche étant, comme l'ancienne carte, le conteneur « tpcarte » qui les met en ligne. */
.tp-fiche {
  container: tpcarte / inline-size;
  max-width: 640px; display: grid; gap: 12px;
  border-left: 3px solid var(--accent);
}
.tp-fiche.tp-facturee { border-left-color: var(--border-lit); }
.tp-fiche-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tp-fiche-quand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.tp-fiche-quand .tp-date { font-size: 15px; }
.tp-fiche-quand .tp-heure { font-size: 13px; color: var(--muted); }
.tp-fiche-duree { font-size: 22px; font-weight: 700; }
.tp-fiche-relance { margin: 0; display: flex; }
.tp-fiche-infos {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px; margin: 0; font-size: 12.5px; align-items: baseline;
}
.tp-fiche-infos dt { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.tp-fiche-infos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tp-fiche-infos .tp-ou a, .tp-fiche-infos .tp-client { font-size: 11px; }
.tp-fiche .tp-ticket { white-space: normal; overflow: visible; font-size: 12.5px; }
.tp-fiche-libelle {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-sm, 8px);
  background: var(--bg-2); font-size: 14px; line-height: 1.45; color: var(--fg);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tp-fiche-verrou { margin: 0; }
.tp-fiche .tp-actions { align-items: center; row-gap: 6px; }
.tp-fiche .tp-actions > .tp-dup { min-width: 0; }
.tp-fiche .tp-suppr-form { margin: 0 0 0 auto; }
.tp-fiche-vide { padding: 30px 16px; }
@media (max-width: 767px) {
  .tp-fiche-relance .btn { width: 100%; min-height: 44px; font-size: 15px; justify-content: center; }
  .tp-fiche-infos a { min-height: 44px; display: inline-flex; align-items: center; }
  .tp-fiche .tp-suppr-form { margin-left: 0; }
}
/* iPad au doigt (31/10/2026) : les mêmes hauteurs, sans la mise en page téléphone. */
@media (pointer: coarse) {
  .tp-fiche-relance .btn { min-height: 44px; }
  .tp-fiche-infos a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Supprimer la saisie (fiche, 13/10/2026) : un geste destructeur se lit en rouge, sans
   prendre le poids d'un bouton principal (le contour seul, comme les autres actions). */
.tp-fiche .btn.tp-suppr { color: var(--danger); border-color: rgba(251, 95, 122, .45); }
.tp-fiche .btn.tp-suppr:hover, .tp-fiche .btn.tp-suppr:focus-visible { background: rgba(251, 95, 122, .1); }