/* SPDX-FileCopyrightText: Copyright (C) 2026 Charles Aboudaram */
/* SPDX-License-Identifier: AGPL-3.0-or-later */

/* Les jetons de style du produit, et la feuille qui les emploie
   (ticket nᵒ 178, ADR 0034).

   Avant ce ticket, ces règles vivaient dans un <style> de base.html, avec
   quinze couleurs recopiées à la main à chaque usage — dont cinq gris
   que personne n'avait décidés (#555 #666 #777 #888 #999). Ce fichier ne
   redessine rien : les valeurs sont celles d'hier, seulement nommées une
   fois. Voir docs/design-tokens.md pour l'index de ces jetons, à lire
   avant d'en ajouter un nouveau. */

:root {
  /* Fonds */
  --blanc: #fff;
  --fond-page: #ececec;
  --fond-barre: #3a3a3a;
  --fond-discret: #f2f2f2;
  --fond-tres-discret: #f7f7f7;
  --fond-annule: #e6e6e6;
  --fond-alerte: #fbe9e9;
  --fond-survol-libre: #fafafa;
  --rayure-fermee: #e0e0e0;

  /* Bordures et textes à rôle unique */
  --bordure-entete-carte: #ddd;
  --bordure-pointillee: #c8c8c8;
  --bordure-champ: #bbb;
  --texte-principal: #2b2b2b;
  --texte-attenue: #777;
  --texte-attenue-clair: #888;

  /* Accent */
  --accent: #1a4f8a;
  --accent-alerte: #a33;
  --bordure-accent-examen: #6e6e6e;

  /* Échelle de gris neutres — chacun sert tantôt de fond, tantôt de texte,
     tantôt de bordure selon l'endroit : c'est déjà le cas aujourd'hui, et
     leur donner un nom de rôle unique aurait menti sur l'un des usages. */
  --gris-tres-clair: #eee;
  --gris-clair: #ccc;
  --gris-moyen: #999;
  --gris-moyen-fonce: #666;
  --gris-fonce: #555;
  --gris-tres-fonce: #4a4a4a;
  --gris-presque-noir: #444;

  /* Espacement */
  --espace-page: 16px;

  /* Rayon */
  --rayon-petit: 3px;
  --rayon-champ: 5px;
  --rayon-standard: 6px;

  /* Grille de l'agenda */
  --agenda-hauteur-ligne: 48px;
  --agenda-hauteur-case-min: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: var(--fond-page); color: var(--texte-principal); }
.topbar { background: var(--fond-barre); color: var(--gris-tres-clair); display: flex; align-items: center;
  gap: var(--espace-page); padding: 10px var(--espace-page); }
.topbar a { color: var(--gris-clair); text-decoration: none; padding: 5px 10px;
  border-radius: var(--rayon-champ); font-size: .92em; white-space: nowrap; }
.topbar a:hover { background: var(--gris-fonce); color: var(--blanc); }
.topbar .logo { font-weight: 700; color: var(--blanc); }
.topbar button { background: none; border: 1px solid var(--gris-moyen-fonce); color: var(--gris-clair);
  border-radius: var(--rayon-champ); padding: 5px 10px; font-size: .92em; cursor: pointer; }
/* Le champ de recherche, les onglets et le menu d'identité (ticket nᵒ 175),
   calqués sur maquettes/reglages.html : bandeau compact, identité à droite.
   Le menu s'ouvre sans une ligne de JavaScript — <details> le fait depuis
   toujours (ADR 0014). */
/* L'onglet où l'on se tient se marque (maquettes/reglages.html:16), et
   c'est le sujet même de ce ticket : se repérer. Le nom de l'onglet
   courant arrive de openris.navigation.active_tab — le gabarit compare,
   il ne décide pas. */
.topbar .nav.on { background: var(--gris-fonce); color: var(--blanc); font-weight: 600; }
.topbar .find { display: flex; gap: 6px; align-items: center; }
.topbar .find input { padding: 5px 8px; border: 1px solid var(--gris-moyen-fonce);
  border-radius: var(--rayon-champ); background: var(--gris-tres-fonce); color: var(--gris-tres-clair); font: inherit;
  font-size: .9em; min-width: 200px; }
.topbar .identity { margin-left: auto; position: relative; }
.topbar .identity summary { cursor: pointer; list-style: none; color: var(--gris-clair);
  border: 1px solid var(--gris-moyen-fonce); border-radius: var(--rayon-champ); padding: 5px 10px;
  font-size: .92em; white-space: nowrap; }
.topbar .idmenu { position: absolute; right: 0; top: calc(100% + 6px);
  z-index: 10; background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--rayon-standard);
  min-width: 220px; overflow: hidden; }
.topbar .idmenu a { display: block; color: var(--accent); padding: 9px 14px;
  border-radius: 0; border-bottom: 1px solid var(--gris-tres-clair); }
.topbar .idmenu a:hover { background: var(--fond-discret); color: var(--accent); }
.topbar .idmenu form { padding: 8px 14px; }
.topbar .idmenu button { color: var(--texte-principal); border-color: var(--gris-moyen); }
.head { background: var(--blanc); border-bottom: 1px solid var(--gris-clair); padding: 14px var(--espace-page); }
.head h1 { font-size: 1.2em; display: inline; }
.head .muted { color: var(--texte-attenue); font-size: .9em; }
.cols { display: grid; grid-template-columns: 340px 1fr; gap: 12px;
  padding: 12px var(--espace-page); align-items: start; }
.card { background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--rayon-standard);
  margin-bottom: 12px; }
.card summary, .card .cardtitle { padding: 9px 12px; font-weight: 600;
  font-size: .9em; background: var(--fond-discret); border-bottom: 1px solid var(--bordure-entete-carte);
  border-radius: var(--rayon-standard) var(--rayon-standard) 0 0; cursor: pointer; list-style: none; }
.card .body { padding: 10px 12px; font-size: .9em; }
.row { display: flex; justify-content: space-between; padding: 3px 0; gap: 10px; }
.row .k { color: var(--texte-attenue); white-space: nowrap; }
.warn { border: 2px solid var(--gris-tres-fonce); border-radius: var(--rayon-standard); padding: 6px 10px;
  font-size: .85em; font-weight: 600; background: var(--blanc); margin-bottom: 8px; }
.warn.lifted { border-style: dashed; font-weight: 400; color: var(--texte-attenue); }
.row a { color: var(--accent); text-decoration: none; }
.row a:hover { text-decoration: underline; }
.search .body { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.search label { display: flex; flex-direction: column; gap: 3px; color: var(--texte-attenue); }
.search input { padding: 5px 7px; border: 1px solid var(--bordure-champ); border-radius: var(--rayon-champ);
  font: inherit; }
.search button { padding: 6px 14px; border: 1px solid var(--gris-moyen); border-radius: var(--rayon-champ);
  background: var(--fond-discret); font: inherit; cursor: pointer; }
main { padding: 12px var(--espace-page); }
/* Le menu latéral de l'écran Réglages (ticket nᵒ 175), calqué sur
   maquettes/reglages.html. */
.menu { background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--rayon-standard);
  overflow: hidden; }
.menu a, .menu .menutitle { display: block; padding: 9px 14px;
  border-bottom: 1px solid var(--gris-tres-clair); font-size: .92em; }
.menu .menutitle { font-weight: 600; background: var(--fond-tres-discret); color: var(--gris-presque-noir); }
.menu a { color: var(--accent); text-decoration: none; padding-left: 26px; }
.menu a:hover { background: var(--fond-discret); }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* La grille vivante de l'agenda (ticket nᵒ 158), calquée sur
   maquettes/agenda.html : colonnes = machines, lignes = heures, blocs
   positionnés en pixels par la vue, jamais recalculé ici — `GRID_HOUR_HEIGHT`
   (episodes/views.py) doit rester égal à --agenda-hauteur-ligne, sous peine
   de désaligner les cases des lignes d'heure (ticket nᵒ 176). --agenda-cols
   est posée par agenda.html au nombre de colonnes du jour ; ce n'est pas un
   jeton de ce fichier, c'est une donnée de la page. */
/* La bande de commande (ticket nᵒ 176) : les trois filtres, la date et ses
   flèches, et les liens de la barre (ticket nᵒ 175), sur une ligne unique —
   `.agenda-filters` reprend la mise en forme de `.search label/input/button`
   sans la carte qui les entourait. */
.agenda-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 10px; }
.agenda-bar a.b { padding: 6px 10px; border: 1px solid var(--gris-moyen); border-radius: var(--rayon-standard);
  background: var(--blanc); text-decoration: none; color: var(--texte-principal); font-size: .9em; }
.agenda-bar a.b.main { background: var(--gris-tres-fonce); color: var(--blanc); border-color: var(--gris-tres-fonce);
  font-weight: 600; margin-left: auto; }
.agenda-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.agenda-filters .field { display: flex; flex-direction: column; gap: 3px; color: var(--texte-attenue); font-size: .85em; }
.agenda-filters .field input { width: 110px; }
.agenda-grid { display: grid; grid-template-columns: 48px repeat(var(--agenda-cols, 1), 1fr);
  grid-template-rows: auto repeat(11, var(--agenda-hauteur-ligne)); gap: 1px; background: var(--gris-clair);
  border: 1px solid var(--gris-clair); margin-bottom: 12px; }
.agenda-cell { background: var(--blanc); padding: 2px 4px; font-size: .78em; }
.agenda-hcol { background: var(--fond-discret); font-weight: 600; text-align: center;
  padding: 8px 4px; font-size: .85em; }
.agenda-hrow { background: var(--fond-tres-discret); color: var(--texte-attenue-clair); text-align: right;
  padding-right: 6px; font-size: .8em; }
.agenda-col { position: relative; background: var(--blanc); }
.agenda-blk { position: absolute; left: 2px; right: 2px; overflow: hidden;
  border-radius: var(--rayon-petit); font-size: .76em; }
.agenda-blk.closed { background: repeating-linear-gradient(45deg, var(--gris-tres-clair), var(--gris-tres-clair) 6px,
  var(--rayure-fermee) 6px, var(--rayure-fermee) 12px); display: flex; align-items: center; justify-content: center;
  color: var(--gris-moyen); }
/* L'heure du trou se lit EN HAUT du bloc, jamais centrée : son libellé centré
   se lisait au milieu de l'après-midi en annonçant l'heure du matin —
   l'écran mentait sur l'endroit où le créneau commence. Les trous sont
   désormais découpés en créneaux d'une demi-heure (ticket nᵒ 184, ADR 0035),
   et un créneau trop court laisse tomber son heure plutôt que de la
   superposer : le seuil vit avec le calcul, dans `episodes.views`
   (`FREE_SLOT_HOUR_LEGIBLE_PIXELS`), et il dépend de `padding` et de
   `font-size` ci-dessous — les changer oblige à le remesurer. */
.agenda-blk.free a { display: flex; justify-content: space-between; height: 100%;
  align-items: flex-start; padding: 2px 5px; color: var(--gris-moyen); text-decoration: none;
  border: 1px dashed var(--bordure-pointillee); border-radius: var(--rayon-petit); box-sizing: border-box; }
.agenda-blk.free a:hover { border-color: var(--texte-attenue); color: var(--gris-moyen-fonce); background: var(--fond-survol-libre); }
/* Ticket nᵒ 195 : une case plus courte que --agenda-hauteur-case-min coupait
   son libellé en deux — un rendez-vous de 10 ou 15 minutes ne laisse pas la
   place à une ligne de texte normale (padding + bordures comprises,
   `test_the_agenda_case_minimum_height_matches_the_style_sheet_that_sets_it`).
   **Le plancher grandit la case, jamais son texte** : le libellé reste
   aligné en haut (`display: block`, jamais centré) et la position (`top`)
   continue de désigner l'heure de début — seule la hauteur visible grandit.
   **Ne dépasse jamais la hauteur naturelle d'un rendez-vous de 25 minutes**
   (`_in_pixels(25)`, episodes/views.py) : sans cette borne, le plancher
   grandirait aussi les rendez-vous déjà lisibles, que le critère 3 du ticket
   interdit de dégrader. */
.agenda-blk.line { min-height: var(--agenda-hauteur-case-min); }
.agenda-blk.line a { display: block; height: 100%; box-sizing: border-box;
  border: 1px solid var(--gris-moyen); border-left: 4px solid var(--bordure-accent-examen); border-radius: var(--rayon-petit);
  background: var(--fond-discret); padding: 1px 5px; color: var(--texte-principal); text-decoration: none;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.agenda-blk.line .t { color: var(--gris-fonce); font-weight: 600; margin-right: 3px; }
.agenda-blk.line .exam { color: var(--texte-attenue); }
.agenda-blk.line.online a { border-left-style: double; border-left-width: 6px; }
.agenda-blk.line.cancelled a { background: var(--fond-annule); color: var(--texte-attenue-clair);
  text-decoration: line-through; }
.agenda-blk.line.overbooked a { border-color: var(--accent-alerte); border-left-color: var(--accent-alerte);
  background: var(--fond-alerte); }

/* La liste de travail reste lisible comme un tableau clinique : les colonnes
   ne se collent pas et les textes longs reviennent à la ligne sans déborder. */
.worklist-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.worklist-table th, .worklist-table td { padding: 6px 8px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--gris-tres-clair); overflow-wrap: anywhere; }
.worklist-table th:first-child { width: 80px; }
.worklist-table th:nth-child(2) { width: 170px; }
.worklist-table th:nth-child(4) { width: 220px; }
.worklist-table th:nth-child(5) { width: 190px; }
.worklist-table th:last-child { width: 90px; }