/*
  forms.css — apparence des champs de formulaire (.field__*), partagée par KostKat.WebApp et
  KostKat.Mobile. TextField (KostKat.Presentation.Shared/Forms/TextField.razor) s'appuie sur ces
  classes sans jamais fixer lui-même couleur/fond/bordure : un seul style de champ dans toute
  l'application, quelle que soit la plateforme.
*/

/*
  Un champ empile son libellé, son contrôle, puis ce qui l'explique. La règle vit ici et non dans
  TextField : deux champs de la même application ne peuvent pas s'empiler différemment selon le
  composant qui les rend. L'écart entre les trois appartient à chacun d'eux (marge du libellé,
  marge du message) et non à un `gap` du conteneur, qui creuserait aussi un vide sous les champs
  dont la zone d'erreur est rendue vide.
*/
.field {
  display: grid;
  align-content: start;
}

.field__input,
input.field__input,
select.field__input,
textarea.field__input {
  width: 100%;
  min-height: 2.85rem;
  padding: var(--kk-field-padding-block) var(--kk-field-padding-inline);
  color: var(--kk-color-text);
  background: var(--kk-color-input-bg);
  border: 1px solid var(--kk-color-input-border);
  border-radius: var(--kk-radius-md);
  transition: border-color var(--kk-duration-fast), box-shadow var(--kk-duration-fast);
}

.field__input:hover { border-color: #c9d7eb; }

/*
  Le menu déroulant d'un <select> est peint PAR LE NAVIGATEUR. Il ne suit ni le fond de la page, ni
  la classe posée sur le contrôle : il ne suit que ce que ses <option> déclarent elles-mêmes. En
  thème sombre, les libellés prenaient le blanc du thème pendant que le menu restait blanc — la
  liste devenait illisible une fois ouverte.

  La règle vise TOUTES les listes natives de l'application. Elle n'en couvrait que deux, celles du
  Mobile, désignées par leur classe ; les sept autres du Web — filtre de niveau d'accès, rôle,
  niveau, type de notification, période de facturation, devise de l'en-tête — portaient le même
  défaut sans que rien ne le signale. Écrite sur l'élément plutôt que sur une classe, elle couvre
  aussi celles qui viendront.
*/
select option {
  color: var(--kk-color-text);
  background-color: var(--kk-color-input-bg) !important;
}

/* Le bleu de marque remplace le gris du contrôle natif pour l'option survolée ou retenue. */
select option:hover,
select option:checked {
  color: var(--kk-color-on-brand);
  background-color: var(--kk-color-brand) !important;
}

/* Préserve une zone dédiée à la flèche native et coupe proprement les libellés longs sur Mobile. */
select.form-select {
  box-sizing: border-box;
  min-width: 0;
  padding-inline-end: 2.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field__input--static {
  display: flex;
  align-items: center;
  font-weight: var(--kk-font-weight-semibold);
  background: var(--kk-color-input-bg-disabled);
  border-color: var(--kk-color-input-border-disabled);
  color: var(--kk-color-input-text-disabled);
  cursor: not-allowed;
}

.field__input--static:hover {
  border-color: var(--kk-color-input-border-disabled);
}

.field__input:disabled,
.field__input[readonly] {
  background: var(--kk-color-input-bg-disabled);
  border-color: var(--kk-color-input-border-disabled);
  color: var(--kk-color-input-text-disabled);
  cursor: not-allowed;
}

.field__input:disabled:hover,
.field__input[readonly]:hover {
  border-color: var(--kk-color-input-border-disabled);
}

/*
  Focus d'un champ : LA règle, pour tous les champs de l'application — texte, nombre, zone de
  texte, contrôles Telerik et listes déroulantes AppSelect. La bordure passe au bleu de marque, et
  rien ne se dessine autour : l'anneau extérieur de base.css (R-35) donnait au même formulaire deux
  champs d'apparence différente selon le contrôle qui le sert. Le changement de bordure EST
  l'indicateur de substitution que R-35 exige.

  Elle vit ici et pas dans chaque composant : c'est ce qui garantit qu'un champ ajouté demain, quel
  que soit son contrôle, se comporte déjà comme les autres.
*/
.field__input:focus,
.field__input:focus-visible,
.app-select__trigger:has(.app-select__input:focus),
.k-input.k-focus,
.k-input.k-input-solid.k-focus,
.k-picker.k-focus,
.k-picker.k-input-solid.k-focus {
  outline: none;
  border-color: var(--kk-color-focus);
  box-shadow: none;
}

/*
  `display: block` et la marge ne sont pas décoratifs : un libellé laissé en ligne prend la hauteur
  de ligne de son conteneur, alors que `.field__label-row` — une boîte flex — prend celle de son
  propre texte. Deux champs voisins, l'un avec indicateur et l'autre sans, démarraient donc cinq
  pixels plus bas l'un que l'autre. Les deux formes partagent maintenant la même hauteur et le même
  écart sous le libellé.
*/
.field__label {
  display: block;
  margin-block-end: var(--kk-space-2);
  color: var(--kk-color-text-muted);
  font-size: 0.78rem;
  font-weight: var(--kk-font-weight-semibold);
}

.field__required {
  margin-inline-start: 0.125rem;
  color: var(--kk-color-error);
}

/*
  Message d'erreur, indication et champ fautif : globaux, parce que la règle « un champ obligatoire
  manquant s'explique sous le champ, en rouge » vaut pour toute l'application et non pour le seul
  TextField. Ces trois classes vivaient dans TextField.razor.css, où le CSS isolé les rendait
  invisibles à tout autre formulaire.
*/
.field__input--error {
  border-color: var(--kk-color-error);
}

.field__hint {
  margin-block-start: var(--kk-space-1);
  font-size: var(--kk-font-size-sm);
  color: var(--kk-color-text-muted);
}

.field__error {
  margin: var(--kk-space-1) 0 0;
  font-size: var(--kk-font-size-sm);
  color: var(--kk-color-error);
}

/* Libellé accompagné d'un indicateur d'attente — un champ que l'application remplit elle-même. */
.field__label-row {
  display: flex;
  align-items: center;
  gap: var(--kk-space-2);
  /* La hauteur d'un libellé seul : 0.78rem de texte sur une interligne de 1.5. La rangée ne
     grandit donc pas quand l'indicateur d'attente s'y pose, et le champ ne descend pas sous le
     curseur au moment où la lecture du justificatif commence. */
  height: 1.17rem;
  margin-block-end: var(--kk-space-2);
}

/* L'indicateur se cale sur cette hauteur : quelques pixels de plus déborderaient sans déplacer
   quoi que ce soit, ce qui vaut mieux qu'une rangée qui change de taille. */
.field__label-row .kk-loading {
  height: 1.17rem;
}

/* L'écart sous le libellé est porté par la rangée : le libellé qu'elle contient ne le répète pas. */
.field__label-row .field__label {
  margin-block-end: 0;
}

/*
  Deux champs sur une ligne. La règle vivait dans components.css, propre au Web : le Mobile ne la
  chargeait pas, et un écran qui écrivait cette classe obtenait un bloc sans style. Elle est ici
  parce que « deux champs côte à côte » n'a rien de propre au bureau.

  `auto-fit` fait tout le travail : deux champs se partagent la ligne, un champ seul l'occupe
  entière (la colonne vide se replie). Le minimum est à 9rem et non 12 pour que la paire tienne
  aussi sur un téléphone — au-delà, les deux champs s'empilaient.
*/
.form-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
}

/*
  Montant suivi de sa devise, dans un seul cadre. Ces règles étaient enfermées dans le CSS isolé
  d'un composant du Web ; le même champ existe sur le Mobile, et deux copies d'un même contrôle
  finissent toujours par diverger.
*/
.amount-control--with-currency {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--kk-color-input-bg);
  border: 1px solid var(--kk-color-input-border);
  border-radius: var(--kk-radius-md);
  transition: border-color var(--kk-duration-fast), box-shadow var(--kk-duration-fast);
}

.amount-control--with-currency:hover {
  border-color: #c9d7eb;
}

.amount-control--with-currency:focus-within {
  border-color: var(--kk-color-focus);
}

.amount-control--with-currency .amount-control__input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.amount-control--with-currency .amount-control__input:hover,
.amount-control--with-currency .amount-control__input:focus,
.amount-control--with-currency .amount-control__input:focus-visible {
  border-color: transparent;
}

.amount-control__currency {
  display: grid;
  min-width: 4.75rem;
  padding-inline: var(--kk-space-4);
  place-items: center;
  color: var(--kk-color-text);
  border-inline-start: 1px solid var(--kk-color-input-border);
  font-size: var(--kk-font-size-sm);
  font-weight: var(--kk-font-weight-semibold);
}

.amount-control--with-currency:has(.amount-control__input:disabled) {
  background: var(--kk-color-input-bg-disabled);
  border-color: var(--kk-color-input-border-disabled);
}