/* Page de suivi de capture des monstres */

.capture-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0;
}

.capture-save,
.capture-reset {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 1rem;
}

.capture-moins,
.capture-plus {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.capture-moins:disabled,
.capture-plus:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.capture-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

/* --- Colonnes figees pour tous les tableaux de la page ---
   table-layout: fixed : la largeur des colonnes est lue sur la 1re ligne
   (les <th>) et non calculee d'apres le contenu, donc identique d'un
   tableau a l'autre. Necessite que la largeur du tableau soit definie
   (c'est deja le cas dans votre CSS global).
   Scope sur .capture-page pour ne pas toucher les autres pages qui
   utilisent .recapTable (ex: Blitzball). */
.capture-page .recapTable table {
    table-layout: fixed;
}

.capture-page .recapTable th:nth-child(1) { width: 28%; }    /* Monstre */
.capture-page .recapTable th:nth-child(2) { width: 230px; }  /* Captures : controles ~175px + marges */
/* 3e colonne (Precisions localisation) : sans largeur, elle prend le reste */

.capture-page .recapTable td {
    vertical-align: middle;
}

.capture-page .recapTable td:nth-child(3) {
    text-align: left;
    overflow-wrap: anywhere;
}

.capture-tally {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Largeur fixe = largeur du SVG au maximum (10 = 2 paquets de 5).
       Calcul (doit rester coherent avec lineGap/groupGap/groupWidth dans
       captureMonstres.js) : 2 * groupWidth(28) + 1 * groupGap(8) = 64px.
       Sans ca, le SVG grandit avec le compte et pousse le bouton "+". */
    width: 64px;
    min-height: 28px;
    color: inherit;
}

.capture-status {
    font-style: italic;
    opacity: 0.85;
}

.zone-toggle {
    background: none;
    border: none;
    font: inherit;
    font-weight: bold;
    color: inherit;
    cursor: pointer;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zone-toggle::before {
    content: "▾";
    display: inline-block;
    font-size: 0.8em;
    transition: transform 0.15s ease;
}

.zone-toggle[aria-expanded="false"]::before {
    transform: rotate(-90deg);
}