/* -------------------------------------------------------------------------
   Selecteur des elements du pied de page (champ 'form_pages').

   Refonte du 2026-07-28. L'ancienne version posait les deux listes dans un
   <table> avec 20px de marge, 20px de retrait et min-height 300px, des lignes
   qui grossissaient au survol (font-size: 18px) et un halo cyan anime pendant
   le glisser. Sur une vingtaine de pages c'etait inutilisable.

   Principes retenus :
     - lignes a 30px, pour qu'une vingtaine d'entrees tiennent sans defiler ;
     - deux panneaux de MEME hauteur avec leur propre ascenseur, pour que la
       cible de depot soit toujours pleine, meme quand la colonne de droite
       est vide ;
     - le clic choisit, le glisser n'ordonne que dans la colonne de droite.

   Tout est exprime en variables de theme, pour suivre la peau active du
   back-office (--color-light vaut #d0b26e sur la peau gold, autre chose
   ailleurs). Corrige le 2026-07-28 : la premiere version figeait les couleurs
   de la peau blacktie et aurait jure avec les autres.
------------------------------------------------------------------------- */

.bcms-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    max-width: 1100px;
    margin: 10px auto 0;
}

.bcms-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--presque-blanc);
}

.bcms-count {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--presque-blanc);
}

.bcms-filter {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    margin-bottom: 8px;
    padding: 0 10px;
    font-size: 12px;
    color: var(--label);
    background: var(--bck-input);
    border: 1px solid var(--fond-gris-next-next);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.15s ease;
}

.bcms-filter::-webkit-input-placeholder { color: var(--presque-blanc); }
.bcms-filter::-moz-placeholder { color: var(--presque-blanc); opacity: 1; }
.bcms-filter::placeholder { color: var(--presque-blanc); }
.bcms-filter:focus { border-color: var(--color-light); }

/* Cale la liste de droite sur celle de gauche, qui porte le champ de filtre. */
.bcms-headspacer {
    height: 38px;
}

.bcms-list {
    height: 260px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: var(--fond-gris-next);
    border: 1px solid var(--fond-gris-next-next);
    border-radius: 4px;
}

ul.bcms-list > li.ui-state-default {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 12px;
    color: var(--pq-grid-row-txt);
    border-bottom: 1px solid var(--fond-gris-next-next);
    cursor: pointer;
}

ul.bcms-list > li.ui-state-default:last-child { border-bottom: 0; }
ul.bcms-list > li.ui-state-default:hover {
    color: var(--pq-grid-row-txt-hover);
    background: var(--fond-gris-next-next);
}

.bcms-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bcms-grip,
.bcms-move,
.bcms-add,
.bcms-del {
    flex: none;
    font-size: 12px;
    color: var(--presque-blanc);
}

.bcms-grip { cursor: grab; }
.bcms-add { color: var(--color-light); }
.bcms-move:hover,
.bcms-del:hover { color: var(--blanc); }

/* Chaque ligne porte les deux jeux de commandes ; on masque celui qui ne
   correspond pas a la colonne. Deplacer un <li> d'une liste a l'autre ne
   demande donc aucune reecriture de son contenu. */
.bcms-list-out .bcms-grip,
.bcms-list-out .bcms-move,
.bcms-list-out .bcms-del,
.bcms-list-in .bcms-add {
    display: none;
}

.bcms-hidden { display: none !important; }

/* Etat vide : la colonne de droite dit ce qu'on attend d'elle. */
/* NB : on ne peut pas utiliser :empty — Smarty laisse des noeuds de texte
   (retours a la ligne du {foreach}) dans le <ul> meme sans element. La classe
   est donc posee par reindex(). */
.bcms-list-in.bcms-empty::after {
    content: attr(data-empty);
    display: block;
    margin: 12px;
    padding: 24px 10px;
    font-size: 12px;
    color: var(--presque-blanc);
    text-align: center;
    border: 1px dashed var(--fond-gris-next-next);
    border-radius: 4px;
}

.bcms-mid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding-top: 76px;
}

.bcms-bulk {
    width: 34px;
    height: 28px;
    padding: 0;
    font-size: 13px;
    color: var(--btn-off-txt);
    background: var(--btn-off);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.bcms-bulk:hover {
    color: var(--btn-on-txt);
    background: var(--color-light);
}

/* Pendant le glisser : un simple liseré, sans halo ni animation. */
ul.bcms-list > li.ui-sortable-helper {
    background: var(--fond-gris-next-next);
    border: 1px solid var(--color-light);
    border-radius: 3px;
}

ul.bcms-list > li.bcms-ph {
    height: 30px;
    box-sizing: border-box;
    background: var(--fond-noir);
    border: 1px dashed var(--fond-gris-next-next);
    border-radius: 3px;
}

/* ---- Regles conservees de l'ancienne feuille -------------------------- */

#pluginFrameArea .panel-footer {
    display: block !important;
}

table#cms_pages .control-label {
    display: block !important;
    text-align: left;
}