/* ==========================================================================
   WCES — Thème Tom Select pour les pages publiques
   --------------------------------------------------------------------------
   Réplique à l'identique le sélecteur de la page d'édition bâtiment (EU /
   gestion). Les valeurs ci-dessous ne sont pas une interprétation : elles ont
   été relevées sur le rendu réel du composant KTUI (styles calculés de
   `.ts-control` / `.ts-dropdown` / `.option` sur `wces-prototype/ref/`), les
   tokens Tailwind étant résolus en dur puisque le site public ne charge pas
   `front2/assets/css/styles.css`.

     --color-foreground-secondary       #4f5561   texte du contrôle
     --color-foreground-primary         #082a23   texte des options
     --color-border-primary             #edeff2   bordure du panneau
     --color-background-info            #164ec6   bordure au survol
     --color-background-hover-onprimary rgba(0, 0, 0, 0.06)
     --color-background-selected-onprimary rgba(217, 239, 10, 0.12)

   La bordure du contrôle reste le #d0d0d0 par défaut de Tom Select : c'est
   bien lui qui l'emporte côté EU, le token `border-onsecondary` (#e5e8eb)
   n'étant jamais appliqué.

   À charger APRÈS vendor/tom-select/tom-select.min.css.
   ========================================================================== */

/* Le <select> d'origine reste dans le DOM (masqué via .ts-hidden-accessible par
   Tom Select) : il conserve sa valeur et émet bien l'événement `change`, les
   scripts de filtrage existants continuent donc de fonctionner. */
.ts-wrapper {
    font-family: var(--font-family);
}

/* --------------------------------------------------------------------------
   Contrôle (état fermé)
   -------------------------------------------------------------------------- */
.ts-wrapper .ts-control {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
    color: #4f5561;
    cursor: pointer;
    transition: border-color 0.3s;
}

.ts-wrapper:not(.disabled) .ts-control:hover {
    border-color: #164ec6;
}

/* `.ts-control` porte `tabindex="0"` : sans cette règle le navigateur y pose
   son contour de focus par défaut (noir et épais). Côté EU c'est le
   `focus:outline-none` de input.css qui le neutralise. */
.ts-wrapper .ts-control:focus,
.ts-wrapper .ts-control:focus-visible {
    outline: none;
}

/* L'EU ne signale pas du tout le focus. Sur une page publique, ne rien mettre
   est un recul d'accessibilité : le focus reprend donc simplement la couleur
   de bordure du survol, sans anneau. */
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: #164ec6;
}

.ts-wrapper.disabled .ts-control {
    background: #f5f5f5;
    opacity: 1;
}

/* Chevron — glyphe `ki-down` de keenicons-filled (\eaa3) utilisé côté EU,
   converti en SVG inline : charger la fonte (431 Ko) pour une seule icône
   n'a pas de sens sur une page publique. Tracé repris tel quel de
   `front2/assets/vendors/keenicons/fonts/keenicons-filled.svg`, remis en
   repère écran par `translate(0, 960) scale(1, -1)` (units-per-em 1024,
   ascent 960). */
.ts-wrapper .ts-control::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%234f5561' transform='translate(0,960) scale(1,-1)' d='M893.265 633.546c20.71-19.995 20.71-52.413 0-72.407l-353.587-341.332c-20.71-19.998-54.293-19.998-75.004 0l-333.942 322.369c-20.713 19.995-20.713 52.413 0 72.408s54.294 19.995 75.006 0l296.439-286.164 316.079 305.127c20.71 19.995 54.293 19.995 75.008 0z'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.6;
    pointer-events: none;
}

/* Item sélectionné : tronqué, jamais sous le chevron (cf. select.css) */
.ts-wrapper .ts-control .item {
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Champ de saisie interne (masqué quand la recherche est désactivée) */
.ts-wrapper .ts-control > input {
    font-size: 13px;
    line-height: 16px;
    color: #4f5561;
    min-height: 0;
}

.ts-wrapper .ts-control > input::placeholder {
    color: #4f5561;
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Panneau déroulant
   -------------------------------------------------------------------------- */
.ts-dropdown {
    margin: 8px 0 0;
    padding: 8px;
    border: 1px solid #edeff2;
    border-top: 1px solid #edeff2;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    z-index: 60;
}

.ts-dropdown-content {
    max-height: 30vh;
}

.ts-dropdown .option {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 8px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #082a23;
    transition: background-color 0.15s;
}

.ts-dropdown .option + .option {
    margin-top: 4px;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #082a23;
}

.ts-dropdown .option.selected {
    background: rgba(217, 239, 10, 0.12);
    color: #082a23;
}

.ts-dropdown .no-results {
    padding: 8px;
    font-size: 13px;
    color: #4f5561;
}

/* Recherche intégrée au panneau (plugin dropdown_input) */
.ts-dropdown.plugin-dropdown_input .dropdown-input-wrap {
    padding: 0;
}

.ts-dropdown .dropdown-input {
    width: 100%;
    height: 38px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid #edeff2;
    border-width: 1px;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    line-height: 16px;
    color: #4f5561;
}

.ts-dropdown .dropdown-input:focus {
    outline: none;
    border-color: #164ec6;
}

/* Ouverture vers le haut / vers le bas (cf. onDropdownOpen) */
.ts-dropdown-top {
    transform-origin: bottom;
    bottom: calc(100% + 8px) !important;
    border-radius: 6px;
}

.ts-dropdown-bottom {
    transform-origin: top;
}

/* --------------------------------------------------------------------------
   Barre de filtres de l'annuaire
   -------------------------------------------------------------------------- */

/* Note : Tom Select recopie les classes du <select> sur son wrapper. Les règles
   de repli ci-dessous sont donc qualifiées par `select.` pour ne jamais
   s'appliquer au wrapper (sinon double bordure / double padding). */

.filters-bar .ts-wrapper {
    flex: 0 1 auto;
    width: auto;
    min-width: 176px;
}

/* Repli sans JS : le <select> natif reprend l'apparence du contrôle habillé. */
select.wces-select {
    height: 38px;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    font-family: var(--font-family);
    font-size: 13px;
    color: #4f5561;
}

.filters-bar select.wces-select {
    flex: 0 1 auto;
    width: auto;
    min-width: 176px;
}

@media (max-width: 768px) {
    .filters-bar .ts-wrapper,
    .filters-bar select.wces-select {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}