/* BAV — compléments au-dessus de Bootstrap 5 (le strict nécessaire). */

/* Pastille de couleur de tri (couleur du déposant, RG-27). */
.color-dot {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
    vertical-align: text-bottom;
}

/* Frise des phases de l'événement (pilotage 1p). */
.phase-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
}

.phase-stepper li {
    padding: 0.3rem 0.7rem;
    background: var(--bs-secondary-bg);
    border-radius: var(--bs-border-radius);
    font-size: 0.9rem;
}

.phase-stepper li.current {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

/*
 * Tooltip CSS pur (pas de JS Bootstrap) pour un bouton désactivé : un
 * <button disabled> a pointer-events:none, donc ni :hover ni title ne s'y
 * déclenchent — le hover est porté par le <span> englobant à la place.
 * Réutilise les variables --bs-tooltip-* (même rendu que .tooltip Bootstrap).
 */
.disabled-tooltip {
    position: relative;
    display: inline-block;
}

.disabled-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -0.3rem);
    width: max-content;
    max-width: var(--bs-tooltip-max-width, 200px);
    padding: var(--bs-tooltip-padding-y, 0.25rem) var(--bs-tooltip-padding-x, 0.5rem);
    background: var(--bs-tooltip-bg, #000);
    color: var(--bs-tooltip-color, #fff);
    border-radius: var(--bs-tooltip-border-radius, 0.375rem);
    font-size: var(--bs-tooltip-font-size, 0.765625rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
    z-index: 1080;
}

.disabled-tooltip:hover::after,
.disabled-tooltip:focus-within::after {
    opacity: 1;
}

/* Caisse : cibles tactiles généreuses sur mobile (wireframe 1j : ≥ 44 px). */
@media (max-width: 576px) {
    .cash-actions .btn,
    .cash-actions .form-control,
    .cash-actions .form-select {
        min-height: 44px;
    }
}

/*
 * Tables en cartes empilées sous 768 px (`.table-stack`).
 *
 * Une table large (9 colonnes pour les participations) ne tient pas sur un
 * téléphone : `.table-responsive` la rendait lisible au prix d'un défilement
 * horizontal, où l'on perd la ligne que l'on suit. Ici, chaque <tr> devient
 * une carte et chaque cellule affiche son intitulé, repris de `data-label`
 * (l'en-tête étant masqué).
 *
 * Le contenu des cellules reste dans le flux inline — le libellé est posé en
 * absolu, pas en flex : une cellule qui contient plusieurs éléments (un <br>,
 * un <small>, une pastille) garderait sinon un item par ligne.
 *
 * Le markup est le même aux deux tailles : ni duplication DOM, ni JS, et les
 * sélecteurs `data-test` de l'E2E restent uniques.
 */
@media (max-width: 767.98px) {
    /* Le zébrage n'a plus de sens une fois les lignes séparées en cartes. */
    .table-stack {
        --bs-table-striped-bg: transparent;
    }

    .table-stack thead {
        display: none;
    }

    .table-stack > tbody,
    .table-stack > tbody > tr > td {
        display: block;
        width: 100%;
    }

    /*
     * Deux colonnes : les valeurs courtes (`.cell-compact` — type, numéro,
     * couleur, décomptes, état) se rangent par paires, les autres occupent
     * toute la largeur. Sur 107 participations, la carte à une cellule par
     * ligne demandait un tiers de défilement en plus.
     */
    .table-stack > tbody > tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.25rem;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.75rem;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        background: var(--bs-body-bg);
    }

    .table-stack > tbody > tr > td {
        position: relative;
        grid-column: 1 / -1;
        padding: 0.45rem 0 0.45rem 40%;
        text-align: right;
    }

    .table-stack > tbody > tr > td.cell-compact {
        grid-column: auto;
    }

    .table-stack > tbody > tr > td::before {
        content: attr(data-label);
        position: absolute;
        top: 0.45rem;
        left: 0;
        width: 38%;
        text-align: left;
        font-weight: 600;
        color: var(--bs-secondary-color);
    }

    /* Première cellule : titre de la carte, sans intitulé ni retrait. */
    .table-stack > tbody > tr > td:first-child {
        padding-left: 0;
        text-align: left;
        font-size: 1.05rem;
        font-weight: 600;
    }

    /* Actions : boutons alignés à gauche, cibles tactiles ≥ 44 px. */
    .table-stack > tbody > tr > td.row-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-left: 0;
        border-bottom: 0;
        text-align: left;
    }

    .table-stack > tbody > tr > td.row-actions .btn,
    .table-stack > tbody > tr > td.row-actions .form-select {
        min-height: 44px;
    }

    .table-stack > tbody > tr > td:first-child::before,
    .table-stack > tbody > tr > td.row-actions::before {
        content: none;
    }
}