/* ============================================================
   MatchHub — Interests Picker & Display v2.0
   ============================================================ */

/* ------------------------------------------------------------------ */
/*  Picker (sélecteur interactif)                                       */
/* ------------------------------------------------------------------ */

.mh-interests-picker {
    background: var(--mh-bg-card);
    border: 1px solid var(--mh-border);
    border-radius: .75rem;
    padding: 1.25rem;
}

/* Barre de filtre / recherche */
.mh-interests-filter {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.mh-interests-search {
    flex: 1;
    min-width: 160px;
    background: var(--mh-bg-elevated);
    border: 1px solid var(--mh-border);
    border-radius: .5rem;
    color: var(--mh-text);
    font-size: .85rem;
    padding: .45rem .75rem;
    outline: none;
    transition: border-color .2s;
}
.mh-interests-search:focus { border-color: var(--mh-primary); }
.mh-interests-search::placeholder { color: var(--mh-text-dim); }

/* Compteur de sélection */
.mh-interests-count {
    font-size: .8rem;
    color: var(--mh-text-dim);
    white-space: nowrap;
    align-self: center;
    margin-left: auto;
}
.mh-interests-count strong { color: var(--mh-primary); }

/* ------------------------------------------------------------------ */
/*  Familles d'intérêts                                                 */
/* ------------------------------------------------------------------ */

.mh-interests-families {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: .25rem;
}

/* Scrollbar discrète */
.mh-interests-families::-webkit-scrollbar { width: 4px; }
.mh-interests-families::-webkit-scrollbar-track { background: transparent; }
.mh-interests-families::-webkit-scrollbar-thumb {
    background: var(--mh-border);
    border-radius: 2px;
}

.mh-interests-family { display: flex; flex-direction: column; gap: .5rem; }

.mh-interests-family__label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mh-text-dim);
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Icône emoji famille */
.mh-interests-family__icon { font-size: .9rem; }

.mh-interests-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* ------------------------------------------------------------------ */
/*  Tag individuel (chip cliquable)                                     */
/* ------------------------------------------------------------------ */

.mh-interest-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 9999px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--mh-border);
    background: var(--mh-bg-elevated);
    color: var(--mh-text-muted);
    transition: border-color .15s, background .15s, color .15s, transform .1s;
    user-select: none;
    white-space: nowrap;
}

.mh-interest-tag:hover {
    border-color: var(--mh-primary);
    color: var(--mh-primary);
    transform: scale(1.04);
}

.mh-interest-tag.selected {
    background: color-mix(in srgb, var(--mh-primary) 18%, transparent);
    border-color: var(--mh-primary);
    color: var(--mh-primary);
}

.mh-interest-tag.selected::before {
    content: '✓ ';
    font-weight: 700;
}

.mh-interest-tag.hidden { display: none; }

/* Famille complètement masquée par la recherche */
.mh-interests-family.no-match { display: none; }

/* ------------------------------------------------------------------ */
/*  État chargement du picker                                           */
/* ------------------------------------------------------------------ */

.mh-interests-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2rem;
    color: var(--mh-text-dim);
    font-size: .85rem;
}

/* ------------------------------------------------------------------ */
/*  Message sélectionnez au moins N                                     */
/* ------------------------------------------------------------------ */

.mh-interests-hint {
    font-size: .8rem;
    color: var(--mh-text-dim);
    margin-top: .75rem;
    text-align: center;
}
.mh-interests-hint.warning { color: #f59e0b; }

/* ------------------------------------------------------------------ */
/*  Affichage (profil public, etc.)                                     */
/* ------------------------------------------------------------------ */

.mh-interests-display { display: flex; flex-direction: column; gap: 1rem; }

.mh-interests-display__family {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.mh-interests-display__family-name {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mh-text-dim);
}

.mh-interests-display__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Tag en mode affichage (non cliquable) */
.mh-interest-tag--display {
    padding: .25rem .65rem;
    border-radius: 9999px;
    font-size: .78rem;
    font-weight: 500;
    background: var(--mh-bg-elevated);
    border: 1px solid var(--mh-border);
    color: var(--mh-text-muted);
    cursor: default;
}

/* Tag commun (mis en valeur sur le profil public) */
.mh-interest-tag--common {
    background: color-mix(in srgb, var(--mh-accent) 18%, transparent);
    border-color: var(--mh-accent);
    color: var(--mh-accent);
}

/* ------------------------------------------------------------------ */
/*  Variante inline (utilisée dans le formulaire auth step 3)          */
/* ------------------------------------------------------------------ */

.mh-interests-picker--inline .mh-interests-families {
    max-height: 280px;
}

/* ------------------------------------------------------------------ */
/*  Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
    .mh-interests-tags { gap: .3rem; }
    .mh-interest-tag  { font-size: .75rem; padding: .25rem .6rem; }
    .mh-interests-families { max-height: 320px; }
}