/* Bandeau de pilotage, scène et bande du mode « tapis » (picking-hud.js).
   Partagé par la mosaïque de picking et le tapis des listes de stock ; l'habillage des tuiles reste dans chaque page. */

/* ---- Barre de pilotage (remplie par picking-hud.js) ---- */
.picking-hud {
    display: flex;
    flex-wrap: wrap; /* recherche et réglages passent à la ligne quand la place manque, le set courant reste lisible */
    align-items: center;
    gap: 6px 20px;
    margin: 0 0 12px 0;
    padding: 8px 88px 8px 16px; /* 88px : place pour le panneau d'options (fixed, à droite) */
    background: #152338;
    color: #fff;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    min-height: 52px;
}

/* Option « Ancrer la barre » : collante sous la barre d'application (64 px) */
.picking-hud.pinned {
    position: sticky;
    top: 64px;
    z-index: 90;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.phud-progress { flex: 0 0 220px; display: flex; flex-direction: column; gap: 4px; }
.phud-counts { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 600; }
.phud-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.18); overflow: hidden; }
.phud-bar { height: 100%; width: 0; background: #22c55e; transition: width 0.15s ease; }

.phud-setline {
    flex: 1 1 240px;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--set-color, rgba(255,255,255,0.8));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phud-order { text-transform: none; letter-spacing: 0; color: var(--opaps-gold, #b9900b); }

/* Recherche set / carte : pas de liste, la frappe emmène au premier résultat, ‹ › et Entrée font défiler */
.phud-search { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.phud-search-box {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.phud-search-box:focus-within { border-color: var(--opaps-gold, #b9900b); }
.phud-search-box input {
    width: 104px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    outline: none;
}
.phud-search-box input::placeholder { color: rgba(255, 255, 255, 0.45); }
.phud-search-box input::-webkit-search-cancel-button { filter: invert(1); }
.phud-search-box button {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    border-radius: 4px;
}
.phud-search-box button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.phud-search-box button:disabled { opacity: 0.3; cursor: default; }
.phud-search-count { font-size: 0.75rem; min-width: 2.6em; text-align: center; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }

.phud-controls { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; flex: 0 0 auto; }
.phud-controls label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.phud-controls select { font-size: 0.85rem; border-radius: 4px; padding: 1px 4px; }

.phud-mode {
    border: 1px solid var(--opaps-gold, #b9900b);
    background: transparent;
    color: var(--opaps-gold, #b9900b);
    border-radius: 6px;
    padding: 3px 10px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.phud-mode.active { background: var(--opaps-gold, #b9900b); color: #152338; }

.mosaic-stage.conveyor {
    position: relative;
    overflow: hidden;
    background: #152338;
    border-radius: 12px;
    min-height: 640px;
    display: flex;
    align-items: center;
}

/* Symbole du set suivant : quand la prochaine carte change de set ou de boîte, son symbole apparaît en fondu juste
   au-dessus de cette carte, avec un halo discret. */
.phud-next-set { display: none; }
.mosaic-stage.conveyor .phud-next-set {
    display: flex;
    position: absolute;
    /* Juste au-dessus de la carte suivante, centré sur sa largeur : son centre est à 212 px (pas du tapis) + 44 px
       (translation) du centre de la scène ; à 1,4× elle fait ~350 px de haut, centrée verticalement. */
    top: calc(50% - 222px);
    left: calc(50% + 256px);
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 26px rgba(185, 144, 11, 0.35));
}
.mosaic-stage.conveyor .phud-next-set.show { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
.phud-next-set-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.phud-next-set-icon svg { width: 100%; height: 100%; }
.phud-next-set-icon svg, .phud-next-set-icon svg * { fill: #fff !important; }

.mosaic-stage.conveyor .mosaic-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}