/*
 * La fenêtre qui ouvre une chose de plus, et le bouton qui l'ouvre.
 *
 * Un seul dessin pour tout Basile : ce qu'on ajoute change, le geste et la fenêtre ne changent
 * pas. Les écrans qui veulent plus large — une activité, une liste — ajoutent leur propre
 * largeur par-dessus, et rien d'autre.
 */

/* Le bouton tient sa hauteur dans la barre, à côté des onglets de vue. */
.add {
    display: flex;
}

/* Le bouton porte son signe avant son mot : c'est le dessin qu'on vise, et le mot qui le
   confirme. */
.add > .app-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-2xs);
}

/*
 * L'en-tête et le pied sont séparés du corps par un filet, et non par du blanc.
 *
 * Une fenêtre de saisie n'a pas de marge à perdre : le filet distingue ce qui nomme et ce qui
 * commande de ce qu'on remplit, en une ligne au lieu d'un écart. Le blanc, lui, est rendu aux
 * champs, qui en ont besoin pour se lire un par un.
 */
.add-dialog .app-modal-header {
    padding-bottom: var(--app-space-md);
    margin-bottom: var(--app-space-lg);
    border-bottom: 1px solid var(--app-line);
}

/* Le titre de cadre porte son propre filet, qui doublerait celui de l'en-tête : deux traits à
   deux pixels l'un de l'autre se lisent comme une faute de dessin. */
.add-dialog .panel-title {
    padding-bottom: 0;
    border-bottom: 0;
}

.add-dialog .app-modal-footer {
    padding-top: var(--app-space-md);
    margin-top: var(--app-space-lg);
    border-top: 1px solid var(--app-line);
}

/* La croix qui referme, en tête de la fenêtre : ni fond, ni bordure, ni retrait — ce qui reste
   est le dessin, et la cible qu'on vise sans la chercher. */
.add-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--app-ink-muted);
    cursor: pointer;
}

.add-close:hover,
.add-close:focus-visible {
    color: var(--app-accent);
}

/* Un champ par ligne, et son étiquette au-dessus. Ce qu'on ouvre ici tient en deux ou trois
   questions : les serrer sur une rangée ferait gagner une hauteur dont personne n'a besoin. */
.add-form {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-md);
}

/* Trois questions qui n'en font qu'une — un prix, son unité, son taux — tiennent sur la même
   ligne. Elles se replient l'une sous l'autre quand la fenêtre est trop étroite pour les trois. */
.add-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-md);
}

.add-row > .app-field {
    flex: 1 1 7rem;
}