/* Copyright (c) 2025-2026 kwargs SRL, Bruxelles. Tous droits reserves.
   Styles partages pour les panneaux "Ma selection" des etapes 1
   (metiers) et 2 (diplomes) : chips en liste verticale avec rang,
   fleches de reordonnancement, tag "principal", bouton retirer. */

#selected-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.chip-item { display: block; }
.chip {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .5rem .75rem;
    border-radius: .4rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    font-size: .9rem;
    line-height: 1.2;
}
/* Ligne au sein du chip : ligne d'identité (titre, contrôles) ou
   ligne d'édition (description, année). Plusieurs lignes sont
   empilées verticalement dans un même chip. */
.chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .5rem;
}
.chip-row-edit {
    padding-top: .35rem;
    border-top: 1px dotted var(--bs-border-color);
}
.chip-item.is-primary .chip {
    border-color: var(--ks-coral);
    background: rgba(var(--ks-primary-rgb), .04);
}
.chip-rank {
    flex-shrink: 0;
    min-width: 1.3rem;
    font-size: .72rem;
    font-weight: 700;
    opacity: .55;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.chip-label {
    flex: 1 1 0;
    min-width: 0;
    word-break: break-word;
}
/* Sur très petit écran : le label prend toute la ligne pour éviter
   l'écrasement des autres éléments (EQF, année, étiquettes). En
   desktop le label wrap son propre contenu sans pousser les badges. */
@media (max-width: 575.98px) {
    .chip-label { flex-basis: 100%; }
}
.chip-main-tag {
    flex-shrink: 0;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .4rem;
    border-radius: .2rem;
    background: var(--ks-coral);
    color: #fff;
    font-weight: 600;
}
.chip-move {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    padding: 0 .2rem;
    font-size: 1rem;
    line-height: 1;
    width: 1.3rem;
}
.chip-move:hover:not(:disabled) { opacity: 1; color: var(--ks-brand-accent); }
.chip-move:disabled { opacity: .2; cursor: default; }
.chip-remove {
    flex-shrink: 0;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: .45;
    cursor: pointer;
    padding: 0 .25rem;
    font-size: 1rem;
    line-height: 1;
}
.chip-remove:hover { opacity: 1; color: var(--ks-coral); }

/* Bouton info révélant la description ESCO sous la chip (accordéon). */
.chip-info {
    flex-shrink: 0;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: .5;
    cursor: pointer;
    padding: 0 .25rem;
    font-size: .95rem;
    line-height: 1;
}
.chip-info:hover { opacity: 1; }
.chip-info + .chip-remove { margin-left: 0; }
.chip-desc {
    font-size: .82rem;
    line-height: 1.4;
    opacity: .75;
    padding: .35rem .25rem 0 .25rem;
}

/* Pastille EQF utilisee dans les chips de diplomes. Couleur par
   niveau EQF (1-8) : du clair au saturé pour suggérer la montée
   en spécialisation. La classe .eqf-N est ajoutée par le JS de
   rendering en fonction de item.eqf_level. */
.chip .chip-eqf {
    font-size: .65rem;
    padding: .05rem .35rem;
    border-radius: .2rem;
    background: var(--ks-gold);
    color: var(--ks-navy);
    font-weight: 700;
    flex-shrink: 0;
    cursor: help;
}
.eqf-1 { background: #cbd5e1 !important; color: #1e293b !important; }
.eqf-2 { background: #94a3b8 !important; color: #ffffff !important; }
.eqf-3 { background: #7fb069 !important; color: #ffffff !important; }
.eqf-4 { background: #2a9d5c !important; color: #ffffff !important; }
.eqf-5 { background: #56ACE0 !important; color: #ffffff !important; }
.eqf-6 { background: #194F82 !important; color: #ffffff !important; }
.eqf-7 { background: #FFC10D !important; color: #1e293b !important; }
.eqf-8 { background: #d6336c !important; color: #ffffff !important; }
.chip .chip-country {
    font-size: .72rem;
    opacity: .55;
}

/* Champ "intitulé" : prend la majeure partie de la ligne d'édition,
   permet à l'utilisateur de préciser le nom exact du diplôme. */
.chip-desc {
    flex: 1 1 12rem;
    min-width: 8rem;
    padding: .2rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: var(--bs-body-bg);
    color: inherit;
    font-size: .82rem;
}
.chip-desc:focus {
    outline: 2px solid var(--ks-brand-accent);
    outline-offset: -1px;
    border-color: var(--ks-brand-accent);
}

/* Champ "année" sur les chips de diplômes : compact et discret */
.chip-year {
    flex-shrink: 0;
    width: 4.5rem;
    padding: .15rem .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: var(--bs-body-bg);
    color: inherit;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
}
.chip-year::-webkit-outer-spin-button,
.chip-year::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.chip-year:focus {
    outline: 2px solid var(--ks-brand-accent);
    outline-offset: -1px;
    border-color: var(--ks-brand-accent);
}