/* ==============================================================
   BARRE D'OUTILS COMMUNE — "patte" visuelle partagée des pages à
   liste (Bibliothèque, Mes Notes, Auteurs). Chaque page aligne ses
   5 contrôles dans le même ordre :
   recherche → bouton de filtre (ou espace réservé) → bascules de
   vue → tri → compteur. Seule la disposition et les éléments eux-
   mêmes sont factorisés ici ; chaque page garde ses propres ids et
   sa logique JS (les classes existantes sont conservées en plus).
   ============================================================== */

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Groupes de bascules (onglets / vues / dispositions) ──
   Même conteneur "pilule" et même style de bouton actif partout :
   fond plein vert (doré en thème sombre), quel que soit le nom de
   la page qui l'utilise. */
.library-tabs,
.view-controls,
.toolbar-layouts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--panel-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    position: relative;
}

.library-tab,
.view-btn,
.layout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    /* "all" animait aussi la toute première application du style (padding,
       border-radius, background) à chaque activation du <link> CSS — visible
       comme un flash "non stylé -> stylé" pendant ~200ms en navigation rapide
       sur mobile. On ne garde que ce qui doit vraiment s'animer (survol,
       déverrouillage du bouton carte). opacity est sans risque ici : la
       classe .layout-btn--locked est déjà présente dans le HTML au premier
       rendu (pas ajoutée après coup), donc pas de flash "défaut -> stylé"
       possible sur cette propriété. */
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.library-tab svg,
.view-btn svg,
.layout-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.library-tab:hover,
.view-btn:hover:not(.active),
.layout-btn:hover {
    color: var(--brand-green);
    background: color-mix(in srgb, var(--brand-green) 6%, transparent);
}

.library-tab.active,
.view-btn.active,
.layout-btn.active {
    color: #fff;
    font-weight: 600;
    background: var(--brand-green);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-green) 25%, transparent);
}

.library-tab.active svg,
.view-btn.active svg,
.layout-btn.active svg {
    opacity: 1;
    stroke: #fff;
}

.library-tab.active svg[fill="currentColor"],
.view-btn.active svg[fill="currentColor"],
.layout-btn.active svg[fill="currentColor"] {
    fill: #fff;
    stroke: none;
}

/* Thème sombre : doré au lieu de vert (cohérence avec .filters-btn) */
body.theme-noir .library-tab:hover,
body.theme-noir .view-btn:hover:not(.active),
body.theme-noir .layout-btn:hover {
    color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

body.theme-noir .library-tab.active,
body.theme-noir .view-btn.active,
body.theme-noir .layout-btn.active {
    background: var(--accent-gold);
    color: #1a2628;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-gold) 30%, transparent);
}


/* ── Bouton carte verrouillé ── */
.layout-btn--locked {
    opacity: 0.55;
    cursor: default;
}
.layout-btn--locked:hover {
    color: var(--text-secondary);
    background: transparent;
}
.layout-btn-lock-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.layout-btn-lock {
    position: absolute;
    bottom: -4px;
    right: -5px;
    background: var(--panel-light, #fff);
    border-radius: 4px;
    padding: 2px;
    color: var(--text-secondary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.authors-map-locked-msg {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted);
    padding: 8px 16px;
    background: var(--panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
}
.authors-map-locked-msg.visible { display: flex; }

/* ── Compteur de résultats — même texte discret partout ── */
.library-stats,
.toolbar-authors-count {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    margin-left: auto;
}

.page-toolbar .library-stats,
.page-toolbar .toolbar-authors-count {
    margin-left: 0;
}