/*
 * Styles du lot C — fiches chantier et photos.
 * Fichier propriété du lot C (lié par base.html.twig). Classes préfixées gp-.
 *
 * La saisie se fait au téléphone, dehors, en fin de journée : grandes
 * cibles, pas de défilement horizontal, bouton d'envoi collé en bas
 * (.gp-barre-actions, charte commune).
 */

/* ------------------------------------------------------------------ */
/* Textes                                                             */
/* ------------------------------------------------------------------ */

/* Un commentaire garde ses retours à la ligne, comme il a été tapé. */
.gp-fiche-texte {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.gp-fiche-ligne__extrait {
    color: var(--gp-ardoise-700);
    font-size: 0.925rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gp-fiche-tel {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-e1);
    min-height: var(--gp-cible);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* En-tête de la saisie : la journée en un coup d'œil                 */
/* ------------------------------------------------------------------ */

.gp-fiche-entete__liste {
    display: grid;
    grid-template-columns: minmax(6.5rem, max-content) 1fr;
    gap: var(--gp-e2) var(--gp-e3);
}

.gp-fiche-entete__liste dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding-top: 0.15rem;
}

.gp-fiche-entete__liste dd {
    margin: 0;
    min-width: 0;
}

/* Consigne du conducteur à un membre de l'équipe : le chef la relaie. */
.gp-fiche-equipe__consigne {
    display: flex;
    gap: var(--gp-e2);
    margin-top: 0.15rem;
    color: var(--gp-nuit);
}

.gp-fiche-equipe__consigne .bi {
    color: var(--gp-bleu-chantier);
}

.gp-fiche-equipe li + li {
    margin-top: var(--gp-e1);
}

/* Au téléphone, l'intitulé passe au-dessus de sa valeur. */
@media (max-width: 575.98px) {
    .gp-fiche-entete__liste {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .gp-fiche-entete__liste dd {
        margin-bottom: var(--gp-e3);
    }

    .gp-fiche-entete__liste dd:last-child {
        margin-bottom: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Photos : champ, aperçus, galerie                                   */
/* ------------------------------------------------------------------ */

/* Sans JavaScript, le champ natif reste visible et le bouton est masqué. */
.gp-fiche-photos__declencheur {
    display: none;
}

.gp-fiche-photos--js .gp-fiche-photos__declencheur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gp-e2);
    min-height: 3.5rem;
    border-style: dashed;
    border-width: 2px;
}

/* Champ masqué visuellement mais toujours actionnable par son libellé
   (display: none empêche l'ouverture du sélecteur sur certains iOS). */
.gp-fiche-photos--js .gp-fiche-photos__champ {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Le champ masqué reste dans l'ordre de tabulation : son focus clavier se
   voit sur le bouton qui le suit (templates/fiche/saisir.html.twig), avec
   le contour de toute l'application (:focus-visible d'app.css). */
.gp-fiche-photos--js .gp-fiche-photos__champ:focus-visible + .gp-fiche-photos__declencheur {
    outline: 3px solid var(--gp-bleu-chantier);
    outline-offset: 2px;
}

.gp-fiche-photos {
    position: relative;
}

.gp-fiche-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
    gap: var(--gp-e2);
}

.gp-fiche-vignette {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--gp-radius-sm);
    overflow: hidden;
    background: var(--gp-fond-creux);
    border: 1px solid var(--gp-trait);
}

.gp-fiche-vignette img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gp-fiche-vignette a:focus-visible {
    outline-offset: -3px;
}

.gp-fiche-vignette__heure {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.1rem 0.35rem;
    background: rgb(15 23 42 / 68%);
    color: #fff;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Bouton « retirer » : une vraie cible au doigt, dans le coin. */
.gp-fiche-vignette__retirer,
.gp-fiche-vignette__retirer-apercu {
    position: absolute;
    top: 0;
    right: 0;
}

.gp-fiche-vignette__retirer .btn,
.gp-fiche-vignette__retirer-apercu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gp-cible);
    height: var(--gp-cible);
    min-height: var(--gp-cible);
    padding: 0;
    border: 0;
    border-radius: 0 0 0 var(--gp-radius-sm);
    background: rgb(255 255 255 / 88%);
    color: var(--gp-rouge);
}

.gp-fiche-vignette__retirer .btn:hover,
.gp-fiche-vignette__retirer-apercu:hover {
    background: var(--gp-rouge-pale);
    color: var(--gp-rouge);
}

.gp-fiche-vignette--apercu {
    border-style: dashed;
    border-color: var(--gp-bleu-chantier);
}

.gp-fiche-vignette--alerte {
    border: 2px solid var(--gp-ambre);
}

.gp-fiche-vignette__attente,
.gp-fiche-vignette__illisible {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 55%);
    color: var(--gp-bleu-chantier);
    font-size: 1.75rem;
}

.gp-fiche-vignette__illisible {
    background: var(--gp-ambre-pale);
    color: var(--gp-ambre);
}

/* ------------------------------------------------------------------ */
/* Listes : fiches, fiches manquantes, à renseigner                   */
/* ------------------------------------------------------------------ */

.gp-fiche-liste {
    display: grid;
    gap: var(--gp-e2);
}

.gp-fiche-ligne {
    position: relative;
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr) auto;
    gap: var(--gp-e3);
    align-items: start;
    padding: var(--gp-e3) var(--gp-e4);
}

/* Une fiche à lire se repère dans la liste : un filet jaune à gauche. */
.gp-fiche-ligne--a-lire {
    box-shadow: inset 4px 0 0 var(--gp-jaune), var(--gp-ombre);
}

.gp-fiche-ligne__date {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.gp-fiche-ligne__etat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gp-e1);
}

@media (max-width: 575.98px) {
    .gp-fiche-ligne {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gp-e1);
    }

    .gp-fiche-ligne__date {
        flex-direction: row;
        gap: var(--gp-e2);
    }

    .gp-fiche-ligne__etat {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* Le rédacteur attendu ne pouvait pas écrire (chef du jour absent…) : texte ambre sur la carte blanche. */
.gp-fiche-manquante__empechement {
    margin-top: var(--gp-e1);
    color: var(--gp-ambre);
}

.gp-fiche-manquante {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--gp-e3);
    padding: var(--gp-e3) var(--gp-e4);
    box-shadow: inset 4px 0 0 var(--gp-ambre), var(--gp-ombre);
}

@media (max-width: 767.98px) {
    .gp-fiche-manquante {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gp-fiche-a-faire {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-e3);
    padding: var(--gp-e3) var(--gp-e4);
    box-shadow: inset 4px 0 0 var(--gp-ambre), var(--gp-ombre);
}

.gp-fiche-a-faire .btn {
    flex: 1 0 auto;
}

@media (min-width: 576px) {
    .gp-fiche-a-faire .btn {
        flex: 0 0 auto;
    }
}

.gp-fiche-carte {
    padding: var(--gp-e3) var(--gp-e4);
}

/* ------------------------------------------------------------------ */
/* Versions précédentes du commentaire                                */
/* ------------------------------------------------------------------ */

.gp-fiche-versions summary {
    cursor: pointer;
    color: var(--gp-bleu-chantier);
    font-weight: 600;
    min-height: var(--gp-cible);
    display: flex;
    align-items: center;
}

.gp-fiche-versions__entree {
    padding: var(--gp-e2) var(--gp-e3);
    border-left: 3px solid var(--gp-trait-fort);
    background: var(--gp-fond);
    border-radius: 0 var(--gp-radius-sm) var(--gp-radius-sm) 0;
}

.gp-fiche-versions__entree + .gp-fiche-versions__entree {
    margin-top: var(--gp-e2);
}

@media print {
    .gp-fiche-galerie {
        grid-template-columns: repeat(4, 1fr);
    }

    .gp-fiche-vignette__retirer {
        display: none;
    }
}