/* ==========================================================================
   apps/docs — mise en page propre à l'application

   POURQUOI CE FICHIER EXISTE

     Les listes étaient écrites avec des classes Tailwind à valeur arbitraire
     (`grid-cols-[8rem_1fr_11rem_…]`). Or la feuille Tailwind du dépôt est
     COMPILÉE D'AVANCE (`packages/starting-point/dist/main.css`, bâtie depuis
     `main.css` seul) : ces classes n'y figurent pas, donc elles ne
     produisaient rien. Pire, `.gf-row` du kit impose `display:flex` — un
     groupe horizontal générique, pas une ligne de tableau — si bien que les
     colonnes n'ont jamais existé et que chaque liste se lisait comme une
     phrase en vrac.

     Les mises en page de cette app vivent donc ici, en CSS écrit à la main,
     comme `apps/auth/auth.css`. Aucune étape de compilation entre ce qu'on
     écrit et ce qui s'affiche.

   TOKENS : ceux du kit (`--border`, `--muted-foreground`, `--card`…). Aucun
   `:root` local — les deux thèmes suivent la plateforme sans rien savoir.

   RESPONSIVE : une seule rupture, à 60rem. Au-dessus, des colonnes ; en
   dessous, chaque ligne devient une fiche à deux niveaux. Le document, lui,
   reste lisible partout — c'est lui qu'on vient voir.
   ========================================================================== */

/* --- listes --------------------------------------------------------------- */

.doc-list {
  display: flex;
  flex-direction: column;
  /* Pas de filets entre les lignes : l'espace sépare, comme dans les
     documents eux-mêmes. */
  gap: 0.25rem;

  /* Les colonnes sont déclarées UNE fois ici : l'en-tête et les lignes y
     puisent la même valeur, donc ils ne peuvent pas se désaligner. */
  --doc-cols:
    auto
    minmax(0, 1fr)
    minmax(0, 14rem)
    max-content
    max-content
    max-content;
}

.doc-list.is-templates {
  --doc-cols: minmax(0, 1fr) minmax(0, 11rem) max-content max-content max-content;
}

.doc-list.is-variables {
  --doc-cols: minmax(8rem, 14rem) minmax(0, 1fr) max-content max-content max-content;
}

.doc-list.is-versions {
  --doc-cols: 4rem minmax(0, 1fr) max-content max-content;
}

.doc-row {
  display: grid;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  /* `auto` sur la première colonne : la référence fixe sa propre largeur au
     lieu d'imposer un gabarit qui déborde dès qu'elle s'allonge. */
  grid-template-columns: var(--doc-cols);
}

.doc-row:hover { background: var(--muted); border-color: var(--border); }
.doc-row:focus-within { border-color: var(--border); background: var(--muted); }

.doc-row > * { min-width: 0; }

/* Référence et date : chiffres de même chasse, pour que deux lignes
   superposées s'alignent au caractère près. */
.doc-ref,
.doc-date { font-variant-numeric: tabular-nums; }

.doc-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-sub,
.doc-meta,
.doc-date {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Les actions restent visibles : les masquer jusqu'au survol les rend
   introuvables au doigt, et ce sont les seules commandes de la ligne.
   `.gf-row-actions` du kit les estompe au repos — on le neutralise ici. */
.doc-row .doc-actions {
  opacity: 1;
}

.doc-actions {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

/* En-tête de colonnes : dit ce que chaque colonne contient, ce qu'une suite
   de valeurs sans titre ne pouvait pas faire. */
.doc-head {
  display: grid;
  /* Même source que les lignes — `inherit` ne marchait pas : le parent
     n'est pas une grille, donc l'en-tête retombait en pile verticale. */
  grid-template-columns: var(--doc-cols);
  gap: 1rem;
  padding: 0 0.75rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* --- listes : variantes ---------------------------------------------------- */

/* --- éditeur : document + outils ------------------------------------------- */

.doc-stage {
  display: grid;
  gap: 1rem;
  align-items: start;
}

/* L'éditeur de modèles travaille source à gauche, rendu à droite. En dessous
   de 60rem les deux se superposent : un éditeur HTML sur 327 px de large ne
   rend service à personne. */
.doc-stage.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.doc-paper {
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  overflow: hidden;
  background: #fff;
}

.doc-paper iframe {
  display: block;
  width: 100%;
  border: 0;
  /* Hauteur de la zone de lecture. Le document a son propre défilement ;
     `dvh` plutôt que `vh` pour que la barre d'adresse mobile, qui apparaît
     et disparaît, ne coupe pas le bas de la page. */
  height: calc(100dvh - 17rem);
  min-height: 24rem;
}

.doc-source {
  width: 100%;
  font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  height: calc(100dvh - 24rem);
  min-height: 18rem;
  resize: vertical;
  /* Un éditeur de code ne se corrige pas tout seul. */
  tab-size: 2;
}

/* --- barre d'actions ------------------------------------------------------- */

/* Collante en bas : le document fait plusieurs milliers de pixels, et les
   commandes se trouvaient au-delà. On ne devrait jamais avoir à chercher
   « Enregistrer ». */
.doc-actions-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  /* `env()` : sur un téléphone à encoche, la barre du bas mange sinon les
     boutons. */
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--background);
}

.doc-actions-bar .doc-spacer { margin-left: auto; }

/* Groupe secondaire : présent, mais pas au même niveau que l'action du jour. */
.doc-actions-bar .doc-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- état et repères ------------------------------------------------------- */

.doc-status {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.doc-status.is-error { color: var(--destructive); font-weight: 500; }

/* Bandeau d'information (document émis, lecture seule, champs manquants). */
.doc-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--muted);
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.doc-note strong { color: var(--foreground); font-weight: 600; }

/* --- cibles tactiles ------------------------------------------------------- */

/* 24 px est le minimum WCAG 2.2 AA ; sur une surface tactile on vise 44.
   Les boutons de ligne et les cases à cocher passaient sous les deux. */
.doc-row .btn,
.doc-actions-bar .btn,
.doc-note .btn {
  min-height: 1.75rem;
  /* Supprime le délai de 300 ms du double-tap et le surlignage bleu. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.doc-check {
  width: 1.15rem;
  height: 1.15rem;
  touch-action: manipulation;
}

/* --- mobile ---------------------------------------------------------------- */

@media (max-width: 60rem) {
  /* La ligne devient une fiche : identité en haut, méta en dessous, actions
     en bas. Les mêmes informations, empilées, sans défilement horizontal. */
  .doc-row {
    gap: 0.15rem 0.6rem;
    padding: 0.7rem;
    border-color: var(--border);
  }

  .doc-row > .doc-ref { grid-column: 1; }
  .doc-row > .doc-identity { grid-column: 1 / -1; order: 2; }
  .doc-row > .doc-meta { grid-column: 1 / -1; order: 3; white-space: normal; }
  .doc-row > .doc-state { grid-column: 2; grid-row: 1; justify-self: end; }
  .doc-row > .doc-date { grid-column: 1 / -1; order: 4; }
  .doc-row > .doc-actions { grid-column: 1 / -1; order: 5; justify-content: flex-start; margin-top: 0.35rem; }

  /* Toutes les listes retombent sur la même fiche à deux colonnes. */
  .doc-list,
  .doc-list.is-templates,
  .doc-list.is-variables,
  .doc-list.is-versions { --doc-cols: minmax(0, 1fr) max-content; }

  /* Les en-têtes de colonnes n'ont plus de colonnes à nommer. */
  .doc-head { display: none; }

  .doc-stage.is-split { grid-template-columns: minmax(0, 1fr); }

  .doc-paper iframe {
    height: calc(100dvh - 20rem);
    min-height: 18rem;
  }

  .doc-source { height: 14rem; }

  /* Au doigt, 44 px. */
  .doc-row .btn,
  .doc-actions-bar .btn,
  .doc-note .btn { min-height: 2.5rem; }

  .doc-actions-bar { gap: 0.4rem; }
  .doc-actions-bar .btn { flex: 1 1 auto; justify-content: center; }
  .doc-actions-bar .doc-spacer { display: none; }
}

/* --- impression ------------------------------------------------------------ */

/* On n'imprime pas la coquille : le document s'exporte en PDF par le serveur
   (services/api/src/documents/pdf.js). Si quelqu'un imprime la page quand
   même, qu'il n'obtienne pas la barre d'outils. */
@media print {
  .doc-actions-bar,
  .doc-note,
  .doc-head { display: none !important; }
  .doc-paper { border: 0; }
}