/* `minmax(0, 1fr)` et non la piste implicite `auto` : une piste `auto` ne descend pas sous la
   largeur minimale de son contenu, et un tableau ou une barre d'outils trop larges élargissaient
   toute la page au-delà de l'écran au lieu de défiler chez eux. */
section[class$="-page"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  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); }

/* Colonne d'actions toujours visible. Les largeurs de colonnes sont fixes (GridColumnWidths) :
   quand leur somme dépasse la largeur disponible — portable de 13 pouces, tablette —, la grille
   défile horizontalement chez elle, et la dernière colonne, celle des actions, était la première
   coupée, sans indice qu'il restait de quoi défiler (les barres de défilement de macOS sont
   masquées au repos). Elle reste désormais collée au bord droit, les données défilent dessous.
   Dès la tablette (768 px) ; pas sur téléphone, où une colonne d'actions de 300 ou 400 px
   occuperait tout l'écran. Le fond est repris de la ligne (zébrage, survol), sinon les cellules
   défilant dessous transparaîtraient. */
@media (min-width: 45.0625rem) {
  .app-grid .k-grid-header .k-table-th:last-child,
  .app-grid .k-grid-content .k-table-td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -8px 0 10px -8px rgba(2, 25, 57, 0.22);
  }

  .app-grid .k-grid-content .k-table-td:last-child { background: inherit; }
}


/* 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);
}

/* Téléphone : la navigation, le nombre de lignes par page et le total passent à la ligne — le
   pagineur Telerik coupait ce qui ne tenait pas sur une seule (`overflow: hidden`). */
@media (max-width: 40rem) {
  .app-grid .k-pager,
  .app-pager .k-pager {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--kk-space-2);
    padding-inline: 0.5rem;
  }
}

.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;
}

/* Écran étroit : les outils de la barre passent à la ligne au lieu de sortir du cadre — la barre
   Telerik (mode défilant) coupe ce qui dépasse. Seule la liste des outils passe à la ligne, pas la
   barre elle-même : celle-ci porte un pseudo-élément de hauteur minimale qui occuperait alors une
   ligne vide au-dessus des outils. Règles globales et non dans AppGrid.razor.css : `.app-grid` est
   posée sur l'élément rendu par TelerikGrid, qui ne porte pas l'attribut de portée d'AppGrid. */
.app-grid .k-grid-toolbar .k-toolbar-items,
.app-grid .k-grid-toolbar .k-toolbar-items-list {
  flex-wrap: wrap;
}

/* Téléphone : la recherche prend la largeur restante de sa ligne, les filtres de fin de barre
   une ligne entière. */
@media (max-width: 40rem) {
  .app-grid .k-grid-toolbar .k-toolbar-item:has(.app-grid__search) { flex: 1 1 12rem; }
  .app-grid .app-grid__search { width: 100%; }
  .app-grid .k-grid-toolbar .k-toolbar-item:last-child { flex: 1 1 100%; }
}

.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);
}