/*
 * Accroche « garder ce plat » de la fiche produit (chantier wallet §11, passe 3).
 *
 * Un composant = une vue + cette feuille (rules_UI) : retirer l'accroche, c'est
 * retirer ces deux fichiers, sans CSS mort laissé derrière.
 *
 * Toutes les valeurs viennent des variables déjà posées par `global.css` et par
 * le Studio (`ThemeStyleBuilder`) : le bouton suit la charte de l'établissement
 * au lieu d'y plaquer une teinte à lui. Le contour de focus, lui, n'est PAS
 * redéfini — `.menu-shell :focus-visible` de `global.css` s'en charge pour tout
 * le front public, et le refaire ici le ferait diverger au premier ajustement.
 */

.c-save-dish {
    display: flex;
    flex-direction: column;
    gap: var(--misaju-spacing-sm);
    margin: var(--misaju-spacing-lg) 0;
}

.c-save-dish__button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    /* 44px : cible tactile minimale, même repère que les pastilles du dock. */
    min-height: 44px;
    padding: var(--misaju-spacing-sm) var(--misaju-spacing-lg);
    border: 1px solid var(--menu-primary);
    border-radius: var(--menu-radius-pill);
    background: transparent;
    color: var(--menu-primary);
    font-family: var(--menu-font-body);
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
}

.c-save-dish__button:hover {
    background: var(--menu-primary);
    color: var(--menu-surface);
}

/*
 * Pendant l'appel réseau : le bouton reste LISIBLE, seulement inopérant. Un
 * estompage marqué le ferait passer pour désactivé alors qu'il redevient
 * cliquable une seconde plus tard.
 */
.c-save-dish__button[aria-busy='true'] {
    cursor: default;
    opacity: 0.7;
}

/* Plat déjà gardé : état plein, pour qu'un coup d'œil suffise à le distinguer. */
.c-save-dish[data-state='saved'] .c-save-dish__button {
    background: var(--menu-primary);
    color: var(--menu-surface);
}

.c-save-dish__count,
.c-save-dish__status {
    margin: 0;
    font-size: 0.9rem;
    color: var(--menu-muted);
}

/*
 * L'erreur reprend la teinte d'encre forte plutôt qu'un rouge introduit ici :
 * le front public n'a pas de couleur d'alerte, et en inventer une pour ce seul
 * message la laisserait orpheline dans la charte.
 */
.c-save-dish[data-state='error'] .c-save-dish__status {
    color: var(--menu-strong);
    font-weight: 600;
}

/*
 * Dans la modale du menu : le fond de la modale EST la couleur primaire
 * (`C_ItemModal.css`), donc un bouton dessiné en primaire y serait invisible
 * (texte, contour et fond de la même teinte). On reprend le texte de la modale
 * comme contour et on inverse l'état plein, comme la croix de fermeture.
 */
.c-item-modal-overlay__content .c-save-dish__button {
    border-color: var(--misaju-color-text);
    color: var(--misaju-color-text);
}

.c-item-modal-overlay__content .c-save-dish__button:hover,
.c-item-modal-overlay__content .c-save-dish[data-state='saved'] .c-save-dish__button {
    background: var(--misaju-color-text);
    color: var(--misaju-color-primary);
}

.c-item-modal-overlay__content .c-save-dish__count,
.c-item-modal-overlay__content .c-save-dish__status {
    color: var(--misaju-color-text);
}

.c-item-modal-overlay__content .c-save-dish[data-state='error'] .c-save-dish__status {
    color: var(--misaju-color-text);
}