/* =====================================================================
   VISION PME — L'agenda des rappels

   Une grille : une colonne d'heures, sept colonnes de jours. Ce qu'on y
   cherche n'est pas un rendez-vous précis — la liste du tableau le fait
   mieux — mais LES TROUS. La mise en forme sert donc d'abord à
   distinguer trois états au premier regard : fermé, libre, plein.
   ===================================================================== */

.ag-nav { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ⚠️ DEUX CORRECTIFS QUI NE MARCHENT QU'ENSEMBLE. Mesure avant de les
   comprendre : a 375 px de fenetre, la grille faisait 739 px et poussait
   la PAGE entiere de cote, en-tete et menu compris.

   1. Le defilement appartient a un CONTENEUR, pas a la grille. Des
      colonnes a minimum (`minmax(6rem, 1fr)`) imposent ce minimum comme
      largeur minimale de la grille ; `overflow-x` posé sur elle ne l'en
      empeche pas.

   2. `#ag-zone` doit accepter d'etre plus etroit que son contenu. C'est
      LUI l'enfant direct de `#page-content`, qui est une grille CSS — et
      un enfant de grille a `min-width: auto`. Mettre `min-width: 0` sur
      le conteneur de defilement seul ne servait a rien : mesure apres ce
      demi-correctif, la grille faisait 884 px au lieu de 739. Meme piege
      qu'au tableau des appels (0162), un cran plus haut dans l'arbre. */
#ag-zone { min-width: 0; }

.ag-defilement {
  min-width: 0;
  overflow-x: auto;
  padding-bottom: var(--s-2);
}

.ag-grille {
  display: grid;
  /* La colonne des heures est fixe ; les jours se partagent le reste. */
  grid-template-columns: 4.5rem repeat(var(--ag-jours, 7), minmax(7rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  overflow: hidden;
  /* Au moins toute la largeur disponible, plus si les colonnes le
     demandent — c'est le conteneur qui fait defiler le surplus. */
  width: max-content;
  min-width: 100%;
}

.ag-coin, .ag-jour, .ag-heure, .ag-case { background: var(--surface-1); }

.ag-jour {
  padding: 8px 6px 6px; text-align: center;
  font: 600 var(--fs-xs)/1.3 var(--font-body);
  text-transform: capitalize;
}
.ag-jour b { display: block; }
.ag-jour span { color: var(--text-muted); font-weight: 500; }

/* Le compte de la journée : « 2/14 ». Petit, en chiffres alignés, sous
   la date — c'est ce qu'on balaye des yeux avant de promettre un
   rappel. */
.ag-jour em {
  display: inline-block; margin-top: 3px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2);
  font: 700 .68rem/1.6 var(--font-body);
  font-variant-numeric: tabular-nums;
  font-style: normal;
  color: var(--text-muted);
}
.ag-jour em i { font-style: normal; font-weight: 500; opacity: .65; }
.ag-jour em.est-ferme {
  background: transparent; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}

.ag-jour.est-aujourdhui { background: var(--green); color: #fff; }
.ag-jour.est-aujourdhui span { color: #e2fbf1; }
.ag-jour.est-aujourdhui em { background: rgba(255, 255, 255, .22); color: #fff; }

.ag-heure {
  padding: 8px 6px; text-align: right;
  font: 600 var(--fs-xs)/1.3 var(--font-body);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Seules les heures pleines portent leur nom ; les demies restent vides.
   Quatorze étiquettes au lieu de vingt-huit, et la lecture verticale
   redevient possible. */
.ag-heure.est-heure-pleine { color: var(--text); }

.ag-case {
  position: relative;          /* pour le trait de « maintenant » */
  padding: 4px;
  min-height: 46px;
  display: flex; flex-direction: column; gap: 3px;
}

/* ── LE TRAIT DE « MAINTENANT » ─────────────────────────────────────
   Un agenda sans repère d'heure oblige à chercher la ligne du regard à
   chaque coup d'œil. Il est posé DANS la case qui contient l'heure
   courante, à `--ag-now` de sa hauteur, plutôt qu'en absolu par-dessus
   la grille : la hauteur des cases est décidée par le CSS, et le JS n'a
   pas à la connaître. */
.ag-case.est-maintenant::after {
  content: "";
  position: absolute; left: 0; right: 0;
  top: var(--ag-now, 0%);
  height: 2px;
  background: var(--danger);
  z-index: 2;
  pointer-events: none;
}
.ag-case.est-maintenant::before {
  content: "";
  position: absolute; left: -3px;
  top: var(--ag-now, 0%);
  width: 7px; height: 7px; margin-top: -2.5px;
  border-radius: 50%;
  background: var(--danger);
  z-index: 2;
  pointer-events: none;
}

/* Fermé : hachuré, pas seulement gris. Un gris de plus se confondrait
   avec « libre » sur un écran mal réglé. */
.ag-case.est-fermee {
  background: repeating-linear-gradient(
    45deg, var(--surface-2), var(--surface-2) 5px,
    transparent 5px, transparent 10px);
}
.ag-case.est-pleine { background: var(--ok-soft, #e8fbf3); }

/* Une case libre et ouverte reste la surface la plus calme de la
   grille : c'est le fond sur lequel les rendez-vous ressortent. */
.ag-case:not(.est-fermee):hover { background: var(--surface-2); }

/* ── LES PLACES LIBRES, EN POINTS ───────────────────────────────────
   « 2 places » écrit dans soixante-dix cases disait la même chose
   partout, donc ne disait plus rien — et noyait les rendez-vous, qui
   sont ce qu'on cherche. Un point par place se compte d'un coup d'œil,
   et l'info-bulle garde les mots pour qui veut les lire. */
.ag-places {
  display: flex; gap: 3px;
  margin-top: auto; padding: 2px;
}
.ag-places i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border);
}
/* Au survol, la case se réveille : c'est là qu'on décide d'y mettre
   quelqu'un. */
.ag-case:hover .ag-places i { background: var(--green); }

/* Le rendez-vous est un BOUTON depuis qu'il ouvre la fiche : il doit
   rester une pastille a l'oeil, mais dire au doigt et au clavier qu'on
   peut cliquer. */
.ag-rdv {
  display: block; width: 100%; text-align: left;
  border: 0; cursor: pointer;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font: 600 var(--fs-xs)/1.3 var(--font-body);
  overflow: hidden;
}
.ag-rdv:hover { filter: brightness(1.08); }
.ag-rdv:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* Sans identifiant de prospect, il n'y a pas de fiche a ouvrir : le
   bouton reste lisible mais cesse de promettre un clic. */
.ag-rdv:disabled { cursor: default; opacity: .85; }
.ag-rdv b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-rdv span {
  display: block; font-weight: 400; opacity: .85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-rdv em { display: none; }

/* Un rendez-vous dépassé. Il ne disparaît pas de l'agenda — c'est
   justement celui qu'il faut voir. */
.ag-rdv.est-en-retard { background: var(--danger); }

@media (max-width: 900px) {
  .ag-grille { grid-template-columns: 3.6rem repeat(var(--ag-jours, 7), minmax(6rem, 1fr)); }
  .ag-case { min-height: 40px; }
}

/* Le compte de la semaine, dans le sous-titre. */
.ag-retard { color: var(--danger); }

/* ─────────────────────────────────────────────────────────────────────
   UN RENDEZ-VOUS HORS DES HEURES D'OUVERTURE (31 août 2026)
   ─────────────────────────────────────────────────────────────────────
   Cinq rappels sur sept étaient comptés dans l'en-tête et dessinés nulle
   part : 15 h 26 (minute hors du pas de 30 min), 17 h 00 deux fois (la
   borne de fin n'a pas de ligne) et 04 h 00 deux fois. La grille les
   affiche désormais tous. Ceux qui tombent hors ouverture doivent se
   distinguer au premier coup d'œil — sinon on croit que l'agenda s'est
   mis à ouvrir la nuit. */
.ag-rdv.est-hors-ouverture {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px dashed var(--warn);
}
.ag-rdv.est-hors-ouverture:hover { filter: brightness(0.98); }

/* L'heure exacte, quand elle ne coïncide pas avec la ligne. Petite mais
   lisible : c'est elle qui évite de rappeler quelqu'un à la mauvaise
   minute. */
.ag-rdv-heure {
  display: block;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.85;
}

/* Le « ! » de l'en-tête du jour : il y a des rendez-vous hors ouverture
   dans cette colonne. */
.ag-jour em.a-hors-ouverture { color: var(--warn); }
.ag-jour .ag-hors {
  margin-left: 2px;
  color: var(--warn);
  font-weight: 800;
}

/* ─────────────────────────────────────────────────────────────────────
   TROIS ÉTATS DE RENDEZ-VOUS (0216)
   ─────────────────────────────────────────────────────────────────────
   L'agenda n'affichait que les rappels EN ATTENTE, et `rappel_le` est
   écrasé à chaque appel enregistré : honorer un rendez-vous l'effaçait,
   y compris des semaines passées. 38 rendez-vous avaient été pris pour
   la semaine du 24 août ; il en restait un. L'agenda lit maintenant aussi
   `appels_prospects`, qui n'a jamais rien perdu.

   Les trois états doivent se distinguer sans lire : ce qui reste à faire
   garde le vert plein, le reste s'efface. */
.ag-rdv.est-honore {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* « Sans suite » : l'heure est passée et aucun appel n'a suivi. Ce n'est
   pas du passé tranquille, c'est un client qui attend encore. */
.ag-rdv.est-sans-suite {
  background: transparent;
  color: var(--danger);
  border: 1px dashed var(--danger);
}

.ag-rdv.est-honore:hover, .ag-rdv.est-sans-suite:hover { filter: none; opacity: 0.85; }

/* Le « +n » de l'en-tête du jour : n rendez-vous déjà passés, qui
   n'occupent aucune place. */
.ag-jour .ag-passes {
  margin-left: 3px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   UN RAPPEL QUI APPARTIENT À QUELQU'UN D'AUTRE (0220)
   ─────────────────────────────────────────────────────────────────────
   « Certains vont simplement dans l'agenda pour appeler les rappels des
   autres. » Le verrou vit en base et refuse la réservation — mais un
   refus au moment de composer arrive trop tard : l'agent a déjà ouvert
   la fiche et lu l'historique. La carte le dit avant le clic.

   Assombrie et rayée en biais, pas cachée : l'agenda doit rester une vue
   complète de la semaine de l'équipe. On voit que le créneau est pris,
   on voit par qui, et on passe. */
.ag-rdv.est-verrouille {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  opacity: 0.9;
  cursor: not-allowed;
}
.ag-rdv.est-verrouille:hover { opacity: 1; filter: none; }

/* Le nom du propriétaire, sous celui du client. C'est l'information qui
   règle la question — « c'est à Gilles » — sans avoir à survoler. */
.ag-rdv-pour {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.9;
}
.ag-rdv-pour svg { width: 11px; height: 11px; }