/* ===== LIBRARY-MODAL.CSS ===== */
/* Styles de la modale bibliothèque de tablatures.
   Commun à tous les modes utilisant library.js.
   Dépend des variables définies dans le design system. */

/* ===== TAILLE DE LA MODALE ===== */

#libraryOverlay .modal-content {
    max-width: 52rem;
}

/* ===== BOUTON RETOUR DANS LE HEADER ===== */

.library-back-btn {
    background: rgba(255, 255, 255, 0.2);
    color: var(--texte-blanc);
    border: var(--bordure-normale) solid rgba(255, 255, 255, 0.3);
    border-radius: var(--rayon-md);
    width: var(--hauteur-bouton);
    height: var(--hauteur-bouton);
    min-width: var(--hauteur-bouton);
    font-size: var(--texte-lg);
    cursor: pointer;
    transition: all var(--transition-normale);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.library-back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: var(--texte-blanc);
}

/* ===== ONGLETS BIBLIOTHÈQUE ===== */

.library-tabs {
    display: flex;
    gap: var(--gap-xs);
    border-bottom: var(--bordure-fine) solid var(--bordure-creme);
    margin-bottom: var(--margin-md);
}

.library-tab {
    flex: 1;
    padding: var(--padding-sm) var(--padding-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--texte-base);
    font-weight: var(--poids-semi-bold);
    color: var(--texte-secondaire);
    cursor: pointer;
    transition: all var(--transition-rapide);
    margin-bottom: -1px;
}

.library-tab:hover {
    color: var(--couleur-primaire);
}

.library-tab.active {
    color: var(--couleur-primaire);
    border-bottom-color: var(--couleur-primaire);
}

/* ===== COMPTEUR ARTISTE ===== */

.library-artist-count {
    font-size: var(--texte-sm);
    font-weight: var(--poids-semi-bold);
    color: var(--texte-secondaire);
    background: var(--fond-clair);
    border: var(--bordure-fine) solid var(--bordure-claire);
    border-radius: 999px;
    padding: 0.1rem var(--padding-sm);
    flex-shrink: 0;
}

/* ===== ÉTATS CHARGEMENT / VIDE ===== */

.library-loading,
.library-empty {
    text-align: center;
    padding: var(--padding-xxl);
    color: var(--texte-secondaire);
    font-size: var(--texte-base);
}

.library-loading i {
    font-size: var(--texte-xxl);
    color: var(--couleur-primaire);
}

/* ===== LIGNE (dossier ou tablature + boutons d'action) ===== */

.library-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    border-bottom: var(--bordure-fine) solid var(--bordure-creme);
}

.library-row:last-child {
    border-bottom: none;
}

/* ===== BOUTON PRINCIPAL (dossier ou tablature) ===== */

.library-folder-item,
.library-tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--padding-md) var(--padding-lg);
    background: none;
    border: none;
    border-radius: var(--rayon-md);
    font-size: var(--texte-base);
    color: var(--texte-principal);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-rapide);
    min-width: 0;
}

.library-folder-item:hover,
.library-tab-item:hover {
    background: var(--couleur-primaire-claire);
}

.library-folder-item i,
.library-tab-item i {
    color: var(--couleur-primaire);
    font-size: var(--texte-lg);
    flex-shrink: 0;
}

.library-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-chevron {
    color: var(--texte-secondaire);
    font-size: var(--texte-sm);
    flex-shrink: 0;
}

.library-tab-capo {
    font-size: var(--texte-sm);
    font-weight: var(--poids-semi-bold);
    color: var(--couleur-primaire-foncee);
    background: var(--couleur-primaire-claire);
    border: var(--bordure-fine) solid var(--bordure-principale);
    border-radius: var(--rayon-sm);
    padding: 0.1rem var(--padding-sm);
    flex-shrink: 0;
}

/* ===== BOUTONS D'ACTION (renommer / supprimer) ===== */

.library-item-actions {
    display: flex;
    gap: var(--gap-xs);
    flex-shrink: 0;
    padding-right: var(--padding-sm);
}

.library-action-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: var(--bordure-fine) solid transparent;
    border-radius: var(--rayon-sm);
    font-size: var(--texte-sm);
    color: var(--texte-secondaire);
    cursor: pointer;
    transition: all var(--transition-rapide);
    flex-shrink: 0;
}

.library-action-btn:hover {
    background: var(--fond-clair);
    border-color: var(--bordure-claire);
    color: var(--couleur-primaire);
}

.library-action-delete:hover {
    background: #fff0f0;
    border-color: #fca5a5;
    color: #e53e3e;
}

.library-action-confirm:hover {
    background: #f0fff4;
    border-color: #86efac;
    color: #22c55e;
}

/* ===== INPUT DE RENOMMAGE INLINE ===== */

.library-rename-input {
    flex: 1;
    padding: var(--padding-xs) var(--padding-sm);
    border: var(--bordure-normale) solid var(--couleur-primaire);
    border-radius: var(--rayon-sm);
    font-size: var(--texte-base);
    color: var(--texte-principal);
    background: var(--fond-blanc);
    outline: none;
    min-width: 0;
}

.library-rename-input:focus {
    box-shadow: 0 0 0 2px var(--couleur-primaire-claire);
}

/* ===== SÉPARATEUR PARAM ===== */

.param-separator {
    border: none;
    border-top: var(--bordure-fine) solid var(--bordure-creme);
    margin: var(--margin-lg) 0;
}

/* ===== AUTOCOMPLETE ARTISTE ===== */

.artiste-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    margin: 0;
    padding: var(--padding-xs) 0;
    list-style: none;
    background: var(--fond-blanc);
    border: var(--bordure-normale) solid var(--couleur-primaire);
    border-top: none;
    border-radius: 0 0 var(--rayon-md) var(--rayon-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 12rem;
    overflow-y: auto;
}

.artiste-autocomplete-item {
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--texte-base);
    color: var(--texte-principal);
    cursor: pointer;
    transition: background var(--transition-rapide);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artiste-autocomplete-item:hover,
.artiste-autocomplete-item.active {
    background: var(--couleur-primaire-claire);
    color: var(--couleur-primaire-foncee);
}

.artiste-autocomplete-item strong {
    font-weight: var(--poids-semi-bold);
    color: var(--couleur-primaire);
}

/* ===== CHIPS ARTISTES ===== */

.library-artists-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    padding: var(--padding-sm) 0;
}

.library-artist-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--padding-xs) var(--padding-md);
    background: var(--couleur-primaire-claire);
    border: var(--bordure-fine) solid var(--bordure-principale);
    border-radius: 999px;
    font-size: var(--texte-sm);
    font-weight: var(--poids-semi-bold);
    color: var(--couleur-primaire-foncee);
    cursor: pointer;
    transition: all var(--transition-rapide);
    white-space: nowrap;
}

.library-artist-chip:hover {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: var(--texte-blanc);
}

/* ===== ÉTOILE FAVORI ACTIVE ===== */

.library-action-favorite.is-favorite {
    color: #f59e0b;
    border-color: #fde68a;
    background: #fffbeb;
}

.library-action-favorite.is-favorite:hover {
    color: #d97706;
    border-color: #fcd34d;
    background: #fef3c7;
}