/* Rodapé da sidebar: Conta, tradutor e sino (templates/components/menu/sidebar_footer.html). */

@media (min-width: 992px) {
    /* Menus fixos do rodapé passam por cima do conteúdo da página. */
    .sidebar {
        z-index: var(--z-app-sidebar, 110);
    }

    /* Sem a barra superior no desktop logado, o conteúdo ganha respiro no topo. */
    .sidebar ~ #content-wrapper #content {
        padding-top: var(--space-8, 32px);
    }
}

.sidebar-footer {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: var(--space-3, 12px) var(--space-2, 8px);
    background: #fff;
    border-top: 1px solid var(--neutral-200, #e5e7eb);
    list-style: none;
}

.sidebar-footer-row {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Botão Conta */
.sidebar-footer-account {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-footer-account-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    width: 100%;
    min-height: 44px;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    border: none;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--neutral-900, #111827);
    text-align: left;
    cursor: pointer;
}

.sidebar-footer-account-btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.sidebar-footer-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--radius-circle, 50%);
    object-fit: cover;
}

.sidebar-footer-account-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.sidebar .sidebar-footer-account-name {
    font-size: 12px;
    font-weight: 600;
}

.sidebar .sidebar-footer-account-role {
    font-size: 11px;
    font-weight: 500;
    color: var(--primary-500);
}

.sidebar-footer-account-chevron {
    margin-left: auto;
    font-size: 11px;
    color: var(--neutral-500, #6b7280);
}

/* Tradutor e sino */
.sidebar-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 40px;
    color: var(--neutral-700, #374151);
}

.sidebar-footer-icon a,
.sidebar-footer-icon #notifications-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
}

.sidebar-footer-icon .translation-icon,
.sidebar-footer-icon #notifications-toggle .fa-bell {
    font-size: 18px !important;
    color: inherit;
}

.sidebar-footer-icon:hover .translation-icon,
.sidebar-footer-icon:hover .fa-bell {
    color: var(--primary-900);
    transform: none;
}

/* Menus abertos para cima: posição calculada em JS; ficam ocultos até lá. */
.sidebar-footer .dropdown-menu {
    position: fixed;
    visibility: hidden;
}

.sidebar-footer .dropdown-menu.is-positioned {
    visibility: visible;
}

.sidebar-footer .sidebar-footer-menu {
    min-width: 260px;
    padding: var(--space-1, 4px) 0 !important;
}

/* Submenu "Alterar papel" */
.sidebar-footer-submenu-chevron {
    margin-left: auto;
    font-size: 11px;
    transition: transform .2s;
}

.sidebar-footer-submenu {
    position: fixed;
    z-index: 1001;
    min-width: 200px;
    padding: var(--space-1, 4px) 0;
    background: #fff;
    border: 1px solid var(--neutral-200, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));
}

.sidebar-footer-submenu[hidden] {
    display: none;
}

/* Saldos (tokens e créditos) */
.sidebar-footer-balance {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--neutral-700, #374151);
}

.sidebar-footer-balance i {
    width: 16px;
    text-align: center;
    color: var(--primary-500);
}

.sidebar-footer-balance strong {
    margin-left: auto;
    font-weight: 600;
    color: var(--neutral-900, #111827);
}

.sidebar-footer-wallet-item {
    padding: var(--space-2, 8px) var(--space-4, 16px);
}

.sidebar-footer-wallet-item .gm-badge {
    justify-content: center;
}

/* Barra superior mínima do mobile (logado) */
.topbar-notification-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--neutral-600, #4b5563);
}

@media (max-width: 991.98px) {
    /* No mobile o sino fica na barra superior. */
    #sidebar-footer-notification-slot {
        display: none;
    }

    /* No mobile o submenu expande no lugar. */
    .sidebar-footer-submenu {
        position: static;
        min-width: 0;
        padding: 0 0 0 var(--space-6, 24px);
        border: none;
        box-shadow: none;
    }

    .sidebar-footer-submenu-toggle[aria-expanded="true"] .sidebar-footer-submenu-chevron {
        transform: rotate(90deg);
    }
}