/* SearchPanel — variables de carto.css, donc bascule dark-mode automatique
   au passage en fond satellite. */

/* Le bouton vit dans un .maplibregl-ctrl-group du groupe top-right : il herite
   de la taille, du fond et de l'ombre natifs, donc du meme rendu que le bouton
   relief juste au-dessus. On ne fixe ici que le centrage du glyphe. */
.maplibregl-ctrl-group button.search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

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

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

.search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
}

.search-backdrop.visible {
    display: block;
}

.search-panel {
    position: fixed;
    top: 52px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 1100;
    width: calc(100vw - 16px);
    max-width: 560px;
    padding: 10px;
    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;
    opacity: 0;
    pointer-events: none;
    transition: all .2s ease;
}

.search-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-color);
    font-size: 14px;
    font-family: inherit;
}

.search-input:focus {
    outline: none;
    border-color: var(--border-hover-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color-strong);
}

.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0;
}

.search-chip {
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s ease;
}

/* --chip-color est pose en ligne par SearchPanel.js, par type de resultat :
   la puce porte la meme couleur que l'icone des resultats correspondants. */
.search-chip.active {
    border-color: var(--chip-color);
    color: var(--chip-color);
    background: color-mix(in srgb, var(--chip-color) 12%, transparent);
}

/* color-mix n'est pas universel : repli lisible dans les deux themes. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .search-chip.active {
        background: var(--focus-ring-color);
    }
}

body.dark-mode .search-chip.active {
    /* les teintes 700 de Nestify manquent de contraste sur fond sombre */
    filter: brightness(1.45);
}

/* max-height en vh : garde la liste au-dessus du clavier mobile */
.search-results {
    max-height: 60vh;
    overflow-y: auto;
}

.search-hint {
    padding: 12px 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

.search-result {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s ease;
}

.search-result:hover,
.search-result.active {
    background: var(--bg-tertiary);
    border-color: var(--border-hover-color);
}

/* Icone par type : pastille d'espece pour un nichoir, glyphe colore sinon.
   C'est le repere de lecture principal, comme dans Nestify. */
.search-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

/* min-width: 0 indispensable : sans lui un commentaire long empeche le flex
   enfant de rétrécir et deborde du panneau au lieu d'etre tronque. */
.search-result-body {
    flex: 1;
    min-width: 0;
}

.search-result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.search-label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
}

/* Ferme, entite parente et annee : contexte secondaire, aligne a droite. */
.search-context {
    flex-shrink: 0;
    max-width: 45%;
    color: var(--text-secondary);
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-meta {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 12px;
}

.search-comment {
    margin-top: 2px;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.35;
    /* l'extrait est centré sur la correspondance côté SQL, on le tronque à
       deux lignes plutôt que de laisser une ligne exploser la hauteur */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Exploitation depliable ---------------------------------------------
   Une ferme n'a pas de geometrie propre : le resultat sert de tete de liste
   vers ses parcelles, depliees sur place. Le chevron est un bouton separe du
   libelle, les deux actions etant distinctes (cadrer l'exploitation entiere
   contre lister ses parcelles). */
.search-group {
    margin-bottom: 4px;
}

.search-group-head {
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.search-group-head .search-result {
    margin-bottom: 0;
}

.search-expand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s ease;
}

.search-expand:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-hover-color);
}

.search-expand svg {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.search-expand[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Le filet vertical rattache visuellement les parcelles a leur exploitation. */
.search-children {
    margin: 2px 0 0 28px;
    padding-left: 8px;
    border-left: 2px solid var(--border-color);
}

.search-child {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s ease;
}

.search-child:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-hover-color);
}

/* Parcelle sans geometrie : affichee, mais rien a cadrer. */
.search-child[disabled] {
    opacity: .55;
    cursor: default;
}

.search-child[disabled]:hover {
    background: transparent;
    border-color: transparent;
}

.search-child-label {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.search-child-meta {
    color: var(--text-secondary);
    font-size: 11px;
}

/* Le bouton suit desormais le groupe maplibre top-right, il n'a plus besoin
   d'etre repositionne. Seul le panneau remonte, l'espace vertical etant rare. */
@media (max-width: 520px) {
    .search-panel {
        top: 44px;
    }

    .search-context {
        max-width: 38%;
    }
}