/* Champs, boutons, erreurs de validation.
 *
 * Un changement de fond par rapport à la feuille précédente : le bouton de
 * soumission était pleine largeur par défaut, puis ramené à `width: auto` par
 * six règles successives (lignes de tableau, filtres, actions en ligne…). Le
 * design ne montre un bouton pleine largeur que dans la carte de connexion.
 * La valeur par défaut est donc inversée, et c'est `.auth-card` qui l'étire.
 */

label {
  display:       block;
  margin-bottom: 6px;
  color:         var(--muted-2);
  font-size:     var(--t-sub);
  font-weight:   500;
}

label.checkbox {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  color:       var(--ink);
  font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="file"],
select,
textarea {
  width:         100%;
  padding:       var(--pad-ctl);
  margin-bottom: 1rem;
  background:    var(--surface);
  border:        1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  color:         var(--ink);
  font:          inherit;
  font-size:     var(--t-body);
}

input[type="number"],
input[type="date"],
input[type="month"],
input[type="tel"] {
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Le sélecteur de fichier garde le bouton du navigateur : le styler demanderait
   de le cacher derrière un label, et un champ que l'on ne reconnaît plus se
   clique moins. Seul le cadre est repris. */
input[type="file"] {
  padding: 7px 13px;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-2);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  outline:      2px solid var(--pos-bg-2);
  outline-offset: 0;
}

/* --- Boutons -------------------------------------------------------------- */

.button,
.button-link,
button[type="submit"] {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  padding:         var(--pad-ctl);
  border:          1px solid transparent;
  border-radius:   var(--r-ctl);
  font:            inherit;
  font-size:       var(--t-body);
  font-weight:     500;
  white-space:     nowrap;
  cursor:          pointer;
  text-decoration: none;
}

.button,
button[type="submit"] {
  background: var(--teal);
  color:      var(--teal-ink);
}

.button:hover,
button[type="submit"]:hover {
  background: var(--teal-dark);
  color:      var(--teal-ink);
}

/* Action secondaire : le texte seul, sans cadre. */
.button-link {
  background: none;
  color:      var(--muted);
}

.button-link:hover {
  color: var(--ink);
}

/* `button[type="submit"]` pèse plus lourd qu'une classe seule : une action
   secondaire soumise par un bouton doit être nommée ici pour rester neutre. */
.button-neutral,
button[type="submit"].button-neutral {
  background:   var(--surface);
  border-color: var(--line-strong);
  color:        var(--ink);
}

.button-neutral:hover,
button[type="submit"].button-neutral:hover {
  background:   var(--surface-soft);
  border-color: var(--muted-2);
}

.button-danger {
  background: var(--danger);
  color:      #FFFFFF;
}

.button-danger:hover {
  background: var(--neg-strong);
  color:      #FFFFFF;
}

/* --- Disposition ---------------------------------------------------------- */

.field-row {
  display: flex;
  gap:     1rem;
}

.field-row > * {
  flex: 1;
}

/* Une collection de lignes : les assurés d'un prêt. La ligne aligne ses champs
   et pousse son bouton de retrait en bout, sur la ligne de base des champs. */
.collection {
  margin:        0 0 1.5rem;
  padding:       1rem 1.25rem;
  border:        1px solid var(--line);
  border-radius: var(--r-card);
  background:    var(--surface-soft);
}

.collection > legend {
  padding:     0 0.4rem;
  color:       var(--muted-2);
  font-size:   var(--t-sub);
  font-weight: 500;
}

.collection-row {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}

/* Chaque champ prend sa part de la ligne. Sans cette règle, seuls les deux
   premiers étaient dimensionnés : le troisième et le quatrième — l'e-mail et le
   téléphone d'un locataire, le taux d'une assurance — se réduisaient à la
   largeur de leur contenu. `min-width: 0` parce qu'un champ flex refuse sinon de
   passer sous la largeur de son placeholder. */
.collection-row > * {
  flex:      1;
  min-width: 0;
}

/* Le premier porte le nom : il a droit à plus de place que le reste. */
.collection-row > *:first-child {
  flex: 2;
}

.row-remove {
  flex:       none;
  margin-top: 1.7rem;
  padding:    var(--pad-ctl);
  background: transparent;
  border:     1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  color:      var(--muted);
  font:       inherit;
  font-size:  var(--t-small);
  cursor:     pointer;
}

.row-remove:hover {
  color:        var(--neg-strong);
  border-color: var(--neg-strong);
}

/* Le bloc de récurrence : un encadré discret, parce qu'il ne concerne qu'une
   saisie sur dix et que le repli Stimulus le fait disparaître le reste du
   temps. */
.recurrence {
  margin:        0 0 1.5rem;
  padding:       1rem 1.25rem 0.25rem;
  border:        1px solid var(--line);
  border-radius: var(--r-card);
  background:    var(--surface-soft);
}

.recurrence > .field-row {
  margin-top: 0.25rem;
}

.form-actions {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         1rem;
  margin-top:  0.5rem;
}

.help-text,
.form-help {
  margin:    -0.7rem 0 1rem;
  color:     var(--muted);
  font-size: var(--t-small);
}

/* La marge haute négative rattrape la marge basse des champs de saisie. Une
   case, un bouton radio ou un groupe de radios n'en posent aucune : l'aide leur
   passait dessus et devenait illisible. */
input[type="checkbox"] + .help-text,
input[type="radio"] + .help-text,
div:has(> input[type="radio"]) + .help-text {
  margin-top: 0.35rem;
}

/* Une case ou un radio et son intitulé tiennent sur une ligne, sinon `label`
   étant en display:block, « Dépense » tombe sous son propre bouton. */
input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  display:     inline-block;
  margin:      0 1.25rem 0 0.4rem;
  color:       var(--ink);
  font-weight: 400;
  vertical-align: middle;
}

/* La liste d'erreurs que le Form de Symfony pose au-dessus d'un champ.
 *
 * `:not([class])` n'est pas une coquetterie : `form_errors()` rend un `<ul>` nu,
 * et **toute liste écrite à la main dans ce dépôt porte une classe**. Sans ce
 * filtre, la règle repeignait en rouge et en 12 px la moindre liste de toutes
 * les pages qui chargent cette feuille — les pastilles de documents et les
 * titres de « Vos données » de la page d'accueil l'ont appris à leurs dépens,
 * et la marge négative ci-dessous décalait tout le reste. */
ul:not([class]) {
  margin:       -0.6rem 0 0.9rem;
  padding-left: 1.1rem;
  color:        var(--danger);
  font-size:    var(--t-small);
}

.plain-list {
  margin:    0.5rem 0 1rem;
  color:     inherit;
  font-size: var(--t-body);
}

.auth-links {
  display:         flex;
  justify-content: space-between;
  gap:             1rem;
  margin:          1.25rem 0 0;
  font-size:       var(--t-sub);
}

.auth-links a {
  color: var(--pos);
}

.auth-card button[type="submit"] {
  width:      100%;
  margin-top: 0.5rem;
}

.danger-zone {
  margin-top:    1.5rem;
  padding:       14px 16px;
  border:        1px solid var(--line);
  border-radius: var(--r-ctl);
  background:    var(--neg-bg);
  font-size:     var(--t-sub);
}

.danger-zone a {
  color:       var(--neg-strong);
  font-weight: 500;
}

/* La question posée quand une modification invalide l'échéancier stocké. */
.confirm-panel {
  margin:        0 0 1.75rem;
  padding:       var(--pad-card);
  background:    var(--warn-bg);
  border:        1px solid var(--warn-accent);
  border-radius: var(--r-card);
}

.confirm-panel h2 {
  margin-bottom: 0.6rem;
}

.confirm-panel p {
  margin: 0 0 0.9rem;
}

.confirm-panel .form-actions {
  margin-bottom: 0.9rem;
}

.confirm-panel p:last-child {
  margin-bottom: 0;
}

/* --- Boutons en contexte -------------------------------------------------- */

/* Un bouton posé dans une ligne ou un titre plutôt qu'en pied de formulaire. */
.inline-form {
  margin: 0;
}

.inline-form button[type="submit"] {
  padding:      6px 11px;
  background:   var(--surface);
  border-color: var(--line-strong);
  color:        var(--pos);
  font-size:    var(--t-small);
}

.inline-form button[type="submit"]:hover {
  background:   var(--pos-bg);
  border-color: var(--pos);
  color:        var(--pos-strong);
}

/* La bascule « vérifiée » : une pastille, pas un appel à l'action. */
.verify-form {
  margin: 0;
}

.verify-form .verify-toggle {
  padding:       3px 8px;
  border:        1px solid var(--line-strong);
  border-radius: var(--r-badge);
  background:    var(--surface);
  color:         var(--muted);
  font-family:   var(--font-mono);
  font-size:     var(--t-label);
  font-weight:   500;
  line-height:   1.5;
}

.verify-form .verify-toggle[aria-pressed="true"] {
  border-color: var(--pos-bg-2);
  background:   var(--pos-bg-2);
  color:        var(--pos-strong);
}

/* La ligne en cours de correction : les champs tiennent dans une cellule,
   sans le rythme vertical du reste des formulaires. */
.row-editing {
  background: var(--pos-bg);
}

.row-editing input,
.row-editing select {
  min-width:     8rem;
  margin-bottom: 0;
  padding:       6px 9px;
}

.row-editing ul {
  margin:       0 0 0.35rem;
  padding-left: 1rem;
}

.row-actions {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
}

.row-actions button[type="submit"] {
  padding:   6px 11px;
  font-size: var(--t-small);
}

.row-actions .button-link {
  padding: 6px 0;
}

/* --- Actions en icône ------------------------------------------------------- */

/* Dans un tableau dense, « Modifier » écrit en toutes lettres sur chaque ligne
   pèse plus que la donnée. L'icône porte l'action, le libellé reste dans le DOM
   pour les lecteurs d'écran et revient au survol en infobulle. */
.icon-action {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  padding:         0;
  border:          1px solid transparent;
  border-radius:   var(--r-ctl);
  background:      none;
  color:           var(--muted);
  cursor:          pointer;
}

.icon-action:hover {
  background:   var(--surface-alt);
  border-color: var(--line-strong);
  color:        var(--ink);
}

/* L'action qui écrit au grand livre se distingue de celle qui corrige. */
.icon-action-record {
  color: var(--pos);
}

.icon-action-record:hover {
  background:   var(--pos-bg);
  border-color: var(--pos-bg-2);
  color:        var(--pos-strong);
}

/* Le bouton d'une action en icône ne doit rien hériter du bouton de formulaire. */
.inline-form button.icon-action[type="submit"] {
  width:        30px;
  height:       30px;
  padding:      0;
  background:   none;
  border-color: transparent;
  font-size:    inherit;
}

.inline-form button.icon-action[type="submit"]:hover {
  background:   var(--pos-bg);
  border-color: var(--pos-bg-2);
  color:        var(--pos-strong);
}

/* L'action qui reprend un lot d'échéances au grand livre. Elle garde son
   libellé — icône seule, on ne devine pas qu'elle écrit des transactions — mais
   prend la couleur d'une écriture, pour se distinguer d'une correction. */
.inline-form button.button-record[type="submit"] {
  gap:          6px;
  padding:      7px 12px;
  background:   var(--pos-bg);
  border-color: var(--pos-bg-2);
  color:        var(--pos-strong);
  font-size:    var(--t-sub);
}

.inline-form button.button-record[type="submit"]:hover {
  background:   var(--pos-bg-2);
  border-color: var(--pos);
  color:        var(--pos-strong);
}

/* --- Ce qu'une correction propage vers le bas ------------------------------- */

/* Les cases se déplient sous la ligne corrigée, dans le tableau. Le fond les
   détache des chiffres sans les en éloigner, et la bordure gauche les rattache
   à la ligne qu'elles concernent. */
.row-propagation {
  margin:        0;
  padding:       0.7rem 0.9rem 0.2rem;
  border:        0;
  border-left:   3px solid var(--line-strong);
  background:    var(--surface-alt);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
}

.row-propagation .help-text {
  margin-bottom: 0.7rem;
}

.row-propagation input[type="checkbox"] + label {
  margin-right: 0;
}

.data-table .row-options td {
  padding-top:    0;
  padding-bottom: 0.6rem;
}

/* --- Aperçu d'import ------------------------------------------------------- */

/* L'ancienne valeur reste lisible à côté de la nouvelle : ce qu'on relit avant
   d'écrire, c'est l'écart, pas le résultat seul. */
.was {
  color:           var(--muted);
  text-decoration: line-through;
}

.becomes {
  font-weight: 600;
}

.import-blocked {
  padding:       0.8rem 1rem;
  border-left:   3px solid var(--neg);
  background:    var(--neg-bg);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
}

.import-errors {
  margin:     0.6rem 0 0;
  color:      var(--muted);
  font-size:  var(--t-small);
}