/* 
 * MENU FLUTUANTE - OBRIGATÓRIO
 * Arquivo: assets/css/floating-menu-fe.css
 */

.floating-menu {
    position: fixed;
    top: var(--floating-menu-top);
    right: var(--floating-menu-right);
    z-index: var(--floating-menu-z-index);
    transition: var(--transition-base);
    box-shadow: var(--floating-menu-shadow);
    border-radius: var(--border-radius-pill);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: var(--spacing-1);
}

/* Botão de menu (agora oculto por padrão, mas mantido para funcionalidade) */
.menu-trigger {
    width: var(--floating-menu-size);
    height: var(--floating-menu-size);
    border-radius: var(--border-radius-circle);
    background: var(--floating-menu-bg);
    border: none;
    cursor: pointer;
    box-shadow: var(--floating-menu-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
    transition: var(--transition-base);
}

.menu-trigger:hover {
    transform: var(--scale-lg);
}

.menu-dropdown {
    position: absolute;
    top: calc(var(--floating-menu-size) + var(--spacing-2));
    right: 0;
    min-width: calc(var(--sidebar-width) * 0.67);
    background: var(--bs-card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-md);
    display: none;
    overflow: hidden;
    z-index: calc(var(--floating-menu-z-index) + 1);
}

/* Estilo para o botão de saldo */
.floating-menu .btn-primary.rounded-pill {
    padding: var(--spacing-2) var(--spacing-3);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--box-shadow-sm);
    transition: var(--transition-base);
}

.floating-menu .btn-primary.rounded-pill:hover {
    transform: var(--translateY-md);
    box-shadow: var(--box-shadow-md);
}

/* Estilo para o avatar do usuário */
.user-avatar-container {
    display: flex;
    align-items: center;
    background-color: var(--bs-dark);
    padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-1);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--box-shadow-sm);
    cursor: pointer;
    color: var(--bs-white);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-base);
}

.user-avatar-container:hover {
    background-color: var(--bs-dark-hover);
    transform: var(--translateY-md);
}

.user-avatar-icon {
    width: calc(var(--floating-menu-size) - var(--spacing-3));
    height: calc(var(--floating-menu-size) - var(--spacing-3));
    background-color: var(--bs-primary);
    color: var(--bs-white);
    font-size: var(--font-size-xl);
    border: var(--border-width-thick) solid var(--bs-primary);
}

/* Dropdown menu styles */
.floating-menu .dropdown-menu {
    background-color: var(--bs-card-bg);
    border: var(--border-width) solid var(--bs-card-border-color);
    box-shadow: var(--box-shadow-lg);
}

.floating-menu .dropdown-item {
    color: var(--bs-body-color);
    padding: var(--spacing-2) var(--spacing-3);
    transition: var(--transition-fast);
}

.floating-menu .dropdown-item:hover {
    background-color: var(--bs-light);
}

.floating-menu .dropdown-item i {
    width: var(--spacing-4);
    text-align: center;
}

/* Responsividade do menu flutuante */
@media (max-width: 576px) {
    .floating-menu {
        top: calc(var(--floating-menu-top) / 2);
        right: calc(var(--floating-menu-right) / 2);
    }
    
    .menu-trigger {
        width: calc(var(--floating-menu-size) * 0.8);
        height: calc(var(--floating-menu-size) * 0.8);
    }
    
    .menu-dropdown {
        top: calc(var(--floating-menu-size) * 0.8 + var(--spacing-2));
        min-width: calc(var(--sidebar-width) * 0.6);
    }
    
    .floating-menu .btn-primary.rounded-pill {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: var(--font-size-sm);
    }
    
    .user-avatar-icon {
        width: calc(var(--floating-menu-size) * 0.64);
        height: calc(var(--floating-menu-size) * 0.64);
        font-size: var(--font-size-lg);
    }
}