/* ViewPanel — variables de carto.css, donc bascule dark-mode automatique
   au passage en fond satellite. Mêmes conventions que SearchPanel : le bouton
   est un IControl natif, le panneau et son fond vivent sur le body. */

/* Le bouton vit dans un .maplibregl-ctrl-group du groupe top-right : il hérite
   de la taille, du fond et de l'ombre natifs. On ne fixe ici que le glyphe. */
.maplibregl-ctrl-group button.view-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.maplibregl-ctrl-group button.view-toggle svg {
    width: 17px;
    height: 17px;
}

.maplibregl-ctrl-group button.view-toggle.active {
    color: var(--icon-hover-color);
    background-color: rgba(79, 70, 229, .08);
}

/* Ancré sous le bouton, à droite, et non centré comme la recherche : centré, il
   recouvrirait le sélecteur d'année. Le `right` ci-dessous est fixe, aligné sur
   la marge du groupe de contrôles ; c'est le `top` que ViewPanel.positionner()
   recalcule à l'ouverture depuis le rect du bouton, la colonne de contrôles
   changeant de hauteur selon les contrôles présents. La valeur ici n'est qu'un
   repli avant la première ouverture. */
.view-panel {
    position: fixed;
    top: 52px;
    right: 10px;
    transform: translateY(-8px);
    z-index: 1100;
    width: 260px;
    /* Jamais plus de 75 % de l'écran : sur téléphone un panneau pleine largeur
       cache la carte qu'on filtre, et on ne voit plus l'effet de ce qu'on coche. */
    max-width: 75vw;
    /* Colonne flex bornée en hauteur : la liste d'espèces est le seul élément
       qui se rétracte, donc l'en-tête, l'interrupteur, le segment de suivi et
       « Tout / Aucun » restent visibles quel que soit le nombre d'espèces, sans
       avoir à deviner leur hauteur cumulée. La borne est recalculée à chaque
       ouverture par ViewPanel.positionner() ; la valeur ci-dessous n'est qu'un
       repli avant la première ouverture. */
    display: flex;
    flex-direction: column;
    max-height: var(--view-panel-max-hauteur, calc(100dvh - 60px));
    /* Dernier recours : sous ~230 px de viewport (paysage en écran partagé),
       même une ligne d'espèce ne tient plus. Le panneau défile alors en entier
       plutôt que de déborder. Au-dessus, la liste se rétracte la première et ce
       défilement-ci ne s'arme jamais. */
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    backdrop-filter: blur(3px);
    box-shadow: 0 4px 20px var(--shadow-hover-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.view-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Pas de fond cliquable : la carte reste manipulable panneau ouvert. La croix
   est donc le seul repère de fermeture visible, avec le bouton œil et Échap. */
.view-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    padding-left: 6px;
}

.view-titre {
    color: var(--text-secondary);
    font-size: 12px;
}

.view-fermer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.view-fermer svg {
    width: 15px;
    height: 15px;
}

.view-fermer:hover {
    background: var(--bg-tertiary);
    color: var(--text-color);
}

.view-fermer:focus-visible {
    outline: 2px solid var(--border-hover-color);
    outline-offset: -2px;
}

/* Suivi de l'année affichée : trois choix exclusifs, un seul actif. Segmenté
   plutôt que trois boutons séparés, pour dire qu'ils s'excluent. */
.view-suivi {
    display: flex;
    margin-bottom: 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.view-suivi-choix {
    flex: 1;
    min-height: 30px;
    padding: 5px 4px;
    border: 0;
    border-left: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.view-suivi-choix:first-child {
    border-left: 0;
}

.view-suivi-choix:hover {
    background: var(--bg-hover);
}

.view-suivi-choix[aria-pressed="true"] {
    background: var(--icon-hover-color);
    color: #fff;
}

.view-suivi-choix:focus-visible {
    outline: 2px solid var(--border-hover-color);
    outline-offset: -2px;
}

/* « Tout » et « Aucun » restent hors du défilement, comme chez Nestify. */
.view-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.view-action {
    flex: 1;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-color);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.view-action:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover-color);
}

.view-action:focus-visible {
    outline: 2px solid var(--border-hover-color);
    outline-offset: 1px;
}

/* Seule la liste défile : tous ses voisins gardent leur hauteur naturelle. */
.view-panel > *:not(.view-species) {
    flex: none;
}

.view-species {
    flex: 1 1 auto;
    min-height: 44px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.view-species::-webkit-scrollbar {
    width: 6px;
}

.view-species::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--shadow-color);
}

.view-species {
    scrollbar-width: thin;
}

/* Compact à la souris, où le pointeur est précis et où la liste gagne à tenir
   d'un seul tenant. La règle tactile des 44 px, appliquée dans tout le projet,
   est rétablie plus bas sur les pointeurs grossiers. */
.view-species-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 2px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}

.view-species-row:hover {
    background: var(--bg-tertiary);
}

.view-species-row:focus-visible {
    outline: 2px solid var(--border-hover-color);
    outline-offset: -2px;
}

.view-species-row[aria-pressed="false"] {
    opacity: .4;
}

/* Pleine si sélectionnée, creuse sinon. L'anneau neutre sous la bordure colorée
   garde la pastille visible quand la couleur se confond avec le fond : la
   Cigogne est noire, invisible sur le fond sombre du mode satellite. */
.view-pastille {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-color);
}

.view-species-nom {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.view-species-nombre {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.view-vide {
    padding: 12px 6px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.view-separateur {
    height: 1px;
    /* Pas de marge haute : en colonne flex elle s'ajouterait au margin-bottom
       de .view-suivi au lieu de s'effondrer avec lui, et le trait ne serait
       plus centré entre les deux blocs. */
    margin: 0 0 6px;
    background: var(--border-color);
}

/* Interrupteur : motif neuf dans carto, repris de Nestify en CSS pur. */
.view-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 4px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.view-switch-row:hover {
    background: var(--bg-tertiary);
}

.view-switch-row:focus-visible {
    outline: 2px solid var(--border-hover-color);
    outline-offset: -2px;
}

.view-switch {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: var(--border-color);
    transition: background-color .15s ease;
}

.view-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.view-switch-row[aria-checked="true"] .view-switch {
    background: var(--icon-hover-color);
}

.view-switch-row[aria-checked="true"] .view-switch::after {
    transform: translateX(14px);
}

/* Doigt plutôt que souris : on revient aux 44 px tactiles, seul endroit du
   projet où la cible serait sinon trop petite. Nestify fait de même. */
@media (pointer: coarse) {
    /* 36 px et non les 44 px tactiles du reste du projet : la liste peut compter
       treize espèces et le parcours comptait plus que la cible. La ligne fait
       toute la largeur du panneau, ce qui laisse une cible confortable. */
    .view-species-row {
        min-height: 36px;
        padding: 2px 6px;
    }

    .view-suivi-choix {
        min-height: 40px;
    }

    .view-fermer {
        width: 36px;
        height: 36px;
    }
}

/* Même point de rupture que SearchPanel : le panneau prend la largeur utile. */
@media (max-width: 520px) {
    .view-panel {
        width: 75vw;
        right: 8px;
    }
}