/*
  panel-texture.css — Styles spécifiques du panneau Texture
  Styles visuels des boutons → boutons.css (.sel-btn)
  Version 8.1.3 (largeur panneau imposée 270px)
  Logs:
  - v8.1.3: width 270px imposée sur #texturesAndControlsPanel
  - v8.1.1: map-options en grille 3 colonnes (desktop), suppression wrap flex pour alignement 3xN à 300px
  - v8.1.0: @media max-height 680px → grid 2×6 (12+ miniatures) ; seuil = PanelState.VIEWPORT_COMPACT_HEIGHT_PX
*/

/* ═══════════════════════════════════════════════
   PANNEAU TEXTURES
   ═══════════════════════════════════════════════ */

#texturesAndControlsPanel {
    min-height: 343px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

/* Liste textures en grille 3 colonnes (desktop) */
#texturesAndControlsPanel .map-options {
    display: grid;
    grid-template-columns: repeat(3, 70px);
    grid-auto-rows: auto;
    grid-auto-flow: row;
    max-width: none; /* écrase max-width: 55% de main.css */
    row-gap: 14px;
    column-gap: 15px;
    padding: 7px;
    box-sizing: border-box;
    align-items: start;
    justify-items: center;
    scrollbar-width: none;
    /* Chevauchement barre de titre — même principe que .topology-option[plane] */
    margin-top: -24px;
    position: relative;
    z-index: 5;
}
#texturesAndControlsPanel .map-options::-webkit-scrollbar {
    display: none;
}

/* Bouton : taille déterminée par l'image + padding seulement */
#texturesAndControlsPanel .map-option-vertical {
    width: auto;
    height: auto;
    max-height: none; /* annule max-height: 30px hérité de main.css .map-option */
    min-width: unset; /* annule min-width: 50px hérité de main.css .map-option */
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Miniature : dimensions fixes 2:1 */
#texturesAndControlsPanel .map-thumb {
    width: 70px;
    height: 35px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
}

/* Cacher le radio button natif */
#texturesAndControlsPanel input[type="radio"] {
    display: none;
}

/* Vue basse : on conserve 3 colonnes pour alignement stable 3xN */
@media (max-height: 680px) {
    #texturesAndControlsPanel .map-options {
        grid-template-columns: repeat(3, 70px);
        grid-auto-rows: auto;
        grid-auto-flow: row;
        align-items: start;
        justify-items: center;
    }

    #texturesAndControlsPanel .map-option-vertical {
        width: 70px;
        max-width: 70px;
        justify-content: center;
    }
}