/*
  telerik-inputs.css — habillage KostKat des champs Telerik (TextBox, DatePicker, ComboBox…),
  partagé par KostKat.WebApp et KostKat.Mobile.

  Déplacé ici depuis KostKat.WebApp/wwwroot/css/components.css le 2026-08-27 : seul le Web chargeait
  ces règles, si bien que sur Mobile le halo de focus du thème Bootstrap subsistait par-dessus la
  bordure — deux contours superposés, dont l'arrondi dépassait sur le côté du champ.
*/


/*
  DEUX classes par sélecteur, et ce n'est pas du zèle. Le thème Kendo écrit lui-même
  `.k-input.k-input-solid` et `.k-input.k-rounded-md` — plus spécifiques que `.k-input` seul.
  Écrite sur une seule classe, cette règle perdait donc EN SILENCE : le champ de date gardait le
  gris du thème (`--kendo-color-surface-alt`), sa bordure et son arrondi, et se distinguait de tous
  les autres champs du même formulaire, sur le Web comme sur le Mobile.
*/
.k-input,
.k-picker,
.k-input.k-input-solid,
.k-picker.k-picker-solid,
.k-input.k-rounded-md,
.k-picker.k-rounded-md {
  min-height: var(--kk-field-height);
  background: var(--kk-color-input-bg);
  border-color: var(--kk-color-input-border);
  border-radius: var(--kk-radius-md);
}

.k-input:hover,
.k-picker:hover,
.k-input.k-input-solid:hover,
.k-picker.k-picker-solid:hover,
.k-input.k-input-solid.k-hover,
.k-picker.k-picker-solid.k-hover {
  background: var(--kk-color-input-bg);
  border-color: color-mix(in srgb, var(--kk-color-brand) 35%, var(--kk-color-input-border));
}
/* L'apparence d'un champ au focus appartient à forms.css, qui la fixe pour TOUS les contrôles à la
   fois — la redire ici donnerait deux déclarations à tenir en phase, et c'est celle qui traînerait
   qui gagnerait selon l'ordre de chargement. */
.k-input-inner:focus-visible {
  outline: none;
}

/* Le bouton du calendrier ne porte pas de fond propre : le thème lui en donne un, et le champ se
   lisait alors en deux morceaux — la saisie d'un côté, un bloc plus clair de l'autre. Un champ est
   une seule surface. */
.k-input .k-input-button,
.k-picker .k-input-button,
.k-input .k-input-button.k-button-solid-base,
.k-picker .k-input-button.k-button-solid-base {
  background: transparent;
  border-color: transparent;
  color: var(--kk-color-text-muted);
}

.k-input.k-disabled,
.k-picker.k-disabled {
  background: var(--kk-color-input-bg-disabled);
  border-color: var(--kk-color-input-border-disabled);
  color: var(--kk-color-input-text-disabled);
}

/* AppDatePicker occupe toute la largeur de son champ, comme les autres saisies. Vient de
   components.css (Web) : le Mobile ne la chargeait pas, son calendrier n'était donc pas aligné
   sur les champs voisins. */
.app-date-picker { width: 100%; }

/* ...et son texte part du même endroit. Telerik place le sien à 8 px du bord, les champs de
   l'application à 0.85rem : empilés, le montant et la date ne commençaient pas au même retrait.

   Le sélecteur porte à nouveau deux classes, pour la même raison que plus haut : le thème écrit
   `.k-input.k-input-md .k-input-inner`. Il reste volontairement limité au calendrier — élargir le
   rembourrage de TOUS les champs Telerik toucherait aussi les recherches de grille et les barres
   de filtres, qui ne l'ont pas demandé. */
.app-date-picker.k-input .k-input-inner {
  padding: var(--kk-field-padding-block) var(--kk-field-padding-inline);
}

/* Actions de ligne (GridActions / GridActionButton) — déplacées depuis
   KostKat.WebApp/wwwroot/css/components.css le 2026-08-27 : ces composants servent maintenant
   aussi aux cartes de dépense du Mobile, leur style ne peut plus vivre dans une feuille locale
   au desktop. */
/* Contenu centré, quel qu'il soit et quel que soit son nombre : c'est la règle de la colonne
   Actions dans TOUTES les listes, et elle répond à l'en-tête, lui aussi centré
   (components.css : `.app-grid .k-grid-header .k-table-th`). Aligner les cellules à droite
   pendant que l'en-tête centrait son bouton « + » était l'origine du décalage. */
.app-grid-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
}
.app-grid-action,
.app-grid-action.k-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* TelerikButton pose toujours un `<span class="k-button-text">` autour du contenu, VIDE ici
     puisque le libellé est réservé au tooltip. Kendo ne voit donc pas un bouton d'icône (pas de
     classe `k-icon-button`) et applique son `gap` de 0,5 rem entre l'icône et ce span vide : le
     glyphe se retrouvait 4 px à gauche du centre, ce que le fond de survol rendait visible.
     Mesuré sur le DOM réel. La variante `--with-label` redéclare son propre gap plus bas. */
  gap: 0;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  color: var(--kk-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--kk-radius-sm);
  text-decoration: none;
  transition: color var(--kk-duration-fast), background-color var(--kk-duration-fast);
}

.app-grid-action:hover,
.app-grid-action.k-button:hover {
  color: var(--kk-primary);
  background: var(--kk-primary-light);
}

.app-grid-action--success:hover,
.app-grid-action--success.k-button:hover {
  color: var(--kk-color-success);
  background: var(--kk-color-success-bg);
}

.app-grid-action--danger:hover,
.app-grid-action--danger.k-button:hover {
  color: var(--kk-color-error);
  background: var(--kk-color-error-bg);
}
/* État de chargement d'une action de grille : le contenu normal (icône + libellé) garde sa place
   pour figer la largeur du bouton, et l'indicateur commun se superpose. Un bouton en attente reste
   à pleine opacité (il n'est pas « indisponible », il travaille) et n'accepte plus de clic. */
.app-grid-action--busy,
.app-grid-action--busy.k-button {
  position: relative;
  opacity: 1;
  cursor: progress;
  pointer-events: none;
}

/* Seuls l'icône et le libellé se masquent : le loader vit lui aussi dans le `.k-button-text` que
   TelerikButton pose autour du contenu, masquer ce conteneur le ferait disparaître avec eux. */
.app-grid-action--busy .k-button-icon,
.app-grid-action--busy .app-grid-action__label {
  visibility: hidden;
}

.app-grid-action__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Le rembourrage d'attente de l'indicateur est prévu pour un bloc de page : dans un bouton de
   2,25 rem de haut, il le ferait déborder. */
.app-grid-action__loader .kk-loading {
  padding: 0;
}

.app-grid-action--with-label,
.app-grid-action--with-label.k-button {
  width: auto;
  min-width: 0;
  height: 2.25rem;
  padding: 0 var(--kk-space-3);
  gap: var(--kk-space-1);
  font-size: var(--kk-font-size-sm);
  font-weight: 600;
}

/* WebView2 / Edge ajoute son propre bouton « révéler » dans tout champ de type password. À côté de
   celui de l'application, l'utilisateur en voit deux, aux comportements distincts : on masque
   celui du navigateur et on garde le nôtre, seul à porter un libellé accessible. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* Le thème Bootstrap peint le préfixe comme un « input-group-text » : un rectangle gris posé dans
   un champ aux coins arrondis. On lui fait épouser la forme du champ — pleine hauteur, arrondi
   suivi du côté où il se trouve. */
.k-input-prefix,
.k-picker .k-input-prefix {
    align-self: stretch;
    display: flex;
    align-items: center;
    border-start-start-radius: inherit;
    border-end-start-radius: inherit;
}

.k-input-suffix,
.k-picker .k-input-suffix {
    align-self: stretch;
    display: flex;
    align-items: center;
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
}