/* Menu du compte connecté — tokens repris du handoff « Mon profil V2 ».
   Le projet privilégie les bordures 1 px plutôt que les ombres, une densité élevée
   (11–13 px), aucun dégradé.

   ⚠️ Cette feuille est GLOBALE et non un `AccountMenu.razor.css` scopé, et ce n'est pas
   un choix de confort : le contenu d'un MudMenu est rendu par <MudPopoverProvider/>, posé
   dans MainLayout, donc HORS du sous-arbre DOM du composant. Or `::deep .x` compile en
   `[b-xxxxx] .x` et exige un ANCÊTRE porteur de l'attribut de portée — que le popover n'a
   jamais. Même chose pour un `Class=` posé sur un composant Mud (MudPaper, MudIcon) : Blazor
   n'appose l'attribut de portée que sur les éléments HTML écrits dans le .razor, pas sur le
   rendu d'un composant enfant. Résultat en CSS scopé : les règles visant le popover, ses
   lignes ou le bouton activateur ne s'appliquaient jamais (menu sans largeur, en-tête
   d'identité non flex, lignes empilées). */

.bunqr-account-button {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 10px;
}

.bunqr-account-caret {
    color: #9ca3af;
}

/* ── Popover ────────────────────────────────────────────────────────────── */

.bunqr-account-popover .mud-list {
    width: 266px;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

.bunqr-account-separator {
    height: 1px;
    background: #f0f0ee;
}

/* ── En-tête identité ───────────────────────────────────────────────────── */

.bunqr-account-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 14px 13px;
}

.bunqr-account-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--bunqr-petrol);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.bunqr-account-identity-text {
    min-width: 0;
}

.bunqr-account-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #171717;
}

.bunqr-account-email {
    font-size: 11px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Lignes de menu ─────────────────────────────────────────────────────── */

.bunqr-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
}

.bunqr-account-item:hover {
    background: #FAF8F5;
}

.bunqr-account-item-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bunqr-account-item-label .mud-icon-root {
    font-size: 17px;
    color: #6b7280;
}

.bunqr-account-item-value {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
}

.bunqr-account-chevron {
    font-size: 16px !important;
    color: #9ca3af;
}

.bunqr-account-item--danger,
.bunqr-account-item--danger .mud-icon-root {
    color: #b02a37;
}

/* Le sous-menu est activé par une ligne complète : on neutralise le bouton que
   MudMenu place autour, pour qu'elle occupe toute la largeur du popover. */
.bunqr-account-list .mud-menu {
    display: block;
    width: 100%;
}

.bunqr-account-list .mud-menu-activator {
    display: block;
    width: 100%;
}

/* ── Sous-menu des langues ──────────────────────────────────────────────── */

.bunqr-language-popover .mud-list {
    width: 224px;
    padding: 4px 0;
    border-radius: 10px;
    overflow: hidden;
}

.bunqr-language-title {
    padding: 11px 14px 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9ca3af;
}

.bunqr-language-options {
    max-height: 262px;
    overflow-y: auto;
}

.bunqr-language-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}

.bunqr-language-item:hover {
    background: #FAF8F5;
}

.bunqr-language-item--current {
    background: #FFF1DC;
}

.bunqr-language-item--current .bunqr-language-endonym {
    font-weight: 600;
    color: #7A4F1F;
}

.bunqr-language-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #9ca3af;
}

.bunqr-language-check {
    font-size: 16px !important;
    color: #7A4F1F;
}

.bunqr-language-note {
    padding: 9px 14px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #6b7280;
    white-space: normal;
}