section[class$="-page"] {
  display: grid;
  gap: var(--kk-space-6);
  width: 100%;
  max-width: 100rem;
  margin-inline: auto;
}

section[class$="-page"] > header:first-child {
  min-height: 4.75rem;
}

section[class$="-page"] h1 {
  color: var(--kk-color-text);
  font-size: clamp(1.65rem, 2.2vw, var(--kk-font-size-2xl));
  font-weight: var(--kk-font-weight-extrabold);
  letter-spacing: -0.045em;
}

/* ---------- Onglets applicatifs ---------- */
.k-tabstrip {
  border: 0;
  color: var(--kk-color-text);
  background: transparent;
}

.k-tabstrip > .k-tabstrip-items-wrapper {
  border-bottom: 1px solid var(--kk-color-border-strong);
}

.k-tabstrip .k-tabstrip-item {
  color: var(--kk-color-text-muted);
  font-weight: var(--kk-font-weight-medium);
}

.k-tabstrip .k-tabstrip-item.k-active {
  color: var(--kk-color-brand);
  font-weight: var(--kk-font-weight-bold);
}

.k-tabstrip .k-tabstrip-content {
  padding: var(--kk-space-4) 0 0;
  border: 0;
  background: transparent;
}

/* Les éléments internes d'authentification (auth-form__span, auth-form__full…)
   contiennent aussi « -form » : ils ne doivent pas recevoir le padding d'un formulaire. */
.card__body:has(> form:not(.login-form):not(.auth-form):not(.auth-form *)),
.card__body:has(> [class*="-form"]:not(.login-form):not(.auth-form):not(.auth-form *)) {
  padding: 0 !important;
}

form:not(.login-form):not(.auth-form):not(.auth-form *),
[class*="-form"]:not(.login-form):not(.auth-form):not(.auth-form *) {
  background: var(--kk-color-form-area-bg);
  padding: var(--kk-space-6);
}

/* .field__input / .field__label / .field__required : déplacés dans
   KostKat.Presentation.Shared/wwwroot/css/forms.css — TextField est un composant partagé avec
   KostKat.Mobile, son style de champ ne peut plus vivre dans une feuille locale au desktop. */

/* .app-date-picker : déplacé dans css/components/telerik-inputs.css (partagé) — le composant
   AppDatePicker est commun, sa largeur ne peut pas dépendre d'une feuille locale au desktop. */

/* Notification de succès — comportement et couleur alignés sur Club Optic. Le popup Telerik est
   rendu hors du composant Razor : cette règle doit donc rester dans la feuille globale. */
.k-notification-success {
  background-color: #77c376 !important;
  border-color: #77c376 !important;
  color: #000 !important;
}

/* Largeur commune à tous les popups (succès/erreur/avertissement/info) : les messages n'ont pas
   tous la même longueur ("Votre choix a bien été mis à jour." vs un message d'erreur détaillé),
   sans cette règle chaque popup se dimensionne à son propre contenu et change de taille d'un écran
   à l'autre — même incohérence visuelle que les boutons Activer/Désactiver (cf. ToggleActiveButton).
   Largeur FIXE (comme ToggleActiveButton) et non min/max : un min-width laisse quand même la boîte
   respirer selon le texte pour tout ce qui dépasse le plancher, ce qui n'est pas ce qu'on veut ici.
   700px = la plus longue phrase de succès connue de l'appli ("Les codes couleur des dépenses ont
   été mis à jour avec succès.", mesurée à ~697px avec icône + bouton fermer) tient sur une seule
   ligne.

   CE QUI SE PASSE AU-DELÀ A CHANGÉ. Un message plus long était tronqué avec "…" : la largeur était
   préservée, mais la fin de la phrase disparaissait — sur un refus de changement de formule, ce
   qu'on cachait était précisément la raison du refus. Il revient désormais à la ligne. La largeur
   ne bouge toujours pas d'un popup à l'autre, c'est la hauteur qui s'adapte.

   Le point d'attention est la LANGUE : la même phrase mesure jusqu'à 30 % de plus en allemand ou en
   espagnol qu'en anglais. Une règle qui tient sur la longueur mesurée d'un texte français ne tient
   donc pour aucune traduction — d'où le retour à la ligne plutôt qu'un seuil.

   max-width : sous 700px de fenêtre (mobile, fenêtre réduite), la largeur fixe déborderait de
   l'écran et emporterait le bouton de fermeture avec elle. */
.k-notification-container .k-notification {
  display: flex !important;
  width: 700px !important;
  max-width: calc(100vw - 2rem) !important;
  white-space: normal !important;
  padding: 15px 30px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Rien n'est masqué : le texte occupe la largeur disponible puis passe à la ligne suivante.
   `overflow-wrap: anywhere` ne sert qu'au cas sans espace — une URL, un identifiant technique
   renvoyé par le serveur — qui, seul, dépasserait la largeur sans jamais pouvoir se couper. */
.k-notification-container .k-notification .k-notification-content {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
table[class$="-table"]:not([class*="k-"]),
table[class*="-table "]:not([class*="k-"]) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--kk-color-text-muted);
  font-size: 0.82rem;
}

table[class$="-table"]:not([class*="k-"]) th,
table[class*="-table "]:not([class*="k-"]) th {
  padding: 0.85rem 1rem;
  color: var(--kk-color-text-subtle);
  background: #fbfcfe;
  border-bottom: 1px solid var(--kk-color-border);
  font-size: 0.68rem;
  font-weight: var(--kk-font-weight-bold);
  letter-spacing: 0.055em;
  text-align: left;
  text-transform: uppercase;
}

table[class$="-table"]:not([class*="k-"]) td,
table[class*="-table "]:not([class*="k-"]) td {
  padding: 0.9rem 1rem;
  background: var(--kk-color-surface);
  border-bottom: 1px solid var(--kk-color-border);
  vertical-align: middle;
}

table[class$="-table"]:not([class*="k-"]) tbody tr:hover td,
table[class*="-table "]:not([class*="k-"]) tbody tr:hover td { background: #fbfdff; }

/* ---------- Listes Telerik communes ---------- */
.app-grid.k-grid {
  --kk-grid-header-height: calc(2.25rem + 1rem);
  width: 100%;
  overflow: hidden;
  color: var(--kk-color-text-muted);
  background: var(--kk-color-surface);
  border: 1px solid var(--kk-color-border-strong);
  border-radius: var(--kk-radius-md);
  font-family: var(--kk-font-family);
  font-size: 0.82rem;
}

.app-grid .k-grid-header,
.app-grid .k-grid-header-wrap,
.app-grid .k-grid-header .k-table {
  width: 100%;
}

.app-grid .k-table-th {
  font-size: 0.75rem;
  font-weight: var(--kk-font-weight-bold);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  background: var(--kk-color-canvas);
  border-block-end: 2px solid var(--kk-color-border-strong);
}

.app-grid .k-grid-header .k-table-th {
  height: var(--kk-grid-header-height);
  text-align: center;
  vertical-align: middle;
}

.app-grid .k-grid-header .k-table-th .k-cell-inner,
.app-grid .k-grid-header .k-table-th .k-cell-inner > .k-link {
  width: 100%;
  justify-content: center;
}

.app-grid .k-grid-header .k-table-th .k-cell-inner:has(> .k-header-column-menu) > .k-link,
.app-grid .k-grid-header .k-table-th .k-cell-inner:has(> .k-grid-header-menu) > .k-link,
.app-grid .k-grid-header .k-table-th .k-cell-inner:has(> .k-grid-filter) > .k-link {
  box-sizing: border-box;
  padding-inline: 2.5rem;
}

.app-grid .k-grid-header .k-table-th .k-cell-inner {
  position: relative;
  min-height: 2.25rem;
}

.app-grid .k-grid-header .k-table-th .k-cell-inner > .k-header-column-menu,
.app-grid .k-grid-header .k-table-th .k-cell-inner > .k-grid-header-menu,
.app-grid .k-grid-header .k-table-th .k-cell-inner > .k-grid-filter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  transform: translateY(calc(-50% - 2px));
}

.app-grid .k-grid-header .k-table-th .app-grid-action {
  margin-inline: auto;
}

/* Séparateurs de colonnes et de lignes — sinon hérités d'une bordure quasi invisible. */
.app-grid .k-table-th,
.app-grid .k-table-td {
  border-color: var(--kk-color-border-strong);
  border-inline-end: 1px solid var(--kk-color-border-strong);
}

.app-grid .k-table-td { border-block-end: 1px solid var(--kk-color-border-strong); }

.app-grid .k-table-th:last-child,
.app-grid .k-table-td:last-child { border-inline-end: 0; }

/* Zébrage des lignes pour distinguer clairement la structure du tableau.
   Les DEUX parités sont peintes, et non la seule paire : telerik-overrides.css mappe désormais
   --kendo-color-surface-alt sur --kk-color-row-alt (nécessaire au thème sombre), or Kendo applique
   ce token au fond de la <table> elle-même. Une ligne impaire, transparente, affichait donc déjà la
   couleur du zébrage — les deux parités étaient de la même couleur et le zébrage était invisible,
   exactement ce que l'ancien commentaire de telerik-overrides.css annonçait. Poser la couleur de
   surface sur les lignes impaires rend le contraste indépendant du fond du tableau. */
.app-grid tbody tr { background: var(--kk-color-surface); }
.app-grid tbody tr:nth-child(even) { background: var(--kk-color-row-alt); }

.app-grid tbody tr { transition: background-color var(--kk-duration-fast); }


/* Pagination en cours de chargement : la navigation entière est neutralisée le temps que la page
   demandée arrive. Le pagineur Telerik rend ses propres boutons — notre composant Button, qui porte
   l'indicateur commun, ne peut pas y être injecté — d'où une neutralisation en bloc plutôt qu'un
   état par bouton. L'opacité reste haute : c'est une attente, pas une interdiction. */
.app-pager--busy .k-pager {
  cursor: progress;
  opacity: 0.7;
  pointer-events: none;
}

/* L'indicateur commun, posé à côté de la navigation. Il garde sa couleur propre — bleu en clair,
   blanc en sombre — plutôt que le gris discret du pagineur : c'est le seul élément qui bouge
   pendant l'attente, il doit se voir. */
.app-pager__busy {
  display: inline-flex;
  align-items: center;
  margin-left: var(--kk-space-3);
}

.app-grid .k-pager,
.app-pager .k-pager {
  min-height: 3.75rem;
  padding: 0.75rem 1rem;
  color: var(--kk-color-text-subtle);
  background: var(--kk-color-surface);
  border-color: var(--kk-color-border);
}

.app-grid .k-pager-numbers .k-button,
.app-pager .k-pager-numbers .k-button {
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--kk-radius-sm);
}

.app-grid .k-pager-numbers .k-selected,
.app-pager .k-pager-numbers .k-selected,
.app-grid .k-pager-numbers [aria-current="page"],
.app-pager .k-pager-numbers [aria-current="page"] {
  color: var(--kk-white) !important;
  background: var(--kk-primary) !important;
  border-color: var(--kk-primary) !important;
  font-weight: var(--kk-font-weight-bold);
}

.app-grid .k-grid-toolbar .k-button-solid-base {
  color: var(--kk-white);
  background: var(--kk-primary);
  border-color: var(--kk-primary);
}

.app-grid .k-grid-toolbar .k-button-solid-base:hover {
  color: var(--kk-white);
  background: var(--kk-primary-hover);
  border-color: var(--kk-primary-hover);
}

.app-grid .k-grid-toolbar .k-input-inner:focus-visible {
  outline: none;
}

.app-grid .k-pager-info,
.app-pager__info {
  margin-left: auto;
  color: var(--kk-color-text-subtle);
  font-size: 0.75rem;
  font-weight: var(--kk-font-weight-medium);
  white-space: nowrap;
}

.app-pager {
  display: flex;
  align-items: center;
  gap: var(--kk-space-4);
  border-top: 1px solid var(--kk-color-border);
}

.app-pager .k-pager {
  flex: 1 1 auto;
  border: 0;
}

.app-pager__info { padding-right: 1rem; }


.k-table-th:has(.app-grid-action) .k-cell-inner {
  display: flex;
  justify-content: center;
}

/* Composant partagé Tooltip.razor — même pattern que Club Optic (TelerikTooltip + title="" sur
   l'élément visé) : Telerik gère lui-même le style et le positionnement de la bulle. */
.app-tooltip-target {
  display: inline-flex;
}

/* Tooltip enveloppe aussi bien des boutons actifs (Modifier, Supprimer…) que désactivés : le clic
   doit rester fonctionnel sur les premiers, donc ce n'est QUE le contenu réellement désactivé qui
   perd pointer-events — sinon lui seul reste la cible du survol et le tooltip ne se déclenche
   jamais (un <button disabled> ne reçoit pas d'événement de survol dans la plupart des
   navigateurs). Les trois sélecteurs couvrent le natif, TelerikButton (k-disabled) et aria-disabled
   selon le composant sous-jacent. */
.app-tooltip-target > *:disabled,
.app-tooltip-target > .k-disabled,
.app-tooltip-target > [aria-disabled="true"] {
  pointer-events: none;
}

/* Tous les tooltips applicatifs utilisent la couleur de marque, quel que soit l'écran appelant. */
.k-tooltip {
  border-radius: var(--kk-radius-sm);
  border-width: 0;
  box-shadow: none;
  background: var(--kk-color-brand);
  color: var(--kk-color-on-brand);
}

.k-callout {
  display: none;
}


.k-grid {
  font-family: var(--kk-font-family);
}

.k-button-solid-primary {
  color: var(--kk-white);
  background: var(--kk-primary);
  border-color: var(--kk-primary);
}

.k-dialog,
.k-window {
  overflow: hidden;
  border: 1px solid var(--kk-color-border);
  border-radius: var(--kk-radius-lg);
  box-shadow: var(--kk-shadow-lg);
}

.k-window-titlebar {
  padding: 1rem 1.25rem;
  color: var(--kk-color-text);
  background: var(--kk-color-surface);
  border-bottom: 1px solid var(--kk-color-border);
}

[role="alert"] {
  color: var(--kk-color-error);
}

/* ---------- États ---------- */
.loading,
.empty { min-height: 11rem; }

.error {
  min-height: 9rem;
  align-content: center;
}

@media (max-width: 48rem) {
  section[class$="-page"] > header:first-child { min-height: auto; }
  .k-grid { overflow-x: auto; }
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--kk-filter-field-gap);
  padding-bottom: var(--kk-space-5);
  margin-bottom: var(--kk-space-5);
  border-bottom: 1px solid var(--kk-color-border);
}

/* UN SEUL GABARIT pour tous les champs de filtre, dans toutes les barres — liste des documents,
   préparation d'un rapport, archives, en-têtes des tableaux de bord — et quel que soit le contrôle,
   liste déroulante ou date.

   Une barre mêlait jusqu'ici trois largeurs (listes étirables de 8 à 12 rem, valeurs courtes à
   9 rem, dates à 10 rem), deux hauteurs et deux arrondis : côte à côte, les champs se lisaient comme
   des familles différentes, et les libellés des dates ne tombaient pas sur la ligne des autres.
   Seule la liste des documents y échappait, par une classe à part — c'est désormais la règle.

   Toutes les mesures viennent de tokens.css : changer le gabarit, c'est changer un jeton. La valeur
   trop longue est coupée à l'ellipsis, et se lit en entier dans la liste ouverte. */
.filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--kk-space-1);
  flex: 0 0 var(--kk-filter-field-width);
  width: var(--kk-filter-field-width);
  min-width: 0;
}

/* Le contrôle : même hauteur, même arrondi, même taille de texte pour la liste et pour la date.
   La hauteur est IMPOSÉE, et non plus déduite du texte et du rembourrage : deux contrôles rendus par
   deux bibliothèques ne tombaient d'accord que tant que polices, interlignes et rembourrages
   restaient identiques — ils ne l'étaient pas, d'où 40 px d'un côté et 48 de l'autre. Chaque
   contrôle centre lui-même son texte, d'où l'absence de rembourrage vertical.

   Trois classes par sélecteur, et ce n'est pas du zèle. AppSelect.razor.css est une feuille SCOPÉE,
   chargée après celle-ci (`KostKat.WebApp.styles.css` ferme la liste dans App.razor) : à spécificité
   égale, elle l'emporterait en silence. Côté date, le thème et telerik-inputs.css écrivent déjà
   `.k-input.k-rounded-md`. */
.filter-bar__field .app-select .app-select__trigger,
.filter-bar__field > .app-date-picker.k-input {
  height: var(--kk-field-height);
  min-height: 0;
  border-radius: var(--kk-filter-field-radius);
  font-size: var(--kk-font-size-md);
}

.filter-bar__field .app-select .app-select__trigger {
  padding: 0 var(--kk-field-padding-inline);
}

.filter-bar__field > .app-date-picker.k-input .k-input-inner {
  padding-block: 0;
}

.filter-bar__field label {
  color: var(--kk-navy);
  font-size: 0.8rem;
  font-weight: var(--kk-font-weight-semibold);
}

.filter-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kk-space-2);
  margin-left: auto;
}

/* Le gabarit des champs vaut jusqu'aux écrans étroits : la barre se replie sur plusieurs lignes
   plutôt que d'étirer ses champs. L'ancienne règle « deux par ligne » les étirait, et laissait le
   dernier champ d'une ligne impaire occuper toute la largeur, seul de sa taille. */
@media (max-width: 60rem) {
  .filter-bar__actions { width: 100%; margin-left: 0; }
}

/* Sur téléphone, un champ par ligne : tous pleine largeur, donc toujours égaux entre eux. */
@media (max-width: 45rem) {
  .filter-bar__field,
  .filter-bar__actions,
  .filter-bar__actions .btn {
    flex-basis: 100%;
    width: 100%;
  }
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* .form-grid-2col : dans forms.css, partagé avec le Mobile qui utilise la même grille. */

.form-global-error {
  background: var(--kk-color-error-bg);
  color: var(--kk-color-error);
  border-radius: 0.6875rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.form-actions {
  display: flex;
  /* Centré : même place pour l’action de tous les formulaires de l’application. */
  justify-content: center;
  gap: var(--kk-space-3);
}

.delete-error-banner {
  color: var(--kk-color-error);
  font-weight: 600;
}


/* Champ de recherche des grilles paginées par le SERVEUR (AppGrid). Même gabarit que l'outil natif
   de Telerik qu'il remplace, pour que la barre d'outils garde son alignement. */
.app-grid__search {
  width: 280px;
  max-width: 100%;
  padding: 0.45rem 0.6rem;
  color: var(--kk-color-text);
  background: var(--kk-color-input-bg);
  border: 1px solid var(--kk-color-input-border);
  border-radius: var(--kk-radius-sm);
  font: inherit;
  font-size: 0.85rem;
}

.app-grid__search:focus-visible {
  outline: 2px solid var(--kk-color-focus);
  outline-offset: 1px;
}

/* Zone de données d'une grille en cours de rechargement : l'indicateur commun tient la hauteur,
   la barre d'outils et les filtres restent en place. */
.app-grid__busy {
  display: grid;
  place-items: center;
  padding: var(--kk-space-6);
}