/** Module Irrigation — l'essentiel du style vient de mt-shell.css. */

.mt-irrig__meteo:empty { display: none; }

.mt-irrig__meteo {
    margin: var(--mt-space-4, 16px) 0 0;
    padding: var(--mt-space-3, 12px) var(--mt-space-4, 16px);
    font-size: var(--mt-fs-body, 16px);
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
    border-radius: var(--mt-radius, 10px);
}

.mt-irrig__rain {
    margin: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: var(--mt-fs-field, 16px);
    font-weight: 700;
    color: var(--mt-ink, #2b3128);
    font-variant-numeric: tabular-nums;
}

/* Le tableau croisé : première colonne à gauche, valeurs à droite (règle
   `.mt-table` de mt-shell.css), et les cellules de plan alignées à gauche —
   ce sont des phrases, pas des nombres. */

.mt-irrig__table th[scope="row"] { vertical-align: top; }

.mt-irrig__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* POST_MORTEM #7 : le thème peint `button:hover` en #404a3d / blanc.
   Sans background + color ici, le nom de culture (Aubergine…) devient un pavé noir. */
.mt-irrig__toggle:hover,
.mt-irrig__toggle:focus {
    color: var(--mt-brand-strong, #14655f);
    background: transparent;
}

.mt-irrig__toggle:hover .mt-irrig__culture,
.mt-irrig__toggle:focus .mt-irrig__culture,
.mt-irrig__toggle:hover .mt-irrig__chevron,
.mt-irrig__toggle:focus .mt-irrig__chevron {
    color: var(--mt-brand-strong, #14655f);
}

.mt-irrig__toggle:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: 2px;
}

.mt-irrig__chevron {
    display: inline-block;
    color: var(--mt-muted, #6c7266);
    transition: transform .16s ease;
}

.mt-irrig__toggle[aria-expanded="true"] .mt-irrig__chevron { transform: rotate(90deg); }

.mt-irrig__culture { font-weight: 700; color: var(--mt-ink, #2b3128); }

.mt-irrig__stade {
    font-size: var(--mt-fs-annex, 13.5px);
    font-weight: 400;
    color: var(--mt-muted, #6c7266);
}

.mt-irrig__besoin { font-weight: 700; color: var(--mt-brand, #1a8781); }

.mt-irrig__table td:not(.mt-irrig__besoin) { text-align: left; }

.mt-irrig__plan { font-weight: 700; color: var(--mt-ink, #2b3128); }

.mt-irrig__detail {
    font-size: var(--mt-fs-annex, 13.5px);
    color: var(--mt-muted, #6c7266);
}

.mt-irrig__cell-empty { color: var(--mt-muted, #6c7266); }

/* « Mon sol » est un champ en LECTURE, pas une rangée de liste : même gabarit
   qu'une saisie (44 px de haut), sinon son aide tombe 9 px plus bas que celle
   de la commune, juste à côté dans la même grille. Le papier chaud de
   `.mt-item` est déjà celui des champs en lecture seule du design system. */
.mt-irrig__sol {
    /* Hauteur réelle d'un champ voisin : 16 px × 1.55 (line-height de .mt-app)
       + 10 px de padding × 2 + 1 px de filet × 2. Le `min-height: 44px` du
       design system ne suffit pas — c'est le contenu qui pousse le champ. */
    min-height: calc(var(--mt-fs-field, 16px) * 1.55 + 22px);
    padding: 5px 6px 5px 13px;
}

/* Un nom de texture long ne doit pas passer sur deux lignes : la rangée
   grandirait et l'alignement avec le champ commune sauterait. */
.mt-irrig__sol .mt-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sol non renseigné : le tiret ne se fait pas passer pour une valeur. */
.mt-irrig__sol .mt-item__name.is-empty {
    font-weight: 400;
    color: var(--mt-muted, #6c7266);
}

/* La barre de sous-onglets et la carte partagent la largeur : le segmenté
   3 j / 7 j ne doit pas écraser le titre sur mobile. */
@media (max-width: 640px) {
    .mt-irrig .mt-card__title { flex-wrap: wrap; }
}

/* Modale sol : sur téléphone, les trois % sont centrés (pas collés à gauche
   d'une grille auto-fill trop large). */
@media (max-width: 799px) {
    [data-mt-modal-sol] .mt-grid--num {
        justify-content: center;
        grid-template-columns: repeat(3, minmax(72px, 100px));
    }

    [data-mt-modal-sol] .mt-grid--num .mt-field {
        align-items: center;
        text-align: center;
    }

    [data-mt-modal-sol] .mt-grid--num .mt-field__label {
        text-align: center;
    }

    [data-mt-modal-sol] .mt-grid--num input[type="number"] {
        width: 100%;
        text-align: center;
    }
}

/* Légume personnalisé : une rangée « Stade N » + son Kc, ajoutée à la demande.
   Le <label> enveloppe son champ (pas de `for`), d'où le libellé en <span>. */
.mt-irrig__stades {
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-2, 8px);
}

/* Rangées et bouton d'ajout calés à droite : les champs forment une colonne
   alignée sous le bord droit de la modale, pas un escalier. */
.mt-irrig__stade-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--mt-space-2, 8px);
}

.mt-irrig__stade-lab {
    display: flex;
    /* Compact : le ✕ colle à son champ, sinon il file à droite de la modale
       et on ne voit plus quel stade il supprime. */
    flex: 0 1 auto;
    align-items: center;
    gap: var(--mt-space-2, 8px);
    min-width: 0;
    /* Annule le margin-bottom que le thème pose sur tous les labels. */
    margin: 0;
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    color: var(--mt-ink, #2b3128);
}

.mt-irrig__stade-rang { flex: 0 0 auto; }

/* `.mt-field` est en colonne étirée : sans ça le bouton prend toute la largeur. */
.mt-irrig__stade-add { align-self: flex-end; }